iPhone Duo. Skládací iPhone je tu. Co to znamená pro vaši aplikaci?

Vaše aplikace už není na výšku ani na šířku

S iPhone Duo končí éra, ve které se aplikace navrhovala do jednoho tvaru obrazovky a druhý se doladil. Sepsali jsme, co větší prostor znamená pro designéry aplikace, pro samotný produkt a jak se tím vším otevírají dveře na iPad a macOS.

Dvacet let se aplikace na iPhonu navrhovala do obdélníku, jehož rozměry jste znali dopředu. Portrait nebo landscape, případně jen jedno z toho, protože jste do Info.plist napsali, že druhé nechcete. Systém to respektoval.

Od iOS 27 je to preference, ne záruka. Aplikaci, kterou postavíte s novým SDK, půjde měnit velikost, ať jste o to žádali, nebo ne. Apple to na letošním WWDC popsal jednou větou, která se dobře pamatuje:

‍„Now, instead of designing for specific devices and orientations, you’re designing for a dynamic range of sizes and aspect ratios.”

Oficiálně to Apple zdůvodňoval zrcadlením iPhonu na Mac. Po představení iPhone Duo je ale jasné, odkud vítr fouká. Nový skládací iPhone jde do předprodeje 16. října, v prodeji bude od 23. října.

Pojďme se společně podívat, co to znamená pro vaše aplikace.

Nejsou to dva telefony v jednom

Než se dostaneme k práci a úpravám, které bude aplikace vyžadovat, pojďme si nový iPhone Duo krátce představit.

Zařízení má dva displeje, vnější pro zavřený stav a vnitřní pro rozložený. Oba mají v podstatě stejný poměr stran, takže nepřepínáte mezi dvěma nesouvisejícími režimy, ale rozložením telefonu plynule roste prostor aplikace.

Druhá věc, které si všimnete na první pohled, je, že se ovládací prvky přesunuly ke straně displeje. Tab bar, toolbar, navigační prvky, status bar i Dynamic Island stojí nad sebou u boku, aby zůstal vertikální prostor obsahu a aby se na ně dalo dosáhnout. Tomu se podrobněji věnujeme v kapitole o dosažitelnosti.

Nový je i pojem póza. Skládací telefon totiž nerozlišuje pouze zavřený a otevřený stav. Může být částečně složený jako kniha, položený na stole jako laptop, nebo postavený na hraně jako stojánek. A systém na to reaguje.

A poslední novinka, na kterou jsme u předchozích iPhonu nebyli zvyklí je, že v rozloženém stavu iPhone poprvé umí multitasking. Vedle sebe mohou běžet dvě aplikace, klidně ale i jen vaše aplikace dvakrát.

Bez zásahu dostanete černé pruhy

Jedná se o spoustu změn, než se ale pustíme do toho, jak se s novými možnostmi popasovat, pojďme si říct, jak se vaše aplikace bude chovat, když ji pro nový adaptabilní layout neoptimalizujete.

Nespadne a půjde používat. Na vnějším displeji poběží s černým pruhem u strany, na vnitřním uprostřed s černými pruhy po obou stranách, v poměru, na jaký je zvyklá z běžných iPhonů. Uživatel tedy dostane aplikaci ve výřezu velikosti starého telefonu doprostřed největšího displeje, jaký kdy iPhone měl.

Rebuild s SDK iOS 27 část toho spraví. Aplikace se rozšíří až po status bar, u kterého zůstane úzký černý proužek. Plnou obrazovku včetně prostoru pod status barem a vertikální rozložení barů ale dostanete až se SDK iOS 27.1.

A tady je dobré vědět, jak to s tím SDK zatím stojí. Že Apple nové zařízení tajil do poslední chvíle, se dá vyčíst i z vývojářských nástrojů. Simulátor iPhone Duo dorazí až s Xcode 27.1, které v době psaní ještě není venku, a ani SDK iOS 27, nachystané jako release candidate, všechno pro plnou podporu nového zařízení neobsahuje.

Na nástroje ale nemusíte čekat. Práce, která z vaší aplikace udělá aplikaci připravenou na rozložený displej, je hlavně prací na adaptivním layoutu, a tu můžete udělat hned. Pojďme se podívat, co obnáší.

Zvětšit ani roztáhnout nestačí

První věc, která člověka nad rozloženým telefonem napadne, je zároveň ta, která zabere nejmíň práce: nechat stávající obrazovku roztáhnout s oknem.

Že to není správná cesta, naznačuje sám Apple ve svých guidelines. Škálování zmiňuje jen u obrázků, a i tam s podmínkou nezměnit poměr stran. Pro rozhraní ho neschvaluje nikde a na roztahování prvků do šířky má dokonce samostatné pravidlo: vyhýbat se tlačítkům přes celou šířku. Roztažením se navíc ztrácí čitelnost, protože odstavec rozprostřený na šířku rozloženého telefonu má délku řádku, kterou oko nezvládne sledovat. Systémové layout guides proto mají hotovou definici čitelné šířky textu přesně pro tenhle případ.

Větší prostor není licence k větším prvkům. Je to místo na víc obsahu vedle sebe.

Konkrétně tedy respektujte safe area a marginy od kraje displeje a místo roztahování obsahu pracujte s víc sloupci a se split views. Rozložený telefon se šířkou v regular size class neznamená titulek o velikosti pěti řádků, ale může to být například seznam a detail zároveň.

A ty sloupce nemohou být statické. Měly by reagovat i na to, jak je telefon zrovna složený, protože rýha uprostřed displeje mění, kde je na obsah místo. K tomu se dostaneme v kapitole o nových proměnných.

Začínejte od nejširšího, ne od nejužšího

Co se týče procesu navrhování těchto komplexních obrazovek, kde se design blíží spíš iPadu nebo Macu, dává Apple v guidelines jasné doporučení: „As someone resizes a window, defer switching to a compact view for as long as possible. Design for a full-screen view first, and only switch to a compact view when a version of the full layout no longer fits.” Tedy:

Nakreslete nejdřív layout pro vnitřní displej a verzi pro vnější z něj odvozujte, ne naopak. A přepínejte na ni až v momentě, kdy se plná verze přestane vejít, ne na předem zvolené hranici.

Přináší to nový úhel přemýšlení. Nestačí vědět, jak obrazovka vypadá na vnitřním displeji a jak na vnějším. Potřebujete znát pořadí, ve kterém se věci z rozloženého layoutu odebírají, jak se prostor zužuje. Tedy jeden layout a pravidla jeho sbalování místo dvou nezávislých kreseb. A o tom, kdo by to pořadí měl určit, si řekneme za chvíli.

Nové proměnné: dosažitelnost a rýha

Nové zařízení přináší do designu ještě další proměnné, jejichž efekt nemusí být na první pohled ve Figmě jasný, ale zaručeně se projeví, až budete držet rozložený iPhone v ruce:

1 – První je dosažitelnost. Rozložený telefon je široký a palec nedosáhne po celé ploše displeje. Přesně proto se ovládací prvky přesunuly ke straně a stojí nad sebou ve vertikálním baru. Vertikální prostor tak zůstává obsahu a na ovládání se dá dosáhnout jedním palcem.

Pro layout z toho plyne věc, na kterou se snadno zapomene. Prostor pro obsah je asymetrický, protože ovládací prvky sedí u jedné strany. Marginy a safe areas se na levém a pravém kraji nerovnají a je potřeba pracovat s každou stranou zvlášť. Když navíc na vnitřním displeji běží dvě aplikace vedle sebe, drží každá své bary u svého vnějšího okraje, takže se asymetrie u té druhé obrátí.

Pro tip: u prvků, na které se dosahuje hůř, si můžete pomoct gesty. Tento pattern jde hezky vidět na systémovém swipe back gestu jakožto substituci těžko dosažitelného tlačítka Zpět v levém horním rohu.

2 – Druhá proměnná je rýha v místě ohybu. Apple pro ni má vlastní pojem a rovnou i vlastní pravidla. Na displeji vznikají takzvané reserved regions, tedy oblasti, které obsah nemá zakrývat a kterým se komponenty přizpůsobují. Zajímají vás z nich dvě. Oblast ohybu, která při částečně složeném telefonu rozdělí vnitřní displej na dvě použitelné plochy, a oblast kolem kamery skryté pod vnitřním displejem, která se objeví jen ve chvíli, kdy se kamera zapne. (O tu třetí, vnější kameru v rohu, se systém stará sám, protože je zarovnaná s vertikálním barem.)

Interaktivní prvky do těchto oblastí nepatří. Obsah se z nich má při ohybu nebo při zapnutí kamery posunout, ať už celý kontejner, nebo jen zarovnáním okolo mezery. Scrollovatelný obsah je výjimka, ten může přes ohyb klidně přetékat, protože u článku nebo feedu by přeskládávání vadilo víc než rýha.

Většinu té práce už Apple udělal za vás

Zní to jako extrémní komplexita, kterou nové zařízení přináší. Tady vás uklidníme. Pro všechna ta přizpůsobení a posuny má Apple systémové komponenty a ty většinu práce odvedou samy.

Navigation bary, toolbary a tab bary umí pracovat se safe area a samy se překlopí do vertikálního rozložení. Alerty, sheets, kontextová menu a popovery se samy odsunou od ohybu. Split views si samy upraví šířku sloupců a marginy podle toho, jak je telefon složený. A když se ovládacích prvků do baru nevejde dost, systém je sám uklidí do overflow menu.

Je to tedy o důvod víc používat systémové komponenty a do vlastních se pouštět jen tam, kde přinášejí jasnou přidanou hodnotu.

Za každý custom prvek si na iPhone Duo zaplatíte tím, že všechny pózy, obě orientace, oba displeje a multitasking musíte odladit sami.

A jestli míříte na náročné uživatele, je to zároveň další argument pro nativní technologii. Odladit všechny stavy nového zařízení na multiplatformním frameworku, který systémové komponenty nepoužívá, je práce, která se prodraží dřív, než přinese výsledek.

Navigace: jedna struktura, dvě podoby

Nejlíp to jde vidět na navigaci. Rozšířený prostor může svádět k tomu, že bude potřeba vystavět dvě navigační struktury, jednu pro zavřený a druhou pro rozložený stav. Tady vás uklidníme podruhé, potřeba to není.

Split view se na vnitřním displeji rozbalí do dvou sloupců a na vnějším se sbalí do jednoho. Je to stejné chování, jaké systémové split views mají mezi regular a compact prostředím i dnes na iPadu. Na iPhone Duo ho tedy dostanete, aniž byste ho museli vymýšlet znovu. Aplikace s tab barem se na vnitřním displeji může přepnout do sidebaru. U mnoha aplikací tak mezi tab barem a sidebarem vůbec nemusíte volit: z jedné informační architektury dostanete oboje.

Dvě navigační struktury znamenají dvě sady rozhodnutí, které se při každé další featuře rozejdou. Jedna struktura s dvěma podobami se rozejít nemůže.

Priorita obsahu je produktové rozhodnutí, ne designové

Pojďme se od designových doporučení posunout k těm produktovým. A začneme tím, že si zodpovíme otázku, kterou jsme nakousli dřív: kdo má vlastně určit, co bude na obrazovce vidět a co se skryje.

Ta otázka má na iPhone Duo dvě úrovně.

1. První je obsah. Když se telefon zavře, prostor se zmenší na polovinu a část toho, co bylo na vnitřním displeji vidět vedle sebe, se musí schovat nebo posunout o úroveň hlouběji. Systém layout přeskládá, ale nerozhodne, co je z toho nosné.
   ‍
2. Druhá úroveň je vertikální bar. Vejde se do něj jen omezený počet prvků a zbytek zmizí do overflow menu. Tady se aplikace musí rozhodnout, co obětuje jako první. Někdy jsou to navigační prvky, tedy tab bar, a někdy naopak ovládací prvky v toolbaru. Záleží na povaze aplikace. Tam, kde uživatel hlavně prochází obsah, má smysl uklidit akce a nechat viditelné hlavní destinace. V aplikaci postavené na jednom úkolu je to naopak a přednost mají akce, kterými se ten úkol dokončuje. A i v rámci baru je potřeba určit pořadí, protože bez zásahu se prvky odebírají odspodu nahoru, což pro většinu aplikací není správně.

A tím se dostáváme k odpovědi. Prioritu obsahu, tedy co je nosné a co se může skrýt, musíte určit vy, a je to spíš produktové rozhodnutí než designové.

Projít hlavní obrazovky a u každé určit nosný obsah a pořadí, ve kterém se doplňky odebírají, by se mělo stát standardní součástí produktového zadání.

Systém na tu prioritu čeká a když nepřijde, rozhodne za vás.

Přístupnost jako vedlejší efekt

Optimalizace layoutu má ještě jeden přínos, který se ve vší té práci na redesignu obrazovek a určení priorit obsahu může schovat. Layout, který se přeskládá, když naroste okno, je totiž ten samý layout, který se přeskládá, když se zvětší text. Je to jedna a ta samá cesta kódem.

Tím pádem získáváte podporu Dynamic Type, tedy zvětšování textu, bez kompromisů. Žádný strop na velikost fontu, žádná fixní výška buňky, žádné zkracování třemi tečkami. A zvětšený text není okrajová záležitost, podle neziskové společnosti Appt Foundation, zaměřené právě na přístupnost v aplikacích, více než pětina uživatelů napříč iOS a Androidem používá telefon se zvětšeným fontem.

Takže pokud ve vás ten nával potenciálních úprav a věcí k řešení vyvolává podobnou reakci s pozdviženým obočím jako u nás, můžete si aspoň říct, že by se díky novému iPhone Duo měla zlepšit přístupnost aplikací, které doteď přístupnost až tak neřešily.

Můstek na macOS

Aplikace, která se umí chovat v libovolné velikosti okna, má většinu cesty na iPad a na Mac za sebou. A to je na celé věci to nejlepší: práce, kterou uděláte kvůli skládacímu telefonu, totiž přináší víc než jen podporu nového zařízení. Máte v ruce vstupenku do celého ekosystému.

Aby to nevyznělo jako přepnutí vypínače: co se tou prací vyřeší, je layout. Co se nevyřeší, je chování Macu jako Macu. Menu bar dostanete výchozí, ale použitelný se staví ručně. Práce s ukazatelem myši, hover stavy a pravé kliknutí jsou na Macu primární interakce, ne doplněk. Uživatel na Macu čeká, že si aplikaci otevře ve víc oknech, a přístup k souborům tam funguje na jiném modelu. Z adaptabilního layoutu tedy nevypadne hotová macOS aplikace. Vypadne z něj základ, na kterém se MVP macOS verze vaší aplikace postaví výrazně rychleji než od nuly.

A právě takové MVP může následně skvěle posloužit k ověření business potenciálu macOS verze aplikace a zda stojí za plnou investici. Rozhodnutí, které by jinak padlo na základě odhadu, tak můžete udělat nad reálným produktem.

A ještě jedna administrativní věc, o které je dobré vědět dřív, než na ni sami narazíte: univerzální nákup umožňuje nabízet iOS, macOS a další verze vaší aplikace jedním nákupem, ale existující samostatné záznamy aplikací v App Store nejde spojit. Musíte všechny až na jeden stáhnout z prodeje a k tomu přeživšímu přidat platformy. Hodnocení ani recenze se nepřenášejí, je to tedy jednosměrné rozhodnutí. Pokud máte iPhone a iPad aplikaci jako dva záznamy, zvažte ho teď, ne až u zadání macOS verze.

iPhone Duo tak není jen další zařízení v produktové řadě Applu, ale otevírá možnosti, nad kterými jsme doteď nemuseli přemýšlet. Ne nadarmo o něm nový CEO Applu John Ternus mluví jako o největší změně iPhonu od jeho vzniku.

Bonus: telefon, který stojí na stole, je nová příležitost

Všechno výše je práce, aby aplikace na iPhone Duo obstála. Nové pózy jsou ale zároveň příležitost, jak vaši aplikaci odlišit od zástupu ostatních. Částečně složený telefon jako kniha, telefon položený jako laptop, postavený jako rámeček, každá z těch pozic umí něco, co na jiném iPhonu nejde.

A pokud některou z nich využijete originálním způsobem, nepůjde už o optimalizaci, ale o feature.

Například kuchyňská appka, která při postavení telefonu na linku ukáže recept čitelně na dva metry, k tomu nepotřebuje novou funkci, jen jednu obrazovku navíc. A takový nápad dokáže přinést víc pozornosti než většina tasků z vašeho stávajícího backlogu.

Článek připravil Radek Doležal, iOS Lead ve Futured.