Zum Hauptinhalt springen

Chips

Überblick​

Die UI-Komponente Chip zeigt kleine Informationen oder Tags optisch ansprechend und kompakt an. Sie wird häufig zur Darstellung von Kategorien, Filtern oder Auswahlmöglichkeiten in Benutzeroberflächen verwendet.

Eine ausführliche Orientierungshilfe zur Verwendung dieser Komponente finden Sie im folgenden Entscheidungsbaum für UI-Komponenten.

UI-Komponenten-Entscheidungsbaum für Chips

Zu verwenden​

Verwenden Sie das Chipmuster, wenn einzelne Informationen visuell dargestellt werden müssen, z. B.:

  • Tagging-Systeme
  • Filteroptionen
  • Auswahloptionen in einer Benutzeroberfläche mit Mehrfachauswahl
  • Kategorisierung von Inhalten

Aufbau​

Aufbau einer UI-Chip-Komponente

  1. Container, der auf einen Blick verschiedene Arten von Interaktivität und Funktionalität anzeigt
  2. Optional: Miniaturansicht/Avatar/Symbol/Farbfeld zur Unterscheidung zwischen den Kategorien
  3. Beschriftung zur Identifizierung des Chips
  4. Optional: Entfernen- oder Dropdown-Symbol zum Entfernen eines Chips oder Auslösen eines Auswahlmenüs

Allgemeine Richtlinien​

  • Es muss eine klare Beziehung zwischen den Chips und dem Inhalt oder der Aufgabe bestehen, die sie darstellen.
  • Der Zweck von UI-Chips besteht darin, die Ausführung von Aufgaben oder die Sortierung von Inhalten zu erleichtern. Setzen Sie Chips sparsam und nur bei Bedarf ein, um die Benutzeroberfläche nicht zu überladen.
  • Testen Sie die Chip-Komponente auf verschiedenen Geräten und Bildschirmgrößen, um eine einheitliche Darstellung und Benutzerfreundlichkeit zu gewährleisten.

Richtlinien für die Interaktion​

Abbildung zur Veranschaulichung der 4 Chip-Typen: Eingabe, Auswahl, Filter und Aktion

  1. Eingabe-Chips: Zeigen Informationen an, die der Benutzer eingegeben hat. Sie ermöglichen Benutzereingaben und verdeutlichen diese Eingaben, indem Text in einen Chip umgewandelt wird. Diese Chips enthalten ein X-Symbol, mit dem der Benutzer seine Auswahl löschen kann.
  2. Auswahl-Chips: Ermöglichen die Einzel- oder Mehrfachauswahl aus einer Reihe von Eingabeoptionen in einem Formular. Es müssen mindestens 2 Optionen vorhanden sein, aus denen Benutzer auswählen können. Auswahl-Chips können als Alternative zu Umschaltflächen, Optionsfeldern und Einzelauswahlmenüs dienen.
  3. Filter-Chips: Verwenden relevante Wörter, um bestimmte Arten von Inhalten zu filtern. Filter-Chips können als Alternative zu Umschaltflächen oder Kontrollkästchen dienen.
  4. Aktions-Chips: Lösen eine Aktion aus. Durch Verwendung eines optionalen Symbols kann vor der Beschriftung eine visuelle Darstellung des Texts hinzugefügt werden.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Eine Beschriftung einfügen​

  • Alle Chip-Typen müssen mit einer Beschriftung zur Identifizierung des Chips versehen sein.
  • Formulieren Sie die Beschriftungen prägnant und aussagekräftig, um die Bedeutung auf einen Blick zu vermitteln.
  • Verwenden Sie für Beschriftungen eine einzige Textzeile. Vermeiden Sie lange Beschriftungen, die auf eine zweite Zeile umbrochen werden.
Halten Sie die Beschriftung kurz.
Verwenden Sie keine langen Beschriftungen.

Barrierefreiheit​

  • Stellen Sie sicher, dass der Ablauf so gestaltet ist, dass er für Benutzer mit Behinderungen barrierefrei ist, auch für diejenigen, die Screenreader-Kompatibilität und Navigation per Tastatur benötigen.
  • Wenn Sie Chips mit Farbfeldern und Symbolen verwenden, geben Sie die Farbe oder das Symbol in der Beschriftung an. Verlassen Sie sich nicht allein auf die Farbe, um eine Bedeutung zu vermitteln.

Reaktionsfähigkeit​

Abbildung, die veranschaulicht, wie sich das UI-Chip-Muster an kleinere Formfaktoren wie Mobilgeräte anpasst

Das UI-Chip-Muster ist so konzipiert, dass bei der Verwendung auf einem Tablet oder Mobiltelefon nur minimale Änderungen erforderlich sind. Wenn sich die Displaybreite verkleinert, kann es sein, dass Chips im Muster umbrochen werden.

  1. Umbruch von Chips auf Mobilgeräten. Chips, die nicht mehr in den verfügbaren Platz passen, werden auf eine zweite Zeile umbrochen.
  2. Chips mit ausreichend Platz bleiben in einer Zeile.

Theming​

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Erfahren Sie mehr über das Theming mit Design-Token

Komponenten​

Eingabe-Chips haben die folgenden zugehörigen Komponenten:

Muster​

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)