Indicatori di icone

L'indicatore dell'icona fa parte del sistema di annotazioni spaziali. Utilizza gli indicatori delle icone per annotare gli oggetti del mondo reale.

Principi

Contestuale: gli indicatori delle icone sono bloccati su oggetti o punti del mondo reale.

Sintetici: gli indicatori delle icone sono indicatori visivi abbreviati di un'ancora spaziale.

Utilizzo e posizionamento

Un indicatore icona è un elemento UI simile a un pulsante icona che contrassegna gli oggetti di interesse nell'ambiente dell'utente. L'indicatore icona è un tipo di indicatore spaziale utilizzato per l'ancoraggio spaziale.

check_circle

Cosa fare

Utilizza un indicatore di icona per annotare gli oggetti del mondo reale.

cancel

Cosa non fare

Utilizza gli indicatori con icona per elementi decorativi o annotazioni di oggetti non reali, quando un pulsante con icona è più adatto.

Qualsiasi altro componente Glimmer di Jetpack Compose può essere abbinato a un indicatore per fornire maggiori chiarimenti o informazioni sull'ambiente circostante dell'utente.

check_circle

Cosa fare

Utilizza la divulgazione progressiva per consentire all'utente di accedere a ulteriori informazioni.

cancel

Cosa non fare

Sovraccaricare gli indicatori con UI aggiuntiva, in quanto ciò causerà una maggiore interferenza con l'ambiente dell'utente.

I contenuti e le etichette possono essere posizionati con orientamenti diversi. Gli indicatori e l'eventuale UI associata devono comportarsi come UI spaziale, il che significa che la distanza effettiva dell'oggetto contrassegnato deve essere riflessa nelle dimensioni della UI, utilizzando una dimensione DP angolare costante.

Definisci chiaramente gli indicatori per evitare confusione visiva e limita il numero di indicatori all'interno della visualizzazione. Se sono necessari più indicatori, raggruppali in un unico indicatore più visibile che può essere visualizzato progressivamente.

Stati

L'indicatore icona è molto simile a un pulsante icona. La differenza principale è che, anziché uno stato disattivato, ha uno stato non interattivo.

Annota il mondo fisico con lo stato non interattivo, ad esempio contrassegnando un punto di interesse.

Se sono disponibili ulteriori informazioni, puoi utilizzare lo stato interattivo che ha un affordance del pulsante. Se l'utente tocca l'indicatore dell'icona, viene visualizzata una scheda Glimmer con ulteriori informazioni.

Anatomia

L'indicatore dell'icona è un piccolo elemento UI del pulsante icona con spaziatura interna che consente un allineamento e un orientamento fissi della UI. L'indicatore dell'icona può anche utilizzare un punto grande o piccolo anziché un'icona. Lo stato interattivo include un affordance visivo per indicare lo stato del pulsante.

Spaziatura interna

La UI posizionata in orizzontale e in posizione verticale ha una spaziatura interna media, mentre gli elementi accoppiati in diagonale hanno una spaziatura interna predefinita di 0 dp.

Allineamento

Gli elementi UI possono essere posizionati in punti orizzontali, verticali o diagonali.

Orientamento

I contenuti devono essere orientati verso l'utente, rispettando la gravità per dare l'impressione di essere organizzati.

Personalizzazione

Per mantenere un affordance visivo coerente, evita di personalizzare gli indicatori delle icone. Tuttavia, puoi personalizzare l'orientamento e l'allineamento degli elementi UI collegati.