Vývoj Metro aplikácií pre Windows 8: 2 diel Ladenie na simulátore

Metro aplikácie sú predurčené k tomu aby bežali na celej obrazovke a dokázali reagovať nielen na multidotykové podnety od používateľa, ale aj na akcie, ktoré boli dosiaľ u Windows aplikácií nemysliteľné, napríklad zisťovať orientáciu zariadenia, spravidla tabletu na šírku/na výšku a tomu uspôsobiť aktuálne zobrazenie, prípadne reagovať na podnety zo senzorov, napríklad z akcelerometra, náklonomeru, GPS a podobne. Rovnako je potrebné otestovať aj rôzne multidotykové gestá. Prvky používateľského rozhrania Metro aplikácie reagujú na ovládanie dotykom prstami, dotykovým perom, aj na klasické ovládanie myšou. Na simulátore sa spôsob ovládania prepína pomocou ikon v jeho pravom ráme. Na reálnom zariadení, napríklad na tablete s pripojenou myšou môžete ľubovoľne kombinovať dotyky aj ovládanie myšou. Spôsob ovládania je signalizovaný aj graficky, v mieste dotyku sa zobrazí zodpovedajúca ikona.

Skôr, než budete publikovať svoje aplikácie do Windows Store, mali by ste otestovať aplikáciu na skutočnom zariadení. V dobe dostupnosti Visual Studio 11 Beta je takýchto tabletov ako šafránu a tak je potrebné spomínané udalosti simulovať a aplikáciu otestovať aspoň na simulátore.

Obr. 2: Simulátor pre testovanie Metro Style aplikácií

Módy fungovania Metro aplikácií

Teraz keď už máme zvládnuté fungovanie simulátora tabletu s Windows 8, môžeme sa pustiť do vývoja Metro Style aplikácií. Hoci Metro aplikácie pobežia aj na klasických PC ovládaných klávesnicou a myšou a dokonca vďaka novému prehľadnému dizajnovému štýlu môžu byť informačne bohatšie, než klasické Windows aplikácie, ich primárne smerovanie bude na novú generáciu zariadení, prevažne tabletov. U týchto zariadení bude každý predpokladať, že aplikácia sa automaticky prispôsobí zmene orientácie zariadenia, možno s výnimkou niektorých špeciálnych typov aplikácií, napríklad hier, ktoré si vynútia konkrétnu orientáciu .

Vo všeobecnosti by mala Metro aplikácia fungovať v štyroch základných zobrazovacích módoch. Prvé dva bude najlepšie ilustrovať dvojica obrázkov zmeny usporiadania konkrétnej aplikácie po zmene orientácie zariadenia, na ktorom aplikácia beží.

Obr. 3: Režim fungovania “na šírku”

Obr. 4: Režim fungovania aplikácie “na výšku”

Nakoľko displej väčšiny tabletov je obdĺžnikový, pri zmene orientácie je potrebné logicky nielen obraz “natvrdo” preklopiť o 90 stupňov, ale aj zmeniť rozloženie jednotlivých ovládacích prvkov. Pri rozmiestňovaní prvkov je potrebné brať do úvahy odporúčanie kam je vhodné umiestniť prvky, ktoré sa používajú na ovládanie dotykom a kam prvky, ktoré prezentujú obsah. Na obrázku 5 si všimnite svetlé zóny optimálneho umiestnenia ovládacích prvkov pri ľavom a pravom dolnom rohu. Najčastejšie sa tablet bude používať tak, že ho držíte obidvoma rukami za dolné rohy a spomínaná zóna udáva akčný rádius palcov obidvoch rúk.

Obr. 5: Odporúčanie pre ideálne rozmiestnenie prvkov

To však nie je všetko. Každá Metro aplikácia musí navyše podporovať aj režim zobrazenia “na výšku” po strane obrazovky, takzvaný “snap” stav. Na obrazovku je takto možné umiestniť dve aplikácie, čo môže byť výhodné pri ich vzájomnej interakcii, napríklad ak používateľ kopíruje niektoré údaje z jednej aplikácie do druhej cez schránku. Z detailnejšieho pohľadu, “snap” môže mať dva stavy. Buď je v úzkom páse zobrazená naša aplikácie, alebo opačne, v úzkom páse vľavo alebo vpravo je zobrazená iná aplikácia a naša aplikácia vtedy beží na zvyšných približne troch štvrtinách plochy displeja

Obr. 6: Režim fungovania aplikácie v ľavom (alebo pravom) zvislom páse.

Ak virtuálna plocha, ktorú aplikácia využíva je väčšia, ako rozmer obrazovky, odporúča sa, aby bola v pravej, ľavej, hornej, prípadne dolnej časti zobrazeného výrezu tejto plochy aspoň v úzkom pásiku časť obsahu susednej obrazovky. Je to preto, aby používateľ vedel, že má k dispozícii aj ďalší obsah na ktorý sa môže pomocou gesta presunúť. Dobrý príklad je na obr. 2 kde sa pri ľavom okraji zobrazujú časti dlaždíc na susednej obrazovke.

 

 

Reklamy

Značky:

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: