- El nuevo sistema de diseño Jetpack Compose Glimmer para pantallas transparentes en gafas con IA permite crear interfaces que se superponen de forma natural sobre el mundo real
- Las superficies opacas y sombras del Material Design tradicional provocan halation (dispersión de luz) y menor legibilidad en pantallas transparentes, por lo que se necesita un nuevo enfoque centrado en superficies oscuras y contenido brillante
- El texto se diseña con base en el ángulo visual (visual angle), manteniendo una forma fácil de leer con un tamaño de al menos 0.6 grados y con ajuste óptico de tamaño en Google Sans Flex
- Los colores se ajustan con base en la relación de contraste aditiva (additive contrast ratio) para asegurar una paleta neutra y alto contraste incluso cuando cambia el brillo del fondo real
- El movimiento está diseñado con transiciones suaves que respetan la visión periférica del usuario, ofreciendo una experiencia donde la tecnología se integra con la realidad en lugar de exigir atención
Antecedentes de Jetpack Compose Glimmer y el diseño para pantallas transparentes
- Jetpack Compose Glimmer es un nuevo sistema de diseño para entornos Android XR (realidad extendida), usado para desarrollar interfaces para gafas con IA
- A diferencia del diseño tradicional basado en pantallas, aquí el mundo real se convierte directamente en el lienzo
- La interfaz apunta al concepto de pantalla ambiental (ambient), apareciendo solo cuando se necesita y desapareciendo cuando no
- En las pantallas transparentes, elementos básicos como color, tipografía y sombras funcionan de forma distinta a lo habitual
- Por ejemplo, el negro se percibe como transparente, y los colores brillantes desaparecen sobre un fondo de cielo azul
- Por estas características, fue necesario replantear de raíz los principios de diseño existentes
Una interfaz a la distancia de un brazo
- La pantalla no se ve sobre la superficie del lente, sino proyectada a aproximadamente 1 metro de distancia (a la distancia de un brazo)
- El usuario debe mover la mirada desde la realidad hacia este plano focal, lo que implica un cambio de atención consciente y activo
- Este cambio de enfoque se volvió un reto central del diseño, orientado a crear una interfaz que valga la pena mirar incluso por un instante breve
Cómo se maneja la luz
- Una pantalla transparente solo puede sumar luz, no oscurecerla
- Por eso, el negro funciona no como color, sino como un espacio sin luz (área transparente)
- Las superficies brillantes y sombras del Material Design tradicional causan deslumbramiento y mayor consumo de batería en una pantalla transparente
- Se produce el fenómeno de halation, donde las zonas brillantes se expanden y hacen que el texto se vea borroso
- Como solución, se redefine el negro como “contenedor” y se coloca contenido brillante sobre superficies oscuras
- Se usan sombras oscuras con sensación de profundidad para expresar jerarquía y espacialidad
- Botones, tarjetas y deslizadores del sistema se distinguen por niveles jerárquicos de profundidad
Legibilidad del texto y ángulo visual
- El texto se diseña no en píxeles, sino en ángulo visual (visual angle)
- Se establece como criterio mínimo de legibilidad un tamaño de 0.6 grados o más
- Se aprovecha el eje de Optical Size de la tipografía Google Sans Flex para ajustar el espacio interno y el espaciado de las letras
- Se amplía el espacio interno de letras como ‘a’ y ‘e’, y se incrementa la separación del punto en ‘i’ y ‘j’ para facilitar el reconocimiento visual rápido
- En el código, la optimización visual automática se aplica sin necesidad de ajustar manualmente el espaciado entre letras
- Recomendaciones: usar tipografías gruesas y con amplio espaciado; evitar letras delgadas y pequeñas
Color y contraste
- Como el mundo real funciona como fondo, el brillo y el color cambian constantemente
- El equipo midió la relación de contraste aditiva (additive contrast ratio) para asegurar la visibilidad del contenido
- Los colores de alta saturación pueden desaparecer o verse tenues sobre fondos reales
- Por eso, Glimmer adopta como estructura base superficies neutras y oscuras + contenido brillante
- Con una paleta desaturada (desaturated) se mantiene un contraste estable sin importar los cambios del entorno
- El color se usa de forma limitada, sobre todo para resaltar elementos de atención como botones
Equilibrio entre movimiento y atención
- En un head-up display, el movimiento no debe resultar molesto
- Como el contenido puede aparecer en cualquier momento dentro del campo visual, se necesitan transiciones suaves y respetuosas
- La transición inicial de 500 ms era demasiado corta para percibirse, por lo que se ajustó a una transición gradual de alrededor de 2 segundos
- Esto guía la mirada de forma natural desde la visión periférica (periphery) hacia el centro
- La entrada del usuario, ya sea por voz o gestos, requiere retroalimentación inmediata
- Para ello se usan focus rings y resaltados que aseguran respuesta de baja latencia
Armonía entre realidad y tecnología
- El núcleo del diseño para pantallas transparentes está en factores humanos como la atención y la concentración
- Jetpack Compose Glimmer busca una experiencia en la que la tecnología no demande atención, sino que complemente la realidad
- Este enfoque lleva a que las gafas con IA evolucionen más allá de una herramienta para mostrar información y se conviertan en un medio para mejorar la propia percepción de la realidad
- Google ofrece a los desarrolladores guías de diseño para gafas con IA y un Figma Design Kit
Aún no hay comentarios.