Naučte sa vyvíjať aplikácie pre Android za 14 dní – princípy dizajnu a škálovania

0

Zariadenia na ktorých budú aplikácie spúšťané majú rôznu veľkosť obrazovky a rôzne rozlíšenie. Preto programátori migrujúci z klasických aplikácií pre Windows by mali zabudnúť na prax definovania presných súradníc polohy a konkrétnych rozmerov ovládacích prvkov. V Androide definujete vzájomné usporiadanie prvkov aby sa používateľské rozhranie aplikácie mohlo správne zobraziť na ľubovoľnom displeji. Pri vývoji aplikácie by ste mali poznať základné princípy dizajnu používateľskeho rozhrania.

"Material design" je spôsob/typ dizajnu používateľského rozhrania vyvinutého spoločnosťou Google. Je založený na materiáli, ktorý má svoju hrúbku a je v priestore ”hmotný”. Každý element vrhá tieň, môže sa deformovať, presúvať v priestore, zoskupiť sa s inými elementmi a prekrývať sa. Avšak nikdy nemôžu byť dva elementy na rovnakom mieste. Pri celom procese sa pracuje s hĺbkou používateľského rozhrania. Po prvýkrát bol použitý nový element - karta, ktorá zoskupuje viacero spoločných informácií do jedného komponentu. 

Material design je zobrazenie trojrozmerného prostredia obsahujúce svetlo, tiene a plochy z materiálu dané farbou. Všetky významné objekty používateľského rozhrania majú rozmery v súradniciach X, Y a Z. Hrúbka materiálu sa odporúča 1 dp (density pixel nezávislý od veľkosti obrazovky zariadenia). Hlavné svetlo vytvára smerové tiene a okolité svetlo vytvára mäkké tiene. Tiene sú vytvorené na báze rozdielu výšky medzi prekrývajúcimi sa materiálmi.

V hmotnom prostredí svetlá osvetľujú scénu. Rovnaký princíp využíva aj používateľské rozhranie Aplikácie akceptujúce dizajnový štýl Material Design. Hlavné svetlo svetla vytvára smerové tiene, zatiaľ čo okolité svetlo vytvára mäkké tiene zo všetkých uhlov. Tiene sa vytvoria aj ak sú svetelné zdroje blokované materiálmi plôch, v rôznych polohách pozdĺž osi z. Vľavo je tieň od hlavného svetla, v strede tieň od okolitého svetla a vpravo výsledok – kombinácia obidvoch tieňov.

Materiál môže mať rôzne rozmery, avšak jeho hrúbka je podľa dizajnového odporúčania Google vždy 1 dp. Obrázok vľavo je správny dizajn, vpravo nesprávny.

Vyjadrenie polohy v osi z pomocou tieňa

Plochy používateľského rozhrania aplikácie môžu meniť rozmery, tvar, plochy, napríklad ak na ne používateľ ťukne môžu zmeniť polohu v osi Z a podobne.

Plochy podobne ako v reálnom svete nemôžu zaberať rovnaké miesto v priestore. Ľahko si to predstavíte na plochách z konkrétneho materiálu, napríklad plechu. Môžete položiť jednu na druhú, avšak nemôžu splynúť v jednej hrúbke. Objekty umiestnené nad sebou, alebo položené na sebe podobne ako v reálnom svete vrhajú tiene a odrážajú svetlo. Definícia odporúčania Material Design obsahuje parameter nazývaný elevácia. Je to rozdiel vzdialeností v osi Z meraný od prednej steny jedného povrchu k prednej stene druhého povrchu. Rozdiel vzdialeností v osi Z sa znázorňuje hĺbkou tieňa. Elevácia môže byť statická a dynamická, napríklad ako reakcia na výber prvku, alebo zvýraznenie oznamu,kľúčovej hodnoty a podobne. V prípade, že objekt zmení výšku, mal by sa keď prestane dôvod na zvýraznenie „pokojovej“ elevácie.  Komponenty by si mali udržiavať konzistentnú eleváciu aj naprieč aplikáciami. Typickým príkladom je plávajúce tlačidlo dobra známe napríklad z aplikácie Messenger. Plochy nemôžu zaberať rovnaké miesto v priestore. Musia sa v osi Z prekrývať. Vľavo správne, vpravo nesprávne

Každá úroveň menu by mala byť opticky zdvihnutá o 1 dp (density independent pixel – pojem bude vysvetlený v stati o rozlíšení obrazovky)

Material design sa začal používať počnúc verziou Android 5.0 Lollipop a postupne sa rozširuje a zdokonaľuje. V novej verzii Android 7.0 Nougat pribudla v dizajnových odporúčaniach aj takzvaná spodná lišta. Môže obsahovať 3-5 tlačidiel s ikonami. Tlačidlá na tejto lište musia aktivovať priamo príslušnú funkciu, nemali by vyvolávať žiadne kontextové menu alebo nastavenia. Na to je určená horná lišta s takzvaným „hamburger“ menu – ikonka s vodorovnými čiarkami nad sebou a  tlačidlom nastavení a ikonkou s troma bodkami. 

Farbami a ich kombináciami sa zaoberá stránka https://material.google.com/style/color.html#color-color-schemes.  Nájdete tam kódy odporúčaných farieb a odtieňov. Ešte užitočnejšie na inšpiráciu sú príklady farebných schém na stránke. Príklad odporúčanie farieb vo farebnej schéme Purple – Green.

Prispôsobenie rozlíšeniu obrazovky

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 rôznymi 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), čiže počet bodov na palec. 

Rozmerové parametre, napríklad rozmery okrajov a rozostupov medzi prvkami sa najčastejšie uvádza 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  x 48 px 

1x

hdpi

240 dpi

42 x 72 px

1.5x

xhdpi

320 dpi

96 x 96 px

2x

xxhdpi

480 dpi

144 x 144 px

3x

xxxhdpi

640 dpi

192 x 192 px

4x

 

U obrázkov pre každú hustotu ldpi , mdpi , hdpi a xhdpi je potrebné 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  x 180 px 

3x

mdpi

240  x 240 px 

4x

hdpi

360 x 360 px

6x

xhdpi

480 x 480 px

8x

 

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 pre 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, či 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.

Pre úhľadnosť a čistotu štýlu sa odporúčajú okraje. Z ľavej strany 16dp pre smartfón, prípadne 24 dp pre tablet. Vertikálne okraj netreba riešiť, v hornej časti obrazovky je stavový riadok o výške 24dp. Ponechajte čo najviac priestoru pre obsah. Predovšetkým neorganizujte obsah pomocou čiar a rámčekov. Na tento účel slúžia v Material dizajne plochy. Optické oddelenie obsahu napríklad do stĺpcov, či riadkov pomocou okrajov a rozstupov stĺpcov síce zaberá nejaké miesto, no na okraje „obetované“ pixely 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. Pre horizontálne oddelenie súvisiaceho obsahu používajte medzeru minimálne 16 dp pre smartfón, prípadne 24 dp pre tablet.  Pre 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 pre detaily na rôznych podľa potreby zobrazovaných obrazovkách.  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: 24dp

(2)Lišta nástrojov (toolbar): 56dp

(3)Podnadpis  48dp

(4)Zoznam 72dp

 

Určite ste si všimli, že pre pomer strán displeja si výrobca zariadenia spravidla zvolil nejakú osvedčenú hodnotu, najčastejšie 16:9, 4:3, či 3:2.Nebudeme do podrobností riešiť estetiku, ale aj pri tvorbe používateľského rozhrania Google odporúča pre obrázky, či väčšie plochy v aplikáciách uprednostniť vybrané pomery strán.  Odporúčané pomery strán plôch sú 16:9, 3:2, 4:3, 1:1, 3:4, 2:3.

Len na úplnosť dva jednoduché vzorčeky:

Šírka = Pomer strán * Výška 

Výška = Šírka / Pomer strán

Text je jedným z najdôležitejších výrazových prostriedkov každej aplikácie. Preto je dôležité, aby bol textový obsah prehľadný. Podľa typografie by malo byť používateľovi ihneď zrejmé, čo je dôležité, napríklad kde je nadpis, kde sú podnadpisy, kde nájde sumárne informácie, kde detaily, mala by mu byť jasná prípadná hierarchická štruktúra prezentovaného obsahu.

Na záver state o Material design uvedieme jedno zo základných dizajnových pravidiel. Prečo sú niektoré dizajnové návrhy používateľského rozhrania aplikácií pôsobivejšie ako iné? Základné pravidlá kompozície platné pre fotografiu, napríklad pravidlo tretín, či zlatého rezu platia samozrejme aj pre dizajn, ale nie vždy sa dajú aplikovať. Je tu však ešte jedno pravidlo, ktoré sa týka viac dizajnu, než maľby a fotografie, Skúste porovnať nejaké dizajnové grafické výtvory, nemusí to byť len používateľské rozhranie aplikácie, ale trebárs aj reklamný leták, či iný typografický produkt. Na mnohých grafikách, ktoré sa vám páčia odhalíte, že niektoré rozmery sa v nich často opakujú, no nielen rozmer prvku ako taký, ale aj jeho násobky. 

 

Prehľad dielov seriálu

1 deň – Prvá aplikácia 

2 deň – Možnosti emulátorov 

3 deň - Zorientujte sa v projekte aplikácie 

Zobrazit Galériu

Luboslav Lacko

Všetky autorove články
Android aplikácia vývoja aplikácie Android Studio

Pridať komentár

Mohlo by vás zaujímať

Mohlo by vás zaujímať