--- title: "iPhone Duo: Wohin die Leisten Ihrer GoodBarber-App wandern" description: "Auf dem iPhone Duo wandern die Leisten Ihrer GoodBarber-App in eine Rail entlang der Kamera, in Ihren Farben: Ein neuer Build genügt." canonical_url: "https://de.goodbarber.com/blog/iphone-duo-wohin-die-leisten-ihrer-app-wandern-a1504/" lang: de date: 2026-11-12 last_updated: 2026-11-12 --- # iPhone 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. ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) [Lesia PIETRI](https://de.goodbarber.com/blog/author/lesia-pietri/)Head of Product Design [Wähle **GoodBarber** als deineBevorzugte NachrichtenquelleWähle **GoodBarber** als deine](https://www.google.com/preferences/source?q=goodbarber.com) 12. Nov. 2026 · 5 Min. Lesezeit ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98656946-68861190.jpg?v=1794301577.3534307) 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 ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98656946-68861191.jpg?v=1794302173.025081) 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 [Das zugeklappte iPhone Duo dreht sich zur einen und dann zur anderen Seite: Die Rail folgt der Kamera, die Icons bleiben aufrecht.](https://player.vimeo.com/video/1245376868?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1) 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 [Das aufgeklappte iPhone Duo wechselt vom Quer- ins Hochformat: Die Leisten verlassen die Rail und kehren nach oben und unten zurück.](https://player.vimeo.com/video/1245376869?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&dnt=1) 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 ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98656946-68861194.jpg?v=1794301969.3358648) 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 ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98656946-68861195.jpg?v=1794301582.4894638) 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](https://de.goodbarber.com/blog/tabbar-eine-neue-generation-ist-da-a1347/), 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 ![](https://cmsphoto.ww-cdn.com/superstatic/129568/art/grande/98656946-68861196.jpg?v=1794301583.6494713) 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](https://de.goodbarber.com/iphone-duo/?utm_campaign=iphone-duo) auf und zu. Was sich für Ihre App von einem Display zum anderen ändert, steht in [unserem Launch-Artikel](https://de.goodbarber.com/blog/iphone-duo-das-faltbare-iphone-was-es-fur-ihre-app-andert/). Die Regeln von Apple und ihre Quellen sind auf Englisch auf den DuoApps-Seiten [Where the bars go](https://duoapps.com/patterns/where-the-bars-go/) und [Custom bars](https://duoapps.com/patterns/custom-bars/) gesammelt. Und wenn Sie noch keine App haben, [erstellen Sie Ihre eigene](https://de.goodbarber.com/create/?utm_campaign=iphone-duo). Folgen Sie GoodBarber auf Google [![Als bevorzugte Quelle auf Google hinzufügen](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-de.04f86d346fa5.png)](https://www.google.com/preferences/source?q=goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/e1/e1822db470e60d090affd0956d743cb0e7cdf113-default.jpg) Über den Autor Lesia PIETRI Head of Product Design Ich bin Head of Product Design bei GoodBarber. Ich verantworte das Design des Produkts: das Design System, auf dem jede App aufbaut, die Layouts als Ausgangspunkt und den Weg von der ersten Idee bis zur veröffentlichten App. Mein Anspruch: Auch wer noch nie ein Design-Tool geöffnet hat, veröffentlicht eine App, die auf jedem Screen durchdacht wirkt. Als Designer aus Leidenschaft verbringe ich meine Tage mit den Details, die niemand benennt: Abstände, Kontraste, das Gewicht einer Überschrift. Hier schreibe ich über das Design von GoodBarber und über die Neuheiten des Produkts: die Features, die Layouts und die Themes. [Mehr von Lesia](https://de.goodbarber.com/blog/author/lesia-pietri/)[LinkedIn](https://www.linkedin.com/in/lesia-pietri-150824116/)