Si tienes una app para Android y quieres conservar su estilo visual, puedes mantener ese lenguaje de diseño en Android XR. Para apps nuevas o nuevos diseños, considera seguir los lineamientos de Material Design en cuanto al tamaño de la IU, la accesibilidad, la tipografía, los esquemas de colores y los componentes.
Las apps para dispositivos móviles o pantallas grandes de Android 2D pueden aprovechar las funciones de Full Space con muy poco trabajo de desarrollo adicional. Para obtener un alto impacto de XR, considera espacializar los paneles y crear una IU espacial. Para recorridos del usuario más envolventes, considera agregar modelos 3D y entornos.
Si tienes o estás compilando una app para Unity, Open XR o WebXR, puedes seguir cualquier lenguaje de diseño que elijas. Las recomendaciones de diseño que proporciona Material Design pueden ayudarte a aplicar colores, espaciado, escala, botones y tipografía.
Cómo probar el diseño visual de tu app
Probar el diseño visual de tu app es fundamental para garantizar una experiencia del usuario cómoda y accesible. A continuación, se explica cómo realizar pruebas en diferentes plataformas y entornos de XR.
Cómo usar emuladores, simuladores y dispositivos reales
- Si estás desarrollando una app para Android, pruébala en el emulador de Android XR. Esto te ayuda a identificar posibles problemas y a iterar rápidamente sin un dispositivo físico.
Lista de tareas para las pruebas de diseño visual
- Prueba cualquier movimiento o animación para asegurarte de que no provoquen mareos. Comprueba si hay transiciones fluidas, velocidades de fotogramas estables y un movimiento predecible.
- Prueba la transferencia en entornos reales para asegurarte de que los elementos virtuales se mezclen con el entorno físico.
- Prueba la app en diferentes condiciones de iluminación, incluidos entornos brillantes y con poca luz.
- Verifica la legibilidad del texto a diferentes distancias y ángulos.
- Evalúa el esquema de colores en términos de accesibilidad y comodidad.
Cómo recopilar comentarios de los usuarios
Realiza pruebas de usuario para identificar áreas de mejora. Incluye a usuarios con diferentes niveles de experiencia en XR y habilidades visuales para obtener una perspectiva integral.
Destinos en Android XR
En una app de XR, un objetivo es el área que se puede presionar o señalar con la que interactúan los usuarios. Los objetivos más grandes aumentan la precisión, la comodidad y la usabilidad. Para que tu app sea accesible, sigue los lineamientos de destino de Material Design. Funcionarán con apps para Android, Unity, OpenXR y WebXR. Si tu app ya sigue las recomendaciones de Material Design, tus tamaños objetivo cumplen con el mínimo, aunque 56 dp es lo óptimo.
Todos los elementos interactivos de la IU deben tener en cuenta lo siguiente:
- Objetivo recomendado: 56 dp × 56 dp o superior
- Indicaciones visuales: 48 dp x 48 dp o más
- Compensación entre el objetivo y la indicación visual: 4 dp
- Para que las interacciones sean precisas, los destinos del puntero de diferentes elementos de la IU no deben superponerse.
Asegúrate de agregar estados de desplazamiento del mouse
Para mejorar la accesibilidad, incorpora estados de desplazamiento y enfoque, además de los estados interactivos básicos para los componentes interactivos. Los estados de colocar el cursor sobre un elemento pueden ser útiles para todos y son particularmente importantes para los usuarios que dependen de las entradas del puntero para seleccionar elementos de la IU.
Los estados de desplazamiento del mouse juegan un papel importante en la habilitación de la función de seguimiento ocular dentro del sistema. Sin embargo, cuando el seguimiento ocular está habilitado, la aplicación no puede acceder a los estados de desplazamiento del mouse para proteger la privacidad del usuario y evitar el uso compartido de datos. El sistema dibujará un estado de resaltado visible solo para el usuario para indicar cuáles de los componentes de la IU son interactivos.
Distancia entre los objetivos
Material Design recomienda un espacio mínimo de 8 dp entre los objetivos, incluidos los botones. Este espaciado garantiza que los usuarios puedan distinguir fácilmente entre los elementos interactivos y evitar selecciones accidentales.
La distancia específica entre los botones puede variar según su contexto y tamaño. Estos son algunos factores que debes tener en cuenta:
- Tamaño de los botones: Es posible que los botones más grandes requieran más espacio entre ellos para mantener la claridad visual.
- Agrupación de botones: Los botones que están estrechamente relacionados funcionalmente se pueden agrupar más cerca, mientras que los botones no relacionados deben tener más separación.
- Diseño: El diseño general de la pantalla puede influir en el espaciado entre los botones. Por ejemplo, los botones de una barra de herramientas pueden estar espaciados más cerca que los botones de un diálogo.
Tamaño y escala del panel
Android XR está diseñado para que tu app sea cómoda, legible y accesible para un público amplio. Para obtener una experiencia óptima, Android XR usa 0.868 dp a dmm.
Si usas paneles, es probable que tu app para XR esté más lejos de un usuario que una pantalla física. Considera que el usuario usa auriculares. Para una comodidad óptima, coloca el contenido principal en un campo de visión de 41° para que los usuarios no tengan que mover la cabeza para interactuar.
Recomendaciones
- Los paneles tienen esquinas redondeadas de 32 dp. Puedes anular este valor predeterminado.
Comportamientos de profundidad del panel
- Espacio de la casa: Las apps se inician a 1.75 metros del usuario, y los desarrolladores no pueden anular esta opción.
- Espacio completo: De forma predeterminada, las apps se inician en la misma posición que tenían en el espacio principal. Puedes usar la lógica espacial para colocar paneles según la posición del usuario, aunque recomendamos una distancia de lanzamiento de 1.75 metros.
Cuando una app está a 1.75 metros del usuario:
- 1,024 dp se percibe como 1,556.24 milímetros.
- 720 dp se perciben como 1,093.66 milímetros.
- 1 metro en la realidad física = 1 metro en la XR
Botones e íconos
Si tienes una app para Android existente, no necesitas diseñar componentes especiales para Android XR. Sigue los lineamientos de Material Design para los botones y los íconos. Si tienes una app para Unity, OpenXR o WebXR, puedes mantener los botones y los íconos tal como están o inspirarte en Material Design.
Si decides crear tus propios botones o íconos, opta por formas simples, líneas claras, formas básicas y una paleta de colores limitada. Evita los diseños demasiado detallados. Haz que sean escalables y legibles en diferentes resoluciones y distancias de visualización. Para la accesibilidad, asegúrate de que haya suficiente contraste entre el componente y su fondo, y proporciona descripciones de texto o información sobre herramientas para los usuarios con lectores de pantalla o con otras tecnologías de accesibilidad.
Colores
Android XR sigue el sistema de colores de Material Design para garantizar una interfaz coherente y atractiva a la vista. Para crear un estilo visual envolvente adaptado a la XR, diseña con suficiente contraste, elige una paleta equilibrada, usa colores accesibles para las personas con deficiencias en la visión de los colores y evita las combinaciones discordantes que pueden causar fatiga visual o desorientación.
Temas oscuro y claro en el XR
Usa los temas oscuro y claro como lo harías en una app para dispositivos móviles de Android. Los usuarios pueden cambiar entre los temas oscuro y claro en Android XR y elegir el estilo visual que mejor se adapte a sus preferencias individuales.
Obtén más información sobre los esquemas de colores de Material Design.
Tipografía de RE
La legibilidad de la fuente es fundamental para que la experiencia del usuario en XR sea cómoda. Te recomendamos usar opciones de escala de tipo con un tamaño de fuente de 14 dp o superior, y un grosor de fuente de normal o superior para mejorar la legibilidad.
Para crear una app fácil de usar, considera seguir las guías de tipografía de Material Design.
Prácticas recomendadas para la tipografía en XR
- Tamaño para distancias variables: Recuerda que los usuarios se moverán y verán el texto desde diferentes ubicaciones. Asegúrate de que los tamaños de fuente sean lo suficientemente grandes para que se los pueda leer a la distancia.
- Coloca el texto en el campo de visión natural del usuario: Esto evita el movimiento excesivo de la cabeza y la tensión en el cuello.
- Ten en cuenta la profundidad y la escala: Usa indicadores de profundidad y escala para crear jerarquías en el espacio 3D.
- Asegúrate de que el texto sea legible en el fondo de un usuario: Los grosores más pesados ofrecen más contraste. Ajusta según los colores, la iluminación y la complejidad del entorno.
- Usa una tipografía adaptable: Los paneles pueden estar demasiado cerca, demasiado lejos y en ángulos de visión incómodos para el usuario.
- Limita el texto adjunto a objetos en movimiento: Esto puede causar mareos.
Tipografía accesible en XR
- Seleccionar fuentes para mejorar la legibilidad: Prioriza las fuentes con formas de letras claras en tamaños pequeños y distancias lejanas.
- Usa texto con mayúscula inicial: El texto con mayúscula inicial es más fácil de leer que el texto en mayúsculas.
- Limita la longitud de las líneas: Intenta que las líneas sean más cortas para mejorar la legibilidad.
- Selecciona colores accesibles: Usa combinaciones de colores que sean legibles para los usuarios con diferencias de visión del color.
- Evita la saturación: Dale al texto suficiente espacio.
- Permitir el ajuste de texto: Permite que los usuarios ajusten el tamaño del texto para satisfacer sus necesidades individuales.