Image
18.8.2016 0 Comments

Vývoj aplikácií pre Android (2) – dizajn II.

V predchádzajúcej časti sme sa venovali základným princípom grafického dizajnu aplikácií, ktorý Google nazýva Material Design, využíva ho na návrh používateľského rozhrania operačného systému Android od verzie 5.0 Lollipop a odporúča ho aj pre dizajn aplikácií.

Budeme pokračovať stručným opisom pravidiel Material Designu. Pri návrhu obrázkov a ikon je dôležité mať na pamäti, že vaša aplikácia môže byť inštalovaná na rôznych zariadeniach, s displejmi s rôznym rozlíšením a hustotou pixelov. Geometrickým zväčšením prvku či ikony určenej pre malý displej na displeji s rozlíšením full HD, prípadne vyšším sa docieli obrázok bez detailov, často neostrý. Preto máte k dispozícii viacero mierok, v ktorých môžete vytvárať obrázky. Android pri spustení aplikácie kontroluje vlastnosti displeja konkrétneho prístroja a načíta ikonu v rozlíšení zodpovedajúcom parametrom displeja. Rozlíšenie sa uvádza v dpi (dots per inch), ide teda o počet bodov na palec.

Rozmerové parametre, napríklad rozmery okrajov a rozstupov medzi prvkami, sa môžu udávať v jednotkách

  • in – palce (britská dĺžková jednotka – 2,54 mm)
  • mm - milimetre
  • pt - points (1/72 palca)
  • dp – pixely nezávislé od rozlíšenia. Je to abstraktná merná jednotka vzťahujúca sa na fyzickú hustotu pixelov zobrazovacieho zariadenia vzhľadom na referenčné zobrazenie 160 dpi
  • sp – škálovateľné pixely nezávislé od mierky. Je to jednotka podobná dp, ale berie do úvahy škálovanie fontov podľa používateľových preferencií
  • px – rozmer v pixeloch aktuálneho rozlíšenia. Neodporúčame používať, pretože takto definované prvky sa nedokážu prispôsobiť veľkosti a rozlíšeniu displeja konkrétneho zariadenia

Podrobnejšie vysvetlenie si zaslúži definovanie v jednotkách dp (density - independent pixel), ktoré sú definované vzťahom

1DP = 160px/dpi

Z tohto vzťahu logicky vyplýva, že dp vyjadruje fyzickú veľkosť displeja, ktorá sa na každom zariadení automaticky prepočíta späť na pixely.

Zobrazenie prvku na displeji s vysokým rozlíšením (vľavo) a nízkym rozlíšením (vpravo)

Pre rozmery ikon pre rôzne rozlíšenia platí tabuľka

mdpi

160 dpi

48  × 48 px

hdpi

240 dpi

42 × 72 px

1,5×

xhdpi

320 dpi

96 × 96 px

xxhdpi

480 dpi

144 × 144 px

xxxhdpi

640 dpi

192 × 192 px

Pri obrázkoch pre každú hustotu ldpi, mdpi, hdpi a xhdpi treba vytvoriť obrázok v  rozdielnom rozlíšení, a to v pomere 3:4:6:8. Napríklad pre obrázok, ktorý má v ldpi rozmery 180 × 180 pixelov, musíte vytvoriť varianty

ldpi

180  × 180 px

mdpi

240  × 240 px

hdpi

360 × 360 px

xhdpi

480 × 480 px

Ak nie je zadaná hodnota pre príslušné rozlíšenie, použije sa najbližšia vyhovujúca hodnota.

Metrika dizajnu

Na úvod zdôrazníme dva základné princípy návrhu dizajnu aplikácií – estetiku a účelnosť, ktoré sa navzájom synergicky dopĺňajú. Odporúča sa zarovnávanie objektov prezentačného rozhrania do mriežky na vytvorenie konzistentného a štruktúrovaného rozvrhnutia plochy aplikácie. Zarovnanie mriežky sa predpokladá podľa dlhšej strany obrazovky. Tým dosiahnete odporúčanú siluetu aplikácie. Prvky používateľského rozhrania stmeľuje mriežka, ktorá určuje rozstup grafických objektov.

Všetky komponenty sa odporúča zarovnať na štvorcovú mriežku s rozmerom poľa bez ohľadu na to, či je aplikácia určená pre mobilné telefóny, tablety alebo televízory. Ikony v paneli nástrojov sa rozmiestňujú v hustejšej mriežke so stranou 4 dp. Do takejto hustejšej mierky sa zarovnáva aj písmo.

Zarovnanie prvkov používateľského rozhrania na mriežku

Na úhľadnosť a čistotu štýlu sa odporúčajú okraje. Z ľavej strany 16 dp pre smartfón, prípadne 24 dp pre tablet. Vertikálne okraj netreba riešiť, v hornej časti obrazovky je stavový riadok s výškou 24 dp. Ponechajte čo najviac priestoru na obsah. Predovšetkým neorganizujte obsah pomocou čiar a rámčekov. Na tento účel slúžia v Material Designe plochy. Optické oddelenie obsahu napríklad do stĺpcov či riadkov pomocou okrajov a rozstupov stĺpcov síce zaberá nejaké miesto, no pixely „obetované“ na okraje sú bohato vykompenzované tým, že opticky rámujú obsah a výrazne ho sprehľadňujú, čím prispievajú k lepšej orientácii používateľa. Na horizontálne oddelenie súvisiaceho obsahu používajte medzeru minimálne 16 dp pre smartfón, prípadne 24 dp pre tablet. Na oddelenie viacerých grafických zoznamov či textových polí sa odporúča medzera 80 dp pre tablet. Pre smartfón na výšku bude lepšie použiť zoznam a pole na detaily na rôznych obrazovkách zobrazovaných podľa potreby.

Tip: Pri prípadnom adaptovaní starších aplikácií na Material Design skúste v prvom kroku ponechať pôvodné rozvrhnutie ovládacích prvkov a odstrániť len rámčeky a čiary, ktoré rozdeľujú plochu obrazovky. Veľakrát budete prekvapení, ako tento krok prispel k sprehľadneniu prezentačného rozhrania aplikácie.

Vľavo odporúčania pre okraje a vzdialenosť kľúčového stĺpca, vpravo vertikálne rozstupy

Podobne oddeľujte obsah aj vertikálne. Medzi položkami zoznamu sa odporúča rozstup 72 dp. Odporúčaná výška jednotlivých polí a riadkov zoznamu je pre názornosť vyjadrená pomocou legendy:

  1. Stavový riadok: 24 dp
  2. Lišta nástrojov (toolbar): 56 dp
  3. Podnadpis  48 dp
  4. Zoznam 72 dp

Odporúčania pre okraje a rozstupy stĺpcov v aplikácii pre tablet

V poslednej časti venovanej dizajnu sa budeme venovať pokročilejším pravidlám, napríklad odporúčaným pomerom rozmerov grafických prvkov, typografii a pravidlu násobkov. 

Vývoj aplikácií pre Android (1) - dizajn =>>

Vývoj aplikácií pre Android (3) – dizajn III =>>

Vývoj aplikácií pre Android (4) – Nástroje I. =>>

Vývoj aplikácií pre Android (5) – Prvá aplikácia =>>

Vývoj aplikácií pre Android (6) – Spustenie na zariadení =>>

Zobrazit Galériu

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

Mohlo by Vás zaujímať

Produkty

Bluetooth 5.0 prichádza s dvojnásobnou rýchlosťou a štvornásobným dosahom oproti verzii 4.2

08.12.2016 11:17

Bluetooth SIG vydal finálnu špecifikáciu pre nový štandard Bluetooth 5 pre OEM, ktorí teraz môžu vyvíjať hardvér na  jeho podporu. Nová špecifikácia je spätne kompatibilná so všetkými predchádzajúcim ...

Produkty

Microsoft môže kúpiť LinkedIn, Európska komisia si však dala podmienky

08.12.2016 00:07

Európska komisia (EK) schválila prevzatie profesijnej sociálnej siete LinkedIn spoločnosťou Microsoft. Súhlas je však podmienený dodržiavaním série záväzkov, ktorých cieľom je zachovanie konkurencie m ...

Produkty 1

Tripleton Enigma E2 – aktuálne najlepšie zabezpečený šifrovaný mobilný telefón na svete

08.12.2016 00:10

Šifrovaný telefón využíva priekopnícke techniky ochrany proti odpočúvaniu, ako sú napríklad autorizácie pomocou špeciálnej karty a šifrovacej techniky, ktorú podľa výrobcov nemožno prelomiť. I napriek ...

Žiadne komentáre

Vyhľadávanie

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

Najnovšie videá