Interface espacial

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.

Colagem de elementos do Kit de design do Material 3 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.

Um app Android XR com as Luzes do Norte e uma montanha coberta de neve. Três menus de controle do usuário estão em orbitadores. Eles estão elevados acima do painel principal, um à esquerda, outro à direita e outro na parte de baixo.

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.

Visualização de um usuário a 1,75 metro de um app de RA.

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.

Um usuário olhando para um app de RA, com um nível natural dos olhos que está 5 graus abaixo do centro do painel.

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.

Um usuário olhando para um painel no centro de 41 graus do campo de visão.

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.

Pessoa olhando três painéis dispostos lado a lado em uma linha plana Uma pessoa olhando para três painéis planos dispostos lado a lado em uma fileira curva, com os painéis externos à esquerda e à direita mais próximos dela Uma pessoa olhando para três painéis planos de tamanhos diferentes em posições arbitrárias, com os painéis externos à direita e à esquerda mais distantes

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.

Coluna de navegação não espacializada do Material Design no espaço da página inicial
Uma coluna de navegação espacial do Material Design em espaço total
Barra de navegação não espacializada do Material Design no espaço inicial
Uma barra de navegação espacial do Material Design no espaço total

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.

Caixa de diálogo do Material Design em um app de tela grande
Uma caixa de diálogo que usa elevação espacial no Android XR
Um menu suspenso usando elevação no Android XR
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.