Google Design tiene un artículo interesante esta semana sobre “Diseño para pantallas transparentes” y el trabajo realizado en Jetpack Compose Glimmer, el sistema de diseño de Android XR para Display AI Glasses.
Para aquellos que no han usado gafas inteligentes con pantalla antes, lo primero que deben saber es que la “interfaz en realidad no aparece en la superficie de la lente”. Más bien, se “proyecta a una profundidad percibida de aproximadamente un metro de distancia”. Además, el área de visualización es un cuadrado.
Puede hacerse una idea de qué esperar “colocando la mano frente a usted con el brazo extendido y concentrándose en los dedos”. Al hacer esto, “el entorno detrás y alrededor de su mano se desenfoca”, como se ve en el video a continuación.
Esta fue una realización realmente fundamental para nuestro equipo de diseño de Android XR desde el principio. Parece un pequeño detalle, pero significa que para leer cualquier contenido, el usuario debe cambiar conscientemente su enfoque. Desvían su mirada del mundo real (por ejemplo, el rostro de un amigo, una impresionante puesta de sol o la calle) a este plano focal de un metro. No es una mirada pasiva; es una opción física y activa interactuar con la interfaz de usuario, aunque sea solo por un milisegundo.
El movimiento en este tipo de pantalla no puede ser “distraído o extraño”. El trabajo de Google sobre las notificaciones encontró que una “transición de movimiento típica de alrededor de 500 milisegundos” aparecía demasiado rápido:
Anuncio: desplácese para ver más contenido
En lugar de llamar lentamente la atención de alguien, esencialmente “parpadearía” y de repente aparecería una notificación a la vista.
La implementación que decidió Android XR tiene transiciones de notificación entrante que duran aproximadamente dos segundos durante los cuales un círculo (avatar de perfil con insignia) se expande hasta convertirse en una píldora.
Con el texto, el eje de tamaño óptico de Google Sans Flex se utiliza para mejorar la legibilidad a esa distancia de un metro:
…letras como a y e tienen contadores más grandes (las aberturas dentro de la letra), y los puntos en las j y las i están más alejados del cuerpo de la letra.
También se recomienda la tipografía en negrita y un mayor espaciado entre letras, con el texto medido en ángulo visual (grados) en lugar de píxeles o puntos:
Piense en ello como conducir por una autopista. Verá señales de salida o de límite de velocidad con texto y gráficos impresos en un tamaño fijo. Pero el tamaño del texto que aparece cambia drásticamente según la distancia. A lo lejos, es diminuto; a medida que te acercas, crece. Ese es el ángulo visual en acción.
Estas gafas utilizan una pantalla aditiva que solo puede agregar luz. No puede crear negro, que parece 100% transparente, y Google lo equipara con “cómo un proyector de películas doméstico no puede proyectar negro”.
Esto resultó ser un problema cuando Google inicialmente intentó portar componentes de Material existentes:
Material Design, con sus metáforas táctiles de papel y capas, se basa en gran medida en superficies brillantes y opacas y sombras sutiles. En una pantalla aditiva, esas “superficies” se convertían en grandes bloques de luz brillantes, creando reflejos que distraían y agotando rápidamente la vida útil de la batería.
Rápidamente descubrimos otro problema importante: el halo. La halación es ese efecto en el que las fuentes de luz brillante se filtran hacia áreas adyacentes más oscuras, creando una franja borrosa parecida a un halo. En estas pantallas, nuestras superficies brillantes se desvanecerían en contenido transparente, haciendo que el texto fuera completamente ilegible.
La solución de Google considera que “las superficies utilizan el negro para proporcionar una base legible y limpia para su contenido”. Esto se combina con un “nuevo sistema de profundidad que proyecta sombras ricas y oscuras para transmitir una sensación de oclusión y espacio”.
Además, “los colores muy saturados que normalmente usamos en un teléfono simplemente ‘desaparecen’ en el mundo real”. Como tal, la interfaz de usuario de Android XR es “neutral por defecto” para “armonizar con los diversos colores del mundo real”. El color se utiliza con moderación para llamar la atención sobre los botones y otros elementos importantes.
Las superficies en Glimmer siempre son oscuras y el contenido en sí siempre es brillante. Este valor predeterminado de alto contraste es nuestra base para la legibilidad en la mayoría de los entornos.
FTC: Utilizamos enlaces de afiliados automáticos que generan ingresos. Más.
