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 1

iPhone so zaobleným displejom OLED má prísť už na budúci rok

02.12.2016 09:48

Ázijskí dodávatelia Applu hovoria, že cupertinská spoločnosť ich požiadala, aby zvýšili výrobu tenších panelov OLED a predložili jej prototypy obrazoviek s vyšším rozlíšením, ako má Samsung. Keďže Ap ...

Produkty

GPD Win – miniatúrny herný notebook s Windows 10 a hernými ovládačmi

02.12.2016 00:22

Zvykli sme si, že s operačným systémom Windows sa nestretávame len na stolových a prenosných počítačoch, ale aj ďalších zariadeniach, siahajúcich od lacných tabletov typu 2-in-1 až po minipočítače. Je ...

Produkty

Strojové učenie Google TensorFlow bude podporovať Windows

01.12.2016 00:13

V týchto dňoch Google zaviedol podporu operačného systému Windows pre svoje strojové učenie TensorFlow. To bola totiž jedna z prvých požiadaviek, ktoré dostali vývojári po tom, čo z TensorFlow urobili ...

Žiadne komentáre

Vyhľadávanie

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

Najnovšie videá