Zum Hauptinhalt springen

Chips

Überblick​

Der US-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 Mehrfachauswahl-Oberfläche
  • 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. Optionale(r/s) Miniaturansicht/Avatar/Symbol/Farbswatch zur Unterscheidung zwischen den Kategorien
  3. Beschriftung zur Identifizierung des Chips
  4. Optionales 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 Erledigung 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 Chipkomponente auf verschiedenen Geräten und Bildschirmgrößen, um eine einheitliche Darstellungund und Benutzerfreundlichkeit zu gewährleisten.

Richtlinien für die Interaktion​

Abbildung zur Veranschaulichung der 4 Chiptypen: Eingabe, Auswahl, Filter und Aktion

  1. Eingabe-Chips: Eingabe-Chips zeigen Informationen an, die der Benutzer eingegeben hat. Sie ermöglichen Benutzereingaben und verdeutlichen diese Eingaben, indem sie Text in einen Chip umwandeln. Diese Chips enthalten ein X-Symbol, mit dem der Benutzer seine Auswahl löschen kann.
  2. Auswahl-Chips: 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: 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: Aktions-Chips lösen eine Aktion aus. Sie können ein optionales Symbol an den Anfang stellen, um der Beschriftung eine visuelle Darstellung des Textes hinzuzufügen.

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 Chiptypen müssen mit einer Beschriftung zur Identifizierung des Chips versehen sein.
  • Formulieren Sie die Chipbeschriftungen prägnant und aussagekräftig, um die Bedeutung auf einen Blick zu vermitteln.
  • Verwenden Sie für Chipbeschriftungen 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 Tastaturnavigation benötigen.
  • Wenn Sie Chips mit Farbfeldern und Symbolen verwenden, benennen Sie die Farbe oder das Symbol in der Beschriftung. Verlassen Sie sich nicht auf die Farbe allein, um ein Bedeutung zu vermitteln.

Reaktionsfähigkeit​

Abbildung, die darstellt, wie sich das UI-Chipmuster an kleinere Formfaktoren, wie z. B. 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. Zeilenumbruch von Chips auf Mobilgeräten. Chips, die nicht in den verfügbaren Platz passen, werden auf eine zweite Zeile umbrochen.
  2. Chips mit genügend Platz, um in einer Zeile zu bleiben.

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​

Eingabeschips verfügen über die folgenden 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)