Splash screeny v mobilních aplikacích. Od teorie a historie až po implementace na iOS a Androidu

V ideálním světě by se mobilní aplikace spustila okamžitě. Načtení všech potřebných dat ale chvíli trvá. Telefony jsou sice čím dál tím výkonnější, aplikace s nimi však v požadavcích na výkon drží krok. Spuštění tak stále trvá i několik sekund. V tomto krátkém okně má hlavní roli splash screen. Každý okamžik ovlivňuje výsledný dojem a právě úvodní obrazovka může rozhodnout, jestli uživatel aplikaci frustrovaně odinstaluje, nebo si ji naopak oblíbí.

Splash screen je součástí celkového zážitku a podvědomě tvoří dojem, který si uživatelé z vaší aplikace odnesou. I jednoduchý splash screen s logem působí lépe než prázdná obrazovka nebo načítací kolečko. Pokud použijete kombinaci loga a sloganu, uživatelé budou vnímat čekání na spuštění aplikace jako kratší a ochotněji počkají i při delším načítání.

Splash screen jako součást zážitku i s dopadem na vnímání značky i aplikace

Splash screen tak rozhodně není zbytečná výplň. Je to prostor, ve kterém můžete ovlivnit jak lidé vnímají vaši značku. A právě při tvorbě brandingu aplikace je splash screen často zásadní prvek. 

Zobrazuje se na něm logo, barvy značky a někdy i vizuální prvky a texty, které utvářejí první dojem. Jde o zásadní prvek při brandingu aplikace a pokud se zaměřujete na uživatelské rozhraní (UI), uživatelskou zkušenost (UX) a design, neměli byste ho podcenit. 

Technická omezení splash screenu

Uživatel ho vidí jen pár sekund, přesto jde teoreticky o skvělou plochu pro reklamní sdělení.  A skutečně se nám občas stane, že chce klient splash screen vyměnit a komunikovat na úvodní obrazovce krátkodobou akci. To ale není technicky možné. 

Splash screen je napevno zabudovaný do instalačního balíčku aplikace (tzv. resource bundlu) a po instalaci ho nelze upravit. Proto je změna úvodní obrazovky možná pouze při aktualizaci nebo nové instalaci aplikace.

Splash screen je stejný pro všechny uživatele dané verze a nelze ho ani dynamicky měnit podle skupin (například B2B vs. B2C, noví vs. vracející se uživatelé atd.).

Jak funguje animace ve splash screenu

Pokud chcete na uživatele opravdu zapůsobit, můžete místo statického loga a sloganu zvolit animaci. Ta ale není tak jednoduchá, jak by se mohlo zdát.

Ukázka animovaného splash screenu

Animovaný splash screen totiž vždy začíná statickým obrázkem. Obvykle jde o první snímek animace, který se zobrazí před plným načtením aplikace. Jakmile je aplikace připravená, může se splash přepnout na skutečnou animaci.

To platí především pro iOS, kde je animace technicky oddělená od launch screenu. U Androidu jsou možnosti volnější a animaci lze částečně spouštět i dřív, i zde ovšem platí určitá omezení.

Jak dlouho nechat splash screen viditelný – nenechte ego stát v cestě uživatelskému zážitku

Délka splash screenu by se měla odvíjet především od potřeb aplikace. Platformy pro vývoj mobilních aplikací jako Cordova, Ionic nebo Capacitor nabízejí několik přístupů:

• Pevně daný čas – 3 sekundy, což je běžně doporučovaný standard.
• Do načtení aplikace – splash zmizí, jakmile je appka připravená.
• Kombinace obojího – minimální čas + kontrola stavu aplikace.

Ať už zvolíte jakoukoliv možnost, myslete na to, že splash screen by neměl zdržovat a působit jako samoúčelná animace. 

Hravý atmosferický splash screen je super, ale uživatele víc zajímá samotná aplikace.

Co (ne)schovávat pod splash screen

Při prvním spuštění si aplikace často stahuje větší množství dat (mapy, katalogy, ceníky…). Vývojář se musí rozhodnout, jestli tento proces schová pod splash screen, nebo uživatele rovnou pustí do aplikace a data načítá na pozadí.

Jak to děláme my?

• U jednoduchých aplikací necháme splash screen zakrýt celé načítání.
• Naopak u složitějších appek zobrazíme onboarding nebo úvodní obrazovku.

Uživatel může s aplikací začít částečně pracovat, zatímco sleduje progress bar, který ukazuje průběh načítání.

Důležité je, aby se něco dělo a uživatel neměl pocit, že aplikace zamrzla.

Splash screen v minulosti

Minulost splash screenů je stejně stará jako historie chytrých telefonů. Na iOS byl splash screen vždy povinný a zobrazoval se automaticky; operační systém ho vykresloval ještě před spuštěním aplikace. 

U Androidu byla situace trochu složitější. Splash screen jsme řešili softwarově, a zobrazoval se až po úplném spuštění aplikace. 

Vývojáři se snažili toto zpoždění obcházet různými technikami. Často jsme používali malý loader nebo prázdnou aktivitu, která se spustila před načtením aplikace. Výsledek ale většinou za moc nestál, proto se splash screeny na Androidu (s výjimkou éry Flashe) zanedbávaly.

Bojovali jsme i s velikostí a rozlišením

Dneska je to se splash screeny celkem snadné. Nemusíme řešit velikost ani rozlišení telefonu. Vše se generuje programově a velikost se mění automaticky podle toho, co má uživatel za telefon.

V minulosti to byla jiná piplačka. Splash screen se vkládal zvlášť pro každé rozlišení formou bitmapy. Bitmapy zabíraly hodně místa, protože nebylo možné použít komprimované formáty jako JPEG. V úvahu přicházel jen bezztrátový PNG.

Kvůli této prostorové náročnosti si jeden čas iOS komprimoval klasické PNG do vlastního proprietárního formátu – ten sice zabíral méně místa, ale nešel běžně zobrazit ani upravit.

Historické rozměry splash screenů pro Android

U Androidu se velikosti splashů nedělaly podle velikosti displeje, ale podle jeho rozlišení.

Historické rozměry splash screenů pro iOS

Starý systém pomocí statických bitmap (např. Default-568h@2x.png) je dnes nejen deprecated, ale není akceptovaný pro nové aplikace v App Store.

Jak jsme pracovali s tím, aby byl splash screen správně vidět na každém zařízení?

Na iOS se správným zobrazením designu nebyl nikdy problém. Jasně daná velikost displejů umožňovala připravit splash přesně na míru. 

S Androidem to bylo složitější. Zařízení se liší nejen velikostí displeje, ale i poměrem stran a hustotou pixelů (DPI). Pokud měl splash zapůsobit, museli jsme se tomu přizpůsobit.

Pracovalo se se třemi základními postupy:

• Roztáhnutí obrázku – riskujeme zdeformované logo nebo roztažené texty, což je většinou nepřijatelné.
• Oříznutí obrázku podle velikosti displeje – nejčastější řešení, ale vyžaduje promyšlený návrh.
• Kombinace statického základu a dynamických prvků – užitečné hlavně u animovaných splash screenů.

Postupem času byla vytvořena šablona, která vyznačovala zóny s nejvyšší pravděpodobností zobrazení na nejběžněji používaných zařízeních. 

Cílem bylo zajistit, aby prvky, jako logo nebo název aplikace, byly vždy v bezpečné zóně uprostřed obrazovky, která byla zaručeně viditelná na všech telefonech. Okrajové části pak mohly být oříznuty podle specifikací konkrétního zařízení.

Šablona pro ořez, která vyznačuje zóny s nejvyšší pravděpodobností zobrazení na nejběžněji používaných zařízeních.

V praxi to fungovalo tak, že grafik podle této šablony připravil master obrázek a z něj se skriptem vyřezaly potřebné rozměry. 

Existovaly na to přímo nástroje jako například „ionic resources“, který z master obrázku vytvořil všechny běžně používané rozměry.

Dnes je to naštěstí o něco jednodušší. 

Jak navrhnout splash screen, který bude vypadat dobře na všech telefonech?

Dnešní splash screeny už nejsou o ručním ladění bitmap pro každý model telefonu. Na Androidu se používá moderní SplashScreen API, které automaticky přizpůsobí zobrazení různým zařízením – stačí definovat vektorové logo a barvu pozadí. 

Příklad jednoduchého splashe na Android 12

1. themes.xml

Definuje vzhled celé aplikace a speciální téma pro splash screen.

<!-- res/values/themes.xml -->
<resources>
  <!-- Běžné téma aplikace -->
  <style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar" />

  <!-- Splash téma -->
  <style name="Theme.MyApp.Splash" parent="Theme.SplashScreen">
    <!-- Pozadí splash screenu -->
    <item name="windowSplashScreenBackground">@color/white</item>
    <!-- Vektorová (nebo bitmapová) ikona pro animaci -->
    <item name="windowSplashScreenAnimatedIcon">@drawable/ic_logo</item>
    <!-- Barva pozadí kolem ikony -->
    <item name="windowSplashScreenIconBackgroundColor">@color/black</item>
  </style>
</resources>

2. colors.xml

Obsahuje definice barev použitých v celé aplikaci, včetně splash screenu.

<!-- res/values/colors.xml -->
<resources>
  <!-- Definice základních barev -->
  <color name="white">#FFFFFF</color>
  <color name="black">#000000</color>
</resources>

3. AndroidManifest.xml

Nastavuje, že hlavní aktivita při spuštění používá splash téma.

<!-- AndroidManifest.xml -->
<application
    android:theme="@style/Theme.MyApp">

    <activity
        android:name=".MainActivity"
        android:exported="true"
        android:theme="@style/Theme.MyApp.Splash">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

4. ic_logo.xml

Vektorový (SVG-like) obrázek loga, který se animuje jako splash ikona.

<!-- res/drawable/ic_logo.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:fillColor="#000000"
      android:pathData="M12,2 L2,22h20L12,2z"/>
</vector>

Co se stane, když uživatel klikne na ikonu apky

1. Android načte AndroidManifest.xml:
   • Najde launcher aktivitu, např. MainActivity.
   • Zjistí, že tato aktivita má přiřazené téma, např. Theme.MyApp.Splash.
2. Android zjistí, že téma dědí z Theme.SplashScreen:
   • Tohle je klíčové – pokud téma vychází z Theme.SplashScreen, systém pozná, že má zobrazit splash screen.
3. Ještě než se aktivita vůbec inicializuje, systém:
   • Zobrazí splash screen automaticky:
     • Pozadí: windowSplashScreenBackground
     • Ikonu: windowSplashScreenAnimatedIcon (nebo bitmapu přes windowSplashScreenIcon)
     • Barevné pozadí ikony: windowSplashScreenIconBackgroundColor
     • Volitelně animaci ikony
4. Mezitím se načítá vlastní aplikace – např. MainActivity.
5. Když je aktivita připravena, systém plynule přechází ze splash screenu na aktivitu.

Splash screeny v Launch Screen Storyboard od iOS

U iOS se místo sady statických obrázků pracuje s LaunchScreen.storyboard, který se škáluje podle potřeby. 

Výsledek? Méně práce, konzistentní výsledky. 

Stejně jako u Androidu platí, že klíčové informace patří na střed.  Zbytek můžete nechat systému – ořezání nebo natažení se řeší automaticky. 

Staré časy s desítkami PNG a obavou, jestli se logo zobrazí správně i řediteli s netradičním telefonem, už naštěstí patří minulosti.

A jak to vypadá v praxi?

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB"
          launchScreen="YES" useSafeAreas="YES">
  <scenes>
    <!-- Launch Screen View Controller -->
    <scene sceneID="EHf-IW-A2E">
      <objects>
        <viewController id="01J-lp-oVM" sceneMemberID="viewController">
          <view key="view" contentMode="scaleAspectFill">
            <subviews>
              <!-- Hlavní imageView se splash obrázkem -->
              <imageView id="snD-IY-ifK" image="Splash">
                <rect key="frame" x="0" y="0" width="375" height="667"/>
              </imageView>
            </subviews>
          </view>
        </viewController>
        <placeholder placeholderIdentifier="IBFirstResponder"
                     id="iYj-Kq-Ea1" sceneMemberID="firstResponder"/>
      </objects>
    </scene>
  </scenes>
  <resources>
    <image name="Splash" width="1366" height="1366"/>
  </resources>
</document>

Výsledek vypadá takto:

Splash screen v Launch Screen Storyboard

Na iOS hraje roli i to, jaké splash screeny aplikace obsahuje – podle toho systém určuje, pro jaká zařízení je aplikace určená. Každý obrázek má své přesné jméno a místo ve struktuře .ipa souboru. 

A pokud se pracuje s původními Apple PNG, může být potřeba je nejdřív dekódovat – jejich formát je komprimovaný a běžné nástroje ho neotevřou.

Zkušený tým poznáte nejen podle vizuálu, ale hlavně podle toho, jak si poradí s technickými detaily i v komplikovanějších případech.

Zkušenosti z praxe: Co když pracujete se splash screenem pro starou aplikaci?

Přestože se dnes splash screeny řeší elegantně přes systémová API, občas narazíte na výjimky – typicky při převodu starší aplikace. V takovém případě může dávat smysl pracovat s bitmapou přesně na míru. V tuhle chvíli se opět hodí stará dobrá 1:1 šablona s vyznačenými bezpečnými zónami a ořezovými okraji – nejdůležitější obsah patří doprostřed, protože nikdy nevíme, co se odkrojí.

Tip: Od Androidu 12 vývojáři využívají SplashScreen API, které se postará o zobrazení úvodní obrazovky systémově. Ale pokud pracujete se starší aplikací (Android 11 a níž), je potřeba splash screen řešit ručně – například přes samostatnou SplashActivity, která zobrazí layout a po inicializaci přesměruje dál.

Lokalizace a automatizace splash screenů

Když pracujeme se splash screeny, nemůžeme zapomenout na lokalizaci. Pokud obrázek obsahuje texty nebo jiné kulturní artefakty, je nutné, aby se přizpůsobil jazyku a regionu uživatele.

Pokud není splashe možné vytvářet dynamicky, je potřeba zvládnout správu více obrázků – několik pro iOS a několik pro Android. 

Vytvoření a následné upravování tolika verzí může být časově náročné, a pokud do toho vstoupí lokalizace, stává se úkol ještě složitějším.

Tip: Některé nástroje (např. ionic resources) usnadňují generování splash screenů z jednoho obrázku pro více platforem, ale pozor, tyto nástroje se rychle mění a některé příkazy mohou být zastaralé. Vyplatí se vždy zkontrolovat aktuální dokumentaci.

V takovém případě se hodí automatizace – splash screeny lze programově generovat, aby se přizpůsobily různým jazykům, rozlišením a poměrům stran. To umožňuje rychlé změny ve všech verzích obrázku, a to i při přidání nových jazyků nebo při úpravách designu.

Příklad z praxe

V aplikaci Workshop jsme použili skript v ImageMagick, který umožnil automatizovanou tvorbu splash screenů. 

Obrázek měl v patičce umístěné informace, logo ve středu a pozadí se dynamicky roztahovalo. 

Tato programovaná kompozice byla výhodná, protože zajistila, že všechny verze splashe byly konzistentní, a přitom se snadno upravovaly podle potřeby. 

Když jsme měnili texty nebo jiný obsah, skript vše automaticky přizpůsobil novým požadavkům.Tento přístup by mohl být vhodný pro jakýkoli projekt, kde je potřeba spravovat více jazykových verzí nebo dynamických změn v designu, bez nutnosti ručně upravovat každý obrázek.

Splash screen – případové studie a zkušenosti z praxe

Co se v aplikaci při zobrazení splash screenu děje a jak vypadá jeho tvorba v praxi?

Splash screen pro aplikaci, která vyhledává CNG stanice

Splash screen neplní jen vizuální funkci, ale kryje také technickou přípravu aplikace. Například v aplikaci CNG stanice je potřeba během spuštění:

• načíst samotnou aplikaci,
  
• stáhnout seznam stanic a cen,
  
• připravit mapu s 3000 markery,
  
• zjistit polohu uživatele a vycentrovat mapu.
  

Zásadním bodem je požadavek na oprávnění k poloze – ten se musí zobrazit ve vizuálním kontextu, aby uživatel chápal, proč aplikace jeho polohu potřebuje. To ovlivňuje časování a schování splashe. Není to triviální a pokud s tím vývojář nemá zkušenost, snadno vznikají chyby.

Případová studie 2: Tvorba splash screenu pro CzechTrade

Ukázka splash screenu pro klienta CzechTrade.

Splash pro CzechTrade nemá komplikovanou animaci, ale je třeba jej vygenerovat 14 různých verzí.

Na splash screenu se ukazuje. 

• pozadí,
• hlavička s nápisem „Budování značky v zahraničí“
• patička s logem CzechTrade.

Pomocí skriptu v Bash + ImageMagick se automaticky generovalo 14 verzí splash screenů, každá v jiném rozměru:

#!/bin/bash -x
 
splash () {
  w=$(( $2 * 3 / 4 ))
  convert \
    splash-background.jpg \
    -resize $2 \
    -extent $2x$1 \
    \( -size $2x$1 gradient:#000000-#888888 \) \
    -compose Blend \
    -composite \
    \( splash-top.png -resize $w \) \
    -gravity north \
    -compose over \
    -composite \
    \( splash-bottom.png -resize $w \) \
    -gravity south \
    -compose over \
    -composite \
    splash$2x$1.png
}
 
splash 1536 2008
splash 1536 2048
splash 768 1004
splash 480 800
splash 320 480
splash 640 960
splash 200 320
splash 640 1136
splash 720 1280
splash 750 1334
splash 768 1024
splash 768 1280
splash 1152 1920
splash 1242 2208

Výstupem je následující proces:

• Pozadí (splash-background.jpg) roztáhne na šířku a ořízne na velikost výsledného formátu.
• Na pozadí aplikuje gradient, který způsobí zesvětlení spodní části, na které bude tmavá patička a zesvětlení vrchní části, na které bude světlý titulek.
• Hlavičku (splash-top.png) rozšíří na 2/3 šířky výsledného formátu a umístí nahoru.
• Patičku (splash-bottom.png) rozšíří na 2/3 šířky výsledného formátu a umístí dolu.
• Výslednou kompozici vyexportuje do formátu PNG.
• Takto vytvoří 14 splash screenů.

Nenápadný, ale efektivní fragment v CX vaší aplikace

Splash screeny jsou sice vidět jen krátký moment, ale dokáží udělat velký první dojem. Nejenže vypadají skvěle, ale také zlepšují celkový dojem a funkčnost aplikace. 

Při tvorbě splash screenu se zaměřte na to, aby ladil s celkovým uživatelským zážitkem, a nevyužívejte ho pro příliš invazivní marketing. Když to uděláte správně, bude to malý, ale důležitý prvek, který zlepší celkový dojem z aplikace.