Menu

4. díl – Tvorba skic a prototypování mobilní aplikace

android-stencil

Po delší pauze vám dnes přinášíme další díl seriálu Michala Feltla, který se věnuje problematice designu mobilních aplikací pro Android.

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.
 
Nejdříve je potřeba ujasnit základní pojmy. Co je skica, wireframe, co prototyp? Tahle tři slova mají jeden stejný význam a to, že zobrazují nový nebo současný náhled funkčnosti, struktury a obsahu nějakého celku (např. mobilní aplikace). Ve všech případech se jedná o zjednodušený náhled/model současné nebo budoucí vize daného celku. Vývoj všech tří slov je dán z historického hlediska. Wireframe se nejčastěji překládá jako drátěný model, který může vypadat jako kresba od ruky nebo naopak jako finální prototyp aplikace v nějakém sofistikovaném softwaru. Slovo wireframe většinou užíváme u složitějšího návrhu nějaké aplikace, kde je kladen důraz na přesnost jednotlivých komponent. Skicou je myšlen návrh, který vypadá (nebo je) vytvořen jakoby kresbou od ruky. Jedná se o zjednodušený model, na který není kladen důraz na přesnost. Prototyp je ožití návrhu ve funkční model. Díky mechanismům můžeme na prototypu demonstrovat jednotlivé funkce prototypu.
 
Rozeberu jednotlivé možnosti do detailu:
 
Handmade sketch
Jedná se o nejrychlejší způsob rychlého navrhování – tzn skicování, viz obrázek:
 
Mobile Library
 
Abychom něco sami naskicovali, stačí nám dvě věci: nástroj, kterým budeme zaznamenávat a plocha, na kterou to budeme zaznamenávat. Ideální je papír a tužka. Ale viděl jsem i skicovat na magnetické tabuli, na tácku od piva, nohou v písku, rytím do dřeva… Nástroj a plocha je volbou okamžité potřeby. Osobně si myslím, že ideální je tužka a papír, hlavně z důvodů úsporných a mobilních (přenositelnost). Skica nakreslená rukou (nebo jinou částí těla) by se dala nazvat nejhrubší a nejstarší možností pro vytvoření návrhu. Hodí se pro utřídění vlastních myšlenek nebo k rychlému vysvětlení principu funkčnosti (aplikace). Nehodí se k prezentaci finálnímu klientovi (uživateli, provozovateli, investorovi).
 
Handmade sketch 2.0
Největší problém u skicování rukou je odhad velikosti (nyní se už zaměřím na vývoj mobilní aplikace). A to velikosti samotného displaye, ale také jednotlivých prvků, které kreslíme. Pokud si nakreslíme na papír jeden screen z aplikace a na jiný papír jiný screen ze stejné aplikace zjistíme, že se velikosti prvků liší. Nejsme tak zruční, abychom vždy dokázali odhadnout stejnou velikost. Proto bylo nutné ruční skicování povýšit. Abychom mohli kreslit stejné prvky je potřeba do papíru přidat mřížku – ano čtverečkovaný (nebo milimetrový) papír. Díky mřížce víme, že velikost displeje je 16×32 políček, velikost action baru je 16×2 atd.
 
Sketch template
Důvodem dalšího vývoje ručního skicování byla lenost stále kreslit dokola obrys telefonu. Je to prvek, který je vždy stejný u všech aplikací (pro stejné zařízení). To byl hlavní důvod, proč vznikly jednotlivé šablony mobilních zařízení. Pokud tvoříme aplikace pro více platforem a OS, je dobré mít v šuplíku vytištěné různé šablony a používat tak pro danou situaci tu správnou. Některé šablony mají i hlavičky nebo místo pro okolní popisy. Pro Android těchto šablon moc neexistuje, takže přidávám i pár odkazů na šablony pro Apple zařízení.
 

 
Pár šablon ke stažení:
 
http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
http://www.zurb.com/playground/tools/ZURB-Sketchsheets.zip
http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
http://www.afovea.com/downloads/iPad_Design_Templates_Afovea.pdf
http://www.lifeonlars.com/design/mobile-design/getting-started-with-mobile-app-development
http://lab.3fl.jp/iphone-idea-sheet-v01/
 
Tvořiví lenoši si mohou vytvořit i vlastní šablonu pro jednotlivé komponenty :-)
 
Android Stencil Kit
 
Paper prototype
Další problém papírových skic byla jejich špatná editovatelnost. Pokud dojde u papírové skicy ke změnám, můžeme buď gumovat nebo celý návrh překreslit. Což je složité a neefektivní. Proto se vymyslel jednoduchý způsob, jak zůstat na papíře a přitom vytvořit  první prototyp bez toho, abychom popsali tunu papíru. Jednotlivé komponenty, které budeme chtít v návrhu použít, si nakreslíme na papír a vystřihneme. Poté určíme scénář (průběh toho, co budeme s aplikací dělat) a na základě toho přikládáme na šablonu jednotlivé komponenty. Celý proces je dobré dokumentovat (třeba natočit video). V mobilním designu se občas ještě používá slovo mockup (nebo chybně mock-up). Mockupem chápeme něco jako maketu modelu. Pokud po Vás někdo bude chtít připravit mockup, bude se jednat o zjednodušený model aplikace.
 
Několik odkazů, kde je možné stáhnout již zkreslené komponenty:
 
http://www.zurb.com/playground/gingerbread-stencils
http://www.zurb.com/playground/honeycomb-stencils
http://graffletopia.com/stencils/578
 
Digital sketch and prototype
Čím byl model, který jsme navrhovali, složitější a vstupovali do něj další zainteresovaní lidé, bylo potřeba je vytvářet jinak – digitálně. Bylo potřeba je navrhovat v nějakém softwaru, který by měl zpětně editovatelný export a možnost prezentace ve standardním formátu, který byl dostupný všem (např. PDF, html). Na scéně se tak vytvořil prostor pro vznik jak velmi kvalitních (ale o to složitějších na naučení) programů, až po levná nebo free řešení, která nevyžadují speciální školení, ale zase jim chybí některé funkce. Trh se snaží uspokojit všechny. Informační architekti nejspíš sáhnou pro kvalitním softwaru, protože tvorba wireframů je jejich “denní chleba”. Vývojář, který potřebuje v rychlosti odprezentovat klientovi svojí myšlenku budoucího vzhledu aplikace, použije jednodušší nástroj.
 
Opět uvedu několik odkazů. Vybrat si musí každý sám, dle své potřeby.
 
http://balsamiq.com/products/mockups
http://www.omnigroup.com/products/OmniGraffle/
https://gomockingbird.com/
http://www.axure.com/
http://www.adobe.com/products/fireworks.html (ano ve FW lze prototypovat)
http://www.justinmind.com/
https://pidoco.com/en
 
A na závěr se podělím o své zkušenosti
Pokud dostanu od klienta zadávací popis nějaké aplikace, je potřeba tyto informace zpracovat a utřídit si myšlenky. Takže beru do ruky papír (čtverečkovaný) a bodově si sepíši důležité funkčnosti budoucí aplikace. Ihned u toho zkreslím několik papírových skic (šablony používám spíše výjimečně – při větších projektech). Cílem mých papírových skic není přesná vizuální interpretace, ale rozhodnutí jaké prvky budou reprezentovat jednotlivé funkce.
 
Pro příklad:
Vím, že aplikace bude mít “about” obrazovku, tak navrhnu její umístění v option menu. Nebo vím, že aplikace bude mít vyhledávání, tak ho navrhnu na pravou stranu action baru atd. Ale ve finále ještě nevím, jestli about obrazovka bude ikonka oka a vyhledávání bude ikonka lupy.
 
Výsledek, ke kterému jsem došel je potřeba prezentovat mému zadavateli (klientovi). Pokud bych mu poslal svou čmáranici “od stolu”, už by se mi asi nikdy neozval :-). V této fázi otvírám Balsamiq Mockup, ve kterém mám několik mobile komponent (dám ke stažení) a pomocí nich skládám jeden screen za druhým. Ke každému screenu přidávám vysvětlující popisy.
 
viz jednoduchý návrh:
 
Posbíral jsem několik komponent do Balsamiq Mockup – dávám ke stažení:
http://dl.dropbox.com/u/20904455/Android/Balsamiq%20Mockups%20-%20Mobile%20extentions.bmml
 
Tak to je vše. Příště se už vrhneme na praktický popis toho, jak navrhovat aplikaci v grafickém programu.

Komentáře

Stepaan

Stepaan

10.1.2012 10:07

Tenhle seriál mám moc rád. Dík za něj. Jsem zvědavej na další díly. Měl bych jen malilinkou připomínku. Z titulku není hned jasné, čehože to vlastně je čtvrtý díl. Možná by tam mohlo být “něco něco 4. díl: Tvorba skic…”
Dík.

Samot

Samot

10.1.2012 10:30

Spíš bych byl rád kdyby vydal nový seriál, který už není celý vydán na konkurenčním webu, nebo na vlastních stránkách

Michal Feltl

Michal Feltl

10.1.2012 10:34

to Samot: O čem by ten nový seriál měl být? Pokud se budeme bavit o designu mobilních aplikací.. co by Vás nejvíce zajímalo? Třeba bych časem opět něco sepsal.. pokud bych věděl, že si to najde čtenáře

Samot

Samot

10.1.2012 11:05

Michal: Je pravda, že když jsem to napsal, tak jsem taky přemýšlel o čem by byl takový nový seriál a moc věci mě zrovna nenapadlo, to je pravda. Možná by bylo užitečné pro lidi, pokračovat v programovém seriálu toho designu, ale to už není pochopitelně na Vás :)

Michal Feltl

Michal Feltl

10.1.2012 11:08

to Samot: Zkusím hodit řeč s Mirkem, který Vánočníček programoval a třeba bude mít chuť to poslat někam dál.. :)

Mem

Roman Nepšinský 0

10.1.2012 12:04

Stepaan: Nad tím titulkem jsem si taky lámal hlavu, když jsem ten text připravoval k publikaci. Využít se dá tenhle společný štítek ke všem dílům, jak píšeme v úvodu
https://www.svetandroida.cz/tag/serial-o-designu-aplikaci
Michal: Přihodíme před to “Seriál o designu aplikací”, nebo máš jiný nápad? :)

OxyGen

OxyGen

10.1.2012 13:50

Děkuji za pokračování,jen tak dál…sám chci začít s vývojem jednoduchých a graficky velmi příjemných aplikací :-) jen to chce pořádně umět Javu a v tom ještě nevynikám :D

/// Vřele doporučuji novou knihu o programování v Androidu -> http://knihy.cpress.cz/android-2.html
Java je základ, ale tato kniha pomůže i naprostým začátečníkům – mám jí doma a jsem nad míru spokojen

S pozdravem T. Hochmuth

OxyGen

OxyGen

11.1.2012 13:29

Děkuji za doporučení,už jsme na ní v minulosti koukal,ale zaskočilo mě její očíslování jako druhý díl,přičemž jsem první nenašel :D ale když píšete,že je i pro začátečníky,tak si jí bezestrachu objednám :-)

tom

tom

13.1.2012 1:15

ja by som napriklad uvital nejaky tutorial pre zacinajucich developerov: ake dev aplikacie pouzit, vyhody/nevyhody, preco. kde zhanat nejake free templaty alebo za prijatelnu cenu, atd atd. :)

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