Se você tiver um app Android e quiser manter o estilo visual dele, poderá manter essa linguagem de design no Android XR. Para novos apps ou redesigns, siga as diretrizes do Material Design para tamanho da interface, acessibilidade, tipografia, esquemas de cores e componentes.
Apps 2D para dispositivos móveis ou telas grandes do Android podem aproveitar os recursos do espaço total com muito pouco trabalho de desenvolvimento extra. Para um alto impacto de XR, considere espacializar painéis e criar uma interface espacial. Para jornadas de usuário mais imersivas, considere adicionar modelos 3D e ambientes.
Se você já criou ou está criando um app Unity, Open XR ou WebXR, pode seguir qualquer linguagem de design que escolher. As recomendações de design fornecidas pelo Material Design podem ajudar você a aplicar cores, espaçamento, escala, botões e tipografia.
Como testar o design visual do app
Testar o design visual do app é crucial para garantir uma experiência do usuário confortável e acessível. Confira como testar em diferentes plataformas e ambientes de XR.
Usar emuladores, simuladores e dispositivos reais
- Se você estiver desenvolvendo um app Android, teste-o no Android XR Emulator. Isso ajuda a identificar possíveis problemas e iterar rapidamente sem um dispositivo físico.
Lista de verificação de testes de design visual
- Teste qualquer movimento ou animação para garantir que eles não causem enjoo. Verifique se há transições suaves, taxas de quadros estáveis e movimentos previsíveis.
- Teste o encaminhamento em configurações reais para garantir que os elementos virtuais se misturem ao ambiente físico.
- Teste o app em diferentes condições de iluminação, incluindo ambientes claros e escuros.
- Verifique a legibilidade do texto em diferentes distâncias e ângulos.
- Avalie o esquema de cores para acessibilidade e conforto.
Coletar feedback dos usuários
Realize testes com usuários para identificar áreas de melhoria. Inclua usuários com diferentes níveis de experiência em RA e habilidades visuais para uma perspectiva completa.
Destinos no Android XR
Em um app de RA/RV, um alvo é a área tátil ou de ponteiro com que os usuários interagem. Alvos maiores aumentam a precisão, o conforto e a usabilidade. Para tornar seu app acessível, siga as diretrizes de destino do Material Design. Eles vão funcionar com apps Android, Unity, OpenXR e WebXR. Se o app já segue as recomendações do Material Design, os tamanhos de destino atendem ao mínimo, mas 56 dp é o ideal.
Todos os elementos interativos da interface precisam considerar:
- Destino recomendado: 56 dp x 56 dp ou maior
- Affordance visual: 48 dp x 48 dp ou maior
- Deslocamento entre o alvo e a affordance visual: 4dp
- Para interações precisas, os alvos do ponteiro de elementos diferentes da interface não podem se sobrepor.
Adicione estados ao passar o cursor
Para aumentar a acessibilidade, incorpore estados de foco e de passar o cursor, além dos estados interativos básicos para componentes interativos. Os estados de passagem do cursor podem ser úteis para todos e são particularmente importantes para usuários que dependem de entradas do ponteiro para selecionar elementos da interface.
Os estados de passar o cursor desempenham um papel importante na ativação da funcionalidade de rastreamento ocular no sistema. No entanto, quando o rastreamento ocular está ativado, os estados de passagem do cursor ficam inacessíveis ao aplicativo para proteger a privacidade do usuário e impedir o compartilhamento de dados. O sistema vai desenhar um estado de destaque visível apenas para o usuário para transmitir quais componentes da interface podem ser usados.
Distância entre os destinos
O Material Design recomenda um espaço mínimo de 8 dp entre os alvos, incluindo botões. Esse espaçamento garante que os usuários possam distinguir facilmente elementos interativos e evitar seleções acidentais.
A distância específica entre os botões pode variar dependendo do contexto e do tamanho deles. Alguns fatores a serem considerados:
- Tamanho do botão: botões maiores podem exigir mais espaço entre eles para manter a clareza visual.
- Agrupamento de botões: botões funcionalmente relacionados podem ser agrupados, enquanto botões não relacionados precisam ter mais separação.
- Layout: o layout geral da tela pode influenciar o espaçamento entre os botões. Por exemplo, os botões em uma barra de ferramentas podem estar mais próximos do que os botões em uma caixa de diálogo.
Tamanho e escala do painel
O Android XR foi projetado para tornar seu app confortável, legível e acessível a um público amplo. Para uma experiência ideal, o Android XR usa 0,868 dp-to-dmm.
Se você estiver usando painéis, o app de RA provavelmente estará mais longe do usuário do que uma tela física. Considere que o usuário está usando um fone de ouvido. Para maior conforto, coloque o conteúdo principal em um campo de visão de 41° para que os usuários não precisem mover a cabeça para interagir.
Recomendações
- Os painéis têm cantos arredondados de 32 dp. É possível substituir esse padrão.
Comportamentos de profundidade do painel
- Espaço da casa: os apps são iniciados a 1,75 metro do usuário, e os desenvolvedores não podem substituir isso.
- Espaço total: por padrão, os apps são iniciados na mesma posição em que estavam no espaço inicial. É possível usar a lógica espacial para posicionar painéis com base na posição do usuário, mas recomendamos uma distância de lançamento de 1,75 metros.
Quando um app está a 1,75 metro do usuário:
- 1024 dp é percebido como 1.556,24 milímetros
- 720 dp é percebido como 1.093,66 milímetros
- 1 metro na realidade física = 1 metro em RA
Botões e ícones
Se você já tem um app Android, não precisa projetar componentes especiais para o Android XR. Siga as diretrizes do Material Design para botões e ícones. Se você tiver um app Unity, OpenXR ou WebXR, poderá manter os botões e ícones como estão ou se inspirar no Material Design.
Se você decidir criar seus próprios botões ou ícones, opte por formas simples, linhas limpas, formas básicas e uma paleta de cores limitada. Evite designs muito detalhados. Eles precisam ser dimensionáveis e legíveis em diferentes resoluções e distâncias de visualização. Para acessibilidade, garanta um contraste suficiente entre o componente e o plano de fundo e forneça descrições de texto ou dicas para usuários com leitores de tela ou outras tecnologias adaptativas.
Cores
O Android XR segue o sistema de cores do Material Design para garantir uma interface consistente e visualmente atraente. Para criar um estilo visual imersivo personalizado para XR, projete com contraste suficiente, escolha uma paleta equilibrada, use cores acessíveis para pessoas com deficiência de visão e evite combinações irritantes que podem causar fadiga ocular ou desorientação.
Temas claros e escuros em RA
Use temas claros e escuros como faria em um app para dispositivos móveis Android. Os usuários podem alternar entre temas claros e escuros no Android XR, escolhendo o estilo visual que melhor atenda às preferências individuais.
Saiba mais sobre os esquemas de cores do Material Design.
Tipografia XR
A legibilidade da fonte é fundamental para uma experiência do usuário confortável em XR. Recomendamos usar opções de tipo de escala com um tamanho de fonte de 14 dp ou maior e um peso de fonte normal ou superior para melhorar a legibilidade.
Para criar um app fácil de usar, siga as orientações de tipografia do Material Design.
Práticas recomendadas para tipografia em XR
- Tamanho para distâncias variáveis: lembre-se de que os usuários vão se mover e visualizar o texto de diferentes locais. Verifique se os tamanhos de fonte são grandes o suficiente para serem lidos de longe.
- Posicionar o texto no campo de visão natural do usuário: isso evita movimentos excessivos da cabeça e tensão no pescoço.
- Considere profundidade e escala: use dicas de profundidade e escala para criar hierarquia no espaço 3D.
- O texto precisa ser legível em relação ao plano de fundo do usuário: pesos mais pesados oferecem mais contraste. Ajuste de acordo com as cores, a iluminação e a complexidade do ambiente.
- Usar tipografia adaptável: os painéis podem estar muito próximos, muito distantes e em ângulos de visualização estranhos para um usuário.
- Limitar o texto anexado a objetos em movimento: isso pode causar enjoo.
Tipografia acessível em XR
- Selecionar fontes para legibilidade: priorize fontes com formas de letra claras em tamanhos pequenos e distâncias longas.
- Use letras maiúsculas apenas na primeira palavra: o texto com letras maiúsculas apenas na primeira palavra é mais fácil de ler do que o texto em letras maiúsculas.
- Limite o comprimento da linha: tente usar linhas mais curtas para melhorar a legibilidade.
- Selecionar cores acessíveis: use combinações de cores legíveis para usuários com daltonismo.
- Evite o excesso de elementos: deixe espaço suficiente para o texto.
- Permitir o dimensionamento do texto: permita que os usuários ajustem o tamanho do texto de acordo com as necessidades individuais.