Google Materiālā dizaina specifikācija sākotnēji bija vērsta uz Android platformu kā veidu, kā ieteikt platformas dizaina konsekvenci.
01 no 06
Kā izveidot materiālu dizaina karti Adobe Experience Design CC
Pēc tam, kad dizaineri sāka to spriest un izprast domu aiz tā, Material Design ir klusi kļuvis par vienu no ietekmīgākajām vizuālās filozofijām interneta un mobilajā dizainā . Viss, kas jums jādara, lai redzētu, ko mēs saskaramies, ir veikt materiālu dizaina meklēšanu Pinterest tīklā, un jūs redzēsit simtiem piemēru un eksperimentu ierīcēs, planšetdatoros un pat vietnēs.
Materiālā dizaina aizraujošais aspekts ir tas, ka Google domā par to, kā lietotnēm jāuzrāda un jāstrādā mobilajās ierīcēs, taču jēdzieni tiek piemēroti jebkura izmēra ekrāniem jebkurā platformā. Kā Google norādījusi specifikācijas sākuma punktā: "Mēs apstrīdējām, ka mūsu lietotājiem tiek radīta vizuāla valoda, kas sintezē klasiskos labā dizaina principus ar tehnoloģiju un zinātnes jauninājumiem un iespējām. Tas ir materiāls dizains. Šis spec ir dzīvs dokuments, kas tiks atjaunināts, turpinot attīstīt materiālu dizaina principus un specifiku. "
Materiāls, par kuru runāja ļoti vispārīgi, ir papīrs un Materiālā dizaina pazīme ir karte. Padomājiet par indeksa karti uz virsmas, un jums ir uz pareizā ceļa. Karte ir elements, kas satur fotoattēlus, videoklipus, teksta saites utt., Bet, ja tie atšķiras no vairuma interaktīvo dizainu, tie ir paredzēti, lai koncentrētos uz vienu tēmu. Kartēm ir noapaļoti stūri, tajos ir vājš ēnas, kas norāda, ka tās atrodas virs virsmas, un, ja tās visas atrodas vienā plaknē, tās sauc par "kolekciju".
Šajā "Kā lai" mēs gatavojamies izveidot karti, pamatojoties uz spec. Tā vietā, lai izveidotu karti ar dažādiem attēlveidošanas un rasēšanas rīkiem, mēs nonāksim pie tā no cita virziena. Mēs izmantosim Adobe's Experience Design izstrādātos rīkus, kas šobrīd ir pieejami tikai Macintosh lietotājiem un ir pieejami bez maksas. Jūs to varat lejupielādēt šeit.
Sāksim.
02 no 06
Prototipu moduļa izveidošana programmā Adobe Experience Design CC
Pieredzes dizaina CC (XD) sākuma ekrānā nav redzams Android ekrāna izveide. Tas, ko mēs to darījām, kad atveram XD, ir izvēlēties opciju iPhone 6, un, atverot saskarni, rīka joslas apakšdaļā mēs izvēlēsim instrumentu Artboard, un izvēlieties Android Mobile no izvēlnes Properties panelī pa labi. Pēc tam mēs pārietam uz atlases rīku, vienreiz noklikšķiniet uz iPhone mākoņdatoņa nosaukuma un izdzēsiet māklodziņu. Vairāk ne.
Pašreizējā XD versijā blakus iPhone 6 ir neliela bultiņa, kas, noklikšķinot, atver nolaižamo izvēlni. No šī brīža jūs izvēlaties Android Mobile versiju, un interfeisu atver atlasītā Android Mobile mākoņdatne.
Lai nodrošinātu, ka kartei ir atbilstoša ekrāna platība, mēs parasti pārietam uz Sketch 3 un kopējam un ievietojam statusa joslu, Nav Bar un App bar no Material Design Template uz māklodziņu. Skice 3.2 satur Materiālu dizaina veidni ( File> New From Template> Material Design ), un vēl viens tiešām labs bezmaksas ir no Kyle Ledbetter, kuru jūs varat iegūt šeit. Ja jums nav skices, tos var kopēt un ielīmēt no XD uzlīmēm, kas atrodamas failā> Atvērt lietotāja saskarne> Google materiāls . Varat arī lejupielādēt tos no Google, lai tos izmantotu Photoshop, Illustrator, After Effects un Sketch.
03 no 06
Materiālo dizaina karšu pievienošana Adobe XD CD Artboard
Viena no noderīgākajām XD funkcijām ir UI komplektu iekļaušana Apple iOS, Google materiālam un Microsoft Windows. Daudzējādā ziņā viņi pievieno vārdu "Rapid" terminam "Rapid Prototyping". Arī tie padara dizainera darbu vieglāku, jo parasto lietotāja interfeisa elementi nav pastāvīgi jāattīsta Dizaina lietojumprogrammā, piemēram, Photoshop, Illustrator vai Skice
Lietotāja interfeisa elements bija karte. Lai to paveiktu, izvēlējāmies failu> Open UI Kit> Google Material un komplekts tika atvērts kā jauns dokuments. Elements, kas mums vajadzīgs, tika atrasts kategorijā "Kartes".
Mums par tiem patīk, ka viņi ievēro materiāla dizaina specifikāciju, kā izklāstīts satura bloka specifikācijās, kā arī teksta formatējumu un atstarpju specifikācijas, kas noteiktas Tipogrāfijas specifikācijā.
Kartes stils, kuru vēlējāmies, bija apakšējā kreisajā pusē. Mēs vienkārši ievietojam to ar peli un nokopējām uz starpliktuvi. Diemžēl XD nesatur atvērtu dokumentu tabbed saskarni. Ko mēs darām, ir mazliet atvērt dokumentu logu, lai atklātu to, ar ko mēs strādājam, atlasiet to un ielīmējiet. Vēl viens veids, kā ātri pārslēgties starp atvērtajiem XD dokumentiem, ir nospiest Command- ' .
04 no 06
Kā rediģēt materiāla dizaina elementu programmā Adobe Experience Design CC
Kad XD karte nonāk no starpliktuves, nekavējoties sāciet strādāt ar to. Pirmā lieta, kas jums jādara, ir atkārtoti izlasīt karti, jo jums ir nepieciešama piekļuve kartē ievietotajiem bitiem un gabaliņiem. Lai to izdarītu, atlasiet karti un atlasiet Object> Ungroup vai nospiediet Shift-Command-G.
Jūsu karte tagad sastāv no trim daļām:
- Attēlam ir gaiši pelēks lodziņš.
- Teksta vidēja pelēka lodziņš
- Aizmugurējā kaste tiek izmantota kā fons.
Pirmais solis ir izdzēst gaišo pelēko lodziņu. Tās vienīgais mērķis ir rīkoties kā attēla vietturis, kas to dara, ja izvēlaties, pēc izvēles.
Kastīte ar tekstu faktiski ir tumši pelēka ar 50% necaurredzamību. Šo lodziņu var izmantot kā teksta fonu, un jūs varat mainīt krāsu un lodziņa necaurredzamību.
Lai gan tas nav uzreiz acīmredzams, gaiši pelēks lodziņš atbilst materiāla dizaina specifikācijai, jo tā augšējie stūri ir noapaļoti par 2 pikseļiem. Paturiet to prātā, ja pievienojat attēlu. Tam būs arī noapaļoti stūri, kurus var pievienot attēlveidošanas lietojumprogrammai vai XD.
Redzot, kā tas ir kartes stāvoklis, tam ir nepieciešama arī ēna. Spec ir skaidri redzams, ka 2 pikseļu kartes atmosfēras pacelšana. Lai to pievienotu, atlasiet melnās fona formu un rekvizītu panelī iestatiet Y un B (Blur) vērtības 2.
05 no 06
Kā pievienot attēlu materiālu dizaina kartē Adobe XD CC
Zinot, ka karte ir 344 pikseļi plata un attēla laukums ir 150 pikseļi augsts ( puse no gaismas pelēkās kastes augstuma ), mēs atvērām attēlu Photoshop, apgriezām to līdz izmēram un saglabājām to, izmantojot opciju @ 2x, kas atrodas Photoshop dialogā Export As kaste. Attēls tika importēts Adobe XD.
Pēc tam mēs vilkaim gaismas pelēko lodziņu virs kartona attēla un atlasījām Object> Mask With Shape . Rezultāts bija attēla uzņemšana noapaļotiem formas stūriem. Pēc tam mēs pārvietojām attēlu uz savu gala pozīciju.
Pēc tam, kad attēls tika ievietots, mēs mainījām vidēja pelēka lodziņa fona krāsu, mainījām saites teksta tekstu un krāsu.
06 no 06
Izmantojot Adobe XD CC režģa funkciju
Pēc kartes aizpildīšanas tā tagad ir pareizi jānovieto saskaņā ar Material Design spec. Tas nozīmē, ka abās kartes pusēs ir 8 pikseļi, un kartei jābūt zemāk par 8 pikseļiem zemāk. Lai to paveiktu, vienu reizi noklikšķiniet uz mākontakta nosaukuma un rekvizītu panelī atlasiet Režģis. Režģis parādās virs mākoņdatnes.
Noklusējuma tīkla izmērs ir 8 pikseļi, kas ir tāds pats materiāla dizaina režģa lielums. Ja nepieciešams atšķirīgs izmērs, mainiet vērtību režģa zonā. Ja vēlaties mainīt režģa krāsu, noklikšķiniet uz krāsu mikroshēmas un izvēlieties no iegūto krāsu atlasītāja krāsu.
Kad tīkls ir redzams, noklikšķiniet uz kartes un pārvietojiet to gala pozīcijā.
Lai pabeigtu darbu, mēs izvēlējāmies karti, noklikšķinājām uz pogas Atkārtot režģi un mainījām arī attālumu starp kartēm līdz 8 pikseļiem.