Menu

1. díl – Úvod do designu Android aplikací

cs3
Tímto prvním článek startuji seriál, který se bude zabývat tvorbou grafického designu pro mobilní aplikace na OS Android. Impulsem pro sepsání byl pozitivní a překvapivě veliký ohlas po první zmíňce o tomto seriálu. Doufám tedy, že zájemce o informace nezklamu a splním tak jejich očekávání. Původní koncept seriálu jsem nezměnil, tudíž celkem by mělo být 7 článků, tady je seznam:
  1. Úvod do designu Android aplikací
  2. Různé density a rozlišení Android zařízení
  3. UI Guidelines, seznam prvků
  4. Tvorba skic a prototypování mobilní aplikace
  5. Tvorba layoutu v grafickém programu
  6. Řezání grafiky a struktura resources
  7. Draw 9-patch tool
  8. Rady na závěr

V případě, že během psaní narazím na něco, co by bylo užitečné sepsat jako samostatný článek, tak to na konci udělám. Samozřejmě ocením komentáře a zohledním obsah toho, co Vás bude případně zajímat. Psát se pokusím tak, aby vždycky jeden článek vyšel do 10 dnů od vydání předchozího. Obsah článků bude kombinace načtené teorie a vlastní praxe v reálných projektech. Pokud budu mluvit o termínu “mobilní design”, budu jím myslet grafický design pro mobilní aplikaci (v tomto seriálu pro Android). Ale dost úvodu. Pojďme na to.

Pro koho je určen tento seriál?
Jednoznačně pro grafické designery, kteří se buď chtějí naučit základy tvorby grafického designu pro OS Android a nebo už něco vytvořili, a chtějí jen získat další informace. Android je operační systém určený pro mobilní zařízení, ale tvorba designu nemusí zajímat jen mobilní designéry, obsah může být zajímavý i pro grafiky, kteří s touto tvorbou nepřišli do styku a zatím třeba jen dělají weby nebo tiskoviny. Seriál nebude vhodný pro programátory – přímé vývojáře na Android. Ti se tu nenaučí nic nového. Maximálně zjistí, proč spolupracovat s grafikem a jaká je jeho úloha při vývoji.

Co by měl designer vědět o Androidu?
Android je na Linuxu založená softwarová platforma určená zejména pro mobilní zařízení (chytré telefony, PDA, navigace, tablety) vyvinutá původně společností Android Inc., kterou akvizicí převzal Google v roce 2005. Jedná se o open source software. 23. září 2008 byl oficiálně představen systém Android 1.0 i s vývojovým prostředím a tedy i s možností tvorbou designu prvních vývojářských aplikací. Historií Android GUI se budu zabývat v dalším díle, tak ho tu elegantně přeskočíme.

Jak taková tvorba grafiky pro Android vypadá?
V první řadě musím říci, že hodně podobně jako pro ostatní mobilní OS (např. iOS, BlackBeery atd.), takže pokud již tvoříte grafiku pro mobilní zařízení, jen pro jiný OS, budete v pohodě a rychle si osvojíte pouze drobné odlišnosti a rychle se jim přizpůsobíte. Pokud máte zatím zkušenosti jen s webdesignem, tak u mobilního designu najdete velké rozdíly, které Vás buď chytnou nebo odradí. Já grafiky dělím na kreativce a techniky. Kreativci se vyžívají v kolážích, hrají si s kerningem, pořizují vlastní fotografie, barvy míchají podle svého pocitu, hledají v designu nové cesty atd. Na rozdíl od techniků, ty mají rádi jasný řád a postup výroby, používají doporučené fonty, využívají fotobanky, ulehčují si práci již vymyšlenými a funkčními postupy, používají palety barev atd. Pro koho myslíte, že bude vhodný mobilní design? Jestli jste odpověděli pro techniky. Tak máte pravdu. Mobilní design je v grafice silně technický směr a to včetně tvorby pro OS Android. Klade daleko větší důraz na tvorbu skic a při složitějších aplikacích i na tvorbu prototypů. Grafik musí znát funkčnost aplikace, smysl a i důvod výskytu jednotlivých prvků. Pravidla při tvorbě jednotlivých prvků jsou přísnější než třeba u webdesignu, kde si nastavíme jeden layout (např. 960px) a do něj strkáme prvky. U tvorby grafiky pro mobilní aplikaci je designer blíže programátorovi a dochází tam ve většině případu k přímé komunikaci. Designér musí znát seznam, velikosti a barvy nativních prvků. Neodradil jsem Vás? Já doufám, že ne :-). Nebojte, tvorba takové grafiky je i zábava a při osvojení některých postupů jde i celkem rychle od ruky.

Mýty a fámy, které provází grafický design pro Android
Slýchám dva. První je ten, že vývojář (programátor) na OS Android nepotřebuje k sobě designéra. Vystačí si sám. Ano je to pravda, ale pouze do jisté míry. V případě tvorby jednoduché aplikace, na kterou stačí aplikovat základní GUI Androidu (nativní prvky). ALE! Za prvé! Komu se ty nudné šedé aplikace líbí? A za druhé! Při složitějším UI aplikace je třeba vytvořit vlastní prvky, které zvládnou požadavky aplikace. Kdo je udělá? Grafik.

Abych Vás přesvědčil, mrkněte na dva screeny:

Vidíte ten rozdíl? Obě aplikace jsou na Android. Na levém screenu je aplikace složená pouze z nativních prvků. Na pravém screenu je grafika na míru. Obě aplikace jsou svojí funkčností v podstatě totožné, ale grafický vhled se diametrálně liší. Podobných příkladů by se dalo uvést více. Navíc existují aplikace, které se ani bez grafiky na míru nedají postavit. Dobrým příkladem jsou hry. Dovedete si představit Angry Birds postavené z nativních prvků? Asi ne, že..?

Druhý takový mýtus je ten, že aplikace na Android jsou hnusné. Tenhle názor hlavně přebývá v hlavách lidí, kteří znají jen iOS (iPhone, iPad) a porovnávají některé aplikace, které nejsou na Android ještě portovány. iOS jako systém je ve světě o pár let déle, proto získal větší oblibu u grafických designérů. S nástupem Androidu se situace změnila. Designéři se musí naučit přizpůsobit grafiku dalšímu mobilnímu OS.

Abych svá tvrzení potvrdil, mrkněte opět na dva screeny:

Jedná se o internetový prohlížeč Opera Mini, který je vytvořený jak pro iPhone (vlevo) tak i pro Android (vpravo). Tak co, který grafický design je hnusnější? Hmm, těžké že? Toto je ideální stav, kdy se jedna aplikace téměř 100% shoduje v grafice napříč jinými OS.

Příklady hezkých designů pro OS Android
Na závěr prvního článku bych rád ukázal nějaké pěkné designy pro Android. Důvodem je to, abyste si udělali představu o tom, jak to vlastně vypadá a co budeme tvořit. u každého příkladu zkusím zmínit zajímavost, která je specifická pro design na mobilní zařízení.

Foursquare | odkaz na Market
http://youtu.be/sSa-UCL-AJI

Na téhle aplikaci je dobře vidět, jak je možné graficky předělat nativní design vrchního tab baru. (menu s ikonkami nahoře). Grafika odznáčků a další.

Firefox 4 | odkaz na market

V tomto případě se nejená o nějaký unikátní design. Důvod proč dávám zrovna tento příklad je použití bočních panelů, nalevo jsou otevřené panely a napravo pak navigace. Inovativní řešení designu aplikace, které je zároveň i praktické.

Radio Tycoon | odkaz na Market

Jako zástupce her jsem se rozhodoval mezi Paradise Island a Radio Tycoon. Nakonec jsem dal přednost českým vývojářům. :-). Takže tady za zmíňku stojí vlastní design dialogových oken a spodního tab menu.

CNN | odkaz na Market

Nesmíme také zapomenou na tablety, které jsou “horkou” novinkou a tvorba aplikací na tato zařízení je tak trochu ještě pole neorané (které se ale rychle oře :)). Jako zástupce přidávám aplikaci CNN, u které si všimněte propracovaného levého menu.

A tím bych první díl zakončil. Abych to ještě na závěr shrnul. Dozvěděli jsme se obecně něco málo o OS Androidu. Už víme jak taková tvorba vypadá a jak se liší třeba od webdesignu. Vyvrátili jsme dva nejznámější mýty, které kolem designu na OS Android panují. A na úplný závěr si ukázali některé designově vyvedené aplikace, které se třeba můžou stát naším vzorem při vlastní tvorbě. V příštím dílu se již podíváme na Android GUI a jeho historii. Těšte se. :-)

Tento článek je součástí seriálu: Tvoříme design pro mobilní aplikace na Android
Autorem článku je Michal Feltl

 

Komentáře

TomVal

TomVal

22.6.2011 8:35

Výborně, tak doufám, že budete pamatovat na to, že Android používají i lidi, kteří vidí velmi špatně nebo vůbec

Ondřej

Ondřej

22.6.2011 8:56

“Toto je ideální stav, kdy se jedna aplikace téměř 100% shoduje v grafice napříč jinými OS.”

Opravdu to je ideální stav? Pro koho? Pro uživatele jistě ne, takhle si ulehčují práci někteří vývojáři… použijí nějaký balík, pomocí kterého to vypadá všude stejně a neberou ohledu na to, že se s různými platformami i různě pracuje.

Můžu poprosit o nějakou galerii hezkých Androidích aplikací? Asi patřím do té skupiny, která si stále myslí, že A. aplikace jsou hnusné :-) Díky.

buris

buris

22.6.2011 9:16

Za jedno z nejpovedenějších UI ve světě Androidů považuji aplikaci OvuView.
Z obrázků to nemusí být tak patrné, je potřeba s aplikací chvíli pracovat.
-b

dEvilPS3

dEvilPS3

22.6.2011 11:01

myslim,ze pokud si hrajes s ovuview,tak nekde neni neco v poradku…:-D
ale ted vazne, grafika u aplikaci je zaklad…uz jsem se setkal se spoustou co byli sice funkcni,ale vylozene hnusne…dlouho jsem nemohl najot pro oko priemny poznamkovy blok (nej je asi catch a springpad),a pro oko hezky agenda widget. Kdyz bylo neco pekne,tak to bylo hnusne a nebo naopak.Jeste ze lidi neleni:-)

Michal Feltl

Michal Feltl

22.6.2011 12:15

to Ondřej: proto tam je téměř. Asi mi tam vypadla věta s ohledem na nativní prvky daného OS.

JirikDrak

JirikDrak

22.6.2011 21:27

Hezký aplikace sou podle mě třeba Pulse, Evernote, Soundhoud, IMDb, Speedtest, od samotnýho Googlu je to ale snad jedině Youtube.
Vysloveně ošklivá je třeba app Gmailu…

yderf

yderf

22.6.2011 23:49

dobry priklad je aj K-9 Mail – velmi strucna a pouzitelna grafika. No co cloveku branit drzat to na ploche je uplne odveci, kedze ikonka je extremne hnusna

HudsonStan

HudsonStan

23.6.2011 12:43

Android má hnusné aplikace a iOS uživatele. :-P

Franta

Franta

23.6.2011 18:08

Taky nesnasim hnusny aplikace :) Snad nejhorsi sou takovy ty geek utility jako titaium backup nebo astro. Hezky apps jsou treba Catch, Evropa 2, Facebook a Google Books.

Michal P.

Michal P.

25.6.2011 16:09

Příklad s GUI zrovna dvakrát vhodný nebyl. Ten přehrávač vpravo má GUI naprosto strašné…

RSS (komentáře k článku)