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? Tyhle 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álový 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
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ůvodu ú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
Sketch template
Pár šablon ke stažení:
Tvořivý lenoši si mohou vytvořit i vlastní šablonu pro jednotlivé komponenty 🙂
Paper prototype
Podívejte se na následující video z papírového prototypování aplikace:
Několik odkazů, kde je možné stáhnout již zkreslené komponenty:
Digital sketch and prototype
Opět uvedu několik odkazů. Vybrat si musí každý sám, dle své potřeby.
A na závěr se podělím o své zkušenosti
Pro příklad:
Vím, že aplikace bude mít „about“ obrazovku, tak navrhnu její umístění 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 mojí č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 mockupe – 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.
Osobní stránky autora článku michalfeltl.cz
Pokud budete potřebovat pomoct s tvorbou mobilních aplikaci zkuste http://www.vytvorime-aplikaci.cz pomohou Vám jak s naplánováním, vývojem tak i propagaci 🙂