Cuando creas una app diferenciada para Android XR, es posible que quieras usar la IU espacial para colocar contenido en el entorno físico o virtual de un usuario. Puedes dividir tu app en paneles espaciales, orbitadores y agregar elevación espacial (se describe con más detalle en esta página). También puedes incorporar video espacial en tu diseño.
Paneles espaciales
Los paneles espaciales son los componentes básicos de las apps para Android XR. Puedes usarlos para crear una experiencia diferenciada de RE en una pantalla ilimitada, con contenido que se expande por el espacio del usuario. Los paneles espaciales sirven como contenedores para los elementos de la IU, los componentes interactivos y el contenido envolvente.
Comprende cómo se escala y se mueve la IU
Los paneles espaciales ajustan automáticamente su tamaño según la distancia del usuario. Este escalamiento dinámico garantiza que los elementos de la IU sigan siendo legibles e interactivos cuando se ven desde diferentes distancias. El tamaño se mantiene constante entre 0.75 metros y 1.75 metros. Luego, la tasa de escalamiento aumenta a 0.5 metros por metro, y los elementos se verán más pequeños.
Para evitar conflictos con la IU del sistema, mantente dentro de los límites predeterminados de movimiento del panel:
- Profundidad mínima: 0.75 metros del usuario
- Profundidad máxima: 5 metros desde el usuario
Los usuarios pueden aumentar o disminuir el tamaño de un panel espacial para que sea lo suficientemente grande como para verlo con claridad, sin importar la distancia del usuario. Cuando un usuario mueve un panel espacial, Android XR ajusta su tamaño automáticamente.
Tamaños de los paneles espaciales
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, el sistema usa 0.868 dp-to-dmm. Cuando se vea en un visor, tu app aparecerá más lejos del usuario que cuando la vea en un teléfono o una tablet, por lo que debe ser más grande para facilitar su uso.
En Espacio completo, no hay un tamaño mínimo para un panel espacial, y el máximo es de 2560 dp x 1800 dp debido a limitaciones físicas.
Dónde colocar los paneles espaciales
En el espacio completo, puedes determinar la ubicación de los paneles en entornos virtuales y de transferencia. Cuando los usuarios cambian del espacio principal al espacio completo, los elementos permanecen en la misma posición predecible, a menos que asignes una posición personalizada.
Genera el centro del panel a 1.75 metros de la línea de visión del usuario. Coloca el centro vertical del panel 5° por debajo del nivel de los ojos del usuario para maximizar la comodidad, ya que los usuarios tienden a mirar hacia abajo.
Para obtener una comodidad óptima, coloca el contenido en el centro de los 41° del campo visual del usuario. Esto garantizará una visibilidad clara y minimizará la necesidad de mover la cabeza o el cuerpo de forma excesiva.
Un usuario puede moverse por su espacio, y los paneles espaciales permanecerán en su lugar.
Android XR incluye patrones de interacción listos para usar que permiten que los usuarios manipulen elementos sin problemas y simplifican el proceso de desarrollo. Un usuario puede mover elementos para adaptarlos a su espacio personal. Puedes configurar los comportamientos de movimiento y cambio de tamaño.
Para ayudar a los usuarios a posicionar los elementos de la IU en relación con los objetos del mundo real en su espacio, puedes permitirles fijar un panel espacial en una ubicación específica del mundo real, como el piso, una silla, una pared, el techo o una mesa. La fijación solo está disponible en la transferencia.
Para ayudar a los usuarios a sentirse estables y bien orientados, puedes permitirles fijar un panel espacial en una ubicación específica del mundo real, como el piso, una silla, una pared, el techo o una mesa. La fijación solo está disponible en la transferencia.
Cómo crear tu propio diseño espacial
Puedes descomponer tu app en varios paneles espaciales, en cualquier diseño que elijas. Las APIs de IU espacial no limitan la cantidad de paneles. Incluyen la capacidad de crear diseños con filas y columnas, y filas planas y curvas. Las posiciones de los paneles espaciales pueden ser específicas o arbitrarias. Obtén más información para desarrollar diseños de IU espacial.
Diseño de fila plano
Diseño de fila curva
Diseño de posiciones arbitrarias
Videos espaciales
Los videos espaciales pueden agregar una sensación dimensional y envolvente a tu contenido. Puedes incorporarlos en tus diseños como videos monoscópicos o estereoscópicos que se muestran en superficies planas, hemisféricas de 180° o esféricas de 360°.
Orbitadores
Los orbitadores son elementos de la IU flotantes que suelen usarse para controlar el contenido dentro de los paneles espaciales y otras entidades a las que están anclados. Permiten que el contenido tenga más espacio y que los usuarios puedan acceder rápidamente a las funciones mientras el contenido principal permanece visible. Los orbitadores te brindan la versatilidad para integrar componentes de IU existentes o crear otros nuevos.
Los Orbiters deben usarse con moderación y teniendo en cuenta las necesidades y la intención del usuario. Una gran cantidad de elementos de la IU espacializados puede provocar fatiga por el contenido y abrumar a los usuarios con acciones competitivas excesivas. Se recomienda adaptar algunos componentes de navegación clave, como el riel o la barra de navegación.
Riel de navegación no espacializado de Material Design en el espacio principal
Un riel de navegación espacial de Material Design en el modo de espacio completo
Barra de navegación no espacializada de Material Design en el espacio principal
Una barra de navegación espacial de Material Design en Espacio completo
Lineamientos
- Ajusta el padding del panel para determinar su posición flexible o de porcentaje.
- Determina el desplazamiento de los orbitadores. La distancia visual recomendada es de 20 dp.
- Si es necesario, ajusta el nivel de elevación del orbitador con los niveles de elevación espacial. De forma predeterminada, se elevan 15 dp en la profundidad Z.
- El tamaño puede ser fijo o flexible cuando se cambia el tamaño del panel.
- Determina si quieres que un orbiter se expanda de forma dinámica para ajustarse al contenido.
Patrones de diseño que se deben evitar
- Evita superponer un elemento orbital en más del 50% de su tamaño.
- Evita colocar los orbitadores demasiado lejos del panel espacial.
- No uses coordenadas X o Y absolutas.
- Evita usar demasiados orbitadores.
Elevación espacial
Cuando agregas elevación espacial a un componente, este se muestra sobre el panel espacial en el eje Z. Esto ayuda a captar la atención del usuario, crea una mejor jerarquía y mejora la legibilidad.
| Nivel de elevación espacial | Componente | DP |
|---|---|---|
| 0 | Sin asignar | .1 dp |
| 1 | Retro moderno | 16 dp |
| 2 | No asignado | 24 dp |
| 3 | SpatialPopup | 32 dp |
| 4 | No asignado | 40 dp |
| 5 | SpatialDialog | 56 dp |
Diálogo de Material Design en una app para pantallas grandes
Un diálogo que usa la elevación espacial en Android XR
Menú desplegable de Material Design en una app para pantallas grandes
Un menú desplegable que usa la elevación en Android XR
Patrones de diseño que se deben evitar
- Evita espacializar o elevar áreas y planos grandes, como hojas inferiores y hojas laterales.
- Evita elevar los elementos de la IU con contenido desplazable.
Diseña objetivos grandes
En una app de RE, un objetivo es el área que se puede apuntar con la que interactúan los usuarios. Android XR se adhiere a los lineamientos de objetivos de Material Design y recomienda objetivos más grandes para aumentar la precisión, la comodidad y la usabilidad.
Obtén información sobre los objetivos y los estados de desplazamiento de la RE.
Haz que la tipografía sea accesible
La legibilidad de las fuentes es fundamental para que la experiencia del usuario en la RE sea cómoda. Te recomendamos usar opciones de escala de tipos con un tamaño de fuente de 14 dp o más, y un grosor de fuente normal o superior para mejorar la legibilidad.
Si tu app existente sigue los lineamientos de Material Design, ya está optimizada para Android XR. Puedes definir la tipografía de una app nueva según Material Design.
Obtén más información sobre la tipografía de RE.
Usa componentes y diseños de Material Design
Aprovecha la biblioteca de componentes de Material Design y los diseños adaptables cuando diseñes tu app para Android XR. Estos bloques de compilación interactivos ayudan a acelerar el desarrollo para que puedas enfocarte en la funcionalidad principal y la innovación.
Material Design para RE mejora los componentes y los diseños adaptables de Material 3 con comportamientos espaciales de la IU. Esto puede hacer que tu app se sienta más nativa de la plataforma y optimizar el espacio.
También puedes espacializar los componentes de la IU existentes colocándolos en orbitadores y aplicando la elevación espacial, como se describe en esta página.
Descarga el kit de diseño de Material 3 para comenzar.