Zum Hauptinhalt springen

Strukturansicht

Überblick​

Eine Strukturansicht ist eine hierarchische Liste von Elementen, die eine hierarchische Beziehung haben können. Strukturansichten erleichtern die Navigation in komplexen Datenstrukturen.

Zu verwenden​

  • Zur Unterstützung in Dateisystemstrukturen.
  • Zur hierarchischen Organisation großer Informationsmengen.

Nicht zu verwenden​

  • Als primäre Navigation. Verwenden Sie stattdessen Registerkarten oder die Seitennavigation.
  • Für flache Hierarchien mit nur einer oder zwei Einzugsebenen. Verwenden Sie stattdessen die Tabellenansicht.
  • Zum Offenlegen von Inhalten, die Benutzer auswählen und lesen können. Verwenden Sie stattdessen das Accordion.

Aufbau​

Abbildung des Aufbaus des Strukturansichtsmusters

Das Strukturansichtsmuster besteht aus den folgenden Elementen:

  1. Zweigknoten: Ein Listenelement in einer Strukturansicht, das mindestens einen untergeordneten Knoten enthält.
  2. Zweig-Symbol: Ein Symbol, das den Zweig repräsentiert. Meistens erscheint es in Form eines Ordners oder etwas mit ähnlicher Bedeutung.
  3. Untergeordneter Knoten: Ein Strukturansicht-Listenelement, das keine untergeordneten Knoten aufweist und auf jeder Ebene der Strukturansicht erscheinen kann.
  4. Symbol für untergeordnete Elemente: Ein Symbol, das den Blattknoten darstellt. Verschiedene untergeordnete Knoten können unterschiedliche Symbole haben.

Allgemeine Richtlinien​

Stapeln Sie Knoten mit einem Abstand von 0 Pixeln, um einen konsistenten Abstand und eine konsistente Ausrichtung zwischen allen Knoten beizubehalten.

Größenänderung​

Eine Strukturansicht ist in drei verschiedenen Größen erhältlich, um Schriftgröße, Einzug, Zeilenhöhe und Symbolgrößen zu berücksichtigen.

Abbildung zur Veranschaulichung der verschiedenen Größen des Strukturansichtsmusters, einschließlich klein, normal und groß Von links nach rechts: kleine, normale und große Strukturansichtsgrößen.

Verwendung von Symbolen​

Wenn Sie Symbole in einer Strukturansicht verwenden, empfehlen wir, Symbole überall zu verwenden, um die Konsistenz zu gewährleisten.

Wenn Sie Symbole verwenden, platzieren Sie diese auf allen Knoten.
Mischen Sie keine Nur-Text-Knoten mit Knoten, die ein Symbol enthalten. Dies kann zu Problemen mit Ausrichtung und Lesbarkeit führen.

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.

Überlaufender Inhalt​

Wenn Beschriftungen in einem Strukturansichtselement einen bestimmten Platz überschreiten, wird empfohlen, die Beschriftung zu kürzen. Abgeschnittene Elemente werden mit einer Ellipse ...angezeigt, die abgeschnittene Zeichen in einer Textzeichenfolge darstellt. Gekürzte Elemente müssen eine QuickInfo enthalten, in der die vollständige Textzeichenfolge anzeigt wird.

Teams haben auch die Möglichkeit, Text umzubrechen.

Abbildung zur Darstellung von Überlaufinhalt in einem Strukturansichtsmuster Abgeschnittene Elemente müssen eine QuickInfo enthalten, die die gesamte Zeichenfolge, den Namen oder die Wortgruppe enthält, die die Auslassungspunkte darstellen.

Barrierefreiheit​

  • Es sollte möglich sein, Zweige mit den Tasten Left Arrow und Right Arrow zu öffnen und zu schließen.
  • Für Benutzer von Screenreadern sind alle Strukturknoten in einem Element mit Rollenstruktur enthalten oder gehören zu diesem. Jedes Element, das als Strukturknoten dient, hat die Rolle treeitem. Mithilfe dieses Markups wird sichergestellt, dass Benutzer von Screenreadern die Ebenen zugewiesen bekommen, damit sie wissen, auf welcher Ebene sie sich in der Hierarchie befinden.
  • aria-expanded sollte auch in Verbindung mit den auf-/einklappbaren Elementen verwendet werden, damit ihr Zustand vermittelt wird.

Weitere Überlegungen zur Barrierefreiheit finden Sie im Strukturansichtsmuster des World Wide Web Consortium (W3C).

Reaktionsfähigkeit​

Für mobile Anwendungen empfehlen wir die Verwendung einer großen Strukturansicht, um mehr Touch-Oberfläche zu bieten.

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

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten, was (Nicht-Kunden-)Versicherer erstellt haben, sowie Kundenimplementierungen unseres bestehenden Designs, und überprüften die Stärken und Schwächen jeder Version. Wie mobilfreundlich ist das beispielsweise? Welche Daten werden erhoben und organisiert? Wie werden Symbole verwendet? Die Designer nahmen diese Informationen, fanden Gemeinsamkeiten und erstellten ein Muster, das auf diesen Praktiken basiert.

Ressourcen​

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

Jutro-Musterbibliothek (19.6 MB)