Übersicht
Chips sind kompakte, interaktive Elemente, mit denen Nutzer Inhalte darunter filtern oder Schnellaktionen auslösen können. Die kompakten Komponenten helfen, Aufgaben unterwegs zu erledigen, indem sie kontextbezogene Optionen präsentieren, die für die Inhalte relevant sind, und die Suchzeit verkürzen.
Um die Übersichtlichkeit zu wahren, sollten Layouts auf maximal 7 Chips pro Zeile beschränkt sein. Chips lassen sich sehr flexibel an die visuelle Sprache Ihrer Marke anpassen. Sie können die Form, Hintergrundfarbe und Rahmenfarbe entsprechend dem ausgewählten UI-Design anpassen.
Chips können Folgendes enthalten:
- Nur ein Symbol
- Nur ein Textlabel
- Sowohl ein Symbol als auch ein Label (in beide Richtungen)
Komposition
1. Vorangestelltes Symbol oder Bild
2. Label text
UX-Anforderungen
Damit alle Apps einheitlich und sicher sind, müssen Sie die folgenden Designanforderungen einhalten:
Anforderungsstufe |
Inhalt |
|---|---|
MUSS |
Fügen Sie entweder ein Symbol oder ein Label ein. |
SOLLTE |
Verwenden Sie einen einzigartigen visuellen Stil, z. B. eine bestimmte Farbe oder Form, um verschiedene Chipstatus zu kommunizieren. |
SOLLTE |
Implementieren Sie ein einheitliches Design für alle Chips in Ihrer App. |
SOLLTE |
Mischen Sie keine zustandsorientierten und zustandslosen Chips in derselben Komponentengruppe. |
SOLLTE |
Platzieren Sie wichtige oder empfohlene Chips am Anfang des Containers. |
SOLLTE |
Labeltext sollte kurz und beschreibend sein. Vermeiden Sie langen Text, der abgeschnitten wird und die kognitive Belastung erhöht. |