3. díl – Anatomie a konzistence Android GUI

 
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 jdeme hned na věc.
 
Vytvořil jsem PDF dokument, kde je rozkresleno, 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ů.

 

Standardní rozměry: HDPI:  480x38px  |  MDPI  320x25px  |  LDPI:  240x19px

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, výjimkou bývají spíše hry, které pak ignorují i zbytek nativního GUI.

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.

Context, Radio, Select menu

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í kalendářního data) a Color wheel (výběr barvy). Do PDF jsem zahrnul nativní vzhled pouze Alert dialogu. Zbytek se nachází v PSD GUI Android od Zandoga.

List view 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 view 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.

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 obrazovky) a třetí je zobrazení skrz celou obrazovku. Příklady vlastních designů: Radio Tycoon, Sygic: GPS Navigation.

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.