É possível criar aplicativos Android XR usando o OpenXR, APIs nativas do Android ou o WebXR. As recomendações de design visual descritas nesta página se aplicam a qualquer plataforma.
Para apps Unity, OpenXR ou WebXR: você pode seguir qualquer linguagem de design que escolher. Embora a biblioteca do Material Design só seja acessível para apps Android, você ainda pode seguir as recomendações de design para aplicar cores, espaçamento, escala, botões e tipografia.
Para apps Android: apps Android 2D para dispositivos móveis ou telas grandes podem aproveitar os recursos de espaço total com muito pouco trabalho de desenvolvimento adicional. Para um alto impacto de XR, considere usar a interface espacial. Para criar uma experiência mais imersiva, você também pode adicionar modelos 3D e ambientes ao app.
Você pode manter a linguagem de design dos apps Android atuais no Android XR. Para novos apps ou redesigns, considere seguir as diretrizes do Material Design para tamanho da interface, acessibilidade, tipografia, esquemas de cores e componentes, que vão dar ao seu app os benefícios do design e da usabilidade conhecidos do Android.
Se você criar seu app Android usando a biblioteca Material Design 3, poderá adicionar facilmente comportamentos de interface espacial aos componentes e layouts adaptáveis.
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 de movimento. Verifique se as transições são suaves, se as taxas de frames são estáveis e se o movimento é previsível.
- 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.
Alvos no Android XR
Em um app de RA, um alvo é a área acionável ou pontável 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. Elas 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, embora 56 dp seja 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 de IU diferentes 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 apertados 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 grande público. 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 o máximo de 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 Compacto: 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 da tela inicial. É possível usar a lógica espacial para posicionar painéis com base na posição do usuário, embora recomendemos 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 XR
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 XR
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 mover e ler o texto de diferentes locais. Verifique se os tamanhos de fonte são grandes o suficiente para ser 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.
- Use tipografia adaptável: os painéis podem estar muito próximos, muito distantes e em ângulos de visualização desconfortáveis para o 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 respirar.
- Permitir o dimensionamento do texto: permita que os usuários ajustem o tamanho do texto de acordo com as necessidades individuais.