12/05/2026
Když Apple představil iPhone X, přinesl s sebou nejen revoluční design s displejem od okraje k okraji, ale také nové výzvy pro vývojáře a designéry. S absencí tradičního rámečku a ikonického tlačítka Domů, stejně jako s přítomností výřezu pro senzory (tzv. „notche“) a zaoblených rohů, bylo nutné přehodnotit dosavadní přístupy k designu uživatelského rozhraní. Tento článek se podrobně zaměří na klíčové aspekty Human Interface Guidelines pro iPhone X a na to, jak efektivně optimalizovat webové stránky a nativní aplikace, aby plně využily potenciál tohoto jedinečného displeje.
Displej Super Retina a jeho specifika
iPhone X je vybaven ohromujícím displejem Super Retina, který nabízí neuvěřitelně pohlcující vizuální zážitek. Tento displej je navržen tak, aby poskytoval více prostoru pro obsah a umožňoval vytvářet bohatší interaktivní prostředí. Pochopení jeho specifik je pro optimalizaci klíčové.
Displej iPhone X má rozměry 375 bodů na šířku a 812 bodů na výšku. Díky trojnásobnému měřítku obrazu (3x image scale factor) to v pixelech odpovídá rozlišení 1125 x 2436 pixelů. Zajímavostí je, že šířka 375 bodů je stejná jako u 4,7palcových displejů iPhonů 6, 7 a 8. To znamená, že by neměl být rozdíl v množství informací zobrazených podél užšího rozměru těchto zařízení. Nicméně, výška 812 bodů je o 145 bodů vyšší než u 4,7palcového displeje, což poskytuje přibližně o 20 procent více prostoru pro obsah.
Pro grafické podklady se doporučuje používat PDF soubory, protože jsou nezávislé na rozlišení a mohou výrazně snížit velikost aplikace. Pokud jsou potřeba rastrové obrázky, ujistěte se, že zahrnujete rozlišení 2x i 3x do katalogu aktiv vaší aplikace. Apple poskytuje šablony v rámci svých UI Design Resources, které mohou zjednodušit produkční proces.
Tabulka srovnání rozměrů displejů (body)
| Model iPhone | Šířka (body) | Výška (body) | Měřítko (x) | Rozlišení (px) |
|---|---|---|---|---|
| iPhone X, XS | 375 | 812 | 3x | 1125 x 2436 |
| iPhone 6, 7, 8 | 375 | 667 | 2x | 750 x 1334 |
Nejvýraznější vlastností displeje Super Retina je jeho tvar. Displej kopíruje design produktu se zaoblenými rohy pro symetrický vzhled. To znamená, že vizuální prvky musí vyplnit celý výřez displeje, zatímco ovládací prvky a kritické informace musí být chráněny před oříznutím v rozích nebo zakrytím výřezem senzoru.
Bezpečné oblasti (Safe Area Insets) – Klíč k optimalizaci webu
Při zobrazení webových stránek na iPhone X se Safari standardně chová velmi inteligentně. Obsah je automaticky odsazen uvnitř tzv. bezpečné oblasti displeje, aby nebyl zakryt zaoblenými rohy nebo výřezem pro senzory. Tato odsazená oblast je vyplněna barvou pozadí stránky (specifikovanou na elementech <body> nebo <html>), aby splynula se zbytkem stránky. Pro mnoho webů, které mají pouze text a obrázky na jednobarevném pozadí, je toto výchozí chování dostatečné a vypadá skvěle.
Nicméně, stránky navržené s horizontálními navigačními lištami po celé šířce, nebo ty, které chtějí plně využít celou plochu displeje, mohou jít dál. WebKit v iOS 11 zavedl nové API, které umožňuje webovým stránkám využít displej od okraje k okraji. První klíčovou funkcí je rozšíření stávajícího meta tagu viewport o atribut viewport-fit. Ten poskytuje kontrolu nad chováním odsazení.
Výchozí hodnota viewport-fit je auto, což vede k výše zmíněnému automatickému odsazení. Chcete-li toto chování zakázat a nechat stránku rozvrhnout na celou velikost obrazovky, můžete nastavit viewport-fit na cover. Váš meta tag viewport pak bude vypadat takto:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>Po zavedení viewport-fit=cover se navigační lišta sice roztáhne od okraje k okraji, ale okamžitě se ukáže, proč je důležité respektovat bezpečné oblasti systému: část obsahu stránky je zakryta výřezem senzoru a dolní navigační lišta je velmi obtížně použitelná.
Respektování bezpečných oblastí pomocí CSS
Dalším krokem k tomu, aby byla stránka po přijetí viewport-fit=cover opět použitelná, je selektivní použití odsazení (padding) na elementy, které obsahují důležitý obsah. Tím se zajistí, že nebudou zakryty tvarem obrazovky. Výsledkem bude stránka, která plně využívá zvětšenou plochu obrazovky na iPhone X a zároveň se dynamicky přizpůsobuje, aby se vyhnula rohům, výřezu senzoru a indikátoru pro přístup na domovskou obrazovku.
K dosažení tohoto cíle obsahuje WebKit v iOS 11 novou funkci CSS, env(), a sadu čtyř předdefinovaných proměnných prostředí: safe-area-inset-left, safe-area-inset-right, safe-area-inset-top a safe-area-inset-bottom. Tyto proměnné umožňují odkazovat na aktuální velikost odsazení bezpečné oblasti na každé straně. Funkce env() funguje všude tam, kde funguje var() – například uvnitř vlastností padding:
.post { padding: 12px; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }Pro prohlížeče, které nepodporují env(), bude pravidlo stylu, které jej zahrnuje, ignorováno. Z tohoto důvodu je důležité nadále samostatně specifikovat záložní pravidla pro jakékoli deklarace používající env(). Například:
.post { padding-left: 12px; /* Fallback pro prohlížeče bez env() */ padding-right: 12px; /* Fallback */ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }Kombinace s min() a max() pro robustní design
Pokud aplikujete odsazení bezpečné oblasti do designu svého webu, můžete si všimnout, že je poněkud obtížné specifikovat, že kromě odsazení bezpečné oblasti chcete i minimální odsazení. Například, když v režimu na výšku odsazení safe-area-inset-left je 0px, text sedí bezprostředně vedle okraje obrazovky. Bezpečné oblasti nejsou náhradou za standardní okraje (marginy) nebo minimální odsazení.
Pro vyřešení tohoto problému potřebujeme specifikovat, že naše odsazení by mělo být buď výchozí odsazení, nebo odsazení bezpečné oblasti, podle toho, která hodnota je větší. Toho lze dosáhnout pomocí nových CSS funkcí min() a max(). Obě funkce přijímají libovolný počet argumentů a vrací minimum nebo maximum. Lze je použít uvnitř calc() nebo vnořené do sebe, a obě funkce umožňují matematické operace podobné calc() uvnitř nich.
Pro tento případ chceme použít max():
@supports (padding: max(0px)) { .post { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); } }V našem příkladu se v režimu na výšku env(safe-area-inset-left) vyhodnotí jako 0px, takže funkce max() vyhodnotí na 12px. V režimu na šířku, kdy je env(safe-area-inset-left) větší kvůli výřezu senzoru, se funkce max() vyhodnotí na tuto velikost, což zajistí, že důležitý obsah uvnitř je vždy viditelný. Použití @supports je důležité pro detekci podpory min() a max(), protože nejsou podporovány všude.
Zkušení weboví vývojáři se již dříve setkali s mechanismem „CSS locks“, běžně používaným k omezení vlastností CSS na určitý rozsah hodnot. Použití min() a max() dohromady to výrazně usnadňuje a bude velmi užitečné při implementaci efektivních responzivních designů v budoucnu.
Práce s uživatelským rozhraním nativních aplikací
Pokud vaše aplikace používá standardní UIKit ovládací prvky a Auto Layout, design a vývoj pro iPhone X a další iOS zařízení by měl být poměrně přímočarý. Standardní UIKit prvky, jako jsou navigační lišty, tabulky a sbírkové pohledy (collection views), se automaticky přizpůsobí při zobrazení na iPhone X.
Navigační lišty, tabulkové lišty a nástrojové lišty jsou na všech iOS zařízeních umístěny a škálovány vhodným způsobem. Pozadí navigační lišty se rozšíří k hornímu okraji displeje a pozadí tabulkové lišty a nástrojové lišty se rozšíří k dolnímu okraji, zatímco prvky, které obsahují, jsou umístěny tak, aby se zabránilo překrývání nebo oříznutí jinými prvky. V orientaci na šířku se tabulkové pohledy (table views) roztáhnou na celou šířku displeje, zatímco obsahová část buňky tabulky je odsazena.
Průvodce rozvržením bezpečné oblasti (Safe Area Layout Guide)
Pro iOS 11 byl do Auto Layoutu přidán nový průvodce rozvržením nazvaný Safe Area layout guide. Tento průvodce pomáhá vyhnout se překrývání systémovými UI prvky při umisťování obsahu a ovládacích prvků. Na iPhone 8 je Safe Area stejná jako velikost výřezu (viewportu), pokud nejsou viditelné žádné lišty. Pokud je viditelná stavová lišta, horní okraj bezpečné oblasti se sníží tak, aby zohlednil výšku stavové lišty. Safe Area je dále odsazena, aby se do ní vešly navigační lišta, nástrojová lišta nebo tabulková lišta.
Na iPhone X poskytuje Safe Area layout guide dodatečnou výhodu. Je odsazena od horního a dolního okraje obrazovky v orientaci na výšku, i když na obrazovce nejsou viditelné žádné lišty. To pomáhá zabránit oříznutí nebo zakrytí prvků rozhraní jejich umístěním mimo výřez senzoru, zaoblené rohy displeje a indikátor Domovské obrazovky. V orientaci na šířku je Safe Area odsazena od stran obrazovky a indikátoru Domovské obrazovky ze stejného důvodu.
Například šířka zobrazení obsahu v buňkách řádku tabulky je omezena Safe Area, aby se zabránilo překrývání výřezem senzoru nebo oříznutí zaoblenými rohy displeje. A horní okraj tabulky byl odsazen, aby se zabránilo překrývání navigační lištou. Důležité je, že zatímco Safe Area pomáhá s omezováním obsahu, samotný text a ovládací prvky jsou často ještě dále odsazeny pomocí layout margins, které poskytují konzistentní okraje obsahu napříč aplikacemi a pomáhají zarovnávat obsah s jinými ovládacími prvky, jako jsou tlačítka navigační lišty.
Optimalizace vizuálních prvků a pozadí
Vaše aplikace nebo hra by měla vždy vyplňovat displej, na kterém běží. Umístění černých pruhů nahoře nebo dole na obrazovce způsobuje, že se vaše aplikace jeví malá, stísněná a nekonzistentní s ostatními aplikacemi na iPhone X. Při navrhování grafiky pozadí nebo vykreslování scén pozadí mějte na paměti, že displej iPhone X má jiný poměr stran než 4,7palcový displej.
Grafika pozadí navržená pro poměr stran 16:9 (iPhone 8) bude na iPhone X oříznuta podél levého a pravého okraje, pokud bude škálována tak, aby vyplnila obrazovku, nebo bude mít černé pruhy (letter-boxed), pokud bude škálována tak, aby se vešla. Podobně, grafika pozadí navržená pro iPhone X bude buď oříznuta podél horního a dolního okraje na iPhone 8, nebo bude mít černé pruhy po stranách (pillar-boxed). Nejlepší je komponovat obrázky tak, aby kritické vizuální informace zůstaly viditelné bez ohledu na poměr stran displeje.
Jakýkoli prvek, který je umístěn příliš blízko okrajů nebo rohů výřezu, může být oříznut zaoblenými rohy displeje nebo zakryt výřezem senzoru. Proto nezapomeňte odsazovat ovládací prvky a další prvky, abyste tomu zabránili. Ovládací prvky umístěné podél okraje zařízení mohou být také obtížněji dosažitelné v závislosti na tom, jak je zařízení drženo. Odsazení ovládacích prvků může interakci s nimi učinit rychlejší a pohodlnější.
Stavová lišta a orientace na šířku
Stavová lišta je na iPhone X vyšší než na všech ostatních iOS zařízeních. Obsahové pohledy, které byly odsazeny pevnou hodnotou v bodech, budou mít horní okraje zakryté stavovou lištou. Na iPhone X se výška stavové lišty již nemění, když běží úlohy na pozadí, jako je telefonní hovor nebo sledování polohy. To pomáhá vytvářet konzistentnější uživatelský zážitek bez ohledu na styl stavové lišty. Stavová lišta na iPhone X zabírá oblast obrazovky, kterou vaše aplikace pravděpodobně plně nevyužije. Pokud jste stavovou lištu skryli, abyste získali více místa pro rozhraní vaší aplikace, možná budete chtít zvážit, zda je to stále nutné.
Pokud jde o orientaci na šířku, většina aplikací vypadá a funguje nejlépe, když jsou ovládací prvky a vizuální informace vycentrovány. Asymetrická rozvržení, která se posouvají v závislosti na tom, jak je zařízení otočeno, povedou k nekonzistentnímu uživatelskému zážitku a mohou narušit schopnost uživatelů budovat svalovou paměť.
Indikátor Domovské Obrazovky a jeho chování
Na iPhone X lidé přistupují k přepínači aplikací a domovské obrazovce přejetím prstem nahoru kdekoli podél dolního okraje displeje. Indikátor v dolní části obrazovky naznačuje tuto interakci. Tento indikátor se zobrazuje přes rozhraní vaší aplikace, a proto s ním musíte při navrhování aplikace počítat.
Indikátor by měl být vždy jasně viditelný. iOS dynamicky upravuje vzhled indikátoru tak, aby udržel dostatečný kontrast vzhledem k pozadí – objeví se tmavý na světlejším pozadí a světlý na tmavším pozadí. Při navrhování rozhraní vaší aplikace tak, aby dobře fungovalo s indikátorem Domovské obrazovky, je nejlepší se vyhnout umisťování prvků rozhraní do jeho těsné blízkosti. Jednoduše kolem indikátoru ponechejte nějaký volný prostor tím, že veškerý neposuvný obsah umístíte do bezpečné oblasti. Není žádoucí na indikátor vizuálně upozorňovat pomocí ozdob, jako jsou závorky, rámečky nebo jiné prostředky.
Ve většině případů se gesta přejetí prstem obvykle vyskytují uprostřed displeje, takže tato interakce pravděpodobně nebude kolidovat s interakcemi ve vaší aplikaci. Pokud však vaše aplikace nebo hra povzbuzuje uživatele k přejetí prstem podél úplného dolního okraje displeje, možná budete chtít zapnout "ochranu okraje" (edge protection) pro dolní okraj displeje. To způsobí, že indikátor získá jemnější vzhled a změní se jeho chování tak, že k opuštění aplikace jsou potřeba dvě přejetí. První přejetí nebo přetažení zvedne indikátor a povolí ovládací prvek. Zatímco druhé přejetí umožní uživatelům opustit aplikaci nebo hru. Protože ochrana okraje vede k nekonzistentnímu uživatelskému zážitku, měla by být použita pouze tehdy, je-li to naprosto nezbytné.
Na rozdíl od přejetí prstem, klepnutí na dolní okraj displeje ovlivní pouze vaši aplikaci nebo hru. Například klepnutí na buňku řádku tabulky má stejný výsledek, ať už je za indikátorem, nebo ne. Vertikálně posuvné pohledy, jako jsou tabulky nebo sbírkové pohledy, by se měly rozprostírat až na úplné dno displeje, spíše než být omezeny bezpečnou oblastí.
Nakonec můžete povolit chování automatického skrytí při prezentaci vizuálního obsahu na celou obrazovku. Automatické skrytí způsobí, že indikátor zmizí, pokud se displeje několik sekund nikdo nedotkne, a znovu se objeví, když se displeje dotkne. Automatické skrytí používejte střídmě a pouze pro pasivní zážitky, kde se uživatelé pravděpodobně nebudou displeje často dotýkat.
Často kladené otázky (FAQ)
- Co je displej Super Retina a proč je důležitý pro design?
- Displej Super Retina na iPhone X je displej od okraje k okraji s vysokým rozlišením (1125x2436 pixelů) a trojnásobným měřítkem obrazu. Je důležitý, protože jeho jedinečný tvar se zaoblenými rohy a výřezem pro senzory vyžaduje speciální designové úpravy, aby se zabránilo oříznutí obsahu a zajistil optimální uživatelský zážitek.
- Proč je "notch" (výřez pro senzory) důležitý při navrhování?
- Výřez pro senzory, běžně známý jako "notch", narušuje plynulou plochu displeje v horní části. Designéři a vývojáři musí zajistit, aby žádný kritický obsah nebo interaktivní prvky nebyly zakryty touto oblastí. K tomu slouží principy bezpečných oblastí.
- Co jsou Bezpečné oblasti (Safe Area Insets) a jak je využít na webu?
- Bezpečné oblasti jsou části obrazovky, které nejsou zakryty systémovými UI prvky, jako jsou stavová lišta, navigační lišty, výřez pro senzory nebo indikátor Domovské obrazovky. Na webu se využívají pomocí CSS proměnných jako
env(safe-area-inset-top),env(safe-area-inset-bottom),env(safe-area-inset-left)aenv(safe-area-inset-right). Tyto proměnné umožňují dynamicky odsazovat obsah tak, aby byl vždy viditelný. - Jak mohu zajistit, aby se moje webová stránka zobrazovala na celou obrazovku na iPhone X?
- Abyste webové stránce umožnili vyplnit celou obrazovku, musíte v meta tagu
viewportnastavitviewport-fit=cover. Poté je ale nezbytné použít CSS funkcienv()s proměnnýmisafe-area-inset-*k ručnímu odsazení obsahu a zajištění jeho čitelnosti a interaktivity. - Jak se standardní UIKit prvky přizpůsobují na iPhone X?
- Standardní UIKit prvky jako navigační lišty, tabulkové lišty a nástrojové lišty se díky Auto Layoutu a Safe Area layout guide automaticky přizpůsobují. Jejich pozadí se roztáhne na okraje displeje, zatímco interaktivní prvky uvnitř jsou inteligentně umístěny tak, aby se vyhnuly výřezu a zaobleným rohům.
- Co je indikátor Domovské obrazovky a jak s ním zacházet v designu?
- Indikátor Domovské obrazovky je tenká čára ve spodní části displeje iPhone X, která uživatelům signalizuje, že přejetím prstem nahoru mohou přistupovat k přepínači aplikací nebo domovské obrazovce. Je důležité kolem něj ponechat volný prostor a vyhnout se umisťování kritických interaktivních prvků do jeho těsné blízkosti. Systém dynamicky upravuje jeho barvu pro lepší kontrast.
Závěr a doporučení
Optimalizace pro iPhone X je klíčová pro poskytnutí bezproblémového a pohlcujícího uživatelského zážitku. Pochopením a aplikací principů bezpečných oblastí, správnou správou vizuálních prvků a pozadí a zohledněním specifik indikátoru Domovské obrazovky můžete zajistit, že vaše webové stránky a nativní aplikace budou na tomto revolučním zařízení vypadat a fungovat co nejlépe. Vždy testujte své návrhy v simulátoru iPhone X a využívejte oficiální zdroje Apple Human Interface Guidelines a UI Design Resources pro nejaktuálnější a nejlepší postupy.
Chceš-li si přečíst další články podobné jako Optimalizace webu a aplikací pro iPhone X, navštiv kategorii iPhone.