Drawer
Überblick
Der Drawer (früher: „Schnellansicht“) ist ein Container, der zusätzliche Informationen zur Hauptseite anzeigt. Es „schwebt“ über dem Hauptinhaltsbereich und ermöglicht es Benutzern, auf ergänzende Inhalte und Aktionen zuzugreifen, ohne eine neue Seite aufzurufen.
Zu verwenden
- Zum Anzeigen von zusätzlichen Informationen, Kontext oder Details zu Inhalten auf der Hauptseite.
- Für kleinere Abläufe, die sich auf den Inhalt der Hauptseite beziehen.
- Wenn zusätzliche Inhalte mehr Platz benötigen (z. B. Filter, Formulare und Bereichsdetails)
- Für CRUD-Operationen (Erstellen, Lesen, Aktualisieren und Löschen)
- Zum Anzeigen von Inhalten, ohne eine neue Seite aufzurufen.
Nicht zu verwenden
- Zur Durchführung von Abläufen, die nicht mit den Inhalten der Hauptseite zusammenhängen. Verwenden Sie stattdessen eine neue Seite.
- Wenn Benutzer eine Aktion abschließen müssen, bevor sie fortfahren können. Verwenden Sie stattdessen ein modales Fenster.
Aufbau
Das Drawer-Muster besteht aus den folgenden Elementen:
- Überschrift (obligatorisch): Enthält eine H2-Überschrift und ein Schließen-Symbol, über das der Benutzer die Ansicht schließen kann.
- Hauptteil (obligatorisch): Hier wird der Hauptinhalt positioniert. Er kann schreibgeschützt oder bearbeitbar sein, aus Registerkarten mit Abschnitten, Links, Filtern, Formularen usw. bestehen. Der Hauptteil ist scrollbar.
- Fußzeile (optional): Enthält Aktionsschaltflächen, die die Inhalte im Drawer auslösen. Die Position der Fußzeile ist fest vorgegeben.
Allgemeine Richtlinien
- Verwenden Sie zum Öffnen des Drawers ein Symbol, einen Link oder eine Schaltfläche auf der Hauptseite, jedoch keine komplette Tabellenzeile.
- Legen Sie ein Overlay über den Hauptinhalt, wenn dieser inaktiv sein soll, wenn das Panel geöffnet ist.
- Das Panel kann auf unterschiedliche Weise geschlossen werden:
- über die Schließen-Schaltfläche in der Kopfzeile
- über die Schließen-Schaltfläche in der Fußzeile (in bestimmten Fällen)
- durch Drücken der ESC-Taste
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.
Registerkarten
Wenn der Inhalt in eines Drawer komplex ist, verwenden Sie Registerkarten, um ihn besser zu strukturieren. Wir empfehlen, nicht mehr als 4 Registerkarten zu verwenden. Verwenden Sie den Drill-Modus, wenn Sie mehr Inhalte anzeigen möchten.
Links und Drill-Modus
Wenn Ihr Anwendungsfall mehr als 4 Registerkarten in einem Drawer benötigt, empfehlen wir die Verwendung von Links. Nach dem Anklicken eines Links erscheint eine neue Unterseite (sogenannter Drill-Modus), auf der dem Benutzer detailliertere Informationen angezeigt werden. Es ist eine Option zum Zurückgehen vorhanden (in der Kopfzeile des Drawer). Wenn Ihr Anwendungsfall mehr als 3 Ebenen von Unterseiten im Drawer benötigt, empfehlen wir die Verwendung einer separaten Seite. Sehen Sie im Drill-Modus immer eine Schaltfläche zum Zurückgehen vor.
| Links | Drill-Modus |
|---|---|
 |  |
Interaktionen
Größenänderung
Die Größe des Drawers kann durch Ziehen des Rands verändert werden. Es wird empfohlen, die maximale Breite auf 50 % der Bildschirmbreite und die Mindestbreite auf 30 % der Bildschirmbreite festzulegen.
Reaktionsfähigkeit
Bei mobilen Anwendungen nimmt der Drawer immer die gesamte Breite des Bildschirms ein.
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 die Muster von 7 anderen Designbibliotheken. Sie suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Die Designer nahmen diese Informationen, fanden Gemeinsamkeiten und erstellten ein Muster, das auf diesen Praktiken basiert.
Verwandte Komponenten
Ressourcen
Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.