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.

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.

Největší motivací se pustit do takových sérií článků je určitě ohlas případných zájemců o tyto informace. Tak se mi můžete ozvat buď přes komentáře nebo na email: feltl.michal@gmail.com.

A na závěr video na téma: papírového prototypování mobilní aplikace.

 

 

Asi před měsícem a půl jsem napsal článek: Nahradí služba dropbox.com flashdisk?, kde jsem popisoval, jak služba vypadá, co přináší a přes jaké platformy se dá používat. Dropbox stále využívám a nejsem sám. Zjistil jsem, že ho využívají i někteří moji klienti a tudíž jsme se pokusili tuto službu zahrnout do naší pracovní komunikace. Povím Vám jak.

Kéž by to byla pravda. :-)

Friend Stream je aplikace na OS Android. Pomocí zobrazovacího widgetu můžete sledovat příspěvky z Facebooku a Twitteru. Mám tuhle aplikaci rád, ale má několik nedostatků, proto jsem se rozhodl, že jí zkusím malinko redesignovat. 

obrázek 1 - můj design, dvě pozadí

obrázek 2 - oficiální vzhled aplikace

Největší problém z hlediska uživatelského rozhraní dělá jasný pohled o tom, co se v aplikaci stalo. Kolik přibylo nových příspěvků od poslední chvíle, než jsem si aplikaci aktualizoval. Nastává problém ten, že musím scrollovat po widgetu a vyhledávat... Toto řeším jednoduchými počítadly na jednotlivé sociální sítě, které jsou umístěné ve footeru widgetu. Pokud jsou příspěvky zobrazeny zlatým písmem - tolik nových příspěvků přibylo od poslední aktualizace.

Druhý závažný problém, který stávající Friend Stream má, že pokud po aktualizaci přibyly nové příspěvky, tak já nevím, které to jsou. Tento problém řeším tím, že každý příspěvek je označen ikonkou sociální sítě, pokud je zobrazena zlatě, je to nový příspěvek od mé poslední aktualizace. V případě, že je bílý je to příspěvek, který jsem již četl. Prosté že? A co dál? Pak už jen kosmetické úpravy, jako zobrazování komentářů, libí se mi a ikonky pro nastavení aplikace.

Líbí se Vám?