Je na čase náš grafický návrh smyšlené aplikace Vánočníček dokončit. Pokud nevíte o co jde, tak vězte že se chystám navázat na tento blogpost. Pokud tedy první díl nemáte projetý, nedoporučuji se pouštět do čtení tohoto druhého. Chyběli by Vám souvislosti, které byly již probrány a bez nich by jste nebyli schopni tento tutoriál dokončit.

Otevřete si tedy svůj původní pracovní soubor s aplikací Vánočníček a zkontrolujte si, že Vám z minulého dílu nic neuniklo a máte tedy hotové dva screeny (Splash a Home). V tomto druhém článku náš design aplikace dokončíme. Konkrétně tedy dokreslíme zbývající dva screeny a na závěr zkusíme naší aplikaci vložit do grafické makety telefonu a udělat jednoduchý promo obrázek.

Takže dle našeho wireframu přichází na řadu design Gifts screenu. Už z pohledu je jasné, že bude hodně vycházet z Home screenu. Takže zduplikujte skupinu "Screen: Home" a přejmenujte jí na "Screen: Gifts". V Action baru přibylo tlačítko domečku, který by nás měl po tapnutí vracet na Home screen. Zduplikujeme si tedy skupinu btn_plus a přejmenujeme jí na btn_home, odmažeme ikonku domečku a zbytek (separator) umístíme přesně dle obrázku. Nyní si nakreslíme ikonku domečku nebo pro ty málo tvořivé si stáhneme již hotovou odsud. Ikonku opět umístíme přesně do layoutu (viz. obrázek). A poté jí 2x zduplikujte a zkopírujte jednotlivé styly vrstev z ic_plus_focused a ic_plus_pressed. Protože, chceme zachovat stejné styly napříc celé aplikace.

Pokud jste tak ještě neudělali, odmažte textovou vrstvu "Vánočníček". A místo ní uděljete novou s obsahem "Manželka", ovšem nyní už systémovým písmem Droid Sans Bold a použijte velikost 24px. Přidejte vnější stín. Tento text se bude vypisovat programově. (Definici vnějšího stínu je potřeba říci programátorovi).

Nyní se přesunume do CONTENT, tedy do tvorby obsahu. Pokud jste si správně zduplikovali Home screen, ponechte si jen jednu položku a na té budeme pracovat. Smažte z ní ikonu Santa čapky a místo ní si umístěte ikonu dárku, pomoct si zase můžeme třeba zde. Z ikonky je potřeba odmazat odraz stejně jako bylo u ic_check. Dále jí přebarvíme na #ffd027 a přidáme vnější 1px bílý stín. Poté si vytvoříme novou textovou vrstvu a napíšeme "Ruční mixér z tržnice", použijte Droid Sans Regular, 22px, barva #b11e1e. Všiměte si velikost textové vrstvy, určete jí přesnou hranici, kam až může zasahovat. Také novou ikonu a textovou vrstvu je potřeba správně zarovnat. Pokud je to možné, řadíme vždy na stejnou vertikální úroveň jako již hotové vrstvy.

Vzhledem k tomu, že text v dárku může být dlouhý na více řádků, proto musíme změnit barevný přechod na pozadí položky. Mohli bychom ho nechat, ale u dlouhých textů by vypadal blbě. Jinak platí stále to, že po dlouhém tapnutí na položku se zobrazí kontextové menu s položkami edit a smazat. Po krátkém tapnutí se naše položka stane aktivní, což symbolizuje, že tento dárek na seznamu máme koupený. Přechod tedy smažte a nahraďte to dvěma tvary (obdelníky), kde jeden (480x94px) tvar reprezentuje pozadí a druhý dělíci linku (480x2px). Pozadí bude mít bílou barvu #FFFFFF a linka světle šedou #e5e5e5.

Máme hotovu jednu položku, kterou můžeme zduplikovat a zkusit si vytvořit text na dva řádky. Pozadí položky nyní bude mít velikost 480x132px, linka zůstává 2px. Dbejte na přesné zarovnání. Odsazení mezi řádky jsme použil 30px. S dárkem nehýbeme.

Nyní si položku několikrát zduplikujeme a podle wireframu přepíšeme jednotlivé položky. Také si vytvoříme jednu nebo dvě neaktivní položky, to jsou ty, které máme na seznamu, ale zatím jsme je nekoupili. Funkčně to máme vymyšlené tak, že po tapnutí na neaktivní položku (šedá ikonka a text) se jí změní barva a navíc se nám zařadí nahoru za poslední aktivní položku. A obráceně.

Opět nesmíme zapomenou na stav, kdy chceme změnit stav nějaké položky, tedy pressed a focused stav. Použijeme tedy na jedné položce stejný styl jako na Home screen, tedy vyplnění žlutou barvou #ffd027. Ale ejhle zjistíme, že stejnou barvou máme udělané aktivní ikonky a to nejde do sebe. Takže jim změníme barvu na stejnou jako je na Home screen počet koupených dárků. To dává smysl že?

Gift screen je hotový. Zbývá nám About screen, který vychází ze Splash screen, takže si ho zduplikujte. Po menší rozvaze jsem se rozhodl ho přepracovat oproti wireframu. Odmažte ic_check a text "seznam dárků". Ikonku dárku umístěte na spodek obrazu, tak aby vykukuvala jen jeho půlka.

A nyní přidáme texty. Všechny texty jsou jsou fontem Chaparral Pro Bold a je na ně aplikovaný stejný styl jako má Vánočníček. O aplikaci a slogan má velikost textu 30px a proklad mezi řádky je 44px. Jméno je velikostí 48px a emailová adresa 28px (proklad stejný).

No a je to. Vepsáním svého jména (moje nepište :)) do About screen jste úspěšně zakončili tento tutoriál. Nyní si múžete své plátno zvětšit na 1920x800px a pyšně se podívat na svojí práci.

Na začátku článku jsem slíbil jednoduchý postup, jak udělat pěkný promo obrázek naší aplikace. Takže se na to ještě v rychlosti podíváme. Potřebujete nějaký pěkný model mobilu (nejlépe aktuální model). Ke stažení dávám model Samsung Galaxy S pro rozlišení screenu 480x800, tedy ideální pro náš vzorový příklad. Je to PSD i PNG.

http://dl.dropbox.com/u/20904455/Blog/tut1_android/Samsung_Nexus_S%20-%20prom...

Soubor si otevřete a telefon jednou zduplikujte. Z našehho návrhu aplikace si vybereme dva screeny. Subjektivně vybírám vždy ty, o kterých si myslím, že jsou nejhezčí nebo z nich je jasně vidět smysl aplikace. Vybereme si tedy dva screeny a přeneseme je do promo obrázku. Umístíme je přesně na screen telefonu.

Jeden telefon si zmenšíme na 85% na výšku i šířku a umístíme za nezvětšený telefon. Takto dosáhneme jednoduchého vizuálního dojmu, že jsou telefony za sebou (perspektiva).

Pak už nám chybí jen doplnit nějaký text a promo obrázek tak dokončit. Jednotlivé parametry textu Vám již vypisovat nebudu, věřím že si s tím pohrajete sami. Pokud bychom měli již nadesignovanou ikonku aplikace, toto by bylo vhodné místo, kde bychom jí k promo textu přilepili. Jak vytvořit takovou aplikační ikonku pro Androida se můžeme podívat v nějakém dalším článku...

 

To je dnes vše.

Konec teorie. Dnes se podíváme na reálnou praxi toho, jak v grafickém programu zkreslit aplikaci pro Android. Čelý článek bude mít charakter tutorialu, jak při designování postupovat. Budu popisovat vlastní praxi, je možné že není 100% správná a najdou se designeři, kteří to dělají jinak. Způsobů, jak se do cíle dostat je několik. Dnes Vám ukážu svůj.

1.) Zadání

Dlouze jsme přemýšlel, jakou vzorovou aplikaci udělat a vzhledem k tomu, že se pozvolna blíží Vánoce, tak jsem se rozhodl pro takový jednoduchý Wishlist. Připravíme si design aplikace, která pokud by se zrealizovala, tak by sloužila pro vytvoření seznamu blízkých, kterým chceme o Vánocích nadělit dárky. A samozřejmě ke každé osobě pak možnost přidávat dárky, které si přeje a které již máme nakoupené. Vzhledem k tomu, že tutoriál budu psát v češtině, design aplikace (texty) bude také v češtině. Naše aplikace ponese také české jméno = Vánočníček. Jdeme na to.

2. Wireframe

Jak jsme si řekli v minulých dílech seriálu, základem úspěšného návrhu aplikace je dobrá příprava ve formě skicy nebo wireframu. Proto ani já tento krok nezanedbám a připravil jsem wireframe aplikace, kterou si dnes nadesignujeme v grafickém programu. Model jsem kreslil v Balsamiq Mockups. Design naší apliakce se bude skládat ze 4 screenů.

 

3.) Grafika

Návrh designu budu připravovat v grafickém programu Adobe Photoshop, nicméně pro samotnou tvorbu se dá použít i jiné programy (Adobe Fireworks, Gimp, Corel atd.) - jen jednotlivé funkce a nabídky budete mít jinde.

Takhle by měl vypadak dnešní výsledek:

Takže začínáme... Nejprve si vytvoříme nový dokument o rozměrech 480x800, protože budeme kreslit naší aplikaci v hdpi rozlišení.

A v něm si nastavíme patřičnou mřížku, kterou budeme v návrhu dodržovat. U Androida je výhodné využívat mřížku násobku 3. Vzhledem k tomu, že budeme dělat jednodušší návrh s méně detaily, uděláme si mřížku po 12 pixelech.

Vytvoříme si novou skupinu "Screen: Splash" a do ní umístíme naší první vrstu: Status bar. Pokud jí nemáte, můžete si jí stáhnout zde a umístit do dokumentu jako samostatnou vrstvu zarovnanou zcela nahoru. Bude nám zabírat 36px na výšku.

Splash screen je první obrazovka, která je vidět při zapnutí aplikace (loadovací obrazovka). U naší jednoduché aplikace, by snad ani nebyla potřeba, ale schválně jsem jí do tutoriálu zařadil, abychom si ukázali, jak na ní. Obecně se na ní nachází logo a motiv aplikace. Je to taky screen, který celou aplikaci prodává, proto musí být, jak se říká vymazlená...

V našem příkladu si vytvoříme nový tvar přes šířku obrazu a výškou 764px (36px zabírá status bar). Tento tvar vyplníme barvou #b80101 a ve stylech mu přidáme vzorek. který dávám ke stažení. Vzorku nastavte 20% krytí.

http://dl.dropbox.com/u/20904455/Blog/tut1_android/vanocnicek_pattern.pat

Duplikací tohoto tvaru si vytvoříme novou vrstvu, na které uděláme barevný přechod (#000000 -> #9e9e9e). Této vrstvě nastavíme krytí na 20%.

Nyní vytvoříme jednoduché logo naší aplikace, které se bude skládat pouze z textu Vánočníček. Font jsem použil Chaparral Pro Bold, pokud tento font nevlasníte, můžete si pomoct nějakým podobným. Prostrkávání nastavte na -30. Text je velký 75px a má následující styly:

Nyní potřebujeme použít něco jako hlavní motiv naší aplikace. Je zbytečné, abychom se s něčím do našeho příkladu složitě kreslili, proto použijememe již hotovou pěknou ikonku ve velikosti 512x512px, kterou si můžete stáhnout zde. Ikonu si umístěte do obrazu a zmenšete jí na 320x320px. Vertikálně jí zarovnejte na střed layoutu.

Dále si stejným fontem napíšeme text "seznam dárků". Styl zkopírujte z textu "Vánočníček" a pouze upravte barvu na #ffd027. Hodila by se nám ještě menší ikonka odškrtuné položky, proto si pomůžeme tady. Jen jí lehce upravíme - odstraníme odlesk. Uděláme tedy výběr, vytvoříme vrstvu výjmutím a tuto vrstu smažeme. Opět zkopírujeme a vložíme stejný styl vrstvy do této ikonky.

Vytvoříme si novou skupinu, do které vložíme text i ikonku a celou skupinu vycentrujeme s textem Vánočníček a ikonou dárku. A tím máme hotový splash screen.

Nyní se pustíme do návrhu Home screen. Abychom si práci urychlili, tak celou skupinu se Splash screenem zduplikujeme a přejmenujeme na "Screen: Home". Skupinu se Splash screenem si dáme jako neviditelnou. A nyní již budeme pracovat jen se skupinou "Screen: Home", ze které odmažeme ikonu dárku, odškrtnutí a text "seznam dárků". Naše logo Vánočníček si zmenšíme ze 75px na 36px. Vrstvy Přechod a BG+vzorek si zmenšíme na 480x72px -> vytvoříme z něho pozadí pro Action bar. A do volné plochy 480x692px vytvoříme nový tvar vyplněný barvou: #FFFFFF. Pro lepší pochopení jak to poskládat se podívejte na následující obrázek:

Logo horizontálně vycentrujeme s pozadím Action baru a přesně zarovnáme na 36px od kraje (3. kostka v mřížce). Zarovnávání je důležité, protože to pak nejen vizuálně bude dobře vypadat, ale může se podle toho řídit i případný programátor aplikace.

Podle wireframe patří ještě do actionbaru tlačítko pro přidání osoby do seznamu. Takže si vytvoříme novou vrstvu o velikosti 2x72px, vyplníme jí bílou barvou (#FFFFFF) a nastavíme jí krytí 50%. S jejím umístěním nám pomůže mřížka (viz obrázek). Dále si nakreslíme jednoduchou ikonku pluska, která se vlastně skládá ze 3 tvarů. Pokud si na to netroufáte, tak si jí můžete stáhnout zde. Ikonce dáme stejný styl vrstvy, jako má naše logo Vánočníček a překryjeme jí bílou barvou.

Abychom měli tlačítko kompletní, je potřeba mu dodělat ostatní stavy a to stav kdy je označené kurzorem (focused) a ve stavu zmáčknutém (pressed). Základem je, že stavy u všech tlačítek by měli být, pokud to je možné, stejným stylem, tak aby uživatel aplikace si byl jistý, co se mu děje pod rukama. Druhým pravidlem, kterým se řídím, pochází z reality: focused stav je něco co mám označené, něco co držím -> na něco ukazuji -> snažím se to zviditelnit. A pressed stav -> měním stav té věci -> něco zmáčknu -> promáčknu atd. Ikonku si tedy dvakrát zduplikujeme a doděláme oba stavy. Ikonka ve focused stavu se akorát změní barevně (použijeme stejnou barvu z textu "seznam dárků", tedy: #ffd027) a ve focused stavu vyměníme vnější stín za 1px bílý vnitřní stín.

Nyní se vrhneme na obsah, kde je potřeba vytvořit seznam (ListView) jednotlivých položek. Postupuji vždy tak, že si nejprve vytvořím všechny prvky jedné položky do jedné skupiny a tu následně rozkopíruji a upravím jen to, co je nezbytně nutné. Takže si nakreslíme nový tvar o velikosti 480x96px, umístíme ho přesně pod Action bar a uděláme mu přechod z #e5e5e5 do #f4f4f4.

Přemýšlel jsem jakou použít ikonku do seznamu, protože person/man se mi moc nehodila, vyštrachal jsem jednu hezkou santa čapku, takže jí v našem návrhu použijeme, stáhněte si jí zde ve velikosti 48x48px a zmenšete na 36x36px. Ikonku přesně umístěte tak, aby byla zarovnaná s textem Vánočníček, překryjte jí barvou #b11e1e a přidejte vržený stín 90°, 1px, #FFFFFF, 75%. Přidejte texty "Manželka" a počty dárků. Font již použijte systémový (Droid Sans Bold), 22px, barvy: červená: #b11e1e a žlutá #b68f03. A nakonec položku 4x rozkopírujeme a upravte texty. Výsledek našeho snažení si můžete prohlédnout na následujícím obrázku.

Abychom byli úplně spokojení, je potřeba zase definovat, jak bude vypadat pressed a focused stav u položky v seznamu. Protože se jedná o graficky nenáročnou appku, tak jsem zvolil pressed a focused stav udělat ve stejném a to překrytí barvou #ffd027. Tímto máme hotový další screen a jsme v půlce našeho tutoriálu.

Článek se pěkně natáhl, proto ho rozdělíme na dva díly. Pokud nebude něco jasného, reagujete do komentářů a já se pokusím na vše odpovědět.

Konečně jsme se dočkali změny systémovýho fontu v Androidu. V ICS 4.0 je použitý font "Roboto". Z grafického pohledu bylo Androidu právě vytýkáno použití systémového fontu Droid Sans. Díky němu byla vizuální stránka aplikací srážena dolů. Dávám font ke stažení. K čemu je dobrý? Grafický designer ho využije při vytváření návrhu aplikace v grafickém programu pro ICS. Možná trochu předčasně, ale do knihovny fontů se bude hodit. Zároveň přidávám ke stažení i font Droid Sans (může se někomu hodit).

htěl bych se podělit s pár postřehy, které jsem z včerejší návštěvy GDD v Praze nasbíral. Možná článek vyzní negativně, ale to není úmyslem. Odjel jsem z GDD s pocitem, velmi dobře investovaného času. A děkuji za pozvání.

Pozvánky
Už na samotném začátku vyplňování přihlášek se mi nelíbilo, jak je formulář úzce zaměřen na vývojaře (programátory). Chápu, že grafický designéři a UI/UX architekti nejsou mainstream pro tuhle akci, ale úplně zapomínat by se na ně nemuselo. Vývoj aplikací pro Android / Chrome není jen o bouchání samotného kódu, tomuto vývoji předchází skicování, tvorba grafických návrhů, řez resourců atd. Takže podle mého názoru měla tahle akce udělat i menší místo pro další obory, které vstupují do samotného procesu vývoje aplikací.

Registrace
Přijeli jsme do úplného chaosu. Po celé té velké místnosti se dokola tvořila obří fronta a přitom u některých registračních míst bylo 10 lidí. Jednodušší systém by byl příjem registrací na základě počátečního písmene příjmení (A-F G-J apod.). Milé překvapení bylo GDD tričko a několik placek na výměnu. Tohle zafungovalo. Díky plackám jsem se seznámil s lidma, které bych normálně neoslovil. Rád bych ještě vyzdvihl mobilní aplikaci pro GDD, která pomohla v orientaci. Super práce.

Keynote
Dalo by se hodnotit jako nadprůměr. Překvapením bylo - 3D brýle pod každou židlí. Místo známích marketingových číslech o aktivacích, počtu aplikací a historický vývoj Androida bych uvítal nakousnutí toho, jaká je blízká budoucnost a na čem třeba Google pracuje. Chápu, že většina věcí je tajných, ale proč se na takovéhle akci nemohou developeři dozvědět něco více. Co nás bude čekat a kam své aplikace můžeme směřovat. Škoda. Jinak keynote nenudila a občas byla i zábava.

Přednášky
Absoloval jsem všechny přednášky, co byly o Androidu. Přednášející hodnotím kladně, obsah záporně. Proč je nutné si vyslechnout úplné základy o tom, že je potřeba aplikace ladit podle rozlišení. Nebo že UI aplikace na smartphonu a tabletu musí být rozdílné z důvodu odlišného používání daného zařízení. Tohle jsou opravdu základy, které si každý developer může přečíst v dokumentaci nebo v nějakém článku. K tomu není potřeba mrhat časem Googlera.. Naopak bych uvítal hlubší ukázky reálných příkladů na úspěšných aplikací typu Gmail, Google+ apod.. Rozebrat takovouto aplikaci, ukázat si na ní návrh UI, design, funcionalitu, kód. To je to, co by vývojářům dalo více. Tohle jsou IMHO experience, které by se mohli sharovat..

Catering
Velmi dobře zvládnutý. Výběr jídla a pití byl výborný. Špinavé nádobí mizelo pod rukama. Opravdu super. Snad jen v ČR (národ pivařů) by chtělo mít víc píp na pivo než jednu :-).

Sandbox
Ideální místo pro střet vývojářů, sběr nových kontaktů a osahání hraček s OS Androidem. SvětAndroida.cz připravil expozici smartphonů a tabletů. Oceňuji hlavně to, že po celou dobu akce byli schopni podávat informace a jednotlivé hračky sami prezentovat / předvádět. Opravdu dobrá práce. O kousek dál bylo zázemí Gug.tv, kde za natočený videospot dostal návštěvník tričko. Zisk trička byl lákavý, ale odvahu jsem neměl :-). Asi nejvíc byla v Sandboxu vidět firma Inmite, která ve spolupráci se Samsungem uspořádala soutěž o Samsung Galaxy S2. Měl jsem neuvěřitelné štěstí a byl mezi 5 vylosovanými. Jako výherce jsem nakonec vybrán nebyl. Z toho si nesu zkušenost takovou, že když o něco jde, přestanu psát na Twitter kraviny :-). Sandbox byl super, ale stánků bylo zoufale málo.  Tohle je skvělý marketing, jak zpropagovat svojí aplikaci nebo firmu na vývoj aplikací. Podivuji se nad tím, že to nevyužilo více subjetů.. Škoda.

Ignite
Skvělá tečka na konec. Bleskové prezentace (řečník má 20s na 1 slide) byly vtipné a trefné. Možná si z nich odnáším více než z celých přednášek. Pokud jste na GDD nebyly a chcete nasát trochu té atmosféry, doporučuji si počkat na videa z právě Ignite.

Vývojáři
Byli různí. Nerdové i pohodáři. Přišli se  nadlábnout, přišli shánět kontakty do svých projektů, přišli si vypít flašku vodky do vestibulu, přišli ukázat svojí aplikaci,.. a další. Každý měl svůj cíl a věřím, že každý svojí potřebu na GDD ukojil. Můj hlavní cíl na této akci byl: vidět na živo lidi, se kterými komunikuji, které znám jen podle 50x50px avatarů. Poznat lidi, se kterémi dlouhodobě spolupracuji (SvětAndroida, Inmite, Locus a další..). A nabrat nové kontakty pro případnou další spolupráci. A to se také povedlo.

Akce byla fajn!. A zas někdy.. tedy za rok? Uvidíme.

Při nástupu Google+ jsem nevěděl, jak se zachovat. Další sociální síť, kde budou zajímavý lidé a hlavně informace, které se můžou hodit. Ze začátku jsem nečekal, že bych do téhle sítě nějak aktivně přispíval, ale to jsem se mýlil. Přečtěte si tři plusy, proč mě tahle síť přijde zajímavá a použitelná.

Are you unhappy with the design of your mobile application? You are about to develop a new application and you lack the designer? Do you have an application, but you want prepare graphic resources for the next platform? With all this I'll help you.

1) Sketchs and wireframes
- accord to specification or customer research
- design user interfaces (UI)
- resolve application functionality for different mobile platforms

2) Design screens
- create a graphic design for each platform based on the input or WF
- do output from graphic program for client presentation

3) Platform resources
- cut the graphic resources for each platform
- create standard structure of resources for programmer

4) Documentations
- preserve the original graphic resources for future use
- graphic resources are re-editable

Are you interested in my services? Send me an email at feltl.michal@gmail.com. I will prepare (tentative) quote for your decision..

Looking for graphics for Android or iOS? Smartphone or tablet? You are from Czech Republic or from Los Angeles? You are company or individual developer? It does not matter. Contact me!

I look forward to future cooperation!

Dnes si probereme základní pilíř vývoje mobilní aplikace, bez kterého průměrná, a větší aplikace nemůže dobře fungovat. Důvodem této skutečnosti je to, že před samotným vývojem, ba i před samotným návrhem grafického designu je potřeba probrat několik aspektů, které ovlivní celý zrod aplikace. V tomto díle se podíváme, jak se skicuje, navrhuje drátěný model a jak se prototypuje mobilní aplikace.