Anatomie a konzistence Android GUI

1
Dlouho jsem přemýšlel, jak správně zformulovat nadpis dalšího článku, proto ho v následujících větách musím trošku víc vysvětlit. Dnes se podíváme na zásadní věci, které ovlivní grafického designéra hned při samotné praktické tvorbě grafiky pro mobilní zařízení na Android OS. Podíváme se z čeho je složená (anatomie) Android aplikace, jaká máme pravidla (nebo-li guidelines) pro designování a aplikování jednotlivých prvků. Pravidel GUI u OS Android se nutně držet nemusíme, jako to je např. u iOS, ale jejich dodržením přispíváme k dobré konzistenci aplikace. Díky jejich dodržení nám bude rozumět programátor, ale i samotní uživatele Androidu, protože jsou na „defaultní“ UI zvyklý. Pokud potřebujeme jít jinou cestou, Google je v tomto benevolentní a můžeme si vyhovět. Nejčastějším příkladem je design her.

Jako zdroj k dnešnímu článku budu využívat oficiální DevGuide od Google, dále skvělou příručku od Mutual mobile, kterou jsem již zmínil v předchozím díle a také samozřejmě k tomu přidám své zkušenosti. Je toho před námi hodně, takže se nebudeme zdržovat nudným úvodem a jdem hned na věc.

Vytvořil jsem jsem PDF dokument, kde je rozklesleno, jak jednotlivé části vypadají a kde se v aplikacích nacházejí. U každé části vypíšu standardní rozměry a uvedu popis toho, jak danou část designovat, a na co si dát případně pozor. Pokusím se je vypsat podle logického sledu – od shora dolů.

Status bar

Standardní rozměry: HDPI:  480x38px  |  MDPI  320x25px  |  LDPI:  240x19px
Popis:
Nachází se zcela nahoře. Na pravé straně zobrazuje čas, baterii a další systémové notifikace. Na levé straně baru se zobrazují notifikace z aplikací. Při tvorbě grafického designu, není potřeba rozkreslovat tento bar, stačí pouze zobrazit jako obrázek v návrhu. Pokud je součástí aplikace notifikační ikonka, bude se zobrazovat v tomto baru (o jejím designu si povíme u ikonek). Drtivá většina aplikací tento bar zobrazuje, vyjímku bývají spíše hry, které pak ignorují i zbytek nativního GUI.

Action bar

Standardní rozměry: HDPI:  480x68px  |  MDPI  320x25px  |  LDPI:  240x19px
Popis:
Tento bar už není součástí většiny aplikací. Za vzor si můžeme vzít třeba oficiálníTwitter klient. Levá část tohoto baru slouží většinou k umístění loga aplikace, pravá pak může obsahovat tlačítka (hledat, obnovit, nová zpráva atd..) nebo netapovatelné informace jako je hlasitost, síla signálu v procentech, vzdálenost apod. Smyslem tohoto baru je to, že pokud je implementován je většinou zobrazen ve všech fázích aplikace (kromě třeba využití fotoaparátů) a uživatel tak má přístup k prvkům, které tento bar obsahuje. Na druhou stranu pokud to není nutné je možné možnosti schovat do options menu.

Tab bar

Standardní rozměry: HDPI:  480x96px  |  MDPI  320x64px  |  LDPI:  240x48px
Popis:
Tab bar jsou jakési záložky (taby) nejčastěji viditelné skrz celou aplikaci. Taby zobrazují buď jiné pohledy na stejná data nebo naopak rozdílné screeny aplikace. Tab bar je v podstatě to samé jako bottom bar v iOS. Avšak jeho základní design není třeba striktně dodržovat. Taby mohou zobrazovat ikonky, texty nebo i kombinaci. Také jejich počet není striktně dán. Položky mohou být dvě, ale mohou jich být třeba 6. Při návrhu designu pamatujte na dvě základní věci. Uživatel musí na první pohled poznat, že se jedná o taby (to např. znamená = dělejte vždy velký kontrast mezi aktivní položkou a mezi neaktivní). A tou druhou věcí je jejich velikost – uživateli nesmí činit problémy se trefit na jednotlivé záložky. Pro příklad – pěkný tab bar má aplikace Foursquere.

Context, Radio, Select menu

Výška jedné položky: HDPI:  480x100px  |  MDPI  320x66px  |  LDPI:  240x50px
Šířka celého menu: HDPI:  444px  |  MDPI:  296px  |  LDPI:  222px
Popis:
Dostáváme se do prostoru, ve kterém se zobrazuje „obsah“ aplikace. Tento prostor tvoří jádro celé aplikace, ostatní prvky tento obsah buď ovládají nebo zobrazují jeho stav (hlasitost, poloha apod.) Nezapomínejte na to. Čas od času je potřeba uživateli zobrazit nějaký dialog nebo nabídku. Context menu se zobrazí, pokud dlouze podržíme prst nad nějakou položkou. Je to taková alternativa k pravému tlačítku (ve Windows) na myši. Typicky se do context menu dávají možžnosti, co lze s daným prvkem provádět. Radio a Select menu se zobrazuje po tapnutí na prvek. Pro příklad – perfektně to má zvládnuté aplikace EasyMoney

Dialog boxes

Popis:
Dialogů, které může Android zobrazit je několik. Všechny dialogy je možné opět graficky upravit a není potřeba se držet nějakých pravidel. Nicméně pokud to není vyloženě nutné (brand značky, jednotné GUI appky), používejte defaultní dialogy. Uživatelé Androidu je znají a nebude jim dělat problémy s nimi pracovat. Typickými dialogy jsou: Alert dialog – zobrazuje uživateli nějakou zprávu + případně tlačítka pro rozhodnutí a Progress bar – zobrazuje status nějaké operace (nebo vyzívá uživatele k čekání). Dalšími jsou pak Date&Time-picker(vybírání datumu) a Color weel (výběr barvy). Do PDF jsem zahrnul nativní vzhled pouze Alert dialogu. Zbytek se nachází v PSD GUI Android od Zandoga.

List & Grid view

Výška jedné položky: HDPI:  480x100px  |  MDPI  320x66px  |  LDPI:  240x50px
Výchozí barva pozadí: #ff191919
Popis:
List views je jeden z nejpoužívanějších prvků GUI Android aplikace. Zároveň je to prvek, který je designově nejmíň měněný, protože ve své nativní podobě vypadá dobře a hlavně použitelně. List views je řádkový seznam, kde každý řádek může obsahovat text nebo obrázek. Každý řádek je pak samostatně tapovatelný. Zobrazování jednotlivých položek do seznamu je užitečné a přispívá k dobré organizaci dat. Příkladem může být telefonní seznam (neboli Kontakty). Android používá tzv. fading edges – což je jinými slovy poloprůhledný stín shora a zdola seznamu, který značí možnost swipování v seznamu. V případě, že se rozhodnete pro vlastní design list view, nezapomeňte připravit PNG resource i pro horní a spodní fading edges. Grid view, který jsem doposud nezmínil, funguje na stejném principu – seznamu, jen jsou jednotlivé položky jinak řazeny (například do 3 sloupců). Což je výhodné třeba na zobrazování hudebních alb.

Options menu

Výška jedné položky: HDPI:  480x100px  |  MDPI  320x66px  |  LDPI:  240x50px
Popis:
Tento prvek je tak rozsáhlý, že by mohl zabrat celou jednu kapitolu v tomto seriálu. To co platilo pro list view platí i tu. Nativní vzhled je vcelku vzhledný, funkční a uživatelé ho znají (včetně ikon jednotlivých položek). Pokud to situace nevyžaduje, tak nechte nativní vzhled a případně dle potřeby jen dodělejte některé specifické ikony. Pokud budete options menu řešit vlastním vzhledem, máte na výběr tři nejpoužívanější realizace. První je stejná jako u nativního vzhledu – vyjíždění zespodu. Druhá varianta je zobrazení stejné jako u dialogu (na střed screenu) a třetí je zobrazení skrz celý screen. Příklady vlastních designů:Radio TycoonSygic: GPS Navigation.

Icons

Luncher icon: HDPI:  72x72px  |  MDPI:  48x48px  |  LDPI:  36x36px
Menu icon: HDPI:  72x72px  |  MDPI:  48x48px  |  LDPI:  36x36px
Status bar icon (android 2.3 a vyšší): HDPI:  24x38px  |  MDPI:  16x25px  |  LDPI:  12x19px
Status bar icon (android 2.2 a nižší): HDPI:  38x38px  |  MDPI:  25x25px  |  LDPI:  19x19px
Options menu icon: HDPI:  72x72px  |  MDPI:  48x48px  |  LDPI:  36x36px
Tab icon: HDPI:  48x48px  |  MDPI:  36x36px  |  LDPI:  24x24px
Dialog icon: HDPI:  48x48px  |  MDPI:  36x36px  |  LDPI:  24x24px
List view icon: HDPI:  48x48px  |  MDPI:  36x36px  |  LDPI:  24x24px
Popis:
Ikon je v Androidu požehnaně. Ale jednoduše je můžeme rozdělit na: aplikační a funkční ikonky. Aplikační se vztahují k dané aplikaci. Je to ve své podstatě ikonka dané aplikace (luncher a menu). Doporučuji tuto ikonku designovat nejméně v rozměrech 512x512px pro pozdější využití (portace na iOS, reklamní banner atd.). Osobně je dělám ve velikosti 600x600px. Druhá skupinka jsou ikonky funkční. Ty nahrazují nebo doplňují text u nějakého prvku. Tady doporučuji vždy designovat s rozvahou. Uživatelé znají hodně ikon a vědí, co si pod nimi představit. Proto nevymýšlejte již vymyšlené a použijte buď hotový design nebo při návrhu nové ikony vycházejte třeba z podobnosti. Obecně pro ikonky v Androidu existuje více pravidel než dodržování jejich rozměrů. Jedná se o definici stínu, barevnosti a ohraničení. Tyto detaily najdete v Android design guidelines od Matual mobile, kterou přikládám do tohoto článku.

Tak už nám chybí snad jen widgety a poté prvky z Android 3.0 a vyšší – tedy OS pro tablety. Necháme si je do nějakého dalšího článku. Už takhle mi tento článek dal na napsání dobré tři týdny a nerad bych jeho vydání dále oddaloval. Na závěr, a pro upřesnění tohoto článku – rozměry, které jsem uvedl u jednotlivých prvků se vztahují k jejich nativním vzhledům (konkrétně tedy pro smartphones se screenem v portrait režimu). Google je benevolentní a není nutné se jich striktně držet. Při tvorbě nové grafiky pro jednotlivé prvky u rozměrů vždy přemýšlejte, zda jejich změna nemůže zásadně ovlivnit chování budoucího uživatele Vaší aplikace.

Osobní stránky autora článku michalfeltl.cz

  • Host

    Nemáš to pdf ke stažení? V článku není žádný odkaz…