Te espesifikasyon nan Design materyèl nan Google orijinal ki vize a platfòm la android kòm yon fason yo sijere konsistans nan konsepsyon sou platfòm la.
01 nan 06
Ki jan yo kreye yon Kat Design Materyèl nan Adobe Eksperyans Design CC
Yon fwa konsèpteur te kòmanse poking nan li ak konprann panse a dèyè li, Design Material te tou dousman vin youn nan filozofi yo ki pi enfliyan vizyèl nan konsepsyon entènèt ak mobil . Tout sa ou bezwen fè pou wè ki sa nou ap resevwa nan se fè yon rechèch Design Dokiman sou Pinterest epi ou pral wè dè santèn de egzanp ak eksperyans sou aparèy, tablèt, e menm sou sit entènèt.
Aspè a kaptivan nan Design Material se li se panse Google a alantou ki apps ta dwe parèt ak travay sou aparèy mobil men konsèp yo yo te aplike nan nenpòt ki ekran nan nenpòt ki gwosè sou nenpòt ki platfòm. Kòm Google eta nan paragraf la ouvèti ki nan spesifikasyon la, "Nou defye tèt nou yo kreye yon lang vizyèl pou itilizatè nou yo ki sentèz prensip yo klasik nan bon konsepsyon ak inovasyon ak posiblite pou teknoloji ak syans. Sa a se konsepsyon materyèl. Espèk sa a se yon dokiman k ap viv ki pral mete ajou pandan nap kontinye devlope prensip ak spesifik nan konsepsyon materyèl. "
Materyèl la pale sou, an tèm jeneral, se papye ak yon Hallmark nan Design Material se kat la. Panse sou yon kat endèks sou yon sifas epi ou se sou track dwat la. Yon kat se yon eleman ki gen foto, videyo, lyen tèks ak sou sa, men kote yo diferan de desen ki pi entèaktif se yo vle di yo konsantre sou yon sijè sèl. Kat gen kwen awondi, ki gen lonbraj ki pa klè ki endike yo pi wo pase yon sifas e si yo tout sou plan an menm yo refere yo kòm yon "koleksyon".
Nan sa a "Kijan Pou" nou pral kreye yon kat ki baze sou espèk la. Olye ke kreye kat la ak yon varyete de zouti DYE ak desen, nou pral vin nan li nan yon direksyon ki diferan. Nou pral sèvi ak zouti yo nan Design Adobe a eksperyans ki se kounye a nan yon preview piblik Macintosh-sèlman ak gratis. Ou ka telechaje li isit la.
An n kòmanse.
02 nan 06
Kreye Atizay la Pwototip nan Adobe Eksperyans Design CC
Pa gen okenn fason evidan yo kreye yon ekran android soti nan ekran an kòmanse nan Eksperyans Design CC (XD). Ki sa nou itilize fè lè nou louvri XD, se chwazi opsyon nan iPhone 6 epi, lè koòdone a ouvè, nou chwazi zouti nan Artboard nan pati anba a nan Toolbar la epi chwazi android mobil soti nan seleksyon yo sou panèl la Properties sou bò dwat la. Lè sa a, nou chanje sou zouti seleksyon an, klike sou yon fwa sou non an artboard la ak efase artboard la. Pa plis.
Nan vèsyon aktyèl la nan XD, gen yon ti flèch bò kote iPhone a 6 ki, lè klike, ouvè yon meni gout-desann. Soti nan la ou chwazi vèsyon an android mobil ak android mobil artbo a chwazi ouvè nan koòdone la.
Pou asire ke nou gen espas ekran ki kòrèk la louvri pou kat la, anjeneral, nou mete tèt nou sou Sketch 3 epi kopye epi kole yon Status Bar, Nav Bar, ak App bar nan Modèl la Design Material nan artboard la. Sketch 3.2 gen yon Modèl Design Materyèl ( File> New Soti nan Modèl> Design Material ) ak yon lòt vrèman bon gratis se yon sèl soti nan Kyle Ledbetter ki ou ka jwenn isit la. Si ou pa gen trase, ou ka kopye epi kole yo soti nan XD avek stickers son yo te jwenn nan File> Open UI Twous> Google Materyèl . Ou ka telechaje yo tou soti nan Google pou itilize nan fotoschop, Illustrator, Apre Efè ak trase.
03 nan 06
Ajoute yon Design Kat materyèl nan yon Adobe XD CC Artboard
Youn nan karakteristik ki pi itil nan XD se enklizyon de UI Kits pou Apple iOS, Google Materyèl, ak Microsoft Windows. Nan anpil respè, yo ajoute mo "Rapid" nan tèm "Rapid Prototyping." Kòm byen yo fè travay designer nan pi fasil nan eleman UI komen sa yo pa dwe toujou ap rkree nan yon aplikasyon Aplikasyon tankou Photoshop, Illustrator oswa Trase.
Eleman UI nou te bezwen se te yon kat. Pou jwenn li nou chwazi File> Open UI Twous> Google Materyèl ak twous la louvri kòm yon nouvo dokiman. Yo te jwenn eleman nou te bezwen nan kategori kat la.
Ki sa nou renmen sou sa yo se konfòme yo ak spesifikasyon nan Design Material tankou mete deyò nan karakteristik yo Content Blocks kòm byen ke tèks fòma ak espèk yo espace mete deyò nan espèk nan tipografi.
Style nan kat nou te vle se te youn nan pati anba a kite. Nou tou senpleman marque l 'ak sourit nou yo ak kopye li nan clipboard la. Malerezman, XD pa gen yon koòdone tabbed pou dokiman ouvè. Ki sa nou fè se deplase fenèt la dokiman louvri desann yon ti jan revele yon sèl nan nou ap travay sou, chwazi li epi kole. Yon lòt fason rapidman chanje ant dokiman XD ouvè yo se pou laprès Kòmandman- ' .
04 nan 06
Ki jan yo Edit yon Eleman Design Dokiman nan Adobe Eksperyans Design CC
Lè kat la nan XD rive soti nan clipboard la pa merrily kòmanse travay ak li. Premye bagay ou bezwen fè se Ungroup kat la paske ou bezwen aksè nan ti jan an ak moso konpozisyon kat la. Pou fè sa, chwazi kat la epi chwazi Objè> Ungroup oswa laprès Shift-Command-G.
Kat ou koulye a konpoze de twa moso:
- Limyè bwat gri pou imaj la.
- Bwat mwayen gri pou tèks la
- Bwat la tounen itilize kòm background nan.
Premye etap la se efase bwat la limyè gri. Objektif sèl li se yo aji kòm yon kontneur pou imaj la ki fè li, si ou chwazi, si ou vle.
Bwat la ak tèks la se aktyèlman yon gri fè nwa ak 50% stupidity. Ka bwat sa a dwe itilize kòm background nan tèks epi ou ka chanje koulè a ak stupidity bwat la.
Menm si li pa imedyatman evidan, bwat la gri limyè swiv espesifik la Design materyèl nan ki kwen tèt li awondi pa 2 piksèl. Kenbe sa nan tèt ou si w ap ajoute yon imaj. Li pral bezwen tou kwen yo awondi ki ka ajoute nan yon aplikasyon D 'oswa nan XD.
Wè tankou kouman sa a se eta a repoze nan kat la li bezwen tou yon lonbraj. Espèk la fè li klè gen yon elevasyon repo nan kat la nan 2 piksèl. Pou ajoute sa a, chwazi fòm nan background nwa ak mete Y a ak B (Blur) valè a 2 nan panèl la pwopriyete.
05 nan 06
Ki jan yo ajoute yon imaj nan Kat la Design Dokiman nan Adobe XD CC
Konnen kat la se 344 piksèl lajè ak zòn nan imaj se 150 piksèl segondè ( mwatye wotè a nan bwat la limyè gri ) Nou louvri imaj la nan fotoschop, koupe l 'nan gwosè a ak sove li lè l sèvi avèk opsyon nan 2x nan ekspozisyon fotoschop la Kòm dyalòg bwat. Imaj la te enpòte nan Adobe XD.
Nou Lè sa a, trennen bwat la gri limyè sou imaj la sou keratin la ak chwazi objè> mask ak fòm . Rezilta a te imaj la davwa ke kwen yo awondi nan fòm nan. Nou Lè sa a, te deplase imaj la nan pozisyon final li yo.
Avèk imaj la nan plas, nou Lè sa a, chanje koulè a background nan bwat la gri Mwayen, chanje tèks la ak koulè nan tèks la lyen.
06 nan 06
Sèvi ak Adobe XD CC gri karakteristik la
Avèk kat la ranpli li kounye a bezwen yo dwe byen plase selon spesifikasyon an Design materyèl. Sa vle di gen 8 piksèl sou chak bò nan kat la ak kat la bezwen yo dwe 8 piksèl anba a ba a app. Pou fè sa, klike sou yon fwa sou non an artboard, epi, nan la Panel Pwopriyete, chwazi Grid. Griy la parèt sou tablo a.
Gwosè a kadriyaj default se 8 piksèl ki rive yo dwe gwosè a grille menm pou Design Material.If ou bezwen yon gwosè diferan, chanje valè a nan zòn nan kadriyaj. Si ou vle chanje koulè a nan kadriyaj la, klike sou chip nan koulè epi chwazi yon koulè soti nan selèkteur nan Koulè ki kapab lakòz.
Avèk griyaj la vizib, klike sou kat la epi deplase li nan pozisyon final li yo.
Pou fini, nou te chwazi kat la, klike sou bouton Grid repete ae chanje espas ki genyen ant kat yo a 8 piksèl tou.