Marcadores de ícone

O marcador de ícone faz parte do sistema de anotação espacial. Use marcadores de ícone para ajudar a anotar objetos do mundo real.

Visão geral dos marcadores de ícone com e sem elemento da interface

Princípios

Contextual: os marcadores de ícone são fixados em objetos ou pontos do mundo real.

Conciso: os marcadores de ícone são indicadores visuais abreviados de uma âncora espacial.

Uso e posicionamento

Um marcador de ícone é um elemento da interface semelhante a um botão de ícone que marca objetos de interesse no ambiente do usuário. O marcador de ícone é um tipo de marcador espacial usado para ancoragem espacial.

O que fazer

Use um marcador de ícone para anotar objetos do mundo real.

O que não fazer

Use marcadores de ícone para elementos decorativos ou anotações de objetos que não são do mundo real, quando um botão de ícone for mais adequado.

Qualquer outro componente do Glimmer do Jetpack Compose pode ser pareado com um marcador para mais esclarecimentos ou insights sobre o que está ao redor do usuário.

O que fazer

Use a divulgação progressiva para permitir que o usuário navegue até mais informações.

O que não fazer

Sobrecarregar os marcadores com mais elementos de interface, o que vai causar mais interferência no ambiente do usuário.

O conteúdo e os rótulos podem ser colocados em diferentes orientações. Os marcadores e qualquer interface anexada precisam se comportar como uma interface espacial, ou seja, a distância real do objeto marcado precisa ser refletida no tamanho da interface, usando um tamanho angular constante em DP.

Dois cards de brilho e marcadores anexados a produtos relevantes Defina claramente os marcadores para evitar poluição visual e limite o número de marcadores na visualização. Se vários marcadores forem necessários, agrupe-os em um único marcador mais proeminente que possa ser visualizado progressivamente.

Estados

O marcador de ícone é muito parecido com um botão de ícone. A principal diferença é que, em vez de um estado desativado, ele tem um estado não interativo.

Os marcadores de ícone têm uma variante não interativa e uma interativa Adicione anotações ao mundo físico com o estado não interativo, como marcar um ponto de interesse.

Se houver mais informações disponíveis, use o estado interativo que tem um botão. Se o usuário tocar no marcador de ícone, um card do Glimmer com mais informações será exibido.

Anatomia

O marcador de ícone é um pequeno elemento da interface de botão de ícone com padding que permite um alinhamento e uma orientação fixos da interface. O marcador de ícone também pode usar um ponto grande ou pequeno em vez de um ícone. O estado interativo inclui uma affordance visual para indicar o estado do botão.

Os marcadores de ícone têm um estado interativo e não interativo, além de focado, pressionado e ativado.

Padding

A interface posicionada na horizontal e na posição vertical tem um padding médio, enquanto os elementos pareados na diagonal têm um padding padrão de 0 dp.

Um padding padrão de 12 dp para elementos horizontais e verticais.

Alinhamento

Os elementos da interface podem ser posicionados em pontos horizontais, verticais ou diagonais.

Elementos da interface do Glimmer alinhados na parte de cima, no centro e à direita

Orientação

O conteúdo precisa ser exibido em direção ao usuário, respeitando a gravidade para que pareça organizado.

Personalização

Para manter uma affordance visual consistente, evite personalizar marcadores de ícones. No entanto, é possível personalizar a orientação e o alinhamento dos elementos da interface anexados.

Propriedades Personalização Padrões
Ícone Sim Ícone de ponto grande e ponto pequeno
Padding Não Centro superior, centro direito, centro inferior, centro esquerdo = médio Canto superior esquerdo, canto superior direito, canto inferior direito, canto inferior esquerdo = 0 dp
Alinhamento Sim TopLeft, TopCenter, TopRight, CenterLeft, CenterRight, BottomLeft, BottomCenter, BottomRight
Orientação Sim RotateToLookAtUser: o ponto se move em direção ao usuário, não importa o ângulo de rotação.