Dizajn aplikácií pre Windows 10

Možno niektorí z vás po preštudovaní predchádzajúceho dielu skúsili vytvoriť Universal Windows Platform (UWP) aplikáciu. Predpokladáme, že aplikácia sa na počítači na ktorom ste ju navrhovali zobrazovala k vašej úplnej spokojnosti. Ako by to dopadlo, keby ste svoju aplikáciu spustili na malom displeji telefónu, prípadne na projekčnom plátne, či zariadení Surface Hub s veľkou obrazovkou.

Univerzálne aplikácie vyžadujú flexibilný dizajn

UWP aplikácie bude možné spustiť na akomkoľvek zariadení so systémom Windows 10, či už z telefónu, tabletu, PC, prípadne mikrokontrolérovej dosky ako napríklad Raspberry PI 2, nositeľných zariadeniach, či dokonca domácich spotrebičoch. Preto je potrebné navrhnúť a vytvoriť užívateľské rozhranie, ktoré bude možné používať na zariadeniach s rôznymi veľkosťami displeja.

V minulej časti sme sa venovali architektúre UWP aplikácií a rozdelenie zariadení do rodín

  • IoT: mikrokontroléry, nositeľné zariadenia, domáce spotrebiče
  • Mobilné zariadenia: Windows Phone, phablety
  • Desktop: Tablety, notebooky, PC
  • Tímové zariadenia: Surface hub

Môžete vytvoriť aplikáciu pre jednu, viacero, alebo všetky produktové rodiny. Môžete navrhnúť rozhranie, ktoré funguje skvele pre tablety a osobné počítače, a rozhranie pre mobilné zariadenia, s využitím väčšiny svojho kódu. Ak by ste aplikáciu navrhnutú „natvrdo“ pre telefóny spustili na veľkom displeji, väčšina obrazovky by bola nevyužitá. Opačne, ak by ste aplikáciu navrhli primárne pre tablet, alebo PC, na menších displejoch telefónov by používateľské rozhranie aplikácie bolo nečitateľné, alebo by sa vôbec nedalo zobraziť

Efektívne pixely a mierka platformy

Aby vaša aplikácia fungovala bez úprav na širokej škále zariadení s rôznymi uhlopriečkami displeja a rôznym rozlíšením,  Windows 10 používa algoritmus pre zmenu mierky, ktorý normalizuje spôsob zobrazovania prvkov používateľského rozhrania a fontov. Algoritmus berie do úvahy pozorovaciu vzdialenosť a rozlíšenie obrazovky pre optimalizáciu vnímania veľkosti prvkov. Algoritmus mierky zabezpečí, že 24 pixelové písmo bude na Surface Hub s uhlopriečkou 84”  rovnako dobre čitateľné ako na 5 ” telefóne, na ktorý pozeráme z kratšej vzdialenosti.

Dizajn1

 

algoritmus pre zmenu mierky podľa veľkosti displeja

Vzhľadom na  fungovanie algoritmu zmeny mierky budete pri navrhovaní prvkov používateľského rozhrania používať namiesto skutočných pixelov, takzvané efektívne pixely. Umožnia vám sústrediť sa na skutočné vnímané veľkosti prvku, bez toho aby sa museli starať o hustotu pixelov alebo vzdialenosť, z ktorej sa používateľ pozerá na displej. Napríklad, pri návrhu prvku s rozmerom 1 ‘ sa  bude tento prvok zdať veľký približne 1 ” na všetkých zariadeniach. Na menších zariadeniach pritom môže mať 100 x 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov, môže mať 200 x 200 fyzických pixelov.

Vďaka efektívnym pixelom môžete pri návrhu používateľského rozhrania ignorovať hustotu pixelov a aktuálne rozlíšenie obrazovky. Pri škálovaní sa využívajú násobky štyroch.  Preto by ste mali pre ostrý vzhľad využívať pri návrhu mriežku obrazových bodov 4×4. Potom okraje, veľkosti a pozície prvkov používateľského rozhrania a pozície budú násobkom 4 efektívnych pixelov. Najlepšie to vysvetlí obrázok.

Dizajn2

Porovnanie mriežky 40 x 40 a 32 x 32 pixelov. V druhom prípade bude pri škálovaní text rozostrený

Flexibilita

Pri optimalizácii vašej aplikácie rozhranie pre špecifické šírky obrazovky môžete využiť niekoľko návrhových odporúčaní

Zmena úpravy obsahu – Pre rôzne veľkosti displeja môžete optimalizovať veľkosť rámca zobrazujúceho text, prípadne obrázok, napríklad úpravou okrajov a veľkosti prvkov používateľského rozhrania. Bude platiť jednoduché pravidlo: väčšia obrazovka – o niečo vyšší komfort, avšak aplikácia bude dobre použiteľná aj na najmenšom displeji mobilného telefónu.

Zmena pozície – môžete zmeniť umiestnenie prvkov používateľského rozhrania, aby čo najlepšie využili displej zariadenie. Typickým príkladom je zmena orientácie na výšku/na šírku.

Dizajn3

Zmena pozície prvkov používateľského rozhrania

Zmena toku – týka sa textu, prípadne usporiadania prvkov používateľského rozhrania. Typickým príkladom je rozdelenie textu pri zobrazení na širokej obrazovke do viacerých stĺpcov pre lepší komfort čítania. Taktiež ovládacie prvky vo vizuálnych kontejneroch sa môžu vhodne preskupovať.

Skrývanie a odhaľovanie – na menších displejoch môžete na základne obrazovke zobraziť iba najpoužívanejšie prvky a ďalšie si používateľ zobrazí napríklad posunutím. Prípadne na väčšej obrazovke zobrazíte naraz viac prvkov pre vyššiu variabilitu ovládania. Typickým príkladom je prehrávač multimédií, kde na malom displeji zobrazíte len nevyhnutné základné funkcie a na väčšej obrazovke aj ďalšie prvky, napríklad ekvalizér.

Zobrazovanie detailov – Vývojári Android aplikácií poznajú tento princíp ako fragmenty. Používa sa pre aplikácie zobrazujúce informácie typu master – detail. Na malej obrazovke sa vypíše zoznam objektov a po kliknutí na vybraný objekt sa vypíšu detailné informácie. Na PC a tabletoch sa detaily o vybranom objekte zobrazia spravidla vpravo od zoznamu objektov.

Dizajn4

Zobrazovanie detailov na zariadeniach s rôznou šírkou displeja

Dizajnové odporúčania

Dizajn používateľského rozhrania je výsledkom spolupráce dizajnérov, ergonómov, typografov a odborníkov v mnohých ďalších odvetviach. Vychádza z troch základných pilierov. Z nemeckého architektonického štýlu Bauhaus, ktorý sa etabloval v roku 1920, dizajnového štýlu Swis design, založeného na typografii, ktorý ovládol šesťdesiate roky a z princípu „Way finding “- dizajnu, ktorý sa v posledných desaťročiach využíva v dopravných systémoch a ktorý symbolizuje plynulosť a ľahkú orientáciu pasažierov. Zdôrazníme dva základné princípy návrhu dizajnu aplikácií – estetiku a účelnosť, ktoré sa navzájom synergicky dopĺňajú.

Dizajnéri a vývojári majú k dispozícii niekoľko veľmi silných výrazových prostriedkov na zatraktívnenie dizajnu používateľského rozhrania. Napríklad dobre navrhnuté animácie použité v rozumnom rozsahu nielenže  umocňujú dojem a zážitok z aplikácie, ale predovšetkým pomáhajú používateľom pochopiť kontext zmien pomocou vizuálnych prechodov. Poskytnite používateľovi zrozumiteľné návody, napríklad formou tipov, aby dokázali s vašou aplikáciou efektívne pracovať bez nutnosti štúdia manuálov.

Aj obrazovky na nastavovanie parametrov by mali akceptovať všetky spôsoby ovládania, ktoré prichádzajú do úvahy. Predovšetkým dotykové ovládanie na menších displejoch. Pre lepšiu prehľadnosť odporúčame umiestňovať ovládacie prvky do sekcií. Významnejšie prvky je potrebné umiestniť v hornej časti obrazovky aby boli dostupné bez nutnosti rolovania. Uvážte, či k niektorým prvkom neposkytnete vysvetlenie. Na tabletoch môžete pre nastavovanie skupín parametrov využiť zobrazenie typu master – details.

Dizajn5

Príklad dizajnu nastavovania parametrov aplikácie pre telefóny.

Dizajn6

Príklad dizajnu nastavovania parametrov aplikácie pre tablety.

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: