Návrh používateľského rozhrania univerzálnych aplikácií

Ak odhliadneme od úplne odlišnej hardvérovej architektúry, hlavným rozdielom medzi prostredím v ktorom beží W8.1 a WP8.1 aplikácia je rozlíšenie obrazovky a v mnohých prípadoch aj jej orientácia.

U konkurenčných platforiem Android aj iOS je možné za základnú orientáciu považovať režim “na výšku”, bez ohľadu na to, či aplikácia beží na chytrom telefóne, alebo na tablete. Väčšina aplikácií pre tieto platformy dokáže zmeniť zobrazenie ak používateľ zmení orientáciu zariadenia.

Chytré telefóny s Windows Phone 8.1 využívajú ako základný režim “na výšku”. Naproti tomu pre zariadenia s Windows 8.1 je základnou orientáciou obrazovky režim “na šírku”. Inak to nie je možné, nakoľko Windows 8.1 beží aj na notebookoch, ktoré režim “na výšku” vôbec nepodporujú. Tu je prvý rozpor, ktorý je potrebné riešiť pri návrhu používateľského rozhrania aplikácie.

Po spustení aplikácie na platforme WP8.1 sa táto bude používať väčšinou “na výšku” a vo W8.1 zas “na šírku”. Tieto orientácie budeme považovať pre dané platformy za natívne. Používateľ samozrejme môže zmeniť orientáciu zariadenia.

Orientácia zariadenia je len jedným z atribútov, ktoré je potrebné pri vytváraní univerzálnych aplikácií brať do úvahy. Dizajnové odporúčania pre Windows 8.1 a Windows Phone aplikácie sa dosť líšia. Kladie sa zreteľ na to aby sa aplikácia, či hra dala dobre ovládať. Tablet sa spravidla drží v obidvoch rukách za dolné rohy a aplikácie sa na dotykovom displeji najlepšie ovládajú palcami obidvoch rúk. V prípade, že to nie je možné držia tablet jednou rukou a aplikácie ovládajú ukazovákom druhej ruky. Telefón sa naproti tomu najčastejšie drží v jednej ruke a ovláda sa buď palcom tejto ruky, alebo ukazovákom druhej ruky. Na obrázku si všimnite zóny optimálneho umiestnenia ovládacích prvkov pri ľavom a pravom dolnom rohu obrazovky tabletu, prípadne v strede obrazovky telefónu aby bolo možné aplikáciu dobre ovládať palcami /palcom.

Zóny pre optimálne rozmiestňovanie ovládacích prvkov (vľavo) a zobrazovaného obsahu (vpravo) sú odlišné pre tablety a telefóny

Prispôsobenie aplikácie platforme ukážeme na dvoch reálnych aplikáciách, ktoré nájdete vo Windows Store aj Windows Phone Store.

Aplikácia Autoškola Testy sa spustí pre každé zariadenie v jeho natívnom režime. Vzhľadom na špecifiká aplikácií pre mobilné telefóny, boli vypustené niektoré funkcie, ktoré predpokladali dlho dobejšiu interakciu s používateľom, napríklad precvičenie kompletnej sady otázok týkajúcich sa dopravných značiek, križovatiek a teórie. Boli ponechané len testy a zobrazenie otázok so správnymi odpoveďami na štúdium. Tieto testy majú 27 otázok, čo je pre používanie na mobile prijateľné.

Preto bolo potrebné zmeniť len dizajn úvodnej obrazovky s ponukou funkcionality. Zobrazovanie otázok testov bolo generované dynamicky, takže žiadne úpravy neboli potrebné

Aplikácia Autoškola Testy pre W8.1- obrazovka pre výber testu

Aplikácia Autoškola Testy pre W8.1- príklad testu

Aplikácia Autoškola Testy pre W8.1- obrazovka pre výber testu

Aplikácia Autoškola Testy pre W8.1- príklad testu

 

Aplikácia Flappy je klasická logická dobrodružná hra adaptovaná z osembitových platforiem. Hrací plán má orientáciu “na šírku”. U W8.1 je to vítane a na chytrom telefóne WP8.1 nemôžeme inak, taktiež spustíme aplikáciu v režime “na šírku” a tak vlastne prinútime používateľa aby zmenil orientáciu zariadenia. Pri portovaní na Windows Phone bolo potrebné inak rozmiestniť ovládacie prvky vzhľadom k rozdielnemu spôsobu držania a ovládania palcom.

Po praktických testoch na tablete Microsoft Surface Pro bolo potrebné zvoliť odlišné usporiadanie ovládacích prvkov, než v prvom návrhu. Kurzorové tlačidlá vpravo do klasického kríža a prvok FIRE, teda hod uspávacou hubou je možné realizovať poklepom kdekoľvek na hraciu plochu – palcom pravej ruky.

Okrem tejto základnej konfigurácie v ktorej budú používatelia hru používať, je potrebné myslieť aj na súčasný beh viacerých aplikácií, kedy hra sa hra delí o plochu s inými aplikáciami. A taktiež režim tabletu na výšku. V týchto režimoch som hraciemu plánu venoval maximálnu možnú plochu a tlačidlá premiestnil dole

Zmena používateľského rozhrania aplikácie, ak je plocha vyhradená pre aplikáciu vyššia, než širšia

Klasická logická dobrodružná hra vo verzii pre Windows 8.1

Vo variante pre Windows Phone sú ovládacie prvky po obidvoch stranách hracieho plánu. Na každej strane je tlačidlo pre príslušný smer a tlačidlá “HORE”, “DOLE” a “HOĎ HUBU”, ktoré sú takto vlastne zdvojené

Klasická logická dobrodružná hra vo verzii pre Windows Phone 8.1

Možno bude najlepším riešením “tretia cesta”. Obidve platformy, teda tablety s Windows 8.1 aj Windows Phone majú náklonomery, takže hra tohto typu by sa možno najlepšie dala ovládať naklápaním zariadenia. Vyskúšajte, uvidíte…

Reklamy

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: