splaš skrýnTakéSplash obrazovka, Launch screen, Startup screenZákladní
Definice
Splash screen je úvodní obrazovka s logem nebo grafikou, kterou aplikace zobrazí okamžitě po spuštění a nechá běžet, dokud se nenačte hlavní rozhraní. Slouží k překlenutí startovací prodlevy a k potvrzení, že se aplikace opravdu spustila. Na Androidu i iOS ji definuje systém, na webu ji řeší manifest progresivní webové aplikace.
Proč splash screen vůbec vznikl
Splash screen řeší mezeru mezi klepnutím na ikonu a okamžikem, kdy je aplikace použitelná. Start aplikace znamená načtení runtime, inicializaci frameworku, obnovení stavu a často i síťový dotaz. Bez jakékoli zpětné vazby uživatel vidí černou nebo bílou plochu a předpokládá, že se aplikace zasekla. Úvodní obrazovka tuto prodlevu vyplní: nezrychlí start ani o milisekundu, ale změní vnímanou dobu čekání, protože potvrdí, že systém na dotek zareagoval.
Kdo obrazovku ve skutečnosti kreslí
Zásadní rozdíl je v tom, jestli obrazovku vykresluje systém, nebo aplikace sama. Systémový splash screen se objeví dřív, než se spustí jediný řádek aplikačního kódu, takže pokrývá i tu nejpomalejší fázi startu. Aplikační splash screen naopak vzniká až po inicializaci a jen prodlužuje čekání.
Android
Od Androidu 12 je úvodní obrazovka součástí platformy. Systém sám animuje ikonu aplikace na definovaném pozadí a předává řízení, jakmile je připravené první okno. Vlastní aktivita s logem, kterou vývojáři dřív psali ručně, se tak stává duplicitou a projeví se jako dvojí problesknutí.
iOS
Na iOS je launch screen statický a definuje se ve storyboardu. Apple ho záměrně nechápe jako reklamní plochu, ale jako předlohu prvního snímku rozhraní: doporučeným postupem je nakreslit prázdnou kostru aplikace, aby přechod do reálného obsahu nebyl vidět.
Web a PWA
Progresivní webová aplikace nainstalovaná na plochu dostane úvodní obrazovku odvozenou z web app manifestu, konkrétně z polí name, background_color a icons. Prohlížeč z nich složí obrazovku ještě před vyhodnocením JavaScriptu.
Kde se úvodní obrazovka obrací proti produktu
Nejčastější chybou je pevně zadaná prodleva, typicky dvě sekundy, aby si značku uživatel „stihl přečíst“. U aplikace spouštěné několikrát denně jde o čistou ztrátu času a hodnocení v obchodech to reflektuje. Druhým problémem je splash screen jako maskování pomalého startu: schová se za něj kilogram inicializace, kterou by šlo odložit.
Pozor i na přístupnost. Obrazovka bez textové alternativy nesdělí čtečce nic, animace bez respektování nastavení omezeného pohybu může vadit citlivým uživatelům a kontrast loga vůči pozadí je stejně závazný jako kdekoli jinde.
Splash screen versus skeleton
Splash screen dává smysl pro studený start celé aplikace. Pro načítání jednotlivé obrazovky je lepší skeleton, tedy šedivá kostra budoucího obsahu, protože sděluje i to, co se za chvíli objeví. Kombinace obojího: systémový splash pro start a skeleton pro data, je dnes běžný standard.
Příklady z praxe
Systémová úvodní obrazovka na Androidu 12+
Aplikace pro objednávání jídla si dřív kreslila vlastní aktivitu s logem. Po přechodu na Android 12 se logo objevilo dvakrát: nejdřív systémová animace ikony, pak stará aktivita. Řešením bylo vlastní aktivitu smazat a nastavit jen téma podle platformního API.
<style name="Theme.App.Starting" parent="Theme.SplashScreen"> <item name="windowSplashScreenBackground">@color/brand_bg</item> <item name="windowSplashScreenAnimatedIcon">@drawable/logo</item> <item name="postSplashScreenTheme">@style/Theme.App</item> </style>Úvodní obrazovka nainstalované PWA
E-shop nasazený jako progresivní webová aplikace se po instalaci na plochu spouštěl s bílým bliknutím. Doplnění background_color a ikony o velikosti 512 pixelů do manifestu způsobilo, že prohlížeč sám vykreslí obrazovku s logem na firemní barvě ještě před načtením skriptů.
{ "name": "Papírnictví Vlnka", "short_name": "Vlnka", "background_color": "#0f3d2e", "theme_color": "#0f3d2e", "display": "standalone", "icons": [ { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ] }
Časté omyly
- MýtusSplash screen zrychluje spuštění aplikace.
- Ve skutečnostiSplash screen nezmění dobu startu ani o milisekundu. Ovlivňuje pouze vnímané čekání, protože uživatel vidí okamžitou reakci místo prázdné plochy.
- MýtusÚvodní obrazovku je potřeba nechat zobrazenou aspoň dvě sekundy, aby si lidé zapamatovali značku.
- Ve skutečnostiUmělá prodleva je jednou z nejčastěji kritizovaných věcí v recenzích aplikací. Doporučení výrobců platforem je opačné: obrazovku skrýt v okamžiku, kdy je rozhraní připravené.
- MýtusSplash screen si musí každá aplikace naprogramovat sama.
- Ve skutečnostiNa moderním Androidu i na iOS ho kreslí systém z deklarativní konfigurace a nainstalovaná PWA ho odvodí z web app manifestu. Vlastní implementace obvykle vede k dvojímu zobrazení.
Časté dotazy
- Jak dlouho má splash screen zůstat na obrazovce?
- Splash screen by měl zmizet přesně v okamžiku, kdy je první použitelné rozhraní připravené k vykreslení, tedy typicky do několika set milisekund. Žádná doporučená minimální doba neexistuje a umělé prodlevy typu setTimeout na dvě sekundy jsou antipattern. Pokud start trvá déle než zhruba dvě až tři sekundy, není řešením delší úvodní obrazovka, ale odložení inicializace na později, líné načítání modulů a doplnění ukazatele průběhu, aby uživatel viděl, že se něco děje.
- Potřebuje splash screen alternativní text kvůli přístupnosti?
- Splash screen s logem by měl mít textový popis pro čtečky obrazovky, případně by mělo být jméno aplikace dostupné jinak, protože nevidomý uživatel jinak nedostane potvrzení, že se spustila správná aplikace. Animovaná varianta by měla respektovat systémové nastavení omezeného pohybu. Kontrast loga a případného textu vůči pozadí se posuzuje stejnými pravidly jako u zbytku rozhraní. Na iOS pomáhá i to, že launch screen bývá jen prázdnou kostrou budoucí obrazovky bez textu k přečtení.
- Kdy dává smysl skeleton místo splash screenu?
- Skeleton se hodí všude tam, kde už aplikace běží a čeká se jen na data konkrétní obrazovky: seznam objednávek, detail produktu, výsledky vyhledávání. Šedivé obrysy naznačí strukturu budoucího obsahu, takže uživatel začne rozumět rozložení dřív, než data dorazí. Splash screen naopak patří výhradně ke studenému startu celé aplikace. Používat celoobrazovkové logo při každé změně stránky působí rušivě a maže kontext, ve kterém se uživatel právě nacházel.
- Má splash screen smysl u klasického webu bez instalace?
- Klasická webová stránka otevřená v prohlížeči splash screen nepotřebuje. Prohlížeč sám dává zpětnou vazbu ukazatelem načítání na kartě a překrytí celé stránky logem jen oddaluje první vykreslení obsahu, což zhoršuje metriky jako Largest Contentful Paint i pozici ve vyhledávání. Úvodní obrazovka na webu má opodstatnění až v okamžiku, kdy je aplikace nainstalovaná jako PWA a spouští se z plochy bez viditelného okna prohlížeče.
Zdroje
- Web app manifest(otevře se v novém okně)
- Web Application Manifest(otevře se v novém okně)
- Splash screen(otevře se v novém okně)
Související pojmy
