Co je Material Design. Vše, co potřebujete vědět o Material Designu

Dnes porovnáme dva podobné styly v designu, z nichž první je horkou novinkou a druhý si postupně získává na oblibě. První se spontánně přizpůsobuje, zatímco druhý má jasná pravidla. Možná je vám znám boj mezi nimi, který se odehrává v dnešní době.

Ale ve skutečnosti, jaký je mezi nimi rozdíl? Proč je první lepší než druhý? Jaký design je lepší použít pro dané úkoly? Ve skutečnosti se někteří lidé často diví, jak velký rozdíl mezi těmito dvěma styly designu je. Pro začátek je nutné připomenout, že každý je založen na skeuomorfismu.

Skeuomorfismus

Skeuomorphism je design, který se snaží zobrazit věci, na které jsme zvyklí, na obrazovce tak, jak vypadají ve skutečnosti. Svého času byl tento styl dominantní v designu rozhraní.

Problém je v tom, že takový obrázek prvků není příliš vhodný, i když se o něm dříve uvažovalo skvělá cesta. To vše proto, že se na design dívali jinak.

Svět designu nakonec dospěl k závěru, že je nutné odstranit všechny dekorativní prvky a ponechat v nich pouze to, s čím by bylo vhodné interagovat. Bylo také nutné zmenšit jejich hlasitost pro rychlejší načítání a zaměřit zrak uživatele na to nejdůležitější a nejzákladnější. Tak bylo odstraněno vše nadbytečné ze skeuomorfismu a v designu se objevil nový styl, který se stal známým jako flat design.

design bytu

Plochý design je v mnoha ohledech zjednodušující a popírá přítomnost stínů, přechodů a textur. Tato technika vám umožňuje zaměřit oči na ikony, barvy a písma.

Jde především o styl digitální zařízení- je velmi pohodlný a dokonale umožňuje uživatelům snadnou interakci s vaším produktem, protože postrádá vše zbytečné.

Flat design se vás snaží zaměřit na snadnou interakci s webem. Jednoduchost jeho ikonografie zjednodušuje funkčnost, protože uživatelé mohou interagovat s webem i prostřednictvím samotných obrázků. Jejich použití zároveň zrychluje načítání prvků webu. Také se dobře škálují, díky čemuž vypadají dobře na jakémkoli zařízení bez ohledu na jeho rozlišení. A v souladu s tím to hodně zjednodušuje jak pro projektanta, tak pro uživatele.

Klady:

• Stejné zobrazení na všech obrazovkách
• Absence skeuomorfismu vám umožňuje urychlit proces pochopení toho, co jste chtěli uživatelům sdělit
• Odstranění všech nadbytečných prvků umožňuje zrychlit web
• Jednoduchost plochého designu vám umožňuje plně přizpůsobit váš web a zajistit, aby byl responzivní

mínusy:

• Plochý design může být příliš omezený zjednodušenou barvou, stíny, ikonografií
• Je velmi snadné vytvořit web, který je příliš jednoduchý a nudný.
• Některé aplikace a webové stránky vyžadují složitější vizuální asociace, které uživatele provedou procesem používání vašeho produktu – to je hlavní nevýhoda plochého designu. Častou stížností je také nedostatek stínů a vyboulení, které vám někdy nedovolí pochopit, že prvek je klikací.
• Jeho široké použití vám někdy nedovolí vytvořit jedinečné rozhraní.
• Nedostatek konkrétních pevných pravidel (na rozdíl od materiálového designu)

materiálové provedení

Kritici plochého designu tvrdí, že to zašlo příliš daleko. Oddělení vrstvy pomocí stínů, animovaných prvků – to je to, co nám umožňuje intuitivněji porozumět prvkům stránky.

Pro ty, kteří to nevěděli, material design vznikl v Googlu a udělali malý obrys stránky pravidla designový materiál. Tento styl má nespočet a jedinečných funkcí, ale možná jednou z nejlepších vlastností je použití osy z. V podstatě přidává trochu skeuomorfismu, který umožňuje dvěma rovinám „plavat“ na sobě.

Je to také standard pro aplikace pro Android. Měl by se používat na iOS? Tato otázka je stále žhavým tématem k diskusi, ačkoli někteří říkají, že tento styl je nejlepší ponechat v rámci, ve kterém je v současnosti uzavřen. No, každý, jako obvykle, má na tuto otázku svůj vlastní názor.

Klady:

• Trojrozměrný prostor usnadňuje interakci, například použití stínů vám umožňuje porozumět tomu, co se tyčí nad čím, a podle toho naznačuje, kam by se mělo zaměřit oko uživatele.
• Jasná sada pravidel, která vám umožní nehádat, co a jak má vypadat
• Pokud budete dělat web nebo aplikace pro Android, pak vám material design umožňuje vytvořit skvělou značku
• Pokud se zajímáte o animaci, pak Material Design také poskytuje jasný soubor pravidel pro používání animace.

mínusy:

• Ať už s tím souhlasíte nebo ne, materiálový design je neoddělitelně spjat se společností Google, takže je velmi obtížné vytvořit jedinečnou identitu pro váš web nebo aplikaci, pokud budete postupovat podle pokynů Google.
• Ne všechny systémy jsou schopny přehrát vámi vytvořenou animaci, což může ovlivnit celkovou funkčnost vašeho produktu.
• Animace vybíjejí baterii rychleji
• Jasná pravidla mohou zpomalit vývoj tohoto designového stylu.

Závěr

Materiálové provedení se zásadně neliší od plochého provedení, oba jsou čisté a minimalistický. Dříve budete hlasovat pro materiálové rozhraní, protože plochý design je jednodušší. A i když je animace materiálového designu mnohými chválena, v podstatě slouží k tomu, aby vám usnadnila interakci s produktem. Nic vám ale nebrání tyto dva styly kombinovat.

Myslím, že weby s plochým designem jsou praktičtější, jejich rychlost načítání je mnohem vyšší než rychlost webů naplněných animacemi a těžkou grafikou. Pokud tvoříte web zaměřený na jednoduchost, pak je pro vás flat design určitě pro vás, ale pokud vás více zajímá téma animace, pak vám doporučuji použít material design.

Napište svůj výběr do komentářů, uvidíme, kdo víc!

Dne 25. června 2014 Google představil veřejnosti svou novou vizi designu rozhraní budoucnosti – celý soubor pravidel a podmínek, na kterých budou od nynějška postavena rozhraní všech firemních produktů. Proč to všechno bylo nutné? Před pěti lety se všechny produkty Google od sebe velmi lišily, včetně různé verze jedna aplikace za různá zařízení. Vývojáři přemýšleli o vytvoření speciálních pravidel pro budování a sjednocení všech vyvíjených aplikací a služeb, které byly později sloučeny pod běžné jméno„Projekt Kennedy“. Právě tento projekt se později vyvinul materiálové provedení (materiálové provedení).

Materiální filozofie

Díky projektu Kennedy, všechny hlavní služby a služby Google obdržel společné rysy designu a konstrukce rozhraní. To umožnilo sjednotit přístupy k tvorbě webových rozhraní, později i rozhraní mobilních aplikací.

Jedním z rysů jednotného designu byly informační karty, které bylo možné umístit do kterékoli části pracovní oblast. Prozkoumejte je v aplikaci Chytré karty Google, si vývojáři položili otázku: „Co je pod těmito kartami?“. Podle viceprezidenta společnosti Google pro design Matiase Duarteho tato „nevinná otázka zažehla silnou jiskru“.

Designérský tým začal uvažovat o designu nikoli jako o sbírce rovin a pixelů, ale jako o skutečném fyzickém objektu. Totéž chtěli sdělit uživateli, aby měl pocit hmatatelnosti rozhraní, že to, co se děje na obrazovce, vypadá maximálně věrohodně a logicky.

Po totální dominanci skeuomorfismus(přesná imitace skutečných objektů fyzického světa v designu) se všichni prudce posunuli opačným směrem - . Byl to on, koho vzal Google za základ a vynalezl „ materiál". Zároveň malý krok zpět k realismu.

Kvantový papír

Hlavním prvkem materiálového designu je metafora fyzického objektu svými vlastnostmi podobný papíru a má většinu jeho vlastností - velikost, barvu, tloušťku. Každá vrstva tohoto metaforického materiálu se nachází v trojrozměrném prostoru a podřizuje se všem fyzikálním zákonům, proto na rozdíl od klasického flat stylu může vrhat stín na spodní vrstvy. Všechny vrstvy jsou umístěny na hlavním spodním materiálu.

Díky svým podobným vlastnostem jako papír se materiál původně nazýval „kvantový papír“. Jedná se o stejný papír jako ve fyzickém světě, ale má řadu "magických" vlastností, například může měnit svou velikost a plynule se pohybovat v prostoru, kombinovat s jinými "listy" nebo se rozbít na několik. Kvantový papír sedí těsně nad pozadím, které je nejčastěji zabarveno bílá barva. Stín se pohybuje v závislosti na pohybu samotného materiálu, klesá nebo stoupá v závislosti na výšce materiálu nad pozadím.

Digitální inkoust

Pokud má „kvantový papír“ odrážet fyzikální vlastnosti předmětu, pak vše, co je na povrchu tohoto papíru – barvy, obrázky, text, ikony – je tvořeno pomocí „ digitální inkoust“ - další unikátní předmět materiálového designu.

Materiálový design využívá veškerý vývoj polygrafie v designu rozhraní. Ale i zde existují proprietární funkce Google. Například hlavní písmo pro použití v materiálovém designu je Roboto. Nic však nebrání společnostem používat jejich firemní písmo k udržení své identity. Pokyny pro návrh materiálů poskytují příklady použití různých tlouštěk a velikostí písma v rozhraních.

Ale to nejdůležitější v grafice materiálového designu je barva. Barva je základní vyjadřovací prostředky na kvantovém papíře a hraje proto velmi důležitou roli. Je běžné, že se používá materiálové provedení základní A akcentové barvy. Stejně jako několik jejich odstínů pro různé situace.

Obvykle primární barvy používá se pro barvení velkých oblastí, jako jsou záhlaví, pruhy akcí, stavové pruhy. slouží ke zvýraznění důležitých prvků. akcentní barva. Například na vizitku materiálového provedení - plovoucí akční tlačítka.

Základní principy materiálového designu předepisují použití obrázků. je to tak důležitý prvek co se doporučuje použít obrázek maximální velikost bez rámečků. Kromě toho se pruhy akcí stanou průhlednými, aby se maximalizoval přehled o obrázku.

Android podporuje vyhrazenou knihovnu Paleta, který je schopen z obrázku extrahovat hlavní a akcentní barvy a dynamicky měnit vzhled aplikace, přizpůsobující se aktivnímu obrázku (příklad výše).

Význam animace

Pokračujeme v kreslení analogií s přírodním světem a je třeba poznamenat, že nic nemizí do nikam, stejně jako se nic odnikud nebere. V material designu je tedy nutné plynule změnit stávající rozhraní v reakci na všechny akce uživatele tak, aby všechny přechody byly logické a zřejmé. V materiálovém designu je tedy animace důsledkem interakce mezi uživatelem a rozhraním.

Aktivní pohyb přitahuje pozornost uživatele, takže k dosažení efektu realismu musíte použít některá pravidla:

• Asymetrie
  Obvykle je velikost objektů omezena šířkou zařízení, takže pro vytvoření realistické změny velikosti kvantového papíru je nutné měnit šířku a výšku objektu asymetricky nezávisle, čímž se zabrání iluzi zvětšení nebo zmenšení objekt.
• Odpovědět
  Pro jakoukoli akci uživatele musí existovat odpovídající reakce. Jako příklad Google nabízí efekt vlnové změny objektů rozhraní s epicentrem v místě interakce.
• Přirozené autentické pohyby
  V přírodě nemohou objekty v pohybu okamžitě nabrat rychlost nebo se zastavit, a proto by všechny animace neměly být lineární, ale se zpomalováním a zrychlováním, aby byly realistické.

Závěr

materiálové provedení- je to absolutně nová cesta interakční a stavební rozhraní, která je stále ve vývoji a lze ji kdykoliv doplnit. Již nyní je však možné předvídat její vyhlídky. Minimálně ve vývoji aplikací pro Android bude dominovat, neboť sjednocení všech rozhraní bude mít pozitivní vliv na snadnost použití.

V samotném Googlu je materiálový design postaven na roveň tak významnému vývoji, jako je vývoj rozhraní okna a ovládání kurzoru (Xerox PARC) a vytvoření dotykové obrazovky(Jablko). No, uvidíme, co z toho vznikne.

Nové logo a identita Google propagují nápady na materiálový design

Podrobné pokyny od vývojáře materiálového designu naleznete zde -

Material Design patří již několik let mezi přední světové trendy webdesignu. A není se čemu divit. Koneckonců to byl on, kdo dokázal spojit jednoduchost, logiku práce a pohodlí vzhled a zároveň vytvořit promyšlené a intuitivní rozhraní pro uživatele. Prostornost, žádné hromadění detailů, čistota a absence nadměrného zdobení obrazovky. Hlavní princip materiálového designu se zaměřuje na použitelnost, nejen na dobrý design, který si získá srdce vděčného publika svou ladností a pohodlím.

Popularita trendu je způsobena obrovským množstvím zdrojů a nástrojů pro designéry, mimochodem, placených i bezplatných. Například dnes nabízím užitečný výběr plný 30 inspirativních bezplatných a placené zdroje pro designéry materiálového designu. Každý den vychází stále více nových aplikací a projektů ve stylu Material Design. Držte krok. Zjistěte užitečnost, která návrhářům pomáhá vypořádat se s náročnými úkoly a dosáhnout úspěchu každý den. Pomozte budoucímu projektu zazářit materiálovým designem.

Užitečnost pro projektanta. Kolekce 30 bezplatných a placených nástrojů a zdrojů materiálového designu.

pozadí:

1. 40+ zdarma Material Design pozadí

Není skvělé najít na jednom místě celou sbírku 40+ bezplatných materiálových designových pozadí? Vyrobeny ve vysokém rozlišení, rozhodně inspirují k realizaci webového projektu nebo jiného tištěného nápadu. Velké množství různých tvarů a barev upoutá pozornost i toho nejnáročnějšího designéra.

2. 10 pozadí zdarma

Nenechte si ujít šanci přidat sbírku 10 vysoce kvalitních pozadí pro návrh materiálů do vaší knihovny nástrojů. Tato pozadí jsou k dispozici ve dvou stylech a pěti barevných kombinacích 300 dpi A 10 .jpg soubory , stejně jako rozlišení v 5000 x 3000 pixelů. A to vše můžete získat zdarma.

3. 30 pozadí projektu materiálového stylu

Další skvělý výběr vysoce kvalitních pozadí pro projekt materiálového designu. Vyberte si z 30 různých vzorů naplněných dalšími tvary, jako jsou čtverce, trojúhelníky a kruhy, a dodejte svému DIY projektu šmrnc. K dispozici zdarma na .png A .ai formátů.

4. 12 bezplatných propagačních pozadí ve stylu Material Design

Chcete něco nového? Prosím. Podívejte se na 12 nejnovější kolekce Material Design na vysoké rozlišení. Skvělou zprávou je, že kolekci lze využít jak pro osobní, tak i komerční účely. produkty jsou licencovány Creative Common Zero, a proto testován a připraven k použití. Tvar diamantu ve středu pozadí slouží k upoutání pozornosti na produkt. K dispozici ke stažení na .png A .jpg formátů.

5. Sada vzorovaných pozadí

Nenechte si ujít výběr světlých a vysoce kvalitních pozadí vyrobených v dlaždicovém designu. Soubor obsahuje soubory .png, photoshop a formát ilustrátor vektor, což znamená, že si můžete nezávisle upravit barevné schéma podle požadavků. Používejte zdarma v jakékoli velikosti a bez ztráty kvality.

6. Zdarma bannery

Zde je sada 5 bannerů ve stylu material design s rozlišením 1140 x 600 pixelů. Skvělé pro zvýraznění záhlaví, obrázků nebo jednotlivých sekcí v jakémkoli webovém projektu.

Mobilní vývojové nástroje

7. Zdarma Mobile Design Toolkit

Skvělý výběr, který nezůstane bez povšimnutí uživatelů Photoshopu a Sketch. Pozornost je věnována sadě různých komponent pro materiálový design, které dokážou dát webovému projektu poměrně aktivní energii. Skvělá volba pro vytvoření hudební aplikace nebo mobilní verze webu.

8. Edacious UI KIT

Kit uživatelské rozhraní, navržený pro urychlení vašeho pracovního postupu.

9. DO je masivní App UI Kit. Zdarma

Do je skutečným nálezem pro každého, kdo se zajímá o vytváření různých druhů aplikací v materiálovém designu. K vytvoření flexibilních návrhů připravených pro Retinu je potřeba 130 návrhů, 10 jedinečných témat a více než 250 prvků uživatelského rozhraní. Zde určitě najdete prostor pro experimentování. Vyberte si ve prospěch moderního barevného designu.

10. Sada bezplatných prvků uživatelského rozhraní pro vytváření hudebních aplikací

Objevte kolekci bezplatných prvků uživatelského rozhraní na .psd formát, ideální pro tvorbu hudební aplikace. Mimochodem, feministický design harmonicky zdůrazní různé webové projekty krásy.

11. Sada bezplatných prvků uživatelského rozhraní ve stylu materiálového designu

Pro ty, kteří stále pochybují o výběru nástrojů a prostředků ve stylu material designu, radím, abyste přestali věnovat pozornost kolekci Material Design UI Kit. S pomocí různých .psd prvky, které lze ve Photoshopu snadno přizpůsobit vašim potřebám, můžete ušetřit čas a námahu i ve fázi spouštění projektu. Přidejte do své sbírky skvělý materiál pro tvorbu rychlé projekty a aplikace založené na principu materiálového designu.

ikony

12. Kolekce ikon Google ve stylu Material Design

Začněte hledat ty správné ikony pro svůj webový projekt nebo aplikaci pomocí kolekce Google Material Icons. Sada obsahuje nejrůznější ikony pro různé aplikace, jako je přehrávání médií, komunikace, úpravy obsahu atd. Stažení zip archiv(~57 MB) a užijte si skvělé věci, které potřebuje každý designér po ruce.

13. Kolekce bezplatných ikon

Material Design Icons je sbírka bezplatných ikon ve stylu materiálového designu, ze kterých si můžete stáhnout požadovaný formát, velikost a barva v závislosti na požadavcích projektu. Přetáhněte ikony do aplikací Illustrator, Photoshop nebo vizuální studio, změňte barvu a vaše ikona je připravena.

14. Balení: Ikony materiálového designu

Zde si můžete rychle a pohodlně stáhnout bezplatné položky, jako jsou ikony, tematická pozadí nebo barevné palety. Ikony dostupné v .icns, .ico, .png formátů. Různé tvary a styly ikon jsou skvělé pro rutinní práci v procesu navrhování.

15. Ikona Material Design

Co takhle sbírka 1000 ikon rozdělených do 20 kategorií v 7 rozlišeních? Výsledkem je sada více než 7 000 souborů, vše k ničemu. Stačí vybrat kategorii a požadované rozlišení a voila, ikona je připravena. Je čas začít se poohlížet po možnostech, co říkáte?

Rámce

16. Materialise – responzivní front-end framework založený na principech materiálového designu

Přidejte do své sbírky univerzální nástroj pro rychlé prototypování aplikačního rozhraní podle zásad materiálového designu. K dispozici je tedy textový design, adaptivní mřížka 12 sloupců, styling prvků, karet, bloků, vyskakovacích prvků atd. Otestujte framework na svém vlastním projektu.

17. Material Design Lite Framework

Potřebujete nástroj pro usnadnění procesu vytváření webových stránek a aplikací založených na materiálovém designu? Zkuste Material Design Lite je všestranný framework, který dodržuje principy materiálového designu, podporuje mobilní prohlížeče a pomáhá vytvářet adaptivní a minimalistické projekty. Zahrnuje různé ovládací prvky rozhraní.

18. Material-UI framework

Máte zkušenosti s Reactem? Material-UI je další poměrně populární framework, který se skládá ze sady komponent pro React. Rozsáhlé možnosti přizpůsobení, podpora stylů rozdělených na jednotlivé soubory a dodržování pokynů pro návrh materiálů.

19. Rámec LumX

LumX se staví jako front-end framework založený jak na specifikacích AngularJS, tak na principech materiálového designu. Dále jsou vyžadovány jQuery, Velocity a Momentum. Zahrnuje velký počet Komponenty AngularJS.

20. Rámec Material Foundation založený na základech materiálového designu

Rámec Material Foundation založený na principu Zurb Foundation si zaslouží pozornost, přinejmenším proto, že je bezplatný a soběstačný. Rámec nabízí širokou škálu možností přizpůsobení. Zahrnuje komponenty React, které dodržují principy materiálového designu.

21. MUI – Framework založený na pokynech pro materiálový design společnosti Google

Poměrně snadno použitelný rámec, který výrazně usnadní vývoj budoucích projektů. Poskytuje podporu pro Angular, React a WebComponents. Odlehčený rámec má základní sadu prvků pro urychlení procesu vývoje malých projektů.

22. Angular Material Framework - Sada prvků uživatelského rozhraní

Rámec Angular Material je jedním z nejpopulárnějších rámců podporovaných společností Google. Nabízí práci s plnohodnotným materiálovým designem ve spojení s různými komponentami, ikonami a skripty. Přizpůsobeno pro práci na mobilních zařízeních, prohlížečích a desktopových aplikacích.

23. Bootstrap Material Design - Sada nástrojů pro material design na Bootstrapu

Jak název napovídá, Bootstrap Material Design je téma pro Bootstrap naplněné užitečné čipy od Bootstrapu smíchaného s prvky z materiálového designu.

Placené materiály

24.

Chcete, aby se váš budoucí projekt lišil od stovek jiných? S pomocí prémiového balíčku, který obsahuje 1100 textur, můžete vyčnívat z davu a snadno a rychle vytvořit jedinečný design. Dodáváno v různých barevná schémata Ach, jako je mramor, inkoust, akrylové tóny nebo akvarely, textury uspokojí i ty nejnáročnější designéry. Jsem si jistý, že je zde spousta k experimentování.

25.

UTech je prémiová kolekce, která se skládá z různých obrazovek, rozložení a stylů a slouží jako skvělé řešení pro vytváření mnoha startupů. Kromě toho sada obsahuje sadu různých obrazovek pro profil, zpravodajský kanál nebo uvítací stránky. Kolekce je vhodná pro niky, jako jsou finance, vzdělávání, jídlo, mediální portál nebo e-commerce.

26. Období dešťů - prvky rozhraní PSD pro portfolio designéra, umělce

Stojí za zmínku, že kolekce prémiových prvků PSD je perfektní pro vytváření aplikací nebo widgetů. Proč do své knihovny nepřidat sadu vysoce kvalitních prvků pro budoucí projekty?

27.

S pomocí prémiové kolekce prvků Bootstrap můžete vytvořit zcela responzivní rozložení karet. Díky tomu si můžete vybrat z 5 různých tvarů, barev a atraktivních designů. Všechny jsou vzájemně kombinovány. Mimochodem, ikona-fonty ikon také přidán do sady.

28.

Zvláštní pozornost si zaslouží prémiový balíček infografických prvků Tree Bundle. Může být použit v PowerPoint prezentacích, brožurách, výročních zprávách, životopisech nebo pro obchodní účely, reklamu, marketing a další. EPS A AI soubor s možností změnit velikost uvnitř souboru zip. Pracujte lépe s Adobe Illustrator CS5 nebo novější.

29.

Vynikající výběr všech druhů infografických prvků ve formě grafů, tabulek, ikon a dalších vlastních formulářů pro použití v budoucích projektech. Prvky jsou vhodné pro prezentace, výroční zprávy, reklamu, marketing nebo propagaci produktů prostřednictvím emailu. Sbírka EPS A AI soubory nejlépe fungují s aplikací Adobe Illustrator CS5 nebo novější.

30.

Pro ty, kteří stále pokračují ve sbírání své knihovny ikon, doporučuji věnovat pozornost Tonicons. Co takhle 2000 ikon prémiové kvality rozdělených do 6 kategorií? Souhlasím, stojí za to se zeptat. Každý z nich si navíc můžete snadno upravit podle svých požadavků, změnit velikost a další potřebné detaily.

Shrnutí

I když jste v materiálovém designu nováčkem, s tímto výběrem bezplatných i placených nástrojů a zdrojů se můžete bezpečně vrhnout do práce hlavou. Využijte všechny výše uvedené zdroje a používejte je podle potřeby. Pomocí té či oné knihovny může každý z projektantů rychle, bez zbytečných bolestí hlavy, získat hotové řešení pro své potřeby. Nezapomeňte se řídit svými zkušenostmi, preferencemi a dovednostmi. Věřte, že to v budoucnu určitě pomůže. Pokud máte co říct a co přidat do seznamu, zmiňte to v komentářích.

Hlavním pravidlem Googlu je pečlivě sledovat potřeby uživatele a na základě nich upravovat jejich design (a nejen jej). Trend, jako je Material Design, vám umožňuje vylepšit UX, což způsobuje touhu vracet se ke zdroji znovu a znovu. A jedním z jeho klíčových prvků je možnost bezproblémové interakce s různými funkcemi na stejné platformě.

Material Design vychází z myšlenky volného pohybu správný uživatel směru a vychází z hmatové reality. Zpočátku se jeho vývojáři inspirovali obyčejným inkoustem a papírem, ale od té doby se samozřejmě této zásadní vlastnosti vzdaluje a nabývá rysů skutečné magie. Jinými slovy, při vylepšování vizuálně-funkční části spojili specialisté Google principy dobrého designu s inovacemi a možnostmi nových technologií.

Jaké jsou vlastnosti Material Design? Povrchy a hrany prvků v tomto směru designu kombinují vizuální vzory a signály a vytvářejí podněty, které uživateli pomáhají intuitivně se pohybovat na webu (jako by se to všechno odehrávalo v reálném světě).

Material Design navíc využívá principy tiskového designu pro efektivní umístění akcentů (tedy zaměření pozornosti na požadovaný prvek), zjednodušení navigace v rozhraní a intuitivní zprostředkování významu jeho prvků. Material Design se vyznačuje bohatými, rovnoměrnými barvami, ostrými, definovanými hranami, velkou typografií a značným vycpávkou mezi prvky. Dohromady tyto prvky nejen vytvářejí obraz, který lahodí oku, ale vytvářejí nová realita s koncepčním významem a mnoha funkcemi, které uživateli dávají jedinečné UX.

U tohoto druhu designu jsou v centru pozornosti akce uživatele. Všechny interakce se odehrávají v jednom prostředí, interaktivní objekty se přesouvají z jednoho prostředí do druhého bez přerušení sekvence.

Material Design je příběh o funkčnosti, na kterou touží každý prvek. Podle tohoto principu je důležité zaměřit se na hlavní body pozornosti uživatele, aby byl nasměrován správným směrem.

Material Design je příběh o interaktivitě. Stránka reaguje na jakýkoli sebemenší pohyb uživatele, přičemž každý přechod by měl být plynulý, jako kdybyste se plavili na lodi po klidné řece a víte, kam a proč je třeba odbočit. Material Design je proto také příběhem o uvědomění: kromě toho, že každá akce je příjemná (a snadná) na provedení, musí uživatel jasně a jasně chápat, co a proč dělá a kam ho zavede další dotek. Tím pádem, Zpětná vazba by měly být jasné, přístupné a snadno rozpoznatelné.

Jak již bylo zmíněno, struktura rozhraní si vypůjčila mnoho „čipů“ pro tiskový design, všechny však nejsou použity v původní podobě, ale ve vylepšené podobě. Material Design k těmto „čipům“ přidává neomezené možnostiškálování a změna velikosti stránky, které umožňují přizpůsobit design pro jakékoli zařízení, jako je tablet nebo smartphone. Všechny tyto možnosti dávají pocit maximální pohodlí při práci s navigací a celým rozhraním (protože neomezené možnosti se řídí zásadami jednoduchosti) a vzbuzují pocit důvěry.

Hlavní otázkou, kterou by si měl designér před vývojem zodpovědět, je, co přesně uživatel bude (nebo chce) dělat při práci s aplikací? Jakmile zformulujete odpověď, můžete začít realizovat myšlenky Material Designu.

Při vytváření aplikace nezapomeňte, že obsah zde není o nic méně důležitý než její vizuální design. Neměla by uživatele přivádět do strnulosti, ale naopak by měla vytvářet pocit pohodlí a jasné pochopení toho, proč je tady a co teď bude dělat.

Vyzkoušejte různé možnosti rozvržení, například panel nástrojů (panel nástrojů) může být umístěn v horní části obrazovky a řešit tak všechny navigační úkoly, což usnadňuje přepínání mezi různými kartami a vyhledávání.

Mějte na paměti principy funkčnosti a snažte se uživatele nasměrovat, „nepouštět“ je hned na první stránce. Tento přístup bude výhodnější: budete moci zaměřit pozornost návštěvníka na důležité aspekty produktu/služby, kterou poskytujete. Již ve fázi vývoje zvažte vytvoření navigačního systému, který vám umožní zvýraznit podpůrné komponenty, ke kterým se každý návštěvník snadno a rychle dostane.

Když vybíráte ty nejlepší předměty, tvary a barvy, nezůstávejte u toho: začněte s těmito prvky manipulovat pohyby, dejte jim flexibilitu a hmatatelnou „materiálovou“ váhu. Tato kompletní hmatová kontrola nad každým, i tím nejmenším pohybem, dělá Material Design jedinečně krásným.

Vaším cílem v této fázi vývoje je najít rovnováhu mezi lehkostí pohybu a fyzickou „tělesností“ každého objektu, která bude splňovat principy bezproblémového UX.

Pečlivé plánování a testování se během fáze spouštění vyplatí: pokud jste udělali vše správně, uživatel bude „zaujatý“ informacemi, které poskytnete. Kromě toho, pokud je nutné provést akci v několika krocích, plánovaný algoritmus využívající jasné objekty a animace ji dovede k dokončení operace (koneckonců jasně pochopí, co se od ní očekává a jak to udělat ).

Animace v Material Design se často používá k vytvoření více hladké přechody, ale neměli byste se omezovat pouze na tyto rámce. S ním můžete vylepšit mnoho detailů rozhraní a navigační lišty. V nabídce ikon navíc můžete využít drobné detaily, které nejen přidají viditelnost, ale také znovu zdůrazní váš zájem o estetiku aplikace.

Pamatujte, že Material Design se zaměřuje na použitelnost, nejen na dobrý design jako takový. Jeho principy mohou být tím nejlepším výchozím bodem pro vytvoření aplikace, která si svou elegancí a pohodlím podmaní obrovské publikum.

Vaším úkolem jako designéra je usnadnit uživateli život a poskytnout efektivní řešení při interakci s aplikací. Děje se tak především z důvodu poskytnutí nejdůležitějších informací v co nejkratším čase a v nejvhodnějším formátu.

Vždy mějte na paměti zaostřovací body, na které by se měl uživatel zaměřit, a při každém testu se ujistěte, že nezmizí v pozadí, zatímco návštěvník „bloudí“ po zdroji. Vyskakovací okna, upozornění a další rušivé prvky mohou návštěvníky obtěžovat nebo zahnat do kouta. Buďte jakýmsi průvodcem: pomozte jim neztratit se a najít, co potřebují. Pokyny a tlačítko nápovědy by také měly být kdykoli k dispozici.

Dalším dobrým nápadem je vložit popis odkazů, které umístíte na zdroj. Jsou potřebné pro jasné a rychlé pochopení toho, kde uživatel skončí. Méně efektivní nástroj je použít tlačítko "klikněte sem".

4. Šablona ikon od Google Design:

5. Icon Grid System pro Android L:

Material Design je designový koncept vytvořený za účelem sjednocení služeb, rozhraní a dalších produktů. Koncept byl vyvinut společností Google a byl představen širokému publiku 25. června 2014 na konferenci Google I/O. V jádru vývoje barevné schéma, vlastnosti a prvky designových objektů. Material Design je vývojáři pravidelně doplňován a aktualizován. mluvící prostá řeč, hlavní myšlenkou je design ve formě bloků, které se pomocí stínového efektu otevírají a skládají do kostek, jako jsou karty. Samotné karty by se mezi sebou měly plynule přepínat.

Strategie takového návrhu je založena na vytvoření holistického uživatelského zážitku, možnosti pronikání služeb do různých sfér života uživatele PC.

Při tvorbě předmětů vycházíme ze staletých zkušeností a opíráme se o ně. Softwarový design je ale stále jen vznikajícím a systematicky se rozvíjejícím produktem. Když jsme se na to úplně podívali, zeptali jsme se sami sebe: z čeho se skládá?

- John Wylie, hlavní design vyhledávání, Google

Hlavní principy

Mezi hlavní principy Material Designu patří hmatové povrchy, design tisku, smysluplná animace, adaptivní design.

hmatové povrchy. Rozhraní tvoří „digitální papír“. Vrstvy tohoto "papíru" jsou umístěny jedna nad druhou a vrhají stíny. Díky těmto stínům uživatelé osobních počítačů lépe pochopí základy práce s rozhraním.

Tiskový design."Digitální papír" zobrazuje "digitální inkoust". Pro obrázky "digitálním inkoustem" se používá tradiční přístup k designu časopisů nebo plakátů. Hlavními prvky návrhu tisku jsou , měřítko, mřížka, barva a prostor. Z nich se vytváří zaměření, hierarchie a význam. Díky barvě, fontům, velikostem, pozadí a dalším prvkům vzniká samotný design rozhraní. Jeho použití se zaměřuje na hlavní funkčnost, klíčové kontrolní body produktu nebo služby.

Promyšlená animace.Časová náročnost uživatele přímo závisí na přehlednosti a srozumitelnosti animace aplikace osobní počítač na pochopení výsledků akcí použitých v tomto programu. Animace je jakousi nápovědou pro správu rozhraní Material Design.

Adaptivní design. Jednou z vlastností Material Designu je jeho univerzálnost, tedy možnost používat tři výše popsané komponenty na různých zařízeních, jako je počítač, telefon, tablet atd.

Dotykové povrchy

Hmatové plochy jsou právě ty kousky „digitálního papíru“, které mají na rozdíl od běžného papíru superschopnosti – dokážou se natahovat, spojovat a měnit svůj tvar.

Povrch

Povrch je součástí designového prvku, který vrhá stín, který odlišuje jeden prvek od druhého. Material design se snaží o maximální jednoduchost a "čistý" design.

"Čistým" designem se obvykle nazývá schopnost zprostředkovat vlastnosti objektu pomocí přechodu nebo stínu, bez použití struktury. Všechny plochy mají svůj stín a určitou výšku.

Hloubka

V "plochém designu" se snaží nepoužívat stíny, které ukazují objem. Stíny zároveň nastavují určitou hierarchii a strukturu prvků rozhraní. Hluboký stín zvýrazní klíčový objekt a zvýrazní jej jemným a elegantním způsobem.

Hloubka je náznakem interakce objektů. V okamžiku rolování uživatele je zelený plát připojen k horní vrstvě a tvoří stín. To jasně demonstruje nejen pohyb „inkoustu“, ale i pohyb bílé pozadí umístěný níže.

Spodní vrstva hloubky je "spodní".

• Pamatujte na logistiku. Různá dialogová okna, plovoucí okna, panely nástrojů mají určitou výšku. Aby se zabránilo kolizím, musí se pravidelně pohybovat podél osy Z.
• Netlačte na tlačítka silou. Plovoucí tlačítko byste měli používat pouze v případě naléhavé potřeby, protože jeho použití okamžitě přináší efekt Material Design do designu. Neměli byste jej používat k potvrzení jakýchkoli akcí a zavírání oken.
• Na kartě nemusí být vše. Použití karty je vhodné pouze tehdy, když předmět obsahuje mnoho forem a velké množství obsahu. Pro další možnosti je vhodnější tradiční text nebo seznamy.
• Minimalismus v dialogových oknech. Dialogová okna by se měla používat pouze k potvrzení akcí uživatele, když vyvstanou otázky.

Tiskový design

Všechny objekty umístěné na povrchu materiálového provedení jsou aplikovány „digitálním inkoustem“. Tyto objekty jsou obrázky, test, piktogramy. Uspořádání těchto objektů probíhá podle principu návrhu tisku.

Půvabná typografie

Typografie je zásadní v designu tisku. Nastavuje strukturu obsahu a ovlivňuje utváření stylu konkrétní značky.

Typografie tvoří strukturu prvků, které mají svou velikost, písmo, hierarchii, s jejich pomocí vizuálně pochopíme, které prvky jsou významnější a proč jsou některé klíčové, jiné druhotné.

Kontrastní typografie

Dalším důležitým principem tisku je kontrast typografie. Je snadné to vidět velká hlavička a tmavé písmo znamená něco důležitého a základního, zatímco menší text a světlý tón znamenají sekundární informaci. Kontrast vám umožní zvýraznit hlavní teze, čímž získáte celkovou estetiku obsahu.

Modulární mřížka a vodítka

Pokud se v designu obrazovky používají základní mřížky, pak se v návrhu tisku používají modulární mřížky. Pro Material Design se používá mřížka 8dp.

Charakteristickým znakem umístění obsahu v Material Designu je umístění hlavních vodítek. Díky nim se od okrajů obrazovky vytvářejí odsazení ovlivňující strukturu obsahu stránky a kontrolu pohledu uživatele. V důsledku toho vidíme hlavní text ve středu obrazovky a další prvky jsou umístěny mimo něj, na okrajích.

geometrická ikonografie

Nejjednodušší ikony se již dlouho používají na bázi systému Android. V Material Designu vypadají ještě jednodušeji a vizuálně příjemněji.

Například indikátory a tlačítka jsou zvýrazněny sytými jasnými barvami. Díky takovým barvám jsou akcenty umístěny na hlavních ovládacích prvcích (plovoucí tlačítka atd.). Pokud potřebujete do designu přidat další barvy, doporučuje se použít základní, diskrétní odstíny.

Stáhněte si související ikony:

Barva

Barva v designu je zodpovědná za expresivitu. Dříve v Androidu bylo barevné schéma druhotné, ale nyní je mu přiřazena jedna z klíčových rolí. V Material Design se základní paleta barev skládá z akcentních a primárních odstínů.

Panel akcí je vymalován hlavní barvou a stavový řádek zvýrazněny sytějším tónem. Zvýrazňující barva se používá pro pruhy, indikátory, plovoucí tlačítka. Upozorňuje na klíčové prvky desky.

Akcenty jsou umístěny bodově a v malém množství. Pro zbytek rozhraní se barvy používají v souladu s pravidlem: je ponecháno velké množství textu (seznam poštovních dopisů) standardní velikost a přidat barvu, aby upoutal pozornost uživatele PC; malé množství textu (kalkulačka, fotografie) se zvětší 2-3x a přidají se barevné tabulky.

V systému Android můžete dynamicky kolorovat rozhraní, to znamená zvýraznit primární barvy z celkové fotografie.

Krásné fotky

V Material Designu můžete a dokonce potřebujete používat různé fotografie a ilustrace. Na obrázcích často nejsou žádné rámečky. Samotný stavový řádek je bezbarvý, aby neodváděl pozornost od obrázků. "Digitální inkoust" se vždy používá nejen pro krásu, ale také pro funkčnost designu.

• Doporučuje se branding.
• Nesmíme zapomenout na výplň a volný prostor (8dp pro základní mřížku, 72 dp pro výplň).
• Používejte jasné obrázky.

Smysluplná animace

Material Design, stejně jako skutečný svět, používá smysluplnou animaci, aby uživateli ukázal, co se v něm stalo tento moment. To znamená, že uživatel musí vidět, že žádný předmět není odnikud vzat a nikam nezmizí.

Příklad 1 Animace ukazuje, že právě tato karta se po kliknutí dostala do popředí, otevřela se a zviditelnilo se více informací.

Příklad 2 Po kliknutí na datum v kalendáři vyskočí událost, která se plynule odlomí jako vrstva z obecného kalendáře, přejde do samostatného bloku a otevře se v podrobném samostatném bloku s popisem této události.

Animace pomáhá zaměřit pozornost uživatele, zaměřit jeho oči na akce rozhraní.

Reakce

Dalším klíčovým bodem animace v Material Designu je reakce na určité akce uživatele PC. Změny v rozhraní Androidu L nastanou po dotyku prstů. Tyto změny jsou zobrazeny jako vlna.

mikroanimace

Mikroanimace jsou nesmírně důležité. Používají se jako reakce na všechny manipulace uživatele. To dává rozhraní podrobnosti a odezvu.

Jasnost a ostrost

Konečným principem animace je přehlednost a ostrost akcí. Material Design má zajímavou animační křivku. Všechny objekty rychle reagují na akce uživatele, náhle se vracejí zpět, ale trvá trochu déle, než zmizí a přejdou do konečného klidného stavu. V konečném důsledku uživatel neztrácí čas čekáním, a proto se při interakci s rozhraním nerozčiluje a nedostává negativní emoce.

• Myslete na animaci předem.
• Používejte animaci optimálně (nedoporučuje se nadměrné zneužívání, protože všechny animace musí být smysluplné).

Adaptivní design

Posledním klíčovým aspektem Material Designu je koncept adaptivní design. To znamená možnosti pro aplikaci dalších tří aspektů různé obrazovky zařízení (telefon, PC, TV atd.).

Od obecného ke konkrétnímu

Nejoblíbenější metodou je komprimace množství informací spolu s komprimací samotné obrazovky. Televize pojme velké množství obsahu. Telefon nejprve umístí seznam, po kliknutí na něj můžete odhalit podrobné informace.

Odsazení

Na velké obrazovky obsah je umístěn pomocí bloků. Naplňují se sami volný prostor a může se rozšířit do šířky. Protahování se provádí s ohledem na čitelnost obsahu. Na zbytku obrazovky jsou vytvořeny odrážky, na které lze umístit plovoucí tlačítka nebo kostky.

Průvodci

Odsazení se nastavuje pomocí vodítek. Šířka odsazení pro chytré telefony, tablety, počítače a televizory bude zcela odlišná. Takže pro tablet je to 80 dp a pro obrazovku smartphonu je to pouze 72 dp.

Rozměry

Všechny prvky rozhraní musí mít více proporcí. Velikosti obrazovek tabletů a smartphonů se od sebe liší, ale aplikace využívající prvky s více parametry se přizpůsobí jakékoli velikosti zařízení.

Bloky

Modulární mřížka bloků pomáhá nastavit vizuální rytmus pro optimální rozhodování.

Panel nástrojů

akční lišta- jedna z hlavních součástí rozhraní. Obsahuje akční tlačítka a názvy. V Androidu L se akční lišta stala atraktivní a funkční ovládací jednotkou. Toho bylo dosaženo díky skutečnosti, že můžete umístit formuláře, plovoucí tlačítka, výsuvnou navigaci s pohodlnými ovládacími prvky na lištu nástrojů.

• Nepoužívejte navigační zásuvku pro jednoduché nástroje. Použití navigace se doporučuje pouze pro mnoho úkolů v aplikaci.
• Buďte odvážní s panely nástrojů.
• Umístěte plovoucí tlačítko na nejoptimálnější místo. Nesvazujte se přísně do spodního rohu.
• Procvičte si prvky rozhraní pro vertikální i horizontální obrazovky zařízení.

Materiál jako metafora

Vývojářům Google se podařilo spojit dobré atraktivní design s inovacemi moderních technologií a vědy.

Není to poprvé, co byl materialismus použit v digitální sféře. Apple tedy nedávno použil filozofii skeuomorfismu v designu rozhraní (imitace vnímání vizuálních objektů z hmotného světa kolem nás).

Dobrým příkladem toho je aplikace Kiosek. Zde jsme vizualizovali nám známé předměty: noviny, časopisy, které jsou na policích. Listováním v těchto časopisech napodobujeme skutečné listování obyčejné knihy z běžného života. Tradiční skutečný život je tedy duplikován v digitální podobě.

Vývoj digitálního designu

Naprostá většina uživatelů komunikuje s digitálním prostředím denně. Již nevyžadují přesnou podobnost virtuálních objektů s reálným světem. Čím dříve si na tento okamžik všichni uživatelé zvyknou, tím dříve se bude moci digitální design aktivně posunout vpřed.

Na základě toho Material Design již není tolik ovlivněn skeuomorfismem. Nyní je to jen nový krok ve vývoji virtuálních objektů.

Viditelnost jako základní základ

Povrchy a okraje různých ovládacích prvků v Material Design poskytují vodítka pro orientaci a ovládání rozhraní, podobně jako skutečné akce.

Hmatové vlastnosti objektů pomáhají odlišit klíčové objekty od dalších, určit vztah mezi nimi.

Mezi základy Material designu patří také principy designu tisku. Akcenty jsou umístěny nejen pro estetiku, ale také pro vytvoření speciální struktury, hierarchie, vytvoření jednoduchého systému ovládání.

Srdcem vizuální složky Material Designu jsou: bohaté barvy, ostré hrany, velká typografie a velké vycpávky mezi různými prvky.

Smysluplná dynamika

Hlavní pozornost je zaměřena na chování (jednání) uživatele. Jeho interakce s designem je založena na nashromážděné uživatelské zkušenosti a na ničem jiném.

Příklady stránek ve stylu Material Design

Jakmile se vydání konceptu objevilo na internetu, objevilo se na síti spousta zástupců Material Design.

Stránky uvedené jako příklady jsou vytvořeny v přísném souladu se základními principy Material Design. Jsou jednoduché a přehledné, obsahují plovoucí tlačítka, stíny, světlé barvy A vizuální efekty, plynulá navigace. To vše přispívá ke skvělé uživatelské zkušenosti.

videa

Material Design přilákal obrovské publikum. Ukazuje, jak správně vytvořit UI tak, aby bylo pro uživatele naprosto srozumitelné a jasné úplně stejně jako známý předmět z reálného světa, kterého se můžete dotknout rukama.

Roman Nurik, jeden z designérů týmu Google, hovořil o tom, jak se aplikace I/O 2014 během vývoje měnila, aby odpovídala principům Material Designu. Speciálně pro vás jsme přeložili jeho video.

Video z kanálu Google Design.