- O novo sistema de design Jetpack Compose Glimmer para displays transparentes em óculos com IA implementa interfaces que se sobrepõem naturalmente ao mundo real
- As superfícies opacas e sombras do Material Design tradicional causam halation e queda de legibilidade em displays transparentes, exigindo uma nova abordagem centrada em superfícies escuras e conteúdo claro
- O texto é projetado com base no ângulo visual (visual angle), mantendo formas fáceis de ler com tamanho de cerca de 0,6 grau ou mais e ajuste de tamanho óptico do Google Sans Flex
- As cores são ajustadas com base na taxa de contraste aditivo (additive contrast ratio), garantindo uma paleta neutra estável e alto contraste mesmo com mudanças de brilho no fundo real
- O movimento é projetado com transições suaves que respeitam a visão periférica do usuário, oferecendo uma experiência em que a tecnologia se integra ao mundo real em vez de exigir atenção
Contexto do Jetpack Compose Glimmer e do design para displays transparentes
- O Jetpack Compose Glimmer é um novo sistema de design para o ambiente Android XR (realidade estendida), usado no desenvolvimento de interfaces para óculos com IA
- Diferentemente do design tradicional baseado em telas, o próprio mundo real se torna a tela
- A interface aparece apenas quando necessário e desaparece quando não é, buscando o conceito de display ambient
- Em displays transparentes, elementos básicos como cor, tipografia e sombra funcionam de forma diferente do padrão tradicional
- Por exemplo, preto é percebido como transparente, e cores claras desaparecem em fundos azulados, como o céu
- Por essas características, foi necessário redefinir os princípios de design desde a base
Interface à distância de um braço
- O display é visto como uma projeção a cerca de 1 metro de distância (na distância de um braço), e não na superfície da lente
- O usuário precisa deslocar o olhar do mundo real para esse plano focal, o que constitui uma mudança de atenção consciente e ativa
- Esse deslocamento de foco é um desafio central do projeto e leva à criação de interfaces que valham a atenção mesmo por instantes curtos
Como lidar com a luz
- Displays transparentes só conseguem adicionar luz, não escurecer
- Por isso, o preto funciona não como cor, mas como um espaço sem luz (área transparente)
- As superfícies claras e sombras do Material Design tradicional provocam ofuscamento e consumo de bateria em telas transparentes
- Surge o fenômeno de halation, em que áreas claras se espalham e deixam o texto borrado
- Como solução, o preto foi redefinido como container, com conteúdo claro sobre superfícies escuras
- Sombras escuras com sensação de profundidade são usadas para expressar hierarquia e espacialidade
- Botões, cards e sliders do sistema são diferenciados por níveis hierárquicos de profundidade
Legibilidade do texto e ângulo visual
- O texto é projetado em ângulo visual (visual angle), não em pixels
- O tamanho de 0,6 grau ou mais foi definido como critério mínimo de legibilidade
- O eixo de Optical Size da fonte Google Sans Flex é usado para ajustar o espaço interno e o espaçamento das letras
- Amplia o espaço interno de letras como
a e e, e aumenta a distância dos pontos de i e j para favorecer o reconhecimento visual rápido
- No código, a otimização visual automática é feita sem necessidade de configurar espaçamento entre letras separadamente
- Recomendação: usar fontes espessas e com espaçamento amplo; textos finos e pequenos são proibidos
Cor e contraste
- Como o mundo real vira o fundo, brilho e cor mudam continuamente
- A equipe mediu a taxa de contraste aditivo (additive contrast ratio) para garantir a visibilidade do conteúdo
- Cores muito saturadas desaparecem ou parecem tênues no fundo real
- Por isso, o Glimmer adota como estrutura básica superfícies neutras e escuras + conteúdo claro
- Uma paleta dessaturada (desaturated) mantém contraste estável independentemente das mudanças no ambiente
- As cores são usadas de forma limitada, principalmente para destacar elementos de atenção, como botões
Equilíbrio entre movimento e atenção
- Em um head-up display, o movimento não deve atrapalhar
- Como o conteúdo pode surgir a qualquer momento no campo de visão, são necessárias transições suaves e respeitosas
- A transição inicial de 500 ms era curta demais para ser percebida, então foi ajustada para uma transição gradual de cerca de 2 segundos
- Isso conduz naturalmente o olhar da visão periférica (periphery) para o centro
- Entradas do usuário, como voz e gestos, exigem feedback imediato
- Para isso, são usados focus rings e highlights para garantir resposta de baixa latência
Harmonia entre realidade e tecnologia
- O ponto central do design para displays transparentes são fatores humanos, como atenção e concentração
- O objetivo do Jetpack Compose Glimmer é uma experiência em que a tecnologia não exige atenção, mas complementa a realidade
- Essa abordagem faz os óculos com IA evoluírem além de uma ferramenta para mostrar informações, em direção ao aprimoramento da própria percepção da realidade
- O Google oferece aos desenvolvedores diretrizes de design para óculos com IA e o Figma Design Kit
Ainda não há comentários.