Seitenleiste vs. Schublade
Eine Sidebar bleibt im Seitenlayout. Ein Drawer gleitet für kurze Zeit ein und kann die Seite verdecken oder verdrängen.
Verwenden Sie eine Seitenleiste für Werkzeuge oder Links, die oft genutzt werden, wenn Platz vorhanden ist. Verwenden Sie eine Schublade für weniger häufige Aufgaben oder kleine Bildschirme und machen Sie sie leicht schließend.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Sidebar Source List
Eine Sidebar Source List ist eine baumartige Liste an der Seite eines Fensters. Die gewählte Quelle oder Gruppe bestimmt, was im Hauptbereich erscheint.
Eine Fototheken-Liste zeigt Library, Favorites, Alben und geteilte Gruppen. Die gewählte Sammlung füllt den Detailbereich.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn stabile Gruppen oder Orte die Hauptansicht steuern und Menschen oft zu ihnen zurückkehren, während sie arbeiten.
- Nutze es nicht, wenn
- Vermeide es für eine einmalige Checkliste oder eine kurze, flache Aufgabenliste. Jede Kategorie sollte die Haupt-Inhaltsquelle wirklich ändern.
- In Code verwendeter Name
NSOutlineView source-list style / SwiftUI NavigationSplitView
Drawer
Ein Drawer fährt von einem Bildschirmrand herein. Ein Teil der Seite dahinter bleibt sichtbar.
Wählen Sie eine Bestellung aus, um deren Details von rechts zu öffnen. Die Bestellliste bleibt dahinter sichtbar.
- Verwenden Sie es, wenn
- Verwenden Sie es für Details oder eine kleinere zweite Aufgabe, wenn das Beibehalten der aktuellen Position hilfreich ist.
- Nutze es nicht, wenn
- Dränge niemals einen langen Arbeitsablauf mit vielen Schritten in eine schmale Schublade.
- In Code verwendeter Name
Dialog + edge positioning
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| Sidebar Source ListSidebar Source List | Verwenden Sie es, wenn stabile Gruppen oder Orte die Hauptansicht steuern und Menschen oft zu ihnen zurückkehren, während sie arbeiten. | Vermeide es für eine einmalige Checkliste oder eine kurze, flache Aufgabenliste. Jede Kategorie sollte die Haupt-Inhaltsquelle wirklich ändern. | NSOutlineView source-list style / SwiftUI NavigationSplitView |
| DrawerDrawer | Verwenden Sie es für Details oder eine kleinere zweite Aufgabe, wenn das Beibehalten der aktuellen Position hilfreich ist. | Dränge niemals einen langen Arbeitsablauf mit vielen Schritten in eine schmale Schublade. | Dialog + edge positioning |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Sidebar Source List (Sidebar Source List), Drawer (Drawer) für unseren echten Nutzerfluss. Nutze diese Regel: Eine Sidebar bleibt im Seitenlayout. Ein Drawer gleitet für kurze Zeit ein und kann die Seite verdecken oder verdrängen. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.