E-Commerce
Abonnementsysteme
Chatbot
Online-Kurse
Buchung
Reiseführer
Veranstaltungen
Content Creators
Lokale Lieferung und Abholung
Zeitung
Radio
Schulen
Glaube
Organisationen
Restaurant
Lebensmittel
Selbst erstellen
Mitarbeiterkommunikation
NO CODE APP BUILDER
TECHNOLOGIE
WARUM GOODBARBER?
Design
PRODUKTRESSOURCEN
THEMEN
WIEDERVERKÄUFER MOBILER APPS
ENTDECKENItem: das Element, das jeden Tab Ihrer App gestaltet
In einer GoodBarber-App beruht jeder Tab der Navigationsleiste auf demselben Element: dem Item, das ein Icon, eine Beschriftung und einen Indikator vereinen kann. Wir haben es entworfen, um unsere TabBars von heute und morgen zu gestalten. Jetzt ist es im GoodBarber Design System dokumentiert.
Ihre Inhalte sind sorgfältig gestaltet, Ihre Farben gewählt. Bleibt die Navigationsleiste: Über sie wechseln Ihre Nutzer von einem Bereich zum nächsten, und sie prägt maßgeblich den Eindruck, den Ihre App hinterlässt. Jeder ihrer Tabs beruht auf einem Element, das als Baustein konzipiert ist: dem Item. In der neuen TabBar-Generation verleiht es jeder Navigation ihren Charakter.
Ein Icon, eine Beschriftung, ein Indikator
In einem Item hat jedes Element seine Rolle. Das Icon steht für den Bereich, die Beschriftung zeigt seinen Namen, und der optionale Indikator markiert den aktiven Tab. Jedes Element lässt sich einzeln ein- oder ausblenden. Daraus ergeben sich drei Kompositionen: Icon und Beschriftung, nur Icon, nur Beschriftung.
Genau das unterscheidet die Minimal TabBar, ganz in Icons, von der Clean TabBar, ganz in Text: dasselbe Element, anders zusammengesetzt.
17 Eigenschaften für die TabBars von heute und morgen
Um eine TabBar zu gestalten, stehen den Designern von GoodBarber 17 Eigenschaften zur Verfügung: 8 für das Item, 6 für sein Icon und 3 für seine Beschriftung. Die Fläche des Items kann eine Volltonfarbe, einen Verlauf oder einen Unschärfeeffekt tragen, dazu einen Rahmen, einen Schatten, spitze oder abgerundete Ecken. Das Layout bestimmt Größe und Ausrichtung, den Innenabstand, der die Touch-Fläche festlegt, und den Abstand, der seinen Elementen Luft zum Atmen lässt.
All diese Möglichkeiten müssen Sie nicht selbst einstellen. Wir nutzen sie, um vollständige TabBar-Layouts zu komponieren, die den aktuellen Codes des App-Designs folgen: Bold, Minimal und Clean TabBar sind die ersten drei. Wenn sich diese Codes weiterentwickeln, entstehen aus demselben Element neue Layouts, ohne bei null anzufangen. So können wir Ihnen TabBars anbieten, die immer am Puls der Zeit sind.
In Ihrem Back Office wählen Sie Ihre TabBar und stimmen sie dann auf Ihre Identität ab: Größe der Tabs, Eckenradius, Farben, Schriftart der Beschriftungen, die Art, wie der aktive Tab hervorgehoben wird. Ihre eigenen Icons können sogar neben den System-Icons stehen.
Wie das Item den aktiven Tab hervorhebt
Ein Item hat zwei Zustände: Standard und ausgewählt. Um den aktiven Tab hervorzuheben, stehen ihm vier Mittel zur Verfügung, einzeln oder kombiniert: Farbe, Hintergrund, Rahmen und Indikator. Der Indikator erscheint nur auf dem ausgewählten Tab, in drei Formen: als Punkt (Dot), als kurzer Strich (Tiny) oder als Linie (Line).
Jede Form hat ihre eigene Bewegung. Punkt und Linie schrumpfen auf dem vorherigen Tab und wachsen auf dem neuen, der kurze Strich gleitet von einem zum anderen. Läuft die Auswahl über den Hintergrund, wie bei der Bold TabBar, verschiebt sich der farbige Hintergrund. Kurze Übergänge, die jeden Wechsel lesbar machen, ohne zu übertreiben.
Dasselbe Item, vom Smartphone bis zum Desktop
Das Item passt Ausrichtung, Innenabstand und Abstände an jeden Bildschirm an: Smartphone, Tablet und Desktop. Am unteren Rand eines Smartphones steht das Icon über der Beschriftung. Auf dem Desktop wird die TabBar zur Seitenleiste, und das Item kann in die Horizontale wechseln, um sich dort einzufügen. Sie richten Ihre Navigation nur einmal ein: Jeder Bildschirm erhält die passende Version.
Das Item auf einen Blick
- 3 Elemente: ein Icon, eine Beschriftung, ein Indikator (optional).
- 3 Kompositionen: Icon und Beschriftung, nur Icon, nur Beschriftung.
- 17 Gestaltungseigenschaften: 8 für das Item, 6 für sein Icon, 3 für seine Beschriftung.
- 2 Zustände: Standard und ausgewählt.
- 4 Mittel, um den aktiven Tab hervorzuheben: Farbe, Hintergrund, Rahmen, Indikator.
- 3 Indikatoren, jeder mit eigener Animation: Dot, Tiny, Line.
- 3 Bildschirme: Smartphone, Tablet, Desktop.
Das Item zieht ins Design System ein
Nach der TabBar hat nun auch das Item seine eigene Seite im GoodBarber Design System, und es kommt nicht allein. Mit Item Icon, Item Label und Item Indicator eröffnet es eine neue Kategorie: die UI Elements, die Bausteine unserer Komponenten, jeder mit genau einer Aufgabe.
Wenn Sie das Item im Detail kennenlernen möchten, besuchen Sie seine Seite im Design System. Und um es in Aktion zu sehen, wählen Sie in Ihrem Back Office im Bereich Menü Ihre TabBar. Noch keine GoodBarber-App? Erstellen Sie Ihre eigene.
