Registerkarten vs. Segmentierte Steuerung
Registerkarten wechseln zwischen Inhaltsbereichen. Eine segmentierte Steuerung ändert einen kleinen Modus, Filter oder Wert in derselben Ansicht.
Verwenden Sie Registerkarten für separate Inhaltsabschnitte. Verwenden Sie eine segmentierte Steuerung für einige kurze Auswahlmöglichkeiten, die denselben Inhalt ändern.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Registerkarten
Registerkarten verwenden Bezeichnungen, um Inhalte in einem gemeinsamen Bereich zu wechseln. Die Hauptaufgabe bleibt geöffnet.
Übersicht, Aktivitäten und Berechtigungen ändern das darunterliegende Panel, während dasselbe Projekt geöffnet bleibt.
- Verwenden Sie es, wenn
- Verwenden Sie Registerkarten für einige Abschnitte auf derselben Ebene, wenn deren Beschriftungen sichtbar bleiben sollen.
- Nutze es nicht, wenn
- Verwenden Sie niemals Tabs als kleine Links zu Seiten, die nichts miteinander zu tun haben.
- In Code verwendeter Name
role="tablist"
Umschaltgruppe
Eine beschriftete Gruppe aus An-oder-Aus-Buttons. Eine oder mehrere getrennte Optionen können gedrückt bleiben.
Ein Texteditor lässt Fett und Kursiv gleichzeitig aktiv. Jeder Button meldet, ob er gedrückt ist.
- Verwenden Sie es, wenn
- Verwenden Sie es für einige wenige kleine, reversible Modi, deren aktueller Zustand sichtbar bleiben muss.
- Nutze es nicht, wenn
- Verwenden Sie Optionsfelder, wenn genau eine Auswahl eingereicht werden kann. Verwenden Sie Kontrollkästchen für normale Formulareingaben.
- In Code verwendeter Name
button[aria-pressed] in a labeled group
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| RegisterkartenTabs | Verwenden Sie Registerkarten für einige Abschnitte auf derselben Ebene, wenn deren Beschriftungen sichtbar bleiben sollen. | Verwenden Sie niemals Tabs als kleine Links zu Seiten, die nichts miteinander zu tun haben. | role="tablist" |
| UmschaltgruppeToggle Group | Verwenden Sie es für einige wenige kleine, reversible Modi, deren aktueller Zustand sichtbar bleiben muss. | Verwenden Sie Optionsfelder, wenn genau eine Auswahl eingereicht werden kann. Verwenden Sie Kontrollkästchen für normale Formulareingaben. | button[aria-pressed] in a labeled group |
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 Registerkarten (Tabs), Umschaltgruppe (Toggle Group) für unseren echten Nutzerfluss. Nutze diese Regel: Registerkarten wechseln zwischen Inhaltsbereichen. Eine segmentierte Steuerung ändert einen kleinen Modus, Filter oder Wert in derselben Ansicht. 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.