Comenzar

Compila tu app para lentes con IA con el framework de IU de Glimmer de Jetpack Compose para crear experiencias aumentadas que funcionen en todos los lentes con IA. Jetpack Compose Glimmer es uno de los primeros frameworks de IU optimizados para pantallas transparentes y el factor de forma de los lentes con IA.

1. Decide los recorridos del usuario

Enfócate en los recorridos críticos del usuario (CUJ) que sean compatibles con los principios de un vistazo del factor de forma de los lentes con IA. Esto se podría expresar con una IU mínima o solo con audio, mientras se permite que el usuario permanezca presente en su entorno. Para encontrar oportunidades, considera los puntos de entrada en tu app actual que se beneficiarían con los lentes.

Por ejemplo, un usuario puede beneficiarse de las indicaciones paso a paso para caminar sin usar las manos que lo ayuden a navegar hasta su destino.

El recorrido del usuario elegido también debe tener en cuenta los principios de seguridad, comodidad y rendimiento. Por ejemplo, no elijas tareas que requieran la cámara del usuario durante períodos innecesariamente largos o que infrinjan su privacidad.

Obtén más información sobre los principios fundamentales.

Extrae de tu app para dispositivos móviles las funciones que se benefician del factor de forma de los lentes. Por ejemplo, experiencias de un vistazo.
Porta toda la app para teléfonos a los lentes, ya que no se ajustan al factor de forma de los lentes.

2. Minimizar y traducir

En el caso de la IU del modo de visualización, comienza con un CUJ de tu app principal:

  • Optimiza los diseños para el enfoque: Los diseños priorizan la información esencial y reducen la cantidad de acciones y elementos visuales para mantener el enfoque del usuario.

  • Usa la profundidad para la jerarquía: La profundidad se usa para comunicar la prioridad de los elementos.

  • Diseña de abajo hacia arriba: Cuando crees simulaciones, comienza desde la parte inferior y diseña los componentes hacia arriba.

  • Traduce componentes visuales: Para las gafas con IA de visualización, usa componentes de Glimmer y patrones de diseño de Jetpack Compose.

Obtén más información sobre los componentes y la vista de la app.

La app de lista de compras reduce la vista de lista a una experiencia mínima y solo necesita una IU de comentarios.
Figura 1: Una app de lista de compras traducida a elementos de los lentes con IA de Display. Las barras del sistema son visualmente distintas, y los lentes de IA suelen estar vacíos. Aquí, la barra de la aplicación podría traducirse en un chip de título, mientras que los elementos de la lista de Material se traducirían en la lista de Glimmer de Jetpack Compose.

Componentes optimizados

A. Color de superficie: El color de superficie de los componentes es negro para maximizar el contraste del contenido de las tarjetas.

B. Esquema y resaltado: El color del esquema está optimizado para el contraste. El uso de un elemento destacado proporciona una expresión visual y se puede usar para indicar algunos tipos de entrada.

C. Forma: Se usa un sistema de formas más suave para mejorar la visibilidad de un vistazo, ya que reduce la nitidez de las esquinas y mejora la comodidad. Color en la superficie: El color en la superficie del contenido es blanco para maximizar el contraste con el mundo.

D. Tipografía: La escala tipográfica de Glimmer usa un pequeño conjunto de estilos refinados de cuerpo y título que optimizan el kerning, el tamaño y el peso para lograr una legibilidad óptima.

E. Iconografía: El uso de símbolos de Material redondeados se ajusta a la escala de tipografía redondeada.

Los componentes de Glimmer están optimizados para mostrarse de forma transparente.
Figura 2.: Aquí va el subtítulo.

3. Flujo y pistas de audio

Interactúa con el audio. Si bien el audio debe constituir una gran parte de tu app de AI Glasses sin abrumar al usuario, también debes tener en cuenta una experiencia solo de audio para ciertos dispositivos. Para ello, crea un mapa de flujo solo de audio que describa esta experiencia. Anota las interacciones y los comentarios con indicaciones de audio y diálogo.

Crea un mapa de flujo solo de audio para ayudarte a planificar experiencias de conversación que no abrumen al usuario.

4. Controles de entrada del mapa

Asegúrate de definir las entradas para los controles y los gestos del dispositivo. Puedes comenzar por traducir las interacciones básicas de la app, como la presión, a una presión en el panel táctil.

Continuar con las entradas

Una app diferenciada para XR tiene una experiencia del usuario diseñada explícitamente para XR y, además, implementa funciones que solo se ofrecen en XR.

5. Consideraciones sobre SysUI

Ten en cuenta otras interfaces del sistema.

Tu app aparecerá en la pantalla principal y en otras funciones del sistema, como las notificaciones, si se usa. Pueden aparecer en la barra del sistema.

Más información sobre la IU del sistema

Crea un mapa de flujo solo de audio para ayudarte a planificar experiencias de conversación que no abrumen al usuario.

6. Estados adicionales

Tu app se encontrará con diferentes situaciones en los lentes con IA, como problemas de conexión o permisos. Ten en cuenta estos diferentes estados tanto en tu app principal como en la app para lentes.

Asegúrate de solicitar permisos para las funciones del dispositivo.

Recuerda que deberás tener en cuenta estos aspectos a través de la IU visual y el audio. Por ejemplo, brindar comentarios de audio para comunicar que deben completar un flujo de permisos en su dispositivo móvil o leer los errores.

Ten en cuenta los diferentes estados de la app tanto en tu app principal como en la app para lentes.