Začínáme s vývojem Metro aplikací

MyWindows.cz

home archív foto video win8dev kontakt

Začínáme s vývojem Metro aplikací

Autor článku: Jan Cibulka / Fleveo s.r.o.


Rozhraní Metro, které přináší nový operační systém Windows 8, má řadu specifik, které je nutné při vývoji aplikace zohlednit. V této sérii článků se budeme postupně věnovat plánování aplikací a návrhu uživatelského rozhraní, vývoj bude předmětem samostatného seriálu.

Plánování aplikace

Účel aplikace

Mělo by jít o první krok před tím, než spustíte Visual Studio či nakreslíte první grafický prvek.

V první řadě si ujasněte, jakému účelu bude aplikace sloužit a tedy jaké funkcionality má uživateli přinést. Sedněte si, ideálně ve více lidech, a dejte dohromady všechny užitečné funkce. Tady je rychlý příklad toho, co dělá uživatel v aplikaci slevového serveru:

  • hledá slevy,
  • prohlíží si slevy,
  • nakupuje,
  • prohlíží zakoupené kupóny,
  • sdílí slevy s kamarády,
  • ptá se obchodníků na detaily o slevě,
  • a jistě další věci, které vyplynou z testování.

V druhé fázi seznam funkce kriticky projděte a proškrtejte všechny funkcionality, které nejsou nezbytné pro hlavní funkci, v tomto případě je to nalezení a zakoupení slevy. V této fází můžete škrtnout řadu dobrých nápadů, některé z nich možná v dalších verzích vrátíte, pro začátek je ale důležité udržet aplikaci co nejjednodušší.

V ideálním případě byste měli chování uživatele v aplikaci popsat jedinou větou. tedy něco jako: Uživatel prohledá slevy, najde nějakou zajímavou, tu prozkoumá, zakoupí a následně na tabletu zobrazí kupón.

Pro účely výše zmíněného návrhu si uspořádejte brainstorming a nápady rozkreslete, třeba do myšlenkové mapy.

Průchod aplikací

Na základně jasně definovaného úkolu aplikace rozhodněte, které kroky bude muset uživatel provést, aby dosáhl svého cíle. Každý krok by měl být úzce svázaný s ústředním účelem aplikace. Tady platí, že opravdu skvělé aplikace vyžadují jen minimum jednotlivých úkonů.

Zde by vám mělo pomoct několik technik:

  • Model průchodu aplikací: který krok přijde dříve a který později?
  • Storyboard: Jednoduše nakreslené situace, ve kterých bude uživatel aplikaci používat.
  • Prototyp: V Microsoft Blend či v jiném nástroji vytvořte klikatelný model aplikace a otestujte ho (alespoň na kolezích v týmu).

Na základně modelu pak zjistíte, jaké konkrétní úkony bude uživatel ve vaší aplikaci provádět, u našeho příkladu se slevovým serverem to bude:

  • rychlé prohlížení slev z titulní obrazovky,
  • prohlížení podrobností slevy,
  • prohledávání slev (podle města, kategorie, klíčových slov),
  • zakoupení slevy (nákupní proces s případnou registrací),
  • zobrazení slevového kupónu.

Přidat se mohu i další funkce, které podpoří fungování aplikace (upozornění na expiraci slev) či váš obchodní model (sdílení slev na sociálních sítích či e-mailem).

Fungování

Jakmile víte, co a proč chcete svým uživatelům nabídnout, je načase zvolit konkrétní prvky a postupy, které k tomu povedou. Zjistěte, co vám může platforma Windows nabídnout, zároveň také nespouštějte ze zřetele pravidla pro fungování Metro aplikací (anglicky: http://msdn.microsoft.com/en-us/library/windows/apps/hh465424).

Užitečné metody:

  • Průzkum platformy: Jaké ovládací prvky máte k dispozici a jaká jsou pravidla pro jejich použití?
  • Diagram průchodu: Jak spolu funkce souvisí, jak jednotlivé kroky navazují (a mohou navazovat i v mezních případech)?
  • Prototypování: Jednotlivé ovládací prvky vyzkoušejte, ať víte, jak se v praxi chovají a kdy je možné je použít.

Nezapomeňte ani na implementaci kontraktů pro sdílení, hledání, výběr souborů či nastavení (více anglicky zde: http://msdn.microsoft.com/en-us/library/windows/apps/hh464906.aspx).

Měli byste mít na paměti, že uživatelé budou vaší aplikaci používat jak na PC, tak i na tabletech nejrůznějších typů, což sebou nese další omezení. Aplikace by měla zvládat ovládání dotykem, klávesnicí, myší i dotykovém perem. Rovněž musíte počítat s tím, že se během užívání aplikace můžeme měnit orientace zařízení (na šířku, výšku) a že jednotlivé tablety či PC mohou mít různá rozlišení obrazovky. Podrobnostem se budeme věnovat v dalších dílech tohoto seriálu.

Metro aplikace jsou primárně dotykové, s tím souvisí volba ovládacích prvků, mezi které patří tažení jedním či více prsty, kliknutí, držení, roztažení a další. Více anglicky zde: http://msdn.microsoft.com/en-us/library/windows/apps/hh465415.aspx.

Používání aplikace a její prezentace

K dispozic máte animace, které mají v uživateli vyvolat pocit plynulého a příjemného procházení aplikací. Ujistěte se, že tyto cíle opravdu plníte. Více anglicky na adrese: http://msdn.microsoft.com/en-us/library/windows/apps/hh465165

Pokud máte uživateli co sdělit i ve chvílích, kdy aplikaci přímo nepoužívá, máte možnost tak učinit pomocí notifikací. Rozpohybuje dlaždici aplikace, případně pozvěte uživatele zpět pomocí toast notifikace (anglicky http://msdn.microsoft.com/en-us/library/windows/apps/hh761490).

V každém případě se ale ujistěte, že uživatele neobtěžujete a že notifikace opravdu slouží účelu aplikace.

Na přenosných zařízeních budete mít k dispozici funkcionality, které na PC nenajdete. Patří sem geolokace, akcelerometr či vestavný fotoaparát. Zamyslete se nad tím, zda by některé z těchto funkcí nemohla zjednodušit a či zlepšit používání aplikace.

U naší slevové aplikace můžeme například nabízet slevy z uživatelova okolí či zapomnětlivé zákazníky notifikovat o blížící se expiraci zakoupeného kupónu.

Prodej aplikace

V současné chvíli nelze v Microsoft Store nabízet aplikace jinak, než zdarma. V budoucnu se ale tento stav změní, je tedy na místě rozmyslet si prodejní strategii. Budete skrze aplikaci prodávat? Zpoplatňovat nabízený obsah či rovnou celou aplikaci? Podrobnosti najdete anglicky zde: http://msdn.microsoft.com/en-us/library/windows/apps/hh465433.

Design aplikace

V návaznosti na fungování aplikace a rozvržení průchodu uživatele je třeba připravit i konkrétní rozhraní.

Jak má být obsah organizován?

Drtivou většinu obsahu v aplikacích lze rozdělit podle určité hierarchie. Na nejvyšší úrovni by logicky mělo být to nejdůležitější, co aplikace obsahuje. V našem případě to může být náhled aktuálních slev, rozdělených podle kategorií.

Další informace o rozvržení obsahu v aplikaci najdete v dalších článcích či anglicky na adrese http://msdn.microsoft.com/en-us/library/windows/apps/hh761500.

Dejte si pozor, aby vzhled a fungování jednotlivých stránek aplikace bylo stejné u všech obrazovek ve stejné úrovni. Pomůže to uživateli ve snadnější orientaci v aplikaci.

Při návrhu ovládání se snažte o interakci s obsahem, jednotlivé navigační prvky by měly obsahovat informaci o napojeném obsahu. V našem případě proto slevy reprezentujeme jejich obrázky a popisky, uživatel má následně jasno, s jakým obsahem interaguje.

Pokud není možné užití obsahu jako ovládacího prvku, můžete použít následující metody:

  • App bar: Ten je skrytý, dokud ho uživatel nevyvolá. Můžete zde dodat všechna potřebná tlačítka či vstupní pole.
  • Vložení ovládacích prvků přímo do canvasu: Pokud je uživatel na stránce, která má jen jediný účel, můžete mu poskytnout ovládací prvky přímo na ploše canvasu. tato metoda je ale nevhodná ve chvíli, kdy má stránka funkcí více, pak je vhodnější užít app bar. Rovněž se snažte zmenšit počet prvků na nutné minimum.
  • Context menu: To je možné použít například pro práci se schránku (vyjmout, vložit, kopírovat) nebo pro interakci s obsahem, který není možné vybrat či uchopit (vložení špendlíku do mapy).

Designujte každé možné zobrazení

Metro aplikace může být užívána na výšku či na šířku, připnutá ke straně obrazovky či roztažená na dvě třetiny prostoru (fill view). Připravte vaši aplikaci pro každou z těchto eventualit, uživatel by v žádném případě neměl přijít o plnou funkčnost aplikace.

Užitečné informace naleznete na těchto adresách:

Nebojte se šablon

Síla Metro aplikací spočívá v podobném designu a ovládání založeném na systému dlaždic a kontraktů. bez nadsázky se dá říct, že pokud uživatel umí ovládat jednu aplikaci, snadno zvládne i všechny ostatní. Proto se maximálně snažte držet jednotného vzhledu Metro, v čemž vám pomohou i šablony jednotlivých komponent: http://msdn.microsoft.com/en-us/library/windows/apps/hh465371. I když se možná časem rozhodnete vyvinout si vlastní, rozhodně se s těmito vzorovými před zahájením vývoje seznamte.

První dojem

Právě první spuštění může v očích vašich uživatelů rozhodnout o úspěchu aplikace. Od první chvíle proto dávejte pozor na detaily a aplikaci pečlivě odlaďte. Je několik kritických bodů, které si rozhodně zaslouží vaši pozornost:

  • Aplikační dlaždice: Jde o tvář vašeho programu, které bude mezi všemi ostatními na obrazovce Start. Postarejte se proto, aby vynikla a dala uživateli jasně najevo, o jakou aplikaci se jedná. Pokud je to možné, používejte v dlaždici notifikace, které vytvoří v uživateli pocit neustálého dění, což ho přivede zpět do aplikace.
  • Startovací obrazovka: je to to první, co uživatel uvidí při startu. Dejte si proto záležet, aby aplikaci jasně odlišila od ostatních.
  • První spuštění: Jde o kritický moment, aplikace ještě nemá načtená všechna data a možná bude vyžadovat nějakou registraci či jinou aktivitu uživatele. Naopak uživatel aplikaci nezná a proto ji v případě nespokojenosti snadno opustí a smaže. Dejte si proto pozor, aby se vaše aplikace dokázala při prvním startu vypořádat s pomalým či úplně chybějícím internetem a dalšími komplikacemi.
  • Úvodní stránka: Tuto část aplikace uživatel uvidí hned po každém startu. Měla by proto obsahovat aktualizované informace (nejnovější slevy atd...), graficky zpracované v co nejpřitažlivější formě. úvodní strana totiž často rozhoduje, zda budou uživatelé vaši aplikaci pravidelně užívat.

Prototypování a ověřování

Než se vývoj vaší aplikace rozeběhne na plné obrátky, proveďte důkladné testování celého konceptu. Ukažte jednoduchý model aplikace svým známým či kolegům a přesvědčte se, že vámi zvolené funkce i ovládací prvky plní svůj účel.

Nezapomeňte, že aplikace musí být v souladu s pravidly pro design fungování (anglicky http://msdn.microsoft.com/en-us/library/windows/apps/hh465424). Nedodržení těchto pravidel vede k zamítnutí při schvalovacím procesu Windows Store.

Volnou inspirací pro tento článek byl vývoj aplikace pro slevový server Zapakatel.cz.

Další užitečné odkazy naleznete na adrese http://bit.ly/startmetro, v případě potřeby konzultace pak pište na adresu honza@fleveo.cz.

O společnosti Fleveo

Fleveo (www.fleveo.cz) je jedna z prvních českých digitálních agentur, která se zaměřila na vývoj facebookových aplikací a návrh a konzultace kampaní v sociálních sítích. V současné době zajišťuje digitální fullservis, od návrhu komunikační strategie přes vývoj aplikací a přípravu kampaňových mikro stránek, až po tvorbu vlastního obsahu. Nově firma rozšířila tým o .NET vývojáře a zaměřuje se také na vývoj Metro aplikací.


Související: Vývojáři, předběhněte konkurenci! Soutěž o pozvánky do Windows Store pro Metro aplikace


win8 soutěž win8 vývoj

Komentáře

  1. 1 Juraj Siska 18.06.12, 10:06:08
    FB

    Výborný článok. Palec hore!

  2. 2 Adam Kalisz 18.06.12, 02:06:35
    FB

    Už se těším na článek o programování Metro aplikací!

  3. 3 Marek Bikerman 18.06.12, 03:06:30
    FB

    Dobrá práce.