Tabbalken en navigatie onderaan: ontwerpregels die standhouden
Tabbalken en onderste navigatie ontwerpen op iOS en Android: 3 tot 5 bestemmingen, navigatie geen acties, labels, badges, zichtbaarheid en geanimeerde actieve statussen.
Kern afhaalmaaltijd
Gebruik een tabbalk of onderste navigatie voor drie tot vijf bestemmingen op het hoogste niveau, niet voor acties. Geef elk tabblad een pictogram en een label, zorg ervoor dat de balk zichtbaar is als mensen tussen secties bewegen, voorkom dat de 'Meer'-tabbladen overlopen waar mogelijk, en ga spaarzaam om met badges. Animeer de actieve status op subtiele wijze, zodat mensen zien waar ze zijn.
Wat de platforms zeggen
Material Design 3 zegt dat navigatiebalken toegang bieden tot drie tot vijf bestemmingen, elk met een pictogram en label, en dat één bestemming altijd actief is. De richtlijnen van Apple zeggen dat je een tabbalk moet gebruiken voor navigatie, niet om acties aan te bieden, om deze zichtbaar te houden als mensen tussen secties bewegen (behalve wanneer een modal deze bedekt) en om overlooptabbladen te vermijden.
Het kiezen van de tabbladen
Tabbladen vertegenwoordigen de structuur van de app:
- Kies de secties die mensen het vaakst gebruiken, niet elke sectie die je hebt.
- Gebruik zelfstandige naamwoorden voor bestemmingen ("Bibliotheek"), geen werkwoorden voor acties ("Uploaden").
- Zet acties in het scherm zelf, in een werkbalk of een zwevende actieknop.
- Als u er meer dan vijf nodig heeft, heroverweeg dan uw structuur voordat u een tabblad 'Meer' toevoegt.
Etiketten en insignes
Tabbladen met alleen pictogrammen besparen ruimte, maar dwingen mensen om te raden. Labels maken de navigatie duidelijker, vooral voor minder gebruikelijke pictogrammen. Badges moeten iets aangeven waar mensen actie op moeten ondernemen; een badge die altijd aanwezig is, wordt niet meer opgemerkt.
Status per tabblad behouden
Apple merkt op dat met tabbalken mensen van sectie kunnen wisselen, terwijl de huidige navigatiestatus binnen elke sectie behouden blijft. Als u terugkeert naar een tabblad, moet u laten zien waar ze waren gebleven, en niet naar het begin.
Beweging
Een kleine overgang op de actieve indicator, zoals een pil die glijdt of een pictogram dat vult, helpt mensen te volgen waar ze zijn. Houd het snel, minder dan ongeveer 250 milliseconden, vermijd het stuiteren van elk pictogram bij elke tik en vereenvoudig het wanneer verminderde beweging is ingeschakeld.
Toets Principles in om te onthouden
- Drie tot vijf topbestemmingen
- Navigatie, geen acties
- Pictogram plus label voor elk tabblad
- Houd het zichtbaar en behoud de status van elk tabblad
- Subtiele, snelle beweging in actieve toestand
Veelgestelde vragen
Bronnen
- Navigation bar guidelines — Material Design 3
- Tab bars — Richtlijnen voor menselijke interfaces van Apple