Material Design ve vývoji Android aplikací

Vytvořit aplikaci pro platformu Android vyžaduje jistou dávku úsilí, protože tento operační systém využívá až 2 miliardy uživatelů. Právě z toho důvodu je potřeba se držet toho, jak by měla aplikace správně vypadat a fungovat, aby uživatelská zkušenost byla přívětivá na všech typech zařízení. Právě z tohoto důvodu vznikl Material You design, který ti má pomoci s vývojem aplikací

Co je to Material Design?

V roce 2014 společnost Google představila na konferenci Google I/O Material Design. Jednoduše se dá říct, že jde o designový jazyk speciálně navržený pro operační systém Android (tehdy 5.0), který měl pomoc designerům a vývojářům s vytvořením moderního uživatelského rozhraní. Dalo by se říct, že jde o standardizované pokyny, jak by tvoje aplikace měla vypadat.

V současné chvíli je Materiál You Design ve své třetí verzi. Pokud bys o něm chtěl*a vědět více, tak navštiv stránky material.io, kde najdeš podstatné a nejnovější informace i zdroje, které ti ulehčí vývoj.

související kurzy:

Development of Android Apps

Marek Osvald

Senior Software Engineer

O kurzu

Seznam se s principy Material Design 

Material je metafora

Material Design si pohrává s myšlenkou, že uživatelský zážitek je lepší, když prvky na obrazovce odrážejí skutečný svět mimo obrazovku – světlo, stín, textura, povrch i pohyb. Narozdíl od skutečné karty lze materiál v případě potřeby snadno rozdělit, přeskupit a přesunout. Tento princip je podpořen atributy, jako jsou hrany, stíny, rozměry atd.

Odvážný, grafický, záměrný

Účelem Material Designu je tvorba designu, který dává hned smysl, je velmi snadno použitelný (např. výrazné barvy, nadpisy atd.) a vytváří jednoduchý a pohlcující zážitek.  Využitý by měl být bílý prostor, ale i dobře rezonující barvy i responzivní design, který vzbuzuje záměr.

Pohyb vytváří pocity

V rámci uživatelské zkušenosti je důležitý i pohyb. Ten vytváří iluzi a uživateli poskytuje potřebnou zpětnou vazbu na práci se systémem Android. Zachvění ikonek při dlouhém podržení vytváří pocit, že aplikace je připravena k tomu, aby byla umístěna jinam. Jde o nepsané pravidlo.

Animace v Material Designu neruší ostatní prvky designu ani nepůsobí nuceně. Objevují se jako výsledek primárních akcí uživatele a řídí se jeho pokyny.

Funkce Material Designu

Barvy a ikony

Barvy a ikony každé aplikace jsou pro designéry i uživatele velmi důležitými prvkem. Díky nim je vzhled aplikace příjemný. Pokud obojí dobře zapadne do celkového designu systému, uživatelé mnohem snáze vytvoří elegantní plochu. V rámci systému Android existují barevné palety, které celkový zážitek umocňují i v rámci UX.

Nástroj Material Design pro barvy měří úroveň přístupnosti barevné kombinace, díky které bude vzhled uživatelského rozhraní příjemnější. Ikony se klasifikují do dvou sad:

• Produktové ikony jsou tučné, jednoduché a přívětivé, 
• Systémové ikony představují příkaz, soubor, zařízení, adresář nebo běžnou akci.

Písmo a typografie

Text je základem jakéhokoli obsahu, který skenuješ a pak čteš. To znamená, že poutavý a nerušící font zvyšuje použitelnost uživatelského rozhraní. Ve skutečnosti hraje typ textu významnou roli v SEO i hodnocení. Roboto a Noto patří mezi standardní písma systémů Android a Chrome.

Navrženy jsou tak, aby byly využity napříč platformami a převodem různých typografických znaků a rozvržení – na celou šířku, do sloupců, štítků, tlačítek, značek atd. Z těchto důvodů je dobré preferovat Material Design You, protože nabízí jasné a výstižné pokyny pro design systému Android, které umožňují zvládnout písmo pro různé prvky uživatelského rozhraní.

Komponenty a rozvržení

Rozložení Material Design vychází z principů tiskového návrhu. Využívá některé nástroje, jako jsou základní mřížky a návrhové šablony, které zlepšují konzistenci napříč různými prostředími. Tato rozložení jsou schopna vytvářet škálovatelné aplikace, protože se snadno přizpůsobí velikosti obrazovky.

Všechny prvky v průvodci návrhem aplikace pro Android jsou podrobně definovány. Některé komponenty, včetně spodního navigačního panelu, seznamy, tlačítek, karet, dialogových oken, rozdělovačů, rozšiřujících panelů, nabídek, seznamů, karet a tooltipů, jsou v Material Designu přítomny.

Základní součásti průvodce Material Designem

Téma Material

Styly a motivy v systému Android umožňují oddělit detaily návrhu aplikace od struktury i reakce uživatelského rozhraní. Material Design v pokynech pro design systému Android nabízí nový styl zobrazení aplikací. Má vestavěné systémové widgety, které umožňují firmám navrhujícím aplikace rychle a snadno přizpůsobit barevnou paletu. K dispozici je také mnoho výchozích animací pro zpětnou vazbu a další přechody pro různé činnosti.

Podpora seznamů a karet

Recyclerview (widget seznamu) a CardView (widget karty) podporují formát seznamu a karty v Mateiral Designu, který obsahuje všechny styly a animace.  Ty mají z komponenty mající své hodnoty definující jejich zobrazení i grafické zpracování.

Vzory

Material Design poskytuje mnoho vzorů, které vylepšují uživatelské rozhraní s pomocí komponentů. Posuvný panel, potvrzení, spouštěcí obrazovka, technika posouvání, vyhledávání, nastavení, načítání obrázků, přejetí prstem pro obnovení a další jsou součástí vzorů, které pomáhají vylepšit uživatelskou zkušenost.

Animace

Animace jsou jedním z nejdůležitějších prvků designu Google Material Design. Díky animaci je materiál reálnější, interaktivnější a působivější na zapojení. Každá animace v Material Designu má smysluplně, konzistentně a správně načasované přechody. 

Animace jsou podporovány prostřednictvím rozhraní API, což UX/UI designerům umožňuje vytvářet animace pro zpětnou vazbu na dotyk v uživatelském rozhraní a změny stavů zobrazení a přechody aktivit.

Drawables

Drawables byly změněny s příručkou Google Material Design. Nyní se vývojářům nabízejí tři hlavní změny – vektorové drawables (slouží ke škálování bez ztráty kvality a jsou vhodné zejména pro jednobarevné ikony), Drawable tints (slouží k definování bitmapových obrázků) a color extracts (umožňují rychle a automaticky extrahovat libovolné výrazné barvy z existujícího bitmapového obrázku).

Jaké jsou výhody Material Design You?

• Připraven k použití
  
  První a pravděpodobně jednou z nejsympatičtějších výhod Material Designu You je jeho snadné využití. Každý vývojář si jej může nainstalovat a začít používat bez jakýchkoli komplikací. Společnost Google jej používá, a tak bude každá aplikace založená na principech Material Designu působit skvěle.
• Snadná integrace a údržba
  
  Další výhodou přijetí designových zásad systému Android je snadná integrace a údržba. Díky barevným paletám a globálním proměnným mohou designéři začlenit loga, palety barev (v rámci zásad Material Designu) a další odlišující faktory, které podpoří identitu značky. To je důvod, proč většina firem a designérů dává přednost Material Designu pro vývoj systému Android.
• Dobře strukturované stránky
  
  Material Design je dobře strukturovaný. Vše je v něm uspořádané tak, aby  to bylo snadno přístupně. Kromě toho jeho vysokoúrovňové směrnice pro prvky dodávají celé aplikaci potřebnou strukturu. Material Design se dá obecně definovat jako design, který se zabývá strukturálním, estetickým a funkčním chováním materiálu podle typu aplikace pro Android.
• Flexibilní
  
  Výhodou Material Designu je vlastní kódová základna, která umožňuje UX/UI designerům mobilních aplikací pro systém Android přidávat do návrhu prvky své značky. Podniky tak mohou uživatelům poskytnout lepší uživatelský zážitek díky maximální přizpůsobitelnosti.
• Víceplatformní
  
  Material Design je ideální pro vývoj napříč platformami. Pomáhá udržovat podobné uživatelské rozhraní na různých platformách a pomáhá používat sdílené komponenty na všech, včetně systémů Android, Flutter a webu. Material Design navíc podporuje osvědčené postupy pro design a použitelnost napříč platformami a pomáhá vytvářet krásné uživatelské prostředí.

Objevuj možnosti Material Design

Google Material Design je bezpochyby jedinečné řešení, které ti usnadní práci. Proto jsme rádi, že jsi dočetl*a až sem a zjistil*a si, v čem tkví jeho kouzlo. Pokud to s vývojem aplikací pro Android myslíš vážně, tak nezapomeň sledovat nové trendy jak v oblasti vývoje samotného systému, tak designové filozofie, kterou s sebou nové verze Androidu přináší.

Na svých skills pak můžeš zapracovat v praktických kurzech, jako je třeba Clean code & design patterns nebo Low code. V případě, že budeš chtít být v obrazu, sleduj náš blog nebo sociální sítě, na kterých ti neuniknou žádné novinky ze světa IT.

Autor: Martin Šlat