V loňské soutěži I / O v roce 2014 se společnost Google vrátila s novými překvapeními. Kromě oficiálně vydané nové aktualizace Android s kódovým označením Lollipop, Google také představil svůj nový nový design jazyk, Material Design . Je to designový systém, který není určen pouze pro nová vylepšení uživatelského rozhraní Lollipop, ale také pro zařízení a prostředí.
Materiál Design má některé hlavní rysy, které jej odlišují mezi ostatními trendy designu svým vlastním unikátním způsobem. Stejně jako jeho jméno, byl inspirován skutečnými materiály a spojil je do jednoho designového systému, aby vytvořil elegantní, intuitivní, krásné a nejvíce interaktivní uživatelské prostředí. V tomto příspěvku se podíváme na to, co je uvnitř materiálu, a poskytneme vám rychlý návod, jak jej implementovat. Citací blogu Google řeknu: „Toto je materiální design“.
Úvod
Materiál Design je jednotný designový systém, což znamená, že byl vytvořen pro práci se všemi dostupnými dnešními zařízeními a platformami. Od tabletu, smartphonu až po desktop a od Android, iOs, Windows až po webové platformy. Veškerý design vypadá a má být stejný, ať je kdekoli.
Hlavní principy
Existují tři hlavní principy, které konstruují Material Design. Jedná se o nejzákladnější část toho, co materiál obecně nabízí.
- Materiál je metafora . Vývoj materiálu byl inspirován studiem hmatových prvků, které používáme každý den, papíru a inkoustu . To dělá objekt světlo, povrch a pohyby jsou lepší při interakci s ostatními.
- Odvážné, grafické a úmyslné . Typografie, mřížky, prostor, měřítko, barva a použití obrazů, které se používají v základech tisku založených na tisku, zlepšují obsah materiálu.
- Pohyb dává smysl . To je jedna z nejznámějších věcí. V materiálu byste měli mít smysluplný a vhodný pohyb, jemnou a jasnou zpětnou vazbu a účinný a soudržný přechod.
Komponenty
Materiál Design věnuje pozornost každému detailu svých komponent, takže mohou být použity univerzálně. Tyto komponenty vám pomohou vytvořit úžasnou aplikaci a web. Existuje mnoho komponent poskytovaných materiálem, jako jsou tlačítka, přepínač, karta, textový vstup, fab (tlačítko plovoucí akce), dialog, toast, podnabídka, karta a další. Každý z nich má své vlastní pravidlo a návod, jak je postavit, takže nebudete mít žádné nepodstatné prvky.
Vzory Věci
Kromě komponent vám materiál poskytuje také některé základní vzory pro další uživatelské rozhraní. Tyto vzory zlepší uživatelské rozhraní vytvořené pomocí komponent materiálu. Vzory včetně formátu dat, šuplíku pro navigaci, chyb, gest, posouvací techniky, vyhledávání, nastavení, načítání obrázků, přejetím a aktualizací.
Barvy provedení materiálu
Barvy v materiálu byly navrženy tak, že se nebudete cítit nepříjemně, podivně a plocho. Inspiraci z našeho každodenního prostředí, jako jsou dopravní značky, současná architektura, dlažba značení pásky a sportovní hřiště, materiál Design vám přináší nečekané a vysoce temperamentní barvy. Existuje tolik barevné palety, aby vám umožnilo větší pohodlí při vývoji aplikací nebo webů. Můžete také stáhnout vzorníky barev pro místní použití, jako je tomu ve vaší sbírce Photoshopu.
Ikona materiálu
Pokud jste vývojář Android, musíte být obeznámeni s některými bezplatnými balíčky ikon, které Google poskytuje. Obvykle se používají pouze pro hlavní prvek a akční panel. Zatímco pro jiné zdroje, musíme hledat jiné ikony, jako je složka, soubor, kopírování a vkládání, atd. Ručně. V materiálovém designu Google vyřešil problém s množstvím balíčků ikon, které můžete použít.
Každá z ikon prošla nějakým designovým přístupem, který také využívá studium hmatových materiálů. Jsou to také udržování hmotného principu, který je konzistentní. Můžete stáhnout tyto ikony na GitHub, přichází s některými možnostmi pro různé použití, jako pro iOs, web, Android nebo svg. Pokud chcete širší možnosti pro snadné přizpůsobení, pravděpodobně budete chtít vidět balíčky ikon Design materiálu na FlatIcon. Uvnitř balení získáte ikonu vektoru (SVG & EPS), verzi PSD a PNG.
Animace materiálu
Toto jsou vlastnosti materiálu, které mám nejraději. Animace v materiálu jsou tak reálné a intuitivní. Každá animace má smysluplné, konzistentní a správné časové přechody. Demo na GIFu uvedené níže je jen jednou z krásných animací materiálu. K zajištění poutavé a citlivé interakce vytvoří tým Google také animaci podobnou zvlnění vody pro efekt vstupu uživatele. Většinou se používá na tlačítkách a kartách.
Tyto funkce, které jsem vysvětlil, jsou jen malou částí toho, co nabízí Design materiálu. Chcete-li se dozvědět více o materiálovém světě, přejděte na stránku dokumentace.
Implementace
Ve výchozím nastavení je Material Design dodáván jako nová aktualizace UI pro Android Lollipop. Všechny pokyny, které v něm byl použit materiál. Vzhledem k tomu, že materiál je určen pro všechny druhy prostředí, jeho implementace do jiného systému nebude těžká. A díky komunitám je to mnohem jednodušší s některými nástroji, které vytvořili.
To je několik způsobů, jak dosáhnout materiálu Design mimo Android, například web.
Použití CSS Frameworků
To je nejjednodušší způsob, pokud chcete implementovat Material Design ve webové platformě. S frameworkem, vše, co potřebujete udělat, je inicializovat, pak napsat prvky, které potřebujete. Existuje mnoho frameworků, které můžete použít jako Materialize, Material UI nebo Polymer. Moje osobní volba spadá do materializace. Je to jednodušší použít a pochopit a mít skvělou dokumentaci s pěkným demo.
Postupuje podle pokynů
Pokud chcete implementovat materiál bez pomoci rámce a raději se uchylovat k kódům nejvíce, musíte se řídit Materiálem. Najdete zde všechny věci, které byste měli všimnout, abyste dosáhli hmotných zásad. Uvidíte všechny základní pokyny pro vytváření komponent, rozvržení, animaci, barvu, vzory a další. Možná budete chtít vidět nějaký kontrolní seznam materiálu pro snadnější vývoj.
Závěr
Materiálový design je skvělý designový systém a stal se jedním z nejočekávanějších trendů roku. V příštích několika měsících to můžeme vidět všude. Další aplikace a stránky budou vyleštěny touto novou aktualizací designu Google.
S materiálovým designem společnost Google prokázala svou převahu jako jedna z největších technologických společností. To dělá Google nejen vést v oblasti vyhledávačů a mobilních operačních systémů, ale také v oblasti designu. Doposud neexistují žádné jiné společnosti, které by vyvíjely tuto velkou věc jako Google. Ale zkušenosti říkají, že to nebude trvat dlouho. Počkejte, až ostatní společnosti odpoví na Materiálový design společnosti Google.
