Botão

Button

Um botão é um dos elementos de interface do usuário mais fundamentais e cruciais na realidade misturada. Ele permite que seus usuários disparem ações imediatas. Como não há comentários físicos na realidade misturada, é crucial fornecer comentários visuais e de áudio suficientes para aumentar a confiança de interação do usuário.

Em HoloLens design de botão 2, com base em várias iterações de design, prototipagem e estudos de pesquisa de usuário, integramos várias funcionalidades visuais e indicações de áudio que ajudam a percepção e interação profundas do usuário em espaço vazio.

Recursos visuais

Button with proximity light effect shown
Luz de proximidade

Button selected with focus highlight effect shown
Destaque do foco

Button being pressed with compression cage effect shown
Compactando gaiola

Button being pressed with trigger pulse effect shown
Pulso no gatilho


Indicações de áudio

Comentários de áudio adequados podem melhorar drasticamente a experiência do usuário. O botão HoloLens 2 fornece comentários de áudio para comunicar as seguintes indicações:

  • O contato começa: Reproduzir som quando o toque começa (interação próxima)
  • Términos do contato: reproduzir som na extremidade de toque (quase interação)
  • O pinçamento começa: Reproduzir som na seleção de pinçamento (interação distante com o olhar ou raios)
  • Extremidades de pinçamento: reproduzir som na versão de pinça (interação distante com o olhar ou raios)


Comando de voz

Para todos os botões na realidade misturada, é importante dar suporte a opções alternativas de interação. Por padrão, recomendamos que o comando de voz tenha suporte para todos os botões. No design do botão HoloLens 2, fornecemos uma dica de ferramenta durante o estado de focalização para melhorar a capacidade de descoberta.

Voice input
Imagem: Dica de ferramenta para o comando de voz



Recomendações de dimensionamento

Para garantir que todos os objetos interacionáveis possam ser facilmente tocados, recomendamos garantir que o interacionável atenda a um tamanho mínimo com base na distância colocada do usuário. O ângulo visual é frequentemente medido em graus de arco visual. O ângulo visual baseia-se na distância entre os olhos do usuário e o objeto e permanece constante, enquanto o tamanho físico do destino pode mudar conforme a distância do usuário muda. Para determinar o tamanho físico necessário de um objeto com base na distância do usuário, tente usar uma calculadora de ângulo visual como esta.

Abaixo estão as recomendações para tamanhos mínimos de conteúdo interacionável.

Tamanho do destino para interação direta com as mãos

Distância Ângulo de exibição Tamanho
45 cm não menor que 2° 1,6 x 1,6 cm

Target size for direct hand interaction
Tamanho do destino para interação direta com as mãos


Tamanho do destino para botões

Ao criar botões para interação direta, recomendamos um tamanho mínimo maior de 3,2 x 3,2 cm para garantir que haja espaço suficiente para conter um ícone e, potencialmente, algum texto.

Distância Tamanho mínimo
45 cm 3,2 x 3,2 cm

Target size for the buttons
Tamanho do destino para os botões


Tamanho do destino para interação de raios mundos ou de olhar

Distância Ângulo de exibição Tamanho
2 m não menor que 1° 3,5 x 3,5 cm

Target size for hand ray or gaze interaction
Tamanho do destino para interação de raios mundos ou de olhar



Diretrizes de design

Evitar backplate transparente

Ao criar a interface do usuário do menu com botões, é recomendável usar backplate opaco. Backplates transparentes não são recomendados pelos seguintes motivos:

  • Difícil de interagir porque é difícil entender a profundidade com que o botão precisa ser pressionado para disparar o evento
  • Problema de legibilidade no ambiente físico complexo
  • Hologramas exibido por meio da placa transparente pode mostrar o problema do efeito de natação quando usado com a tecnologia de estabilização LSR de profundidade.

Consulte Projetar conteúdo para exibição holográfica para obter mais detalhes sobre opções de cores e diretrizes para exibição holográfica.

Transparent UI examplesExemplos de backplate transparente da interface do usuário


Usar backplate compartilhado

Para vários botões, é recomendável usar o backplate compartilhado em vez do backplate do botão individual.

  • Reduzir o ruído visual e a complexidade
  • Limpar agrupamento

Shared backplate examplesExemplos de backplate de interface do usuário compartilhada



Botão no MRTK (Realidade Misturada Toolkit)

O MRTK para Unity e o MRTK para Unreal fornecem vários tipos de pré-fabricados de botão, incluindo botões de estilo HoloLens 2. O componente do botão HoloLens 2 contém todos os comentários visuais e detalhes de interação introduzidos nesta página. Ao usá-lo, você pode aproveitar o resultado de muitas iterações de design e pesquisas de usuários que nossos designers, desenvolvedores, pesquisadores realizaram.

Confira o MRTK – Botão para obter mais instruções e exemplos personalizados.



Confira também