Specifikacija materialnega oblikovanja iz Googla je bila prvotno usmerjena v platformo Android kot način, kako predlagati doslednost oblikovanja na platformi.
01 od 06
Kako ustvariti materialno kartico v Adobe Experience Design CC
Ko so se oblikovalci začeli pokončati in razumeti razmišljanje, ki je za njim zasnovan , je Material Design tiho postal ena najbolj vplivnih vizualnih filozofij v spletnem in mobilnem oblikovanju . Vse, kar morate storiti, da vidite, kaj smo dobili, je narediti materialno iskanje v Pinterestu, na napravah, tabličnih računalnikih in celo spletnih mestih boste videli na stotine primerov in poskusov.
Fascinanten vidik oblikovanja materialov je, da Google razmišlja o tem, kako naj se aplikacije pojavijo in delajo na mobilnih napravah, vendar se koncepti uporabljajo za katerikoli zaslon katere koli velikosti na kateri koli platformi. Kot je v uvodnem odstavku specifikacije zapisano v Googlu, smo si prizadevali ustvariti vizualni jezik za naše uporabnike, ki sintetizira klasična načela dobrega oblikovanja z inovativnostjo in možnostjo tehnologije in znanosti. To je materialna zasnova. Ta spec je živi dokument, ki se bo posodobil, ko bomo še naprej razvijali načela in posebnosti oblikovanja materiala. "
O materialu, o katerem govorimo, je zelo splošen izraz papirja in oznaka Material Design je kartica. Pomislite na indeksno kartico na površini in ste na pravi poti. Kartica je element, ki vsebuje fotografije, videoposnetke, besedilne povezave in podobno, vendar se razlikujejo od najbolj interaktivnih modelov, zato naj bi se osredotočili na posamezen predmet. Kartice imajo zaobljene kotičke, vsebujejo šibke sence, ki kažejo, da so nad površino in če so vsi na isti ravnini, se imenujejo kot "zbirka".
V tem "Kako" bomo ustvarili kartico na podlagi spec. Namesto da ustvarimo kartico z različnimi orodji za slikanje in risanje, bomo prišli na to iz druge smeri. Uporabili bomo orodja v Adobeovem izkušnjah, ki je trenutno v predogledu, ki je edini v Macintoshu in je brezplačen. Tu lahko prenesete.
Začnimo.
02 od 06
Ustvarjanje Prototype Artboard v Adobe Experience Design CC
Ni očitnega načina za ustvarjanje zaslona Android s začetnega zaslona v Experience Design CC (XD). Kaj smo počeli, ko smo odprli XD, je, da izberemo možnost iPhone 6, in ko se odpre vmesnik, izberemo orodje Artboard na dnu orodne vrstice in izberemo Android Mobile iz izbora na plošči Properties na desni. Nato preklopimo na izbirno orodje, enkrat kliknemo na ime imenika iPhone in izbrišemo tablo. Nič več.
V trenutni različici XD je poleg iPhone 6 majhna puščica, ki ob kliku odpre spustni meni. Od tam izberete različico Android Mobile in odpre se izbrana plošča Android Mobile vmesnika.
Da bi zagotovili pravilno odprtost prostora za kartico, se običajno odpravimo na skico 3 in kopiramo in prilepimo vrstico stanja, nav Bar in aplikacijsko vrstico iz materialne predloge materiala v tablo. Skica 3.2 vsebuje predlogo za oblikovanje gradiva ( File> New From Template> Material Design ) in še en resnično dober brezplačno je Kyle Ledbetter, ki ga lahko dobite tukaj. Če nimate Sketch, jih lahko kopirate in prilepite z nalepk XD, ki jih najdete v File> Open UI Kit> Google Material . Lahko jih tudi prenesete iz Googla za uporabo v Photoshop, Illustrator, After Effects in Sketch.
03 od 06
Dodajanje materialne grafične kartice na Adobe XD CC Artboard
Ena izmed najbolj uporabnih funkcij XD je vključitev UI Kits za Apple iOS, Google Material in Microsoft Windows. V mnogih pogledih besedo "Rapid" dodajo izrazu "hitra izdelava prototipov". Prav tako olajšajo delo oblikovalca pri tem, da se skupnim uporabniškim elementom ni treba nenehno razvijati v aplikaciji za oblikovanje, kot so Photoshop, Illustrator ali Skica.
Element UI, ki smo ga potrebovali, je bila kartica. Za dostop do njega smo izbrali File> Open UI Kit> Google Material in komplet je bil odprt kot nov dokument. Potreben element smo našli v kategoriji Kartice.
Všeč mi je, da se držijo specifikacije Material Design, kot je določeno v specifikacijah Content Blocks, kakor tudi specifikacije za oblikovanje in razmikanje besedila, določene v specifikaciji Typography.
Stil, ki smo ga želeli, je bil v spodnjem levem delu. Preprosto ga označimo z miško in jo kopiramo v odložišče. Na žalost XD ne vsebuje vdelanega vmesnika za odprte dokumente. To, kar počnemo, je pomikanje okna odprtega dokumenta, da bi razkrili tisto, na katerem delamo, ga izberite in prilepimo. Drug način hitrega preklopa med odprtimi XD dokumenti je, da pritisnete ukaz Command- ' .
04 od 06
Kako urediti gradbeni element v Adobe Experience Design CC
Ko kartica iz XD-ja pride iz odložišča, ne začnite delati z njim. Prva stvar, ki jo morate storiti je, da razdružite kartico, ker potrebujete dostop do bitov in kosov, ki sestavljajo kartico. Če želite to narediti, izberite kartico in izberite predmet> Razdruži ali pritisnite Shift-Command-G.
Vaša kartica je zdaj sestavljena iz treh delov:
- Svetlo siva škatla za sliko.
- Srednje siva škatla za besedilo
- Zadnje polje se uporablja kot ozadje.
Prvi korak je izbrisati svetlo sivo polje. Njegov edini namen je, da deluje kot zadrževalnik za sliko, ki jo naredi, če izberete, neobvezno.
Škatla z besedilom je dejansko temno siva z 50% motnostjo. To okence lahko uporabite kot ozadje besedila in lahko spremenite barvo in motnost polja.
Čeprav to ni takoj očitno, svetlo siva škatla sledi Material Design spec, saj so njegovi zgornji koti zaokroženi za 2 piksla. Imejte to v mislih, če dodate sliko. Potrebovali bodo tudi zaokrožene vogale, ki jih je mogoče dodati v aplikacijo za preslikovanje ali v XD.
Videti je, kako je to stanje počitka kartice, saj potrebuje tudi senco. Spec jasno razkriva, da je pomnilniška karta 2-kratna. Če želite dodati to, izberite črno ozadje in nastavite vrednosti Y in B (Blur) na ploščo z lastnostmi 2.
05 od 06
Kako dodati sliko na materialno kartico v Adobe XD CC
Poznavanje kartice je široko 344 pik in površina slike je 150 slikovnih pik ( polovica višine svetlo sive škatle ) Odprli smo sliko v Photoshopu, jo obrezali na velikost in jo shranili z možnostjo @ 2x v pogovornem oknu Photoshop's Export As škatla. Slika je bila uvožena v Adobe XD.
Potem smo povlekli svetlo sivo polje nad sliko na krovu in izbrali Object> Mask With Shape . Rezultat je bila slika, ki je zaokrožila zaobljene kotičke oblike. Slika smo nato premaknili v končni položaj.
S sliko v mestu smo spremenili barvo ozadja srednjega sivega polja, spremenili besedilo in barvo besedila povezave.
06 od 06
Uporaba funkcije Adobe XD CC Grid
S popolno kartico mora biti zdaj ustrezno postavljen v skladu s specifikacijo Material Design. To pomeni, da je na obeh straneh kartice 8 slikovnih pik, kartica pa mora biti pod 8 vrsticami pod aplikacijsko vrstico. To storite tako, da enkrat kliknete na ime plošče in v plošči Properties (Lastnosti) izberete Mreža. Mreža se pojavi nad tablo.
Privzeta velikost mreže je 8 slikovnih pik, ki se zgodi, da so enake velikosti mreže za Design Material. Če potrebujete drugo velikost, spremenite vrednost v območju Grid. Če želite spremeniti barvo mreže, kliknite barvni čip in izberite izbrani barvni odtenek.
Z vidno mrežo kliknite na kartico in jo premaknite v končni položaj.
Če želite končati, smo izbrali kartico, kliknili gumb Repeat Grid in spremenili razmik med karticami tudi na 8 slikovnih pik.