Terug

Item: het element dat elke tab van je app vormgeeft

on 

Elke tab in de navigatie van je app rust op hetzelfde element: het Item, dat een icoon, een label en een indicator kan combineren. We hebben het ontworpen om onze TabBars van vandaag en morgen vorm te geven. Het staat nu gedocumenteerd in het GoodBarber Design System.

Je content is verzorgd, je kleuren zijn gekozen. Dan blijft de navigatiebalk over: daarmee gaan je gebruikers van de ene sectie naar de andere, en hij weegt zwaar mee in de indruk die je app achterlaat. Elk van zijn tabs rust op een element dat als bouwsteen is ontworpen: het Item. In de nieuwe generatie TabBar is het dit element dat elke navigatie haar karakter geeft.

Een icoon, een label, een indicator

In een Item heeft elk element zijn rol. Het icoon staat voor de sectie, het label toont de naam ervan en de indicator, die optioneel is, markeert de actieve tab. Elk element kun je apart tonen of verbergen, wat drie composities oplevert: icoon en label, alleen icoon, alleen label.

Dat is wat de Minimal TabBar, helemaal in iconen, onderscheidt van de Clean TabBar, helemaal in tekst: hetzelfde element, anders samengesteld.

17 eigenschappen voor de TabBars van vandaag en morgen

Om een TabBar te ontwerpen, beschikken onze designers over 17 eigenschappen: 8 voor het Item, 6 voor het icoon en 3 voor het label. Het oppervlak van het Item kan een effen kleur, een kleurverloop of een blur-effect krijgen, een rand, een schaduw, rechte of afgeronde hoeken. De layout bepaalt de grootte, de oriëntatie, de binnenmarge, die het aanraakgebied afbakent, en de ruimte die de elementen laat ademen.

Al die mogelijkheden hoef je niet zelf in te stellen. We gebruiken ze om complete TabBar-layouts samen te stellen die aansluiten bij de huidige codes van app-design: Bold, Minimal en Clean TabBar zijn de eerste drie. Als die codes veranderen, ontstaan er nieuwe layouts uit hetzelfde element, zonder van nul te beginnen. Zo kunnen we je TabBars bieden die altijd met hun tijd meegaan.

In je back office kies je je TabBar en stem je hem daarna af op je identiteit: grootte van de tabs, afronding van de hoeken, kleuren, lettertype van de labels, de manier waarop de actieve tab wordt aangeduid. Je eigen iconen kunnen zelfs naast die van het systeem staan.

Duidelijke toestanden, verzorgde animaties

Een Item heeft twee toestanden: standaard en geselecteerd. Om de actieve tab te onderscheiden, heeft het vier middelen, apart of gecombineerd: de kleur, de achtergrond, de rand en de indicator. Die laatste verschijnt alleen op de geselecteerde tab, in drie vormen: een punt (Dot), een kort streepje (Tiny) of een lijn (Line).

Elke vorm heeft zijn eigen beweging. De punt en de lijn krimpen op de vorige tab en groeien op de nieuwe, het korte streepje glijdt van de ene naar de andere. Wanneer de selectie via de achtergrond loopt, zoals bij de Bold TabBar, is het de gekleurde achtergrond die verschuift. Korte overgangen die elke verandering leesbaar maken, zonder te overdrijven.

Hetzelfde Item, van mobiel tot desktop

Het Item past zijn oriëntatie, binnenmarge en ruimte aan elk scherm aan: mobiel, tablet en desktop. Onderaan een telefoon staat het icoon boven het label. Op desktop wordt de TabBar een zijbalk, en kan het Item horizontaal worden om erin te passen. Je stelt je navigatie één keer in: elk scherm krijgt de versie die erbij past.

Het Item komt in het Design System

Na de TabBar heeft het Item nu een eigen pagina in het GoodBarber Design System, en het komt niet alleen. Met het Item Icon, het Item Label en de Item Indicator opent het een nieuwe categorie: de UI Elements, de bouwstenen van onze componenten, elk met één enkele rol.

Wil je het Item in detail ontdekken? Ga naar zijn pagina in het Design System. En om het aan het werk te zien, kies je je TabBar in de sectie Menu van je back office.