V poslednej udalosti I / O v roku 2014 sa spoločnosť Google vrátila so svojimi novými prekvapeniami. Okrem oficiálneho vydania novej aktualizácie Android s kódovým označením Lollipop spoločnosť Google predstavila svoj nový nový dizajnový jazyk - materiálový dizajn . Je to dizajnový systém, ktorý nie je určený iba pre nové používateľské rozhranie Lollipop, ale aj pre rôzne zariadenia a prostredie.
Materiálový dizajn má niektoré dôležité vlastnosti, ktoré ho odlišujú medzi ostatnými návrhovými trendmi svojimi vlastnými jedinečnými spôsobmi. Rovnako ako jeho názov, bol inšpirovaný skutočnými materiálmi a kombinoval ich do jedného dizajnového systému, aby vytvoril elegantný, intuitívny, krásny a interaktívny zážitok používateľov. V tomto príspevku sa budeme zaoberať tým, čo je vo vnútri Material Design a poskytne vám rýchlu príručku, ako ho realizovať. Citovaním blogu Google budem hovoriť: "Toto je materiálový dizajn".
Predstavenie
Materiálový dizajn je zjednotený dizajnový systém, čo znamená, že bol vyrobený pre prácu so všetkými dostupnými dnešnými zariadeniami a platformami. Z tabletu, smartfónu na pracovnú plochu a z Android, iOs, Windows na webové platformy. Všetky dizajnérske vzhľady a pocity by mali byť rovnaké všade tam, kde to je.
Hlavné princípy
Existujú tri hlavné princípy, ktoré konštruujú materiálový dizajn. Toto sú najzákladnejšia časť toho, čo materiál ponúka vo všeobecnosti.
- Materiálom je metafora . Vývoj materiálu bol inšpirovaný štúdiou hmatových prvkov, ktoré používame každodenne, papier a atrament . To robí objekt svetlo, povrch a pohyby sú lepšie pri vzájomnej interakcii.
- Tučné, grafické a úmyselné . Typografia, mriežky, priestor, mierka, farba a používanie snímok, ktoré sa používajú v základnej konštrukcii založenej na tlači, zvyšujú obsah materiálu.
- Pohyb poskytuje význam . Toto je jedna z najvýznamnejších vecí. V Materiáli by ste mali mať zmysluplný a vhodný pohyb, jemnú a jasnú spätnú väzbu a efektívny a koherentný prechod.
Komponenty
Materiál Design venuje pozornosť každému detailu svojich komponentov, aby mohli byť použité univerzálne. Tieto komponenty vám pomôžu vytvoriť úžasnú aplikáciu a webové stránky. Existuje toľko komponentov poskytovaných materiálom, ako sú tlačidlá, spínač, karta, zadávanie textu, fab (tlačidlo s pohyblivou akciou), dialóg, toast, podmenu, kartu a ďalšie. Každý z nich má svoje vlastné pravidlo a sprievodcu, ako ich budovať, takže nemáte žiadne dôležité prvky.
Vzory veci
Okrem komponentov poskytuje materiál aj niektoré základné vzory pre ďalšie užívateľské rozhranie. Tieto vzory zlepšia užívateľské rozhranie, ktoré ste vytvorili pomocou komponentov materiálu. Vzory zahŕňajú formát údajov, navigačnú zásuvku, chyby, gestá, techniku rolovania, vyhľadávanie, nastavenia, načítavanie obrázkov, posúvanie po obrazovke a ďalšie.
Farby dizajnu materiálu
Farby v Materiáli boli navrhnuté tak, aby sa vám necítili nepríjemné, podivné a ploché. Vďaka inšpirácii z každodenných prostredí, ako sú dopravné značenie, súčasná architektúra, pásová značkovacia páska a športové kurty, materiálový dizajn prináša nečakané a vysoko temperamentné farby. Existuje toľko farebnej palety, vďaka čomu si môžete vybrať viac výhod pri vývoji aplikácií alebo stránok. Môžete si tiež stiahnuť farebné vzorky pre miestne použitie, napríklad pre kolekciu Photoshopu.
Ikona materiálu
Ak ste vývojár pre Android, musíte sa oboznámiť s niektorými bezplatnými balíčkami ikon, ktoré spoločnosť Google poskytla. Obvykle sa používajú len pre hlavný prvok a panel akcií. Zatiaľ čo pri iných zdrojoch budeme musieť vyhľadávať iné ikony, ako napríklad priečinok, súbor, kopírovať a vkladať atď. Manuálne. V materiálovom dizajne Google vyriešil problém s množstvom ikonových balíkov, ktoré môžete použiť.
Každá z ikon prešla určitým návrhovým prístupom, ktorý tiež používa štúdiu hmatových materiálov. Sú tiež udržiavajú princíp materiálu, to je konzistentné. Môžete si tieto ikony stiahnuť na GitHub, prichádzajú s nejakou možnosťou pre rôzne použitie, ako je iOS, web, Android alebo svg. Ak potrebujete širšiu voľbu pre jednoduché prispôsobenie, pravdepodobne budete chcieť zobraziť balíky s ikonami Material Design na aplikácii FlatIcon. Vnútri balíčka získate verziu vektora (SVG a EPS), verziu PSD a PNG.
Animácia materiálu
Toto sú vlastnosti, ktoré ma najviac páči. Animácie v Materiáli sú tak reálne a intuitívne. Každá animácia má zmysluplné, konzistentné a správne časové prechody. Gif demo zobrazené nižšie je len jedna z krásnych materiálových animácií. Ak chcete poskytnúť interaktívnu interakciu, tím spoločnosti Google vytvorí tiež zvlhčovač podobný vplyvu vody pre vstupný efekt užívateľa. Používa sa väčšinou na tlačidlá a karty.
Tieto funkcie, ktoré som vysvetlil, sú len malou časťou toho, čo ponúka materiálový dizajn. Ak sa chcete dozvedieť viac o materiálovom svete, jednoducho prejdite na stránku dokumentácie.
uskutočnenie
V predvolenom nastavení Material Design prichádza ako nová aktualizácia používateľského rozhrania pre Android Lollipop. Všetky usmernenia, že materiál bol aplikovaný vnútri. Keďže materiál je určený pre všetky druhy prostredia, jeho implementácia do iného systému nebude ťažké. A vďaka komunitám je to oveľa jednoduchšie s niektorými nástrojmi, ktoré vytvorili.
To je niekoľko spôsobov, ako môžete dosiahnuť materiál Design mimo Android, napríklad web.
Používanie rámcov CSS
Toto je najjednoduchší spôsob, ak chcete implementovať materiálový dizajn na webovej platforme. S rámcami, všetko, čo musíte urobiť, je inicializovať a potom napísať prvky, ktoré potrebujete. Existuje mnoho rámcov, ktoré môžete použiť ako Materialize, Material UI alebo Polymer. Moja osobná voľba patrí do Materialize. Je to jednoduchšie používať a pochopiť a mať skvelú dokumentáciu s pekným demo.
Dodržiava Pokyny
Ak chcete implementovať materiál bez použitia rámca a radšej sa pokazíte s kódmi najviac, musíte postupovať podľa materiálových pokynov. Nájdete tu všetko, čo potrebujete, aby ste dosiahli princípy materiálu. Zobrazí sa celá základná príručka pre vytváranie komponentov, rozloženie, animácie, farby, vzory a ďalšie. Možno budete chcieť vidieť nejaký kontrolný zoznam materiálov pre ľahší vývoj.
záver
Materiálový dizajn je skvelý dizajnový systém a stal sa jedným z najočakávanejších trendov roka. V nasledujúcich mesiacoch to môžeme vidieť všade. Ďalšie nové aplikácie a webové stránky budú vylepšené touto novou verziou návrhu spoločnosti Google.
A s materiálovým dizajnom spoločnosť Google dokázala svoju nadradenosť ako jednu z najväčších technologických spoločností. To robí spoločnosť Google nielen v oblasti vyhľadávacích nástrojov a mobilných operačných systémov, ale aj v oblasti návrhu. Teraz neexistujú žiadne ďalšie spoločnosti, ktoré by rozvíjali túto veľkú vec, ako to urobila spoločnosť Google. Ale skúsenosť hovorí, že to nebude trvať dlho. Počkajme len na to, aby iné firmy odpovedali na materiálový dizajn spoločnosti Google.
