Image
24.7.2015 0 Comments

Vývoj pre Windows 10 – Dizajn aplikácií / 2. časť

Späť na úvod >> Späť na programovanie >> Späť na seriál

Možno niektorí z vás po preštudovaní predchádzajúcej časti skúsili vytvoriť aplikáciu Universal Windows Platform (UWP). Predpokladáme, že so zobrazovaním aplikácie na počítači, na ktorom ste ju navrhovali, ste boli úplne spokojní. 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

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

V predošlej časti sme sa venovali architektúre aplikácií UWP a rozdeleniu 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. Navrhnúť možno 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. Keby ste aplikáciu navrhnutú „natvrdo" pre telefóny spustili na veľkom displeji, väčšina obrazovky by bola nevyužitá. Opačne, keby 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é, prípadne 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 na 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 na 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.

Algoritmus na 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 ste 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 × 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov zasa 200 × 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.

Porovnanie mriežky 40 × 40 a 32 × 32 pixelov – v druhom prípade bude pri škálovaní text rozostrený

Flexibilita

Pri optimalizácii vašej aplikácie na 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 či 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, aplikácia však 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 zariadenia. Typický príklad je zmena orientácie na výšku/na šírku.

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ý príklad je rozdelenie textu pri zobrazení na širokej obrazovke do viacerých stĺpcov na lepší komfort čítania. Takisto ovládacie prvky vo vizuálnych kontajneroch sa môžu vhodne preskupovať.

Skrývanie a odhaľovanie - na menších displejoch môžete na základnej 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 na vyššiu variabilitu ovládania. Typický príklad 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 androidových 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 zobrazí 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.

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 Swiss 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ľom 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. Na lepšiu prehľadnosť odporúčame umiestňovať ovládacie prvky do sekcií. Významnejšie prvky treba umiestniť v hornej časti obrazovky, aby boli dostupné bez rolovania. Uvážte, či k niektorým prvkom neposkytnete vysvetlenie. Na tabletoch môžete na nastavovanie skupín parametrov využiť zobrazenie typu master - details.

Príklad dizajnu nastavovania parametrov aplikácie pre tablety

 

Zobrazit Galériu

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Ako zbaviť fotky hmly

08.12.2016 11:59

Hmla alebo dym sú často veľmi kreatívne nástroje. No všetkého veľa škodí. Fotka potom stráca kontrast a v podstate na nej nič nevidieť. Hmlu môžete neraz následnými úpravami odstrániť alebo zredukovať ...

Ako na to

Užitočné SW nástroje

08.12.2016 11:53

AllDup v4.0.3 Určenie: program na vyhľadávanie a odstraňovanie duplicitných súborov Vlastnosti: duplicitné súbory sa vyhľadávajú len na zvolených diskových jednotkách alebo len v rámci vybraných ...

Ako na to

Fotografovanie s bleskom

08.12.2016 11:47

Ak máte moderný fotoaparát so vstavaným alebo externým bleskom, zdá sa vám téma článku triviálna. Jednoducho nastavíte vhodný režim, vyberiete najlepšiu kompozíciu záberu, exponujete a o zvyšok sa už ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá