Droppath 6.0: Vår väg till Liquid-Glass

Författare

Med lanseringen av iOS 26 introducerade Apple Liquid Glass, en betydande utveckling av plattformens estetik och designspråk. Denna utveckling går utöver visuella uppdateringar av kärnkomponenter i användargränssnittet såsom knappar och verktygsfält; den omdefinierar grundläggande gränssnittsparadigm och kräver att utvecklare kritiskt anpassar sina applikationer. Här beskriver vi vårt tillvägagångssätt och de tekniska överväganden som gjorts vid migrationen av Droppath Route Planner till Liquid Glass-gränssnittsstandarden.

Vårt initiala svar på Liquid Glass formades av tidigare erfarenheter med omfattande Apple-designövergångar, särskilt iOS 7-omarbetningen. På den tiden introducerade grundläggande förändringar i systemets UI-standarder betydande regressioner och instabilitet, vilket krävde omfattande ingripande för att återställa tidigare beteenden. I motsats till detta erbjuder Apples implementering för Liquid Glass en kontrollerad opt-in-migreringsväg (se dokumentationen för UIDesignRequiresCompatibility), vilket kraftigt minskar risken. Våra preliminära integrationer med Xcode 26 har endast avslöjat mindre justeringsinkonsistenser: specifikt felplaceringar av en dialogs titel. Lyckligtvis behövde vi inte göra en brådskande lansering med XCode 26, men det var lugnande att ha detta alternativ redo om det skulle behövas.

Söker efter exempel #

En grundläggande aspekt av varje designmigration är tillgängligheten av referenspunkter i Apples eget ekosystem. Förstapartsapplikationer gav väsentlig vägledning om bästa praxis och interaktionsmodeller. Till exempel, när vi utvärderade presentationsstrategier för användarprofiler och inställningar, inspirerades vi av Musik-appen. På samma sätt, för förbättringar av sökgränssnittet, jämförde vi tillvägagångssätt i Musik, Mail och Filer; i slutändan stämde Filers designspråk bäst överens med våra UX-mål, särskilt vad gäller placeringen av sökresultat i förhållande till sökfältet. Att ha resultat ovanför sökfältet är helt enkelt inte naturligt nog för oss.

Skärmdump av Musik och Filer med omvänd sökordning

Slutet på färgade navigationsfält #

Det äldre färgade navigationsfältet, ett kännetecken för tidigare UI-paradigm, visade sig vara inkompatibelt med det nya Liquid Glass-utseendet. De livfulla bakgrunderna resulterade i överdrivet kontrast och visuell disharmoni mot Liquid Glass genomskinliga knappar. Vår lösning var att övergå till ett vitt navigationsfält, vilket gav konsistens med den nya flikfältets gradient och enhetligt appens övergripande visuella utseende.

Skärmdump av Droppath med nytt vitt navigationsfält och Liquid Glass-gränssnitt

Ompröva åtgärdsplacering #

Liquid Glass omtänker flikfält, minskar deras fotavtryck vid skärmens nedre kant och tillåter mer synligt innehåll. Denna förändring fick oss att se över Material Design-elementen, specifikt Flytande Åtgärdsknappar (FABs), som vi hade antagit. Tidigare positionerade för framträdande, verkade FABs inkongruenta bredvid det reviderade, smalare flikfältet. De nya designriktlinjerna tillåter dock framträdande åtgärdsknappar inom själva navigationsfältet. Droppath centraliserar nu nyckelåtgärder i detta område, grupperar åtgärder som upprätthåller mening och tillgänglighet.

Skärmdump av Droppath med FAB ersatt med framträdande navigationsfältsknappar

I kartvisningen tillät omplacering av knapparna till övre högra hörnet oss att organisera dem snyggt vid sidan av kartåtgärderna. Deras mer framträdande utseende gör det uppenbart vad ditt nästa steg ska vara.

Skärmdump av Droppath med sitt gamla och nya kartutseende

Saknat UI-mönster: Visningslägesbyte #

En komplex aspekt av Droppath-gränssnittet har varit dubbel användning av flikar: både som lägesomkopplare (list- kontra kartvyer) och som navigering för fästa mappar (lokala kontra molnsynkroniserade rutter). Medan mappnavigeringen berättigat passar flikmodellen, avviker användningen av flikar för vylägeval från etablerade iOS-konventioner. På Android hanteras denna omkopplare med en navbar-knapp, men detta begränsar upptäckbarheten. I kontrast fungerar iOS-flikfält längst ner på skärmen som effektiva, tillgängliga segmenterade väljare för vår kontext.

Skärmdump av Droppath-flikfält använt som segmenterad kontroll

När vi analyserade Apples Foton- och Filer-appar observerade vi varierande metoder. Foton använder en centralt placerad omkopplare, medan Filer förpassar vylägesbytet till en meny under ellipsen, byter upptäckbarhet mot menyenkelthet. Våra användardata kräver frekvent växling mellan kart- och listlägen, vilket ledde oss till att behålla det segmenterade flikmetoden trots dess atypiska användning, eftersom minimering av störningar under stora UI-övergångar förblir högsta prioritet.

Omlokalisering av sekundärt innehåll #

För att upprätthålla semantisk klarhet i vår flikstruktur har vi flyttat Konto- och Hjälp-skärmarna till det övre högra hörnet, vilket speglar organisationen som finns i Apples Musik-app. Trots allt behöver användare sällan komma åt sina kontoinställningar, varför ge omedelbar åtkomst via flikfältet! Medan Droppath för närvarande saknar användaruppladdade profilbilder, är SF-symbolen en igenkännbar platshållarikon - som vi redan använde någon annanstans - måste duga.

Skärmdump av Droppath-flikfält med en kontoknapp

Gränssnittet känns levande och responsivt #

Införandet av Liquid Glass medförde en ny nivå av reaktionsförmåga och livfullhet till gränssnittskontroller. Knappar som inte hade uppdaterats för Liquid Glass stack omedelbart ut - de verkade statiska och ointressanta jämfört med sina revitaliserade motsvarigheter.

Även flikfältets knappar expanderar och smälter nu försiktigt samman när användare trycker på dem, vilket ytterligare förstärker känslan av flytande interaktion som är karakteristisk för Liquid Glass.

Skärmdump av Droppath med markerade flikfältsknappar

Skärmdump av Droppath med markerade knappar

Kodutmaningar #

SwiftUI-integration #

Att implementera stöd för Liquid Glass i våra SwiftUI-komponenter medförde en unik uppsättning utmaningar. För att förhindra duplicering av logik över flera #available(iOS 26.0, *)-kodvägar konsoliderade vi versionskontroller och inkapslade stiländringar i hjälpmetoder som glassProminentStyleIfPossible(). Trots det räknade vi fortfarande cirka 20 separata tillgänglighetsvillkor i hela kodbasen - ett nödvändigt lager för att upprätthålla bakåtkompatibilitet samtidigt som vi följer nya visuella krav. Med lite tur kommer vi inte att möta en annan omfattande UI-övergång av denna skala på många år.

Arkpresentation #

Vår Körningsskärm förlitar sig på systemark, men deras utseende var fruktansvärt under Liquid Glass. De anpassade svepgesterna vi stödjer - som möjliggör vänster/höger-övergångar mellan stopp inom ett ark - är inte beteenden som stöds nativt av iOS-ark. Som ett resultat krävde anpassningen av våra körark för den nya designen extra tekniskt arbete för att återställa det avsedda navigeringsflödet. Se till att du testar all din apps funktionalitet innan lansering.

Skärmdump av Droppath med problem på sina ark

Att få vårt navigationskontrollverktygsfält att visuellt anpassas med Liquid Glass visade sig vara knepigare än förväntat. Standardverktygsfältets placering var under flikfältet, så vi introducerade ett anpassat verktygsfält, positionerade och stilade det för att säkerställa korrekt placering.

Skärmdump av Droppath som visar navcontroller-verktygsfält

Förbättrat inmatningstillbehör #

Många Droppath-användare matar regelbundet in både siffror och bokstäver, så vi inkluderar ett numeriskt inmatningstillbehör ovanför tangentbordet för bekvämlighet. Denna anpassade rad är byggd från en lokalt underhållen kopia av YZKeyboardAccessorryInput - ett nischbibliotek som först skrevs 2015 och nu nästan omöjligt att hitta online. Som en del av denna version uppdaterade vi dess utseende: subtil avrundning och uppdaterade visuella ledtrådar hjälper det att harmoniera med det nya gränssnittet.

Skärmdump av Droppath som visar siffror ovanför tangentbordet

En ny, mer mångsidig ikon #

Under det gångna året utforskade vi flera ikonkoncept, sökte klarhet och flexibilitet bortom traditionella lådbilder som är vanliga för leveransappar. Vår nya ikon - som abstraherar en väg i form av ett stort “D” - erbjuder omedelbar varumärkesigenkänning samtidigt som den rymmer Droppaths bredare användningsfall bortom leverans. Enfärgsschemat säkerställer förbättrad reproducerbarhet över digitala plattformar och framtida merchandise.

Skärmdump av Droppath-introduktionsflöde med sin nya logotyp

Med hjälp av Icon Composer-verktyget anpassade vi den nya visuella identiteten för att omfamna Liquid Glass-estetiken. Även om ikonen inte utnyttjar den fulla komplexiteten hos skiktade glaseffekter, harmoniserar den med det nya designekosystemet och passar in bland kamratapplikationer som omfamnar Liquid Glass.

Skärmdump av Droppath-logotypiterationer genom åren

Sammanfattningsvis representerar migreringen till Liquid Glass i Droppath Route Planner 6.0 en omfattande modernisering för att anpassa sig till iOS 26:s designstandarder. Vi är övertygade om att denna uppdatering inte bara höjer användarupplevelsen utan också framhäver Droppaths omsorg för sina användare. Att anta Droppath bör vara naturligt för alla iOS 26-användare.

Droppath Route Planner 6.0 kommer snart att vara tillgängligt för iOS 26.