Google- ի նյութական նախագծման հստակեցումը սկզբնապես ուղղված էր Android պլատֆորմի վրա որպես պլատֆորմի վրա դիզայնի հետեւողականություն առաջարկելը:
01-ից 06-ը
Ինչպես ստեղծել Adobe Design դիզայն CC- ում նյութական դիզայնի քարտ
Երբ դիզայներները սկսեցին խմել եւ հասկանալ դրա հետեւությունները, նյութական դիզայնը հանգիստ դարձավ վեբում եւ բջջային դիզայնի ամենաազդեցիկ տեսողական փիլիսոփայություններից մեկը: Բոլորը պետք է անեք, որպեսզի տեսնենք, թե ինչ ենք ստանում Pinterest- ի նյութական դիզայնի որոնումը եւ կտեսնեք հարյուրավոր օրինակներ եւ փորձեր սարքերում, հաբերում եւ նույնիսկ կայքերում:
Նյութական դիզայնի հետաքրքրաշարժ առարկան այն է, որ Google- ը մտածում է այն մասին, թե ինչպես պետք է հայտնվել հավելվածները եւ աշխատեն բջջային սարքերի վրա, սակայն հասկացությունները կիրառվում են ցանկացած հարթակի ցանկացած չափի էկրանին: Որպես Google- ը նշում է բացատրության բացման կետում, «Մենք ինքներս մեզ վիճարկում էինք, որ ստեղծագործական տեսք ունենանք մեր օգտվողների համար, որոնք սինթեզ են դիզայնի դասական սկզբունքները` նորարարության եւ տեխնոլոգիայի եւ գիտության հնարավորության հետ: Սա նյութական դիզայն է: Այս առանձնահատկությունն այն կենդանի փաստաթուղթն է, որը կթարմացվի, երբ մենք շարունակում ենք մշակել նյութական դիզայնի սկզբունքներն ու առանձնահատկությունները »:
Նյութը, որն ընդհանուր առմամբ խոսել է, թուղթ է եւ նյութական դիզայնի նշան է քարտը: Մտածեք ինդեքսային քարտ մակերեսի վրա եւ դուք ճիշտ ուղու վրա եք: Քարտը լուսանկարներ, տեսանյութեր, տեքստային հղումներ պարունակող տարր է եւ այլն, բայց որտեղ դրանք տարբերվում են ինտերակտիվ նախագծերից, նշանակում է կենտրոնանալ մեկ առարկայի վրա: Քարտերը ունեն կլորացված անկյուններ, պարունակում են նուրբ ստվերներ, նշելով, որ դրանք մակերեւույթից բարձր են, եւ եթե դրանք բոլորը նույն ինքնաթիռում են, դրանք կոչվում են «հավաքածու»:
Այս «How To» - ում մենք պատրաստվում ենք ստեղծել հատուկ քարտ: Ստեղծեք տարբեր տեսակի պատկերների եւ նկարչական գործիքների քարտ, փոխարենը մենք կգնանք այլ ուղղությամբ: Մենք պատրաստվում ենք գործիքներ օգտագործել Adobe- ի փորձի նախագծում, որը ներկայումս գտնվում է Macintosh- ի միայն հանրային նախադիտում եւ անվճար է: Դուք կարող եք ներբեռնել այստեղ:
Եկեք սկսենք.
02-ից 06-ը
Adobe Photoshop- ի դիզայնի CC- ում նախատիպի ցուցադրման ստեղծում
Փորձը դիզայն CC- ի (XD) Start Screen- ից Android- էկրան ստեղծելու ակնհայտ ձեւ չկա: Այն, ինչ մենք օգտագործել ենք XD- ն բացելիս, ընտրում ենք iPhone 6 տարբերակը եւ երբ ինտերֆեյսը բացվում է, մենք ընտրում ենք գործիքագոտի գործիքը Գործիքադարակի ներքեւի մասում եւ ընտրել Android Mobile- ը Properties- ի ընտրանքներից աջից: Այնուհետեւ անցնում ենք ընտրության գործիքին, կտտացրեք մեկ անգամ iPhone- ի գործածողի անունը եւ ջնջեք աշխատասեղանը: Ոչ ավելին:
XD- ի ընթացիկ տարբերակում կա iPhone 6- ի կողքին գտնվող փոքր սլաքը, որը կտտացրեց, բացում է բացվող մենյու: Այնտեղից ընտրում եք Android Mobile տարբերակը եւ ընտրված Android Mobile արբանյակները բացվում են ինտերֆեյսում:
Քարտի համար նախատեսված պատշաճ էկրանին ապահովելու համար մենք սովորաբար գնում ենք Sketch 3-ին եւ պատճենեք եւ կպցրեք Status Bar, Nav Bar- ը եւ App Bar նյութերի նախագծման ձեւանմուշից աշխատասեղանին: Էսքիզ 3.2 պարունակում է Նյութական դիզայնի կաղապարը ( File> New From Template> Material Design ) եւ եւս մեկ իսկապես լավ անվճար է, Kyle Ledbetter- ից, որը դուք կարող եք ձեռք բերել այստեղ: Եթե դուք չունեք Sketch, դուք կարող եք պատճենեք եւ տեղադրեք դրանք Ֆայլի> Բաց UI Kit> Google- ի նյութում գտնված XD պիտակներից: Դուք նաեւ կարող եք ներբեռնել Google- ից Photoshop, Illustrator, After Effects եւ Sketch- ի օգտագործման համար:
03-ից 06-ը
Նյութական նմուշի քարտ ավելացնելով Adobe XD CC- ի ցուցիչ
XD- ի ամենաօգտակար հատկություններից մեկը UI փաթեթների ներառումը Apple iOS- ի, Google- ի Նյութերի եւ Microsoft Windows- ի համար է: Շատ առումով, նրանք ավելացնում են «արագ» բառը «արագ նախատիպի» տերմինին, ինչպես նաեւ դիզայների աշխատանքն ավելի դյուրին դարձնում այդ UI տարրերի տարրերը, որոնք չունեն մշտապես մշակված Դիզայնի հավելվածում, ինչպիսիք են Photoshop, Illustrator կամ Էսքիզներ:
Մեզ անհրաժեշտ էր UI տարրը քարտ էր: Դրան հասնելու համար մենք ընտրեցինք Ֆայլի> Բաց UI Kit> Google նյութը եւ հավաքածուն `որպես նոր փաստաթուղթ: Անհրաժեշտ տարրը հայտնաբերվել է քարտերի կատեգորիայի մեջ:
Այն, ինչ մենք սիրում ենք այդ մասին, նրանք հավատարիմ են Նյութական նախագծման հստակեցմանը, ինչպես ներկայացված են Բովանդակության բլոկների ակնոցներում, ինչպես նաեւ տեքստի ձեւավորման եւ տեքստային առանձնահատկությունների մեջ ընդգրկված տեքստի ձեւաչափեր:
Քարտի ոճը մենք ուզում էինք ներքեւի ձախ կողմում: Մենք պարզապես շերտավորվում ենք այն մեր մկնիկով եւ պատճենահանված այն clipboard- ում: Ցավոք, XD չի պարունակում բացված փաստաթղթերի համար նախատեսված ներդիրի ինտերֆեյս: Այն, ինչ մենք անում ենք, բացվում է բաց փաստաթղթի պատուհանի մի փոքր ներքեւ, բացահայտելու համար աշխատելու ենք այն, ընտրեք այն եւ տեղադրեք: Բաց XD- ի փաստաթղթերի միջեւ արագ փոխանակման այլ միջոց է սեղմել Հրաման- ' :
04-ից 06-ը
How to Edit a Material Design Element- ում Adobe Experience Design CC- ում
Երբ XD- ի քարտը հայտնվում է clipboard- ից, ուրախությամբ սկսեք աշխատել դրա հետ: Առաջին բանը, որ դուք պետք է անեք , վերապահեք քարտը, քանի որ պետք է մուտք գործեք դեպի բիտ եւ կազմող նյութեր: Դա անելու համար ընտրեք քարտը եւ ընտրեք Նպատակ> Խմբագրեք կամ սեղմեք Shift-Command-G:
Ձեր քարտը բաղկացած է երեք մասից.
- Պատկերի համար բաց մոխրագույն արկղ:
- Միջին գորշ տուփ տեքստի համար
- Արկղը օգտագործվում է որպես ֆոն:
Առաջին քայլն այն է, ջնջել բաց մոխրագույն արկղը: Դրա միակ նպատակն է հանդես գալ որպես պատկերացնող կերպար, որը այն դարձնում է, եթե ընտրեք, ընտրովի:
Տեքստի հետ տուփը իրականում մուգ մոխրագույն է `50% անթափանցությամբ: Այս տուփը կարող է օգտագործվել որպես տեքստի ֆոնային եւ դուք կարող եք փոխել գույնը եւ տուփի անփոփոխությունը:
Թեեւ դա անմիջապես ակնհայտ չէ, սակայն թեթեւ մոխրագույն տուփը հետեւում է Նյութական դիզայնի նմուշին, որ նրա վերին անկյունները կլորացվում են 2 պիքսելով: Հիշեք այն, եթե դուք ավելացնում եք պատկեր: Անհրաժեշտ կլինի նաեւ կլորացված անկյունները, որոնք կարող են ավելացվել պատկերային հայտի կամ XD- ում:
Տեսնելով, թե ինչպես է դա քարտի հանգիստ վիճակն է, այն նաեւ ստվեր է պահանջում: The spec- ը պարզ է դառնում, որ կա 2 պիքսել քարտի հանգիստ բարձրացում: Այս ավելացնելու համար ընտրեք սեւ ֆոնային ձեւը եւ Y եւ B (Blur) արժեքները սահմանեք հատկությունների վահանակում 2:
05-ից 06-ը
Ինչպես ավելացնել Adobe XD CC- ի նյութական նմուշի քարտը
Բացահայտելով քարտը 344 փիքսել լայն է, եւ պատկերը տարածքը 150 pixels բարձր է ( բաց գորշ արկղի կեսը բարձրությունը ) Մենք բացեցինք պատկերը Photoshop- ում, կտրեց այն չափի եւ փրկեց այն, օգտագործելով Photoshop- ի Արտահանման Ինչպես երկխոսության 2x տարբերակը: տուփ: Պատկերը ներմուծվել է Adobe XD- ում:
Այնուհետեւ մենք խփեցինք բաց գորշ արկղը նկարում գտնվող պատկերով եւ Ընտրված > Դիմակով Դիմակով : Արդյունքն այն էր, որ ձեւը վերցնում էր ձեւի կլորացված անկյունները: Այնուհետեւ պատկերը տեղափոխեցինք վերջնական դիրքը:
Ներկայացրած պատկերը, այնուհետեւ փոխեցինք Միջին գորշ արկղի ֆոնի գույնը, փոխեց տեքստի տեքստը եւ գույնը:
06-ից 06-ը
Օգտագործելով Adobe XD CC Grid Feature- ը
Քարտի ավարտին այն այժմ պետք է պատշաճ կերպով տեղադրվի Նյութական դիզայնի նմուշով: Դա նշանակում է, որ քարտի երկու կողմերում կա 8 փիքսել, եւ քարտը պետք է լինի 8 պիքսել ստորեւ գտնվող հավելվածի վանդակում: Դա անելու համար սեղմեք մեկ անգամ աշխատասեղանի անվան վրա, եւ Properties Panel- ում ընտրեք Ցանց: Ցանցը հայտնվում է աշխատասեղանի վրա:
Նախնական ցանցի չափսը 8 պիքսել է, որը հանդիսանում է Նյութական Դիզայնի նույն ցանցի չափը: Եթե Ձեզ անհրաժեշտ է այլ չափ, փոխեք արժեքը Ցանցի տարածքում: Եթե ցանկանում եք փոխել ցանցի գույնը, սեղմեք գույնի չիպը եւ ընտրեք գույնի ընտրիչի գույնը:
Ցանցով տեսանելի, սեղմեք քարտը եւ տեղափոխեք այն վերջնական դիրքը:
Ավարտելու համար ընտրեցինք քարտը, կտտացրեց Կրկնվող Ցանց կոճակը եւ փոխեց այն քարտերի միջեւ տարածությունը 8 պիքսել: