Droppath 6.0: Unser Weg zu Liquid-Glass

Authors

Mit der Veröffentlichung von iOS 26 führte Apple Liquid Glass ein, eine bedeutende Weiterentwicklung der Ästhetik und Designsprache der Plattform. Dieser Fortschritt geht über die visuelle Auffrischung von Kern-UI-Komponenten wie Schaltflächen und Symbolleisten hinaus; er definiert grundlegende Schnittstellenparadigmen neu und erfordert von Entwicklern eine kritische Anpassung ihrer Anwendungen. Hier skizzieren wir unseren Ansatz und die technischen Überlegungen, die wir bei der Migration von Droppath Route Planner zum Liquid Glass-Schnittstellenstandard unternommen haben.

Unsere anfängliche Reaktion auf Liquid Glass wurde durch frühere Erfahrungen mit umfassenden Apple-Design-Übergängen geprägt, insbesondere der iOS 7-Überholung. Damals führten grundlegende Änderungen an den System-UI-Standards zu erheblichen Regressionen und Instabilität, die umfangreiche Eingriffe zur Wiederherstellung früherer Verhaltensweisen erforderten. Im Gegensatz dazu bietet Apples Implementierung für Liquid Glass einen kontrollierten Opt-in-Migrationspfad (siehe die Dokumentation für UIDesignRequiresCompatibility), der das Risiko erheblich reduziert. Unsere vorläufigen Integrationen mit Xcode 26 haben nur geringfügige Ausrichtungsinkonsistenzen aufgedeckt: speziell die Fehlplatzierung des Titels eines Dialogs. Glücklicherweise mussten wir keine dringende Veröffentlichung mit XCode 26 vornehmen, aber es war beruhigend, diese Option zur Verfügung zu haben, falls sie benötigt würde.

Nach Beispielen suchen #

Ein grundlegender Aspekt jeder Design-Migration ist die Verfügbarkeit von Referenzpunkten im eigenen Ökosystem von Apple. Erstanbieter-Anwendungen boten wesentliche Anleitungen zu Best Practices und Interaktionsmodellen. Beispielsweise wurden wir bei der Bewertung von Präsentationsstrategien für Benutzerprofile und Einstellungen von der Musik-App inspiriert. Ähnlich haben wir für Verfeinerungen der Suchschnittstelle Ansätze in Musik, Mail und Dateien verglichen; letztendlich passte die Designsprache von Dateien am besten zu unseren UX-Zielen, insbesondere in Bezug auf die Platzierung von Suchergebnissen relativ zum Suchfeld. Ergebnisse über der Suchleiste zu haben, ist einfach nicht natürlich genug für uns.

Screenshot von Musik und Dateien mit umgekehrter Suchreihenfolge

Das Ende der farbigen Navigationsleisten #

Die veraltete farbige Navigationsleiste, ein Markenzeichen früherer UI-Paradigmen, erwies sich als inkompatibel mit dem neuen Liquid Glass-Look. Die lebendigen Hintergründe führten zu übermäßigem Kontrast und visueller Disharmonie gegen die durchscheinenden Schaltflächen von Liquid Glass. Unsere Lösung bestand darin, zu einer weißen Navigationsleiste überzugehen, die Konsistenz mit dem neuen Tab-Leisten-Verlauf lieferte und das Gesamtbild der App vereinheitlichte.

Screenshot von Droppath mit neuer weißer Navigationsleiste und Liquid Glass-Oberfläche

Aktionsplatzierung überdenken #

Liquid Glass überdenkt Tab-Leisten und reduziert ihre Größe am unteren Bildschirmrand, wodurch mehr sichtbarer Inhalt ermöglicht wird. Diese Verschiebung veranlasste uns, die Material Design-Elemente, insbesondere Floating Action Buttons (FABs), die wir übernommen hatten, zu überdenken. Die zuvor prominent positionierten FABs erschienen inkongruent neben der überarbeiteten, schlankeren Tab-Leiste. Die neuen Designrichtlinien erlauben jedoch prominente Aktionsschaltflächen in der Navigationsleiste selbst. Droppath zentralisiert nun Schlüsselaktionen in diesem Bereich und gruppiert Aktionen unter Beibehaltung von Sinn und Zugänglichkeit.

Screenshot von Droppath mit durch prominente Navigationsleistenschaltflächen ersetztem FAB

In der Kartenansicht ermöglichte uns die Neupositionierung der Schaltflächen oben rechts, sie ordentlich neben den Kartenaktionen zu organisieren. Ihr prominenteres Erscheinungsbild macht deutlich, was Ihr nächster Schritt sein sollte.

Screenshot von Droppath mit seinem alten und neuen Kartenlook

Fehlendes UI-Muster: Ansichtsmodus-Umschaltung #

Ein komplexer Aspekt der Schnittstelle von Droppath war die doppelte Verwendung von Tabs: sowohl als Modusumschalter (Listen- versus Kartenansichten) als auch als Navigation für angeheftete Ordner (lokale versus Cloud-synchronisierte Routen). Während die Ordnernavigation zu Recht zum Tab-Modell passt, weicht die Verwendung von Tabs zur Ansichtsmodusauswahl von etablierten iOS-Konventionen ab. Auf Android wird dieser Umschalter mit einer Navbar-Schaltfläche gehandhabt, aber dies schränkt die Auffindbarkeit ein. Im Gegensatz dazu funktionieren iOS-Tab-Leisten am unteren Bildschirmrand als effektive, zugängliche segmentierte Selektoren für unseren Kontext.

Screenshot der Droppath-Tableiste als segmentiertes Steuerelement verwendet

Bei der Analyse von Apples Fotos- und Dateien-Apps haben wir unterschiedliche Methodologien beobachtet. Fotos verwendet einen zentral platzierten Umschalter, während Dateien die Ansichtsumschaltung in ein Menü unter den Auslassungspunkten verlagert und dabei Auffindbarkeit gegen Menüeinfachheit eintauscht. Unsere Benutzerdaten erfordern ein häufiges Umschalten zwischen Karten- und Listenmodus, was uns dazu veranlasst, den segmentierten Tab-Ansatz beizubehalten, trotz seiner atypischen Verwendung, da die Minimierung von Störungen während großer UI-Übergänge oberste Priorität hat.

Verlagerung sekundärer Inhalte #

Um die semantische Klarheit in unserer Tab-Struktur aufrechtzuerhalten, haben wir die Account- und Hilfe-Bildschirme in die obere rechte Ecke verschoben, was die Organisation widerspiegelt, die in Apples Musik-App zu finden ist. Schließlich müssen Benutzer selten auf die Einstellungen ihres Kontos zugreifen, warum sollte man sofortigen Zugriff über die Tab-Leiste bereitstellen! Während Droppath derzeit keine von Benutzern hochgeladenen Profilbilder besitzt, ist das SF-Symbol ein erkennbares Platzhalter-Symbol – das wir bereits anderswo verwendeten – wird ausreichen müssen.

Screenshot der Droppath-Tableiste mit einer Account-Schaltfläche

Die Benutzeroberfläche fühlt sich lebendig und reaktionsschnell an #

Die Einführung von Liquid Glass brachte ein neues Maß an Reaktionsfähigkeit und Lebendigkeit für Schnittstellensteuerelemente. Schaltflächen, die nicht für Liquid Glass aktualisiert wurden, fielen sofort auf – sie erschienen statisch und uninteressant im Vergleich zu ihren revitalisierten Gegenstücken.

Sogar die Tab-Leisten-Schaltflächen erweitern und verschmelzen sich jetzt sanft, wenn Benutzer sie antippen, was das Gefühl flüssiger Interaktion verstärkt, das für Liquid Glass charakteristisch ist.

Screenshot von Droppath mit hervorgehobenen Tab-Leisten-Schaltflächen

Screenshot von Droppath mit hervorgehobenen Schaltflächen

Code-Herausforderungen #

SwiftUI-Integration #

Die Implementierung der Unterstützung für Liquid Glass in unseren SwiftUI-Komponenten brachte eine einzigartige Reihe von Herausforderungen mit sich. Um zu verhindern, dass Logik über mehrere #available(iOS 26.0, *)-Codepfade dupliziert wird, haben wir Versionsprüfungen konsolidiert und Stiländerungen in Hilfsmethoden wie glassProminentStyleIfPossible() gekapselt. Trotzdem haben wir immer noch etwa 20 separate Verfügbarkeitsbedingungen in der gesamten Codebasis gezählt – eine notwendige Ebene, um Rückwärtskompatibilität aufrechtzuerhalten und gleichzeitig neue visuelle Anforderungen einzuhalten. Mit etwas Glück werden wir für viele Jahre keinen weiteren umfassenden UI-Übergang dieser Größenordnung erleben.

Sheet-Präsentation #

Unser Fahren-Bildschirm basiert auf System-Sheets, aber ihr Aussehen war unter Liquid Glass schrecklich. Die benutzerdefinierten Wischgesten, die wir unterstützen – die Links/Rechts-Übergänge zwischen Stopps innerhalb eines Sheets ermöglichen – sind keine von iOS-Sheets nativ unterstützten Verhaltensweisen. Infolgedessen erforderte die Anpassung unserer Fahr-Sheets für das neue Design zusätzlichen technischen Aufwand, um den beabsichtigten Navigationsfluss wiederherzustellen. Stellen Sie sicher, dass Sie alle Funktionen Ihrer App vor dem Versand testen.

Screenshot von Droppath mit Problemen bei seinen Sheets

Die visuelle Ausrichtung der Symbolleiste unseres Navigationscontrollers mit Liquid Glass erwies sich als kniffliger als erwartet. Die Standard-Symbolleistenplatzierung war unter der Tableiste, also haben wir eine benutzerdefinierte Symbolleiste eingeführt, sie positioniert und gestylt, um die korrekte Platzierung sicherzustellen.

Screenshot von Droppath mit Navcontroller-Symbolleiste

Verbessertes Input-Accessory #

Viele Droppath-Benutzer geben regelmäßig sowohl Zahlen als auch Buchstaben ein, daher fügen wir zur Bequemlichkeit ein numerisches Input-Accessory über der Tastatur hinzu. Diese benutzerdefinierte Reihe ist aus einer lokal gepflegten Kopie von YZKeyboardAccessorryInput aufgebaut – einer Nischenbibliothek, die erstmals 2015 geschrieben wurde und jetzt fast unmöglich online zu finden ist. Als Teil dieser Veröffentlichung haben wir ihr Aussehen aufgefrischt: subtile Abrundung und aktualisierte visuelle Hinweise helfen ihr, mit der neuen Oberfläche zu harmonieren.

Screenshot von Droppath mit Zahlen über der Tastatur

Ein neues, vielseitigeres Icon #

Im Laufe des vergangenen Jahres haben wir mehrere Icon-Konzepte erforscht und nach Klarheit und Flexibilität jenseits traditioneller Box-Bilder gesucht, die für Liefer-Apps üblich sind. Unser neues Icon – das einen Pfad in Form eines Großbuchstabens „D" abstrahiert – bietet sofortige Markenerkennung und berücksichtigt gleichzeitig die breiteren Anwendungsfälle von Droppath jenseits der Lieferung. Das Einfarb-Schema gewährleistet eine verbesserte Reproduzierbarkeit über digitale Plattformen und zukünftiges Merchandise.

Screenshot des Droppath-Onboarding-Flows mit seinem neuen Logo

Unter Verwendung des Icon Composer-Tools haben wir die neue visuelle Identität angepasst, um die Liquid Glass-Ästhetik zu übernehmen. Obwohl das Icon nicht die volle Komplexität geschichteter Glaseffekte ausnutzt, harmoniert es mit dem neuen Design-Ökosystem und passt zwischen Peer-Anwendungen, die Liquid Glass übernehmen.

Screenshot der Droppath-Logo-Iterationen im Laufe der Jahre

Zusammenfassend lässt sich sagen, dass die Migration zu Liquid Glass in Droppath Route Planner 6.0 eine umfassende Modernisierung darstellt, um sich an die Designstandards von iOS 26 anzupassen. Wir sind zuversichtlich, dass dieses Update nicht nur die Benutzererfahrung verbessert, sondern auch die Sorgfalt von Droppath für seine Benutzer hervorhebt. Die Einführung von Droppath sollte für jeden iOS 26-Benutzer natürlich sein.

Droppath Route Planner 6.0 wird bald für iOS 26 verfügbar sein.