Špecifikácia Material Design od spoločnosti Google bola pôvodne zameraná na platformu Android ako spôsob, ako navrhnúť konzistentnosť dizajnu na platforme.
01 z 06
Ako vytvoriť kartu materiálového dizajnu v aplikácii Adobe Experience Design CC
Akonáhle sa dizajnéri začali prechádzať cez to a pochopiť myslenie za ním, materiálový dizajn sa ticho stal jednou z najvplyvnejších vizuálnych filozofií v webe a mobilnom dizajne . Všetko, čo musíte urobiť, aby ste videli, čo sme sa dostali, je robiť materiálové hľadanie v Pinterest a uvidíte stovky príkladov a experimentov na zariadeniach, tabletoch a dokonca aj na webových stránkach.
Fascinujúcim aspektom materiálového dizajnu je, že Google premýšľa, ako by sa aplikácie mali zobrazovať a pracovať na mobilných zariadeniach, ale koncepty sa používajú na ľubovoľnej obrazovke akejkoľvek veľkosti na akejkoľvek platforme. Ako uviedla spoločnosť Google v úvodnom odseku špecifikácie, "Vyzvali sme sa, aby sme vytvorili vizuálny jazyk pre našich používateľov, ktorý syntetizuje klasické princípy dobrého dizajnu s inováciou a možnosťou technológie a vedy. Ide o materiálový dizajn. Táto špecifikácia je živým dokumentom, ktorý bude aktualizovaný, keďže budeme ďalej rozvíjať princípy a špecifiká materiálového dizajnu. "
Materiál hovoril, vo všeobecnosti, je papier a charakteristickým znakom Material Design je karta. Zamyslite sa nad indexovou kartou na povrchu a ste na správnej ceste. Karta je prvok obsahujúci fotografie, videá, textové odkazy atď., Ale kde sa líšia od väčšiny interaktívnych návrhov, sú zamerané na jediný predmet. Karty majú zaoblené rohy, obsahujú slabé tiene, ktoré naznačujú, že sú nad povrchom a ak sú všetky na tej istej rovine, sú označované ako "zbierka".
V tomto "How To" sa chystáme vytvoriť kartu založenú na špecifikácii. Namiesto toho, aby sme vytvorili kartu s rôznymi nástrojmi na zobrazovanie a kreslenie, pristúpime k nej z iného smeru. Budeme používať nástroje v Skúsenosti s dizajnom spoločnosti Adobe, ktoré sú v súčasnosti uverejnené iba v Macintosh a sú bezplatné. Môžete si ho stiahnuť tu.
Začnime.
02 z 06
Vytvorenie prototypu Artboard v Adobe Experience Design CC
Neexistuje žiadny zjavný spôsob, ako vytvoriť obrazovku Android z úvodnej obrazovky v Experience Design CC (XD). To, čo sme robili pri otvorení XD, je vybrať možnosť iPhone 6 a keď sa rozhranie otvorí, vyberieme nástroj Artboard v dolnej časti panela s nástrojmi a zvoľme Android Mobile z výberov na paneli Vlastnosti napravo. Potom prejdeme k výberovému nástroju, raz klikneme na názov grafickej karty iPhone a zmizime grafickú plochu. Nikdy viac.
V súčasnej verzii XD je vedľa iPhone 6 malá šípka, ktorá po kliknutí otvorí rozbaľovaciu ponuku. Odtiaľ vyberiete verziu so systémom Android pre mobilné zariadenia a vybranú grafickú plochu Android Mobile .
Ak chcete mať k dispozícii správny priestor na otvorenie obrazovky pre kartu, zvyčajne prejdeme na náčrt 3 a skopírujte a vložte stavový panel, navigačnú lištu a lištu aplikácií zo šablóny návrhu materiálu do kreslenej tabule. Skica 3.2 obsahuje šablónu Material Design ( File> New From Template> Material Design ) a ďalšia skutočne dobrá voľná je od Kyle Ledbetter, ktorú môžete získať tu. Ak nemáte náčrt, môžete ich skopírovať a prilepiť z nálepiek XD nachádzajúcich sa v súbore File> Open UI Kit> Material Google . Môžete si ich stiahnuť aj od spoločnosti Google na použitie vo formátoch Photoshop, Illustrator, After Effects a Sketch.
03 z 06
Pridanie karty materiálového dizajnu na Adobe Artboard XD CC
Jednou z najužitočnejších funkcií XD je zahrnutie UI kitu pre Apple iOS, materiál Google a Microsoft Windows. V mnohých ohľadoch pridávajú slovo "Rapid" do pojmu "Rapid Prototyping" a zároveň uľahčujú dizajnérske práce v tom, že bežné prvky používateľského rozhrania nemusia byť neustále znovu vytvárané v aplikáciách, ako sú Photoshop, Illustrator alebo Skica.
Prvok, ktorý potrebujeme, bol kartou. Aby sme sa k nej dostali, sme vybrali položku Súbor> Otvoriť UI Kit> Materiál Google a súprava sa otvorila ako nový dokument. Prvok, ktorý sme potrebovali, sa našiel v kategórii Karty.
To, čo sa nám páči, je to, že dodržiavajú špecifikáciu materiálového dizajnu, ako je uvedené v špecifikáciách obsahových blokov, ako aj formátovanie textu a špecifikácie rozstupov, ktoré sú uvedené v typografickej špecifikácii.
Kartový štýl, ktorý sme chceli, bol ten v ľavom dolnom rohu. Jednoducho ho označujeme myšou a kopírujeme ju do schránky. Bohužiaľ XD neobsahuje rozhranie s kartami pre otvorené dokumenty. Čo robíme je presunúť okienko otvoreného dokumentu dole, aby sme odhalili ten, na ktorom pracujeme, vyberte ho a vložte ho. Ďalším spôsobom rýchleho prepínania medzi otvorenými dokumentmi XD je stlačiť kláves Command- ' .
04 z 06
Ako upraviť prvok návrhu materiálu v aplikácii Adobe Experience Design CC
Keď karta v XD prichádza zo schránky, nemusíte s ňou vesele pracovať. Prvá vec, ktorú musíte urobiť, je zablokovať kartu, pretože potrebujete prístup ku kúskom a kúskom karty. Ak to chcete urobiť, vyberte kartu a vyberte položku Objekt> Zrušiť alebo stlačte kláves Shift-Command-G.
Vaša karta sa skladá z troch častí:
- Svetlo sivá rámček pre obrázok.
- Stredná šedá políčka pre text
- Zadné pole sa používa ako pozadie.
Prvým krokom je odstrániť svetlošedú škatuľu. Jeho jediným účelom je pôsobiť ako zástupný symbol obrazu, ktorý ho robí, ak si vyberiete, nepovinné.
Krabica s textom je v skutočnosti tmavošedá s 50% nepriehľadnosťou. Toto pole sa môže používať ako textové pozadie a môžete zmeniť farbu a nepriehľadnosť skrinky.
Hoci to nie je okamžite zrejmé, svetlošedá škatuľa sleduje špecifikáciu Material Design v tom, že jeho horné rohy sú zaoblené o 2 pixely. Majte to na pamäti, ak pridávate obrázok. Bude tiež potrebovať zaoblené rohy, ktoré sa dajú pridať do zobrazovacej aplikácie alebo do XD.
Keď vidíme, ako to je pokojný stav karty, potrebuje tieň. Špecifikácia jasne vysvetľuje, že je na výške 2 pixelov. Ak to chcete pridať, vyberte tvar čierneho pozadia a nastavte hodnoty Y a B (Blur) na hodnotu 2 v paneli vlastností.
05 z 06
Ako pridať obrázok na kartu materiálového dizajnu v aplikácii Adobe XD CC
Vedieť, že karta je široká 344 pixelov a plocha s obrázkami je 150 pixelov vysoká ( polovica výšky svetlošedej škatule ) Otvorili sme obrázok vo Photoshope, orezali sme ho na veľkosť a uložili ho pomocou voľby @ 2x v dialógovom okne Exportovať v aplikácii Photoshop box. Obraz bol importovaný do Adobe XD.
Potom sme pretiahli svetlošedú škatuľku nad obrázok na kartóne a vybrať objekt> Maska s tvarom . Výsledkom bol obraz, ktorý vyzdvihol zaoblené rohy tvaru. Potom sme presunuli obrázok do jeho konečnej pozície.
S obrázkom na mieste sme zmenili farbu pozadia strednej sivého poľa, zmenili text a farbu textu odkazu.
06 z 06
Použitie funkcie Adobe XD CC Grid
Po dokončení karty musí byť teraz správne umiestnená podľa špecifikácie Material Design. Znamená to, že na každej strane karty je 8 pixlov a karta musí byť 8 pixelov pod panelom aplikácií. Ak to chcete urobiť, kliknite raz na názov umelej dosky av paneli Vlastnosti vyberte mriežku. Mriežka sa zobrazí nad kreslicou tabuľou.
Predvolená veľkosť mriežky je 8 pixelov, ktoré majú rovnakú veľkosť mriežky pre návrh materiálu. Ak potrebujete inú veľkosť, zmeňte hodnotu v oblasti Mriežka. Ak chcete zmeniť farbu mriežky, kliknite na farebný čip a vyberte farbu z výsledného výberu farieb.
S viditeľnou mriežkou kliknite na kartu a presuňte ju do jej konečnej pozície.
Ak chcete dokončiť, vybrali sme kartu, klikli sme na tlačidlo Opakovať mriežku a zmenili sme vzdialenosť medzi kartami na 8 pixelov.