Tab-Leisten und untere Navigation: Designregeln, die Bestand haben
So entwerfen Sie Tab-Leisten und die untere Navigation auf iOS und Android: 3 bis 5 Ziele, Navigation statt Aktionen, Beschriftungen, Abzeichen, Sichtbarkeit und animierte aktive Zustände.
Kernaussage
Verwenden Sie eine Tab-Leiste oder eine untere Navigation für drei bis fünf Ziele auf der obersten Ebene, nicht für Aktionen. Geben Sie jedem Tab ein Symbol und eine Beschriftung, sorgen Sie dafür, dass die Leiste sichtbar bleibt, wenn Benutzer zwischen den Abschnitten wechseln, vermeiden Sie nach Möglichkeit überfüllte „Mehr“-Tabs und gehen Sie sparsam mit Abzeichen um. Animieren Sie den aktiven Zustand auf subtile Weise, damit die Leute sehen, wo sie sich befinden.
Was die Plattformen sagen
Laut Material Design 3 bieten Navigationsleisten Zugriff auf drei bis fünf Ziele, jedes mit einem Symbol und einer Beschriftung, und ein Ziel ist immer aktiv. In den Richtlinien von Apple heißt es, eine Tab-Leiste für die Navigation zu verwenden, nicht um Aktionen bereitzustellen, sie sichtbar zu halten, während Personen zwischen Abschnitten wechseln (außer wenn sie von einem Modal abgedeckt wird) und Überlauf-Tabs zu vermeiden.
Auswahl der Registerkarten
Registerkarten stellen die Struktur der App dar:
- Wählen Sie die Abschnitte aus, die am häufigsten verwendet werden, nicht jeden Abschnitt, den Sie haben.
- Verwenden Sie Substantive für Ziele („Bibliothek“), keine Verben für Aktionen („Hochladen“).
- Platzieren Sie Aktionen auf dem Bildschirm selbst, in einer Symbolleiste oder einer schwebenden Aktionsschaltfläche.
- Wenn Sie mehr als fünf benötigen, überdenken Sie Ihre Struktur, bevor Sie eine Registerkarte „Mehr“ hinzufügen.
Etiketten und Abzeichen
Tabs, die nur aus Symbolen bestehen, sparen Platz, zwingen die Leute aber zum Raten. Beschriftungen machen die Navigation klarer, insbesondere bei weniger häufig vorkommenden Symbolen. Abzeichen sollten etwas signalisieren, worauf die Menschen reagieren müssen; Ein Abzeichen, das immer vorhanden ist, wird nicht mehr wahrgenommen.
Status pro Registerkarte beibehalten
Apple weist darauf hin, dass Tab-Leisten es Benutzern ermöglichen, zwischen Abschnitten zu wechseln und gleichzeitig den aktuellen Navigationsstatus innerhalb jedes Abschnitts beizubehalten. Wenn Sie zu einem Tab zurückkehren, sollte die Stelle angezeigt werden, an der er aufgehört hat, und nicht an den Anfang zurückgesetzt werden.
Bewegung
Ein kleiner Übergang auf dem aktiven Indikator, z. B. eine verschiebbare Pille oder ein ausgefülltes Symbol, hilft den Leuten dabei, zu verfolgen, wo sie sich befinden. Halten Sie es schnell, unter etwa 250 Millisekunden, vermeiden Sie, dass jedes Symbol bei jedem Tippen springt, und vereinfachen Sie es, wenn die reduzierte Bewegung aktiviert ist.
Wichtige Prinzipien
- Drei bis fünf Top-Destinationen
- Navigation, keine Aktionen
- Symbol und Beschriftung für jede Registerkarte
- Halten Sie es sichtbar und behalten Sie den Status jeder Registerkarte bei
- Subtile, schnelle Bewegung im aktiven Zustand
Häufige Fragen
Quellen
- Navigation bar guidelines — Material Design 3
- Tab bars — Richtlinien zur Benutzeroberfläche von Apple