Navigation der App

Die Bildschirme sind die Seiten; die Navigation ist das, was die Menschen zu ihnen bringt. In Keplin lebt sie in keinem Bildschirm: Sie ist ein eigenes Dokument der App, in einem visuellen Editor entworfen und um jeden gerade geöffneten Bildschirm herum ausgeliefert.

Und sie wird pro Gerät entworfen: Die obere Leiste des Computers, die Schublade des Handys und die Aktionsleiste des Tablets sind drei unabhängige Designs, jedes mit seinen eigenen Menüs.

#Den Editor öffnen

In der Seitenleiste der App, Tab UI, heißt der erste Eintrag Navigation. Klicken Sie darauf und er öffnet sich in einem Tab des Arbeitsbereichs.

Was in der Mitte zu sehen ist, ist kein Formular: Es ist die Seite der App, gezeichnet, wie sie aussehen wird. Die Leiste oben, der Inhalt des Bildschirms darunter (Inhalt des Bildschirms), die Marke links. Sie bearbeiten, indem Sie direkt daran arbeiten.

Unter dem Titel stehen die Steuerelemente, die bestimmen, was Sie sehen:

Steuerelement	Was es tut
Web (1280px) / Tablet (768px) / Mobil (390px)	Wählt das Gerät, das Sie gerade entwerfen.
Modus (nur Tablet und Handy)	Die Form der Navigation auf diesem Gerät.
Startmenü	Welches der Menüs öffnet, wenn jemand die App betritt.

#Die Gesten

Geste	Was passiert
Klick auf ein Menü	Wählt es aus (und zeigt, bei einem Kontext, seine Sidebar).
Doppelklick auf ein Menü	Öffnet das Fenster Ausgewählter Eintrag, in dem alles bearbeitet wird.
Ziehen eines Menüs	Verschiebt es in eine andere Zone oder ordnet es neu. Es lässt sich nur dort ablegen, wo es gültig ist.
+	Fügt an dieser Stelle ein Menü hinzu.
× in der Ecke eines Menüs	Entfernt es.
Klick auf die Marke	Öffnet das Fenster Logo der App.

#Die Menütypen

Der Button + jeder Zone zeigt die Typen, die diese Stelle akzeptiert:

Typ	Was es ist
Menü	Führt zu einem Bildschirm der App. Der normale Eintrag.
Untermenü	Gruppiert andere Menüs — in der Schublade und in den Sidebars.
Kontext (Sidebar)	Ein Menü, das, wenn gewählt, eine eigene Sidebar mit seinen Kindern aktiviert. Als würde es die App in Bereiche teilen.
Trennlinie	Eine Trennlinie.
Benutzermenü	Der Avatar dessen, der die App nutzt, mit seinen Einträgen und dem Abmelden.
Benachrichtigungen	Die Glocke, mit der automatischen Zählung der Ungelesenen.

Nicht alle Typen passen an alle Stellen, und der Editor bietet nur die gültigen an: Ein Kontext kann keinen anderen Kontext enthalten, ein Untermenü nimmt nur Einträge auf, das Benutzermenü nimmt nur Einträge und Trennlinien, und die Schublade des Handys hat keine Kontexte (verwenden Sie Untermenüs).

#Die Zonen der Leiste

In der oberen Leiste ordnen sich die Menüs in drei Zonen, und der Hinweis im Editor sagt das Wesentliche: Ziehen Sie die Menüs zwischen den Zonen der Leiste (links / Mitte / rechts), um Gruppen zu bilden.

Zone	Übliche Verwendung
Gruppe links	Die Hauptnavigation, gleich nach der Marke.
Gruppe in der Mitte	Eine hervorgehobene Gruppe. Bleibt sie leer, nimmt sie keinen Platz ein.
Gruppe rechts	Das Benutzermenü, die Glocke, Verknüpfungen.

Innerhalb der Sidebar eines Kontexts — und in der Schublade — sind es zwei Zonen: Gruppe oben und Unten (diese klebt am unteren Rand, damit „Einstellungen" und „Hilfe" dort stehen, wo man sie erwartet).

#Ein Menü erstellen

1. Wählen Sie das Gerät in der Kontextleiste.
2. Klicken Sie auf das + der Zone, in der Sie es haben wollen.
3. Wählen Sie den Typ.
4. Das Menü entsteht mit einem generischen Namen und ist ausgewählt — machen Sie einen Doppelklick darauf, um das Fenster Ausgewählter Eintrag zu öffnen.
5. Füllen Sie aus:

Feld	Was es ist
Symbol	Ein Symbol aus der Bibliothek oder ein SVG aus den Assets der App.
Name des Menüs	Der Text, der erscheint. Er ist ein Satz der App — er geht in die Übersetzungen ein.
Bildschirm…	Der Ziel-Bildschirm (nur bei Menü).
(Parameter)	Wenn der Ziel-Bildschirm Routen-Parameter hat, erscheint ein Feld pro Parameter, um ihm einen festen Wert zu geben.
Nur Symbol (der Name erscheint als Tooltip)	Lässt nur das Symbol in der Leiste.

6. Schließen Sie mit Fertig und speichern Sie mit Speichern.

Der Button Eintrag löschen, im selben Fenster, löscht das Menü.

#Kontexte und Sidebars

Ein Kontext (Sidebar) ist die Art, einem Bereich der App ein eigenes Menü zu geben: Sie wählen „Vertrieb" in der oberen Leiste, und links erscheint die Sidebar mit den Vertriebs-Bildschirmen. Die Kinder des Kontexts sind die Einträge dieser Leiste.

Im Fenster des Kontexts stellt der Abschnitt Sidebar dieses Kontexts sie fein ein:

Feld	Optionen
Verhalten	Fest (immer offen) · Einklappbar (Button klappt auf Symbole ein) · Mini (Symbole; klappt beim Überfahren aus) · Mini mit Panel (Hover öffnet den Baum des Menüs)
Breite	Zwischen 180 und 400 Pixeln.
Beim Ausklappen (nur im Mini-Modus)	Überlagert den Inhalt oder Schiebt den Inhalt.
Startet eingeklappt (nur im einklappbaren Modus)	Wie sie beim ersten Mal öffnet.

#Das Benutzermenü

Das Benutzermenü ist ein Eintrag wie die anderen — es kann in der oberen Leiste stehen, innerhalb eines Kontexts, in der Schublade oder in der kompakten Leiste. Es auszuwählen öffnet sein Popup, und dort fügt man mit dem + Einträge hinzu (Menü oder Trennlinie).

Im Fenster stehen die Optionen, die nicht visuell sind:

Option	Was sie tut
Namen anzeigen	Der Name dessen, der die App nutzt, erscheint in der Kopfzeile des Menüs.
Benutzernamen anzeigen (Login)	Zusätzlich der Benutzername.
Option „Abmelden“	Nimmt den Ausstieg ans Ende des Menüs auf.
Text für „Abmelden“	Ein eigener Text; leer verwendet Die des Systems (übersetzt).

Ohne Symbol zeigt der Avatar die Initialen des Namens — genau das nennt der Symbol-Selektor Kein Symbol (Initialen).

#Benachrichtigungen

Der Eintrag Benachrichtigungen ist die Glocke: nur Symbol, mit der Pill der Ungelesenen, die sich von selbst aktualisiert. Der Klick öffnet die letzten Benachrichtigungen, und Mehr anzeigen öffnet das Panel mit allen. Im Fenster entscheidet Benachrichtigungen im Dropdown, wie viele jeweils erscheinen (zwischen 1 und 20).

#Wert-Pills

Jedes Menü (außer Trennlinien und der Glocke) kann eine Pill mit einer lebenden Zahl zeigen — die unbearbeiteten Bestellungen neben „Bestellungen", die offenen Anträge neben „Freigaben".

1. Schalten Sie im Fenster des Eintrags Pill mit Wert anzeigen ein.
2. Wählen Sie die API, die die Daten bringt (API auswählen…).
3. Wählen Sie unter Wert die Option Anzahl (Zahl der Datensätze) oder Feld des 1. Datensatzes — in diesem Fall geben Sie auch das Feld an.
4. Bei leerem Wert oder null ausblenden verhindert eine Pill, die „0" sagt.

Die Pill aktualisiert sich in Echtzeit: Wenn die Daten sich ändern, ändert sich die Zahl — ohne dass jemand die Seite neu lädt.

#Das Logo der App

Klicken Sie auf die Marke, links in der Leiste, um das Fenster Logo der App zu öffnen:

Feld	Was es tut
Symbol oder Bild	Wählt ein Symbol aus der Bibliothek oder eine Datei aus den Assets der App.
Namen der App anzeigen	Der Name neben der Marke.
Ausschnitt in der Leiste	Nur für SVG: Skalierung, Breite der Box, und die Positionierung durch Ziehen des Bildes.
An die Box anpassen	Setzt Skalierung und Position zurück.
Kein Ausschnitt	Schaltet den Ausschnitt aus.

Der Ausschnitt ist die Antwort auf das Logo, das „nicht passt": Sie ziehen und skalieren, bis es gut in der Leiste sitzt, und das Fenster selbst versichert, dass die SVG-Datei unangetastet bleibt — der Zuschnitt ist rein visuell und umkehrbar. Für andere Formate erklärt die Notiz, dass der Ausschnitt nur für SVG verfügbar ist.

#Startmenü

Startmenü, in der oberen rechten Ecke, entscheidet, womit die App öffnet. Gewählt wird eines der Menüs (kein loser Bildschirm), und zwar pro Gerät — das Handy kann in einem anderen Panel öffnen als der Computer.

Hat ein Gerät keine eigene Wahl, erbt es die des nächsten (Handy → Tablet → Web); und gibt es gar keine, öffnet die App im ersten Menü, das zu einem Bildschirm führt.

#Ein Design pro Gerät

Das Web ist immer eine obere Leiste. Tablet und Handy haben einen Selektor Modus:

Modus	Wie es aussieht
Obere Leiste (nur Tablet)	Wie am Computer: Marke, Menüs und Kontexte in einer Leiste.
Hamburger-Menü	Eine kompakte Leiste mit dem Button ☰, der die Schublade mit dem Menübaum öffnet.
Aktionsleiste	Eine Leiste unten, im Stil einer mobilen App, mit bis zu 5 Einträgen — und ohne Schublade.

In den kompakten Modi gibt es noch zwei eigene Reihen:

• Den Header — bis zu 4 Aktionen neben der Marke (das Benutzermenü und die Glocke sind hier gut aufgehoben).
• Die Aktionsleiste — bis zu 5 Einträge unten, jeder ein Button oder ein Aktionsmenü.

Wenn die Grenze erreicht ist, sagt die Plattform warum: Die Aktionsleiste hat bereits 5 Einträge (Maximum). / Der Header fasst höchstens 4 Aktionen.

#Wer was sieht

Der Editor entwirft; wer entscheidet, wer welches Menü sieht, ist Einstellungen der App ▸ Berechtigungen, im Tab Menüs — pro Rolle und pro Gerät.

Die Regel ist es wert, sie zu kennen: Anders als die Bildschirme ist ein Menü standardmäßig sichtbar. Die Tür ist der Bildschirm, und die ist schon zu; das Menü zu verbergen dient dazu, eine ganze Gruppe aus dem Blickfeld zu nehmen, oder die Glocke dem zu nehmen, der nichts empfängt. Eine Gruppe zu verbergen nimmt die Kinder mit, und ein Eintrag, der auf einen unzugänglichen Bildschirm zeigt, verschwindet von selbst.

#Warum nicht…?

• Warum sind meine Änderungen verschwunden? Sie wurden nicht gespeichert. Die Navigation hat einen Button Speichern — und sie warnt, bevor Sie einen Tab mit ungespeicherten Änderungen schließen.
• Warum kann ich das Menü nicht dort ablegen, wo ich will? Diese Stelle akzeptiert diesen Typ nicht. Ungültige Ziele leuchten gar nicht erst auf: ein Kontext in einem Kontext, ein Untermenü in einem Benutzermenü, eine Trennlinie in der oberen Leiste.
• Warum sehe ich die Menüs auf dem Handy nicht? Das Handy hat einen eigenen Baum, und der kann leer sein. Wählen Sie Mobil (390px) und entwerfen Sie ihn.
• Warum ist ein Menü in der veröffentlichten App verschwunden? Entweder wurde es unter Einstellungen ▸ Berechtigungen ▸ Menüs für diese Rolle verborgen, oder es zeigt auf einen Bildschirm, zu dem diese Person keinen Zugriff hat.
• Warum erscheint das Logo beschnitten? Es hat einen Ausschnitt. Öffnen Sie das Fenster und verwenden Sie An die Box anpassen, oder Kein Ausschnitt.
• Warum kann ich den Typ eines Menüs nicht ändern? Das ändert man nicht. Löschen und mit dem richtigen Typ neu erstellen — das ist die einzige Operation, die die Plattform Sie nicht auf halbem Weg machen lässt.
• Warum zeigt die Pill immer 0? Schalten Sie Bei leerem Wert oder null ausblenden ein, oder prüfen Sie, ob die gewählte API wirklich Datensätze zurückgibt.