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
ENTDECKENiPhone Duo: Wohin die Leisten Ihrer App wandern
Auf dem iPhone Duo ordnet Apple die Bedienelemente in einer Spalte entlang der Kamera an. Diese Rail baut das System nur für seine eigenen Leisten: Für die Leisten einer GoodBarber-App musste sie gestaltet werden. Eine einzige Breite, nur Icons, Kapseln in den Farben Ihrer App: Ihre Nutzer behalten ihre Orientierung, und Sie müssen Ihre App nur neu kompilieren.
Das äußere Display des iPhone Duo ist breiter und niedriger als das eines iPhone. Apple hat daraus eine einfache Regel abgeleitet: Navigationsleiste, TabBar und Buttons verlassen den oberen und unteren Bildschirmrand und bilden eine Spalte an der Seite, zusammen mit der Statusleiste und der Kamera. Die Höhe gehört wieder dem Inhalt, und die Bedienelemente bleiben in Reichweite. Apple nennt diese Spalte „vertical controls“.
Das System verschiebt allerdings nur seine eigenen Leisten. Die Leisten einer GoodBarber-App stammen aus ihrem Design-System, und das System lässt sie dort, wo die App sie platziert hat. Die Frage war also zuerst eine Designfrage: Was wird aus einer TabBar, wenn sie von einer Zeile zu einer Spalte wird, und wie bleibt eine App in einem so schmalen Streifen erkennbar? Die Rail sollte die App bleiben und keine Apple-Leiste werden.
iPhone Duo zugeklappt: eine Rail entlang der Kamera
Die erste Designentscheidung für GoodBarber-Apps: eine einzige Breite für alles, was in die Rail des iPhone Duo kommt, die Breite einer Verknüpfung, mit dem Icon in der Mitte. Zurück, Suche, Favoriten und jeder Tab der TabBar passen in dasselbe Feld, und die Spalte liest sich in einem Zug. Die Rail trägt nur Icons; ihre Namen verschwinden dadurch nicht, VoiceOver liest sie vor. Bei Eastside, der Demo-App einer Musikschule, bleibt die Spalte ruhig und lässt den Farben der Mitteilungen den Vortritt.
Die zweite Entscheidung stammt von Apple: Was oben war, bleibt oben, was unten war, bleibt unten. Zurück und die Verknüpfungen eröffnen die Spalte, die TabBar schließt sie ab. Wer die App von seinem Smartphone kennt, muss nichts neu lernen: Die Landkarte der App bleibt dieselbe, sie hat sich nur gedreht.
Drehen Sie das Telefon, und die Rail wechselt die Seite
Im Querformat nimmt das zugeklappte iPhone Duo seine Rail mit der Kamera mit: in der einen Richtung nach rechts, in der anderen nach links. Die Icons bleiben aufrecht, und der Inhalt ordnet sich um sie herum neu an. Diese Seite gehört zum Gerät: Eine App auf Arabisch oder Hebräisch behält ihre Rail an der Kamera.
Aus der Nähe ist das ein Detail; im Gebrauch macht es die Geste natürlich. In einer Oberfläche bemerkt man, was sich der Geste widersetzt. Eine Rail, die dem Gerät folgt, fällt nicht mehr auf, und genau das verlangen wir von ihr.
iPhone Duo aufgeklappt: die Rail im Querformat, die Leisten im Hochformat
Aufgeklappt im Querformat behält das innere Display des iPhone Duo die Rail; ins Hochformat gedreht, ist es die einzige Ausrichtung, in der die Leisten nach oben und unten zurückkehren. Bei Tweed & Cheviot, der Demo-App einer naturkundlichen Gesellschaft, wandern Suche und Favoriten zurück in die Navigationsleiste, und die TabBar kehrt nach unten zurück.
Der Wechsel könnte verwirren, und die Reihenfolge verhindert es: Was die Rail eröffnete, eröffnet die Leiste, und die Tabs behalten ihre Abfolge. Ein Bedienelement findet man über seinen Platz unter den anderen weit mehr als über den Rand, an dem es hängt.
Im Hochformat bleibt auch die Navigationsleiste beim Scrollen an ihrem Platz. Würde sie sich ausblenden, liefe der Text unter die Uhrzeit, die in der Ecke des Bildschirms sitzt. Solange die Orientierungspunkte halten, kann der Bildschirm seine Form ändern, so oft er will.
Im Artikel behält die Rail nur die Werkzeuge für den Text
In einem Artikel behält eine GoodBarber-App auf dem iPhone Duo nur, was dem Text dient. Die TabBar tritt zurück, wie auf dem Smartphone, sobald ein Bildschirm eine Zurück-Taste hat; diese Taste rückt allein an die Spitze der Rail, und eine Kapsel unten versammelt die Werkzeuge des Lesers: kommentieren, teilen, die Schrift vergrößern, für später merken. Aktionen, die zusammengehören, teilen sich eine Kapsel. Beim Öffnen des Artikels wechseln die Kapseln der Rail mit einer Überblendung, im Takt der hereinkommenden Seite: Die Rail folgt der Navigation in einer einzigen Bewegung.
Das Titelfoto dagegen reicht bis an den oberen Bildschirmrand und läuft unter der Rail hindurch. Die Icons einer transparenten Leiste sind oft hell, gemacht für ein Bild; ohne Hintergrund stünden sie am Ende weiß auf einer weißen Seite. Deshalb behält jede Kapsel einen Hintergrund, weder reines Weiß noch reines Schwarz, sondern einen gedämpften Ton, eingefärbt mit der Farbe ihrer Icons, mit dem Kontrast, den die Barrierefreiheit verlangt. Der richtige Kontrast statt des stärksten: Ein nuancierter Hintergrund wirkt sorgfältiger.
Die Leisten Ihrer App, in Ihren Farben
In einer GoodBarber-App zeichnet die App jede Leiste selbst: Sie trägt ihre eigenen Farben und ihre eigene Form, und die Rail behält sie bei. Jede Kapsel übernimmt den Hintergrund der Leiste, aus der sie kommt. Ihre Form folgt der Ihrer TabBar, von eckig bis zur Pille, auf allen Bildschirmen der App, auch dort, wo die TabBar nicht erscheint. Nebeneinander sprechen die Rails von Eastside, Tweed & Cheviot und The Current nicht dieselbe Bildsprache, und das ist gewollt.
Die Engine von GoodBarber erledigt den Rest. Sie fragt beim System den Platz für eine Leiste auf dieser Seite an, der die Kamera bereits ausspart, und setzt die Kapseln dort in der Reihenfolge des Bildschirms ein. Die Rail folgt dem Design, das Sie schon haben, ohne zusätzliche Einstellung.
Was Sie noch tun müssen: Ihre iOS-App neu kompilieren
Kompilieren Sie Ihre iOS-App im Backoffice neu, damit sie die Rail erhält; das Update erreicht Ihre Nutzer, sobald es nach der Prüfung durch den App Store veröffentlicht ist. Nichts neu zu gestalten, nichts einzustellen. Ihre Android-App, Ihre PWA und Ihre iPad-App bleiben, wie sie sind.
Um die Rail in Bewegung zu sehen, klappen Sie das iPhone Duo auf unserer iPhone-Duo-Seite auf und zu. Was sich für Ihre App von einem Display zum anderen ändert, steht in unserem Launch-Artikel. Die Regeln von Apple und ihre Quellen sind auf Englisch auf den DuoApps-Seiten Where the bars go und Custom bars gesammelt. Und wenn Sie noch keine App haben, erstellen Sie Ihre eigene.
