Image
16.8.2016 0 Comments

Nový seriál: Vývoj aplikácií pre Android – 1. časť: Dizajn

Začíname nový seriál o vývoji aplikácií pre najpopulárnejšiu mobilnú platformu Android. Bude vychádzať dvakrát do týždňa. Dlho sme rozmýšľali, ako začať. Klasický postup, teda návod, ako získať a nainštalovať vývojárske nástroje, a následne návod, ako urobiť prvú aplikáciu typu „Hello world“, je síce v určitej fáze nevyhnutný, ale ako úvodná časť seriálu nie je veľmi motivujúci. Preto sme sa rozhodli začať základnými pravidlami  dizajnového návrhu. Odporúčame po prečítaní spustiť na telefóne s Androidom 5.0 a vyšším niekoľko aplikácií od Googlu, prípadne iných renomovaných firiem (Adobe, Microsoft...) a skonfrontovať, či a ak áno, ako sú prezentované odporúčania rešpektované a implementované.

Dizajnový štýl Material

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. No 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.

Princíp Material Design

Material Desing 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.

Navodenie dojmu priestoru

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 vtedy, ak sú svetelné zdroje blokované materiálmi plôch, v rôznych polohách pozdĺž osi z. Na obrázku je príklad plochy vo virtuálnej výške 6 dp.

Navodenie dojmu priestoru pomocou tieňa z hlavného a okolitého svetla. 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, ale jeho hrúbka je podľa dizajnového odporúčania Googlu 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ú, ale 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 vrátiť do pôvodného stavu, keď prestane dôvod na zvýraznenie „pokojovej“ elevácie. Komponenty by si mali udržiavať konzistentnú eleváciu aj naprieč aplikáciami. Typický príklad je plávajúce tlačidlo, dobre 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

Material Design sa začal používať od verzie 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 až 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 „hamburgerovým“ menu – ikonka s vodorovnými čiarkami nad sebou a tlačidlom nastavení a ikonkou s tromi 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 tejto na stránke.

Príklad odporúčania farieb vo farebnej schéme Purple – Green.

V sekcii pre dizajnérov nájdete odporúčania na tvorbu ikon, obrázkov v aplikáciách a, samozrejme, štandardných aj špeciálne navrhnutých ovládacích prvkov.

Kompletné odporúčania nájdete na https://material.google.com/ 

V budúcej časti budeme pokračovať rozmiestnením prvkov používateľského rozhrania na obrazovke.

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

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

Dizajnér navrhol nábytok, ktorý sa poskladá sám

20.01.2017 00:05

Máte problém s dopravou či montážou novozakúpeného nábytku? Mladému dizajnérovi sa podarilo tento problém vyriešiť. Plocho balený nábytok uľahčuje prepravu, keď však príde na jeho montáž, zostávajú m ...

Produkty

Rozmery Samsung Galaxy S8 a S8 Plus naznačujú, že pôjde o takmer bezrámčekové telefóny s veľkými displejmi

20.01.2017 00:30

Väčšia verzia nového vlajkového modelu Samsungu Galaxy S8 Plus bude mať rozmery 152,38 × 78,51 × 7,94 mm. Tvrdí to web  GSM Arena na základe 3D renderov, ktoré získal od výrobcu krytov. Bude teda vyšš ...

Produkty

Začína sa nová séria rýchlostných pretekov elektromobilov. Upravená Tesla vraj zrýchli z 0 na 100 km/h za 2,1 s

20.01.2017 00:20

Vlani usporiadatelia ohlásili popri Formule E, najznámejších pretekoch elektromobilov, aj novú sériu Electric GT Championship. Ako pretekárske auto sa v nej použije Tesla Model S P100D. Ide o uprave ...

Žiadne komentáre

Vyhľadávanie

Kyocer TASK

Najnovšie videá