Ao criar um app diferenciado para Android XR, use a interface espacial para colocar conteúdo no ambiente físico ou virtual de um usuário. Você pode dividir o app em painéis espaciais, orbitais e adicionar elevação espacial (descrita com mais detalhes nesta página).
Usar layouts e componentes do Material Design
Use a biblioteca de componentes do Material Design e layouts adaptáveis ao projetar seu app Android XR. Esses blocos de construção interativos ajudam a acelerar o desenvolvimento para que você possa se concentrar na funcionalidade principal e na inovação.
O Material Design para XR aprimora os componentes do Material 3 e os layouts adaptáveis com comportamentos de interface espacial. Isso pode fazer com que seu app pareça mais nativo para a plataforma e otimizar o espaço.
Você também pode espacializar componentes de interface existentes colocando-os em orbitadores e aplicando elevação espacial, conforme descrito nesta página.
Faça o download do kit de design do Material 3 para começar.
Painéis espaciais
Os painéis espaciais são os elementos básicos dos apps Android XR. Você pode usá-los para criar uma experiência diferenciada de XR em uma tela ilimitada, com conteúdo que se expande pelo espaço do usuário. Os painéis espaciais servem como contêineres para elementos da interface, componentes interativos e conteúdo imersivo.
Entenda como a interface é dimensionada e movida
Os painéis espaciais ajustam automaticamente o tamanho com base na distância do usuário. Essa escala dinâmica garante que os elementos da interface continuem legíveis e interativos quando visualizados a diferentes distâncias. O tamanho permanece consistente entre 0,75 metros e 1,75 metros. Em seguida, a taxa de escalonamento cresce a 0,5 metro por metro, e os elementos aparecem menores.
Para evitar conflitos com a interface do sistema, mantenha os limites padrão de movimento do painel:
- Profundidade mínima: 0,75 metros do usuário
- Profundidade máxima: 5 metros do usuário
Os usuários podem aumentar ou diminuir o painel espacial para que ele fique grande o suficiente para ser visto claramente, não importa a distância do usuário. Quando um usuário move um painel espacial, o Android XR dimensiona o tamanho automaticamente.
Tamanhos de painel espacial
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 sistema usa 0,868 dp/dmm. Quando visualizado em um headset, o app aparece mais distante do usuário do que em um smartphone ou tablet. Por isso, ele precisa ser maior para facilitar o uso.
No espaço total, não há tamanho mínimo para um painel espacial, e o máximo é 2560 dp x 1800 dp devido a limitações físicas.
Onde colocar painéis espaciais
No espaço total, é possível determinar a posição do painel em ambientes de passagem e virtuais. Quando os usuários alternam do espaço principal para o espaço completo, os elementos permanecem na mesma posição previsível, a menos que você atribua uma posição personalizada.
Crie o centro do painel a 1,75 metro da linha de visão de um usuário. Coloque o centro vertical do painel 5° abaixo do nível dos olhos do usuário para maximizar o conforto, já que os usuários tendem a olhar para baixo.
Para maior conforto, coloque o conteúdo no centro de 41° do campo de visão do usuário. Isso garante uma visibilidade clara e minimiza a necessidade de movimentos excessivos de cabeça ou corpo.
O usuário pode se mover no espaço, e os painéis espaciais permanecem no lugar.
O Android XR inclui padrões de interação prontos para uso, facilitando a manipulação de elementos e simplificando seu processo de desenvolvimento. Um usuário pode mover elementos para se adaptar ao espaço pessoal. É possível configurar comportamentos de mover e redimensionar.
Para ajudar os usuários a se sentirem estáveis e bem orientados, permita que eles ancorem um painel espacial a um local específico no mundo real, como o chão, a cadeira, a parede, o teto ou a mesa. A ancoragem está disponível apenas no encaminhamento.
Criar seu próprio layout espacial
É possível decompor o app em vários painéis espaciais, em qualquer layout escolhido. As APIs de interface espacial não limitam o número de painéis. Elas incluem a capacidade de criar layouts com linhas e colunas, além de linhas planas e curvas. As posições do painel espacial podem ser específicas ou arbitrárias. Aprenda a desenvolver layouts de interface espacial.
Layout de linha plana |
Layout de linha curva |
Layout de posições arbitrárias |
Orbiters
Os orbitadores são elementos de interface flutuantes que controlam o conteúdo dentro de painéis espaciais. Elas permitem que o conteúdo tenha mais espaço, e os usuários podem acessar rapidamente os recursos enquanto o conteúdo principal permanece visível. Os Orbiters oferecem a versatilidade necessária para integrar componentes de interface existentes ou criar novos.
Os orbitadores devem ser usados com moderação e com consideração cuidadosa das necessidades e intenções do usuário. Um grande número de elementos de interface espacializados pode causar fadiga do conteúdo e sobrecarregar os usuários com ações concorrentes excessivas. É recomendável adaptar alguns componentes de navegação importantes, como a coluna ou a barra de navegação.
Diretrizes
- Ajuste o padding ao painel para determinar a posição de flex ou porcentagem.
- Determine a posição do eixo Y dos orbitadores. 20 dp é a distância visual recomendada.
- Ajuste o nível de elevação do orbitador, se necessário, usando os níveis de elevação espacial. Por padrão, eles são elevados em 15 dp na profundidade Z.
- O tamanho pode ser fixo ou flexível quando o painel é redimensionado.
- Determine se você quer que um orbitador se expanda dinamicamente para se ajustar ao conteúdo.
Padrões de design a evitar
- Evite sobrepor um orbitador em mais de 50% do tamanho dele.
- Evite colocar orbitadores muito longe do painel espacial.
- Não use coordenadas X ou Y absolutas.
- Evite usar muitos orbitadores.
Elevação espacial
Quando você adiciona a elevação espacial a um componente, ele aparece acima do painel espacial no eixo Z. Isso ajuda a chamar a atenção do usuário, cria uma hierarquia melhor e melhora a legibilidade.
Padrões de design a evitar
- Evite espacializar ou elevar grandes áreas e planos, como folhas inferiores e laterais.
- Evite elevar elementos da interface com conteúdo rolável.
Projetar tamanhos de destino grandes
Em um app de RA/RV, um alvo é a área de ponteiro com que os usuários interagem. O Android XR segue as diretrizes de destino do Material Design e recomenda destinos maiores para aumentar a precisão, o conforto e a usabilidade.
Saiba mais sobre alvos e estados de passar o cursor da XR.
Tornar a tipografia acessível
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.
Se o app atual segue as diretrizes do Material Design, ele já está otimizado para o Android XR. É possível definir a tipografia de um novo app com base no Material Design.
Saiba mais sobre a tipografia XR.