Chip

hero

Panoramica

I chip sono elementi compatti e interattivi che consentono agli utenti di filtrare i contenuti sottostanti o attivare azioni rapide. I componenti compatti contribuiscono a semplificare il completamento delle attività durante la guida, presentando opzioni contestuali pertinenti ai contenuti e riducendo i tempi di navigazione.

Per mantenere la chiarezza visiva, i layout devono essere limitati a un massimo di 7 chip per riga. I chip sono altamente flessibili per adattarsi al linguaggio visivo del tuo brand. Puoi personalizzare la forma, il colore di sfondo e il colore del bordo in base al tema dell'interfaccia utente scelto.

I chip possono contenere:

  • Solo un'icona
  • Solo un'etichetta di testo
  • Sia un'icona che un'etichetta (in entrambe le direzioni)

Composizione

hero

1. Icona o immagine iniziale

2. Testo dell'etichetta


Requisiti UX

Per garantire un'esperienza sicura e coerente in tutte le app, segui questi requisiti di progettazione:

Livello di requisiti

Contenuti

MUST

Includi un'icona o un'etichetta.

SHOULD

Utilizza uno stile visivo unico, ad esempio un colore o una forma distinti, per comunicare i diversi stati dei chip.

SHOULD

Implementa uno stile coerente in tutti i chip dell'app.

SHOULD

Evita di combinare chip con stato e senza stato nello stesso gruppo di componenti.

SHOULD

Posiziona i chip critici o consigliati sul bordo iniziale del contenitore.

SHOULD

Mantieni il testo dell'etichetta breve e descrittivo. Evita testi lunghi che attivano il troncamento e aumentano il carico cognitivo.