16.5.2015

Následuje návod jaké grafické podklady připravit pro mobilní aplikaci. Primárně je určen pro naše zákazníky, kteří si připravují grafiku vlastními silami, ale fungovat bude i pro všechny ostatní grafiky, kteří dostali za úkol připravit mobilní aplikaci.

Než začnete

Než se do pustíte do tvorby grafiky pro iOS, nebo Android, vyplatí se přečíst si UI guidelines pro obě platformy:

Tento krátky souhrn nemá určitě ambici gudelines nahradit, jeho cílem je na jednom místě vypsat základní prvky, které jsou potřeba pro každou aplikaci a to v kontextu dvou hlavních platforem Android a iOS. V guidelines se dozvíte jak správně postavit informační achitekturu aplikace, proč je dobré dodržovat styl dané platformy a proč není dobrý nápad dělat jeden design pro obě platformy.

Podívejte se také na problematika fontů. Obzvláště pokud se chystáte použít vlastní font, nezapomeňte překontrolovat licenční podmínky.

Aby jste si ušetřili práci

Většina z Vás bude asi připravovat grafické podklady ve Photoshopu. Diskuse o tom jestli je to ten nejlepší nástroj na tvorbu grafiky, nebo jenom žijící fosílie nechme stranou. Pokud ale Photoshop použijete, určitě zkuste nástroj Cut&Slice me, který výrazně usnadní export do všech potřebných velikostí. Dokonce je připraví do správné adresářové struktury a se správnými jmény, takže uděláte radost i vývojáři.

Formát obrázků

Všechny podklady je potřeba připravit ve formátu PNG. JPG příliš zkresluje vektorovou grafiku a samotná vektorová grafika je na obou platformách teprve v plenkách.

Ikonka

Bez nadsázky srdce Vaší aplikace. Bude Vás reprezentovat v obchodu s aplikacemi, uživatel ji bude vidět na ploše svého telefonu a musí ji bezpečně nalézt pokaždé, když zatouží po Vaší aplikaci.

iOS

Ikonka pro iOS se exportuje jako PNG bez alfa kanálu a bez kulatých rohů, které dělají až Apple nástroje.

Rozměry
29 x 29
40 x 40
58 x 58
76 x 76
80 x 80
87 x 87
120 x 120
152 x 152
167 x 167
180 x 180
512 x 512
1024 x 1024

Android

Ikonka bude zobrazena tak jak ji vyexportujete, je tedy třeba nakreslit ji včetně kulatých rohů.

Rozměry
48 x 48
72 x 72
96 x 96
144 x 144
512 x 512

Google Play grafika

Pro lepší prezentaci aplikace na Google Play se využívají dva formáty grafiky. Přičemž první níže uvedený je povinný, druhý je aktuálně používán pouze na verzích Androidu nižších než 4.0 a je tedy nepovinný. I tak ale doporučujeme vytvořit oba, ušetříte si práci pokud se v budoucnu rozhodne Google i druhý formát opět zobrazovat.

Typ grafiky Rozměr
Hlavní grafika 1024 x 500
Propagační grafika 180 x 120

Jak má taková grafika vypadat, je možno si přečíst zde v článku Google Play Featured-Image Guidelines na oficiálním Android Develpers blogu.

Kompletní přehled všech grafických prvků pro Google Play je v této Google nápovědě.

Splash screen (pouze iOS)

Česky bychom řekli asi spouštěcí obrazovka, Apple jí říká Launch screen. Zkrátka to co se ukáže, než se načte vlastní aplikace. Používá se pouze na iOS, platforma Android nic takového nezná.

Tradiční splashscreen

Jedná se o staré dobré PNG, které připravíme pro každou velikost zařízení. Nevýhodou je vyšší pracnost, výhodou vytvoření pixel-perfect výstupu. Tradiční splashscreen musí splňovat tyto náležitosti:

  • Neobsahuje alfa kanál
  • Je ve formátu PNG

Následují rozměry v pixelech pro jednotlivá zařízení:

iPhone 4
portrait 640 x 960 @2x (retina)
iPhone 5
portrait 640 x 1136 @2x (retina)
iPhone 6
portrait 750 x 1334 @2x (retina)
landscape 1334 x 750 @2x (retina)
iPhone 6 Plus
portrait 1242 x 2208 @3x (retina HD)
landscape 2208 x 1242 @3x (retina HD)
iPad a iPad mini
portrait 768 x 1024 @1x (non-retina)
landscape 1024 x 768 @1x (non-retina)
iPad a iPad mini retina
portrait 1536 x 2048 @2x (retina)
landscape 2048 x 1536 @2x (retina)
12.9-inch iPad Pro
portrait 2048 x 2732 @2x (retina)
landscape 2732 x 2048 @2x (retina)

Generovaný splashscreen

Jedná se o obrázek o rozměrech 320x320px, pod který dáme plnou barvu. Například bílé logo Vaší společnosti na černém pozadí. Obrázek připravte ve formátu PNG a může samozřejmě využívat průhlednost. Obrázek lze umístit kamkoliv na obrazovce.

Screenshoty

Obrázky s náhledem obrazovek aplikace pro Google Play a AppStore.

iOS

Rozměry jsou stejné jako u Splashscreenu, je třeba dodržet tyto vlastnosti:

  • Neobsahuje alfa kanál
  • Je ve formátu PNG
  • Maximum je 5 obrázků z jednoho zařízení

Android

Pro platformu Android nejsou přesné rozměry screenshotů stanoveny. Vyžádováno je pouze toto:

  • Screenshoty z telefonu, 7″ tabletu a 10″ tabletu v libovolném rozlišení.
  • JPEG nebo 24bitový PNG (bez kanálu alfa).
  • Minimální délka každé strany 320 pixelů.
  • Maximální délka každé strany 3840 pixelů.
  • Minimálně 2, maximálně 8 screenshotů od každého zařízení.

Video

Pro lepší prezentaci aplikace poslouží video.

iOS

Požadované vlastnosti:

  • Minimální délka 15 sekund.
  • Maximální délka 30 sekund.
  • Maximální počet snímků za sekundu 30 (FPS).
  • Podporované formáty mov, mp4, m4v.
  • Maximální velikost souboru 500MB.
  • Kodek videa H.264.
  • Kodek audia 256kbps AAC.
  • Vzorkovací frekvence 44.1kHz nebo 48kHz.
  • Video není dostupné na 3.5-Inch zařízeních.
  • Je možné nahrát pouze jeden jazyk.
  • V rámci videa musíte upozorvnit na případné InAppPurchases
  • May contain no ads, no platform logos, no pricing, and no timelines.
  • Accepted video resolutions are:
Zařízení Landscape Portrait
iPhone 4 video není k dispozici
iPhone 5 1920 x 1080 nebo 1136 x 640 1080 x 1920 nebo 640 x 1136
iPhone 6 1334 x 750 750 x 1334
iPhone 6 Plus 1920 x 1080 1080 x 1920
iPad 1200 x 900 900 x 1200

Android

Vkládá se odkaz na Youtube a tak i vlastnosti videa se řídí požadavky tohoto portálu.

Vlastní design aplikace

Povídání o samotném designu aplikace by jistě vydalo na několik dalších článků, přečíst si o něm můžete i ve výše zmiňovaných Design guidelines. Mezi nejčastější dotazy ale patří v jakém rozlišení vlastně design aplikace kreslit. Osobně vždy doporučuji tyto rozměry:

Zařízení Rozměry
Telefon 960 x 1440
7″ tablet 1800 x 2700 px
10″ tablet 2160 x 3240 px

V případě telefonu se jedná o rozměr displeje v pixelech pro ty nejmenší zařízení. Obvykle je totiž snazší škálovat zobrazení pro větší displej, než zmenšovat pro menší.

Vladislav Skoumal
SKOUMAL CEO