Բովանդակություն
- 01. Startրագրի մեկնարկը
- 02. Ներմուծեք առաջին պատկերը
- 03. Տեղադրեք տնակը
- 04. Ներկայացրե՛ք պատկերանշանը
- 05. Ավելացրեք շրջան
- 06. Վերադասավորեք գրաֆիկան
- 07. Նետեք խոսափողը
- 08. Տեքստային հաղորդագրություն
- 09. Միացեք խմբին
- 10. Խմբավորել պատկերանշանը
- 11. Լրացուցիչ տարրեր
- 12. Տարբեր ներմուծում
- 13. Ավելացնել պիտակ
- 14. Կրկնօրինակեք խումբը
- 15. Վերանվանել, ապա նորից պատճենել
- 16. Տեքստի վերնագիրը
- 17. Անթափանցիկություն փոխելը
- 18. Կրկնօրինակեք էկրանը
- 19. Տեղափոխեք ֆոնները
- 20. Նոր տարրեր են հայտնվում
- 21. Լրացրեք հետի կոճակը
- 22. Ձայնային հրաման
- 23. Փորձիր նախատիպը
- 24. Վերադառնալ
- 25. Խոսքի հաստատում
- 26. Պատկերի մասշտաբավորումը
- 27. Էկրանի նոր տարրեր
- 28. Ստեղծեք կոճակ
- 29. Տեղափոխել նախատիպի ռեժիմ
- 30. Անիմացիայի պարամետրեր
- 31. Կապեք հետևի կոճակը
- 32. Ավտոմատ կենդանացնել
- 33. Փրկեք նախագիծը
- 34. Նախագծի փոխանակում
- 35. Հրապարակել նախատիպը
- 36. Տեսանյութի վարկած
Webամանակակից վեբ և հավելվածների դիզայնում հաճախ են լինում դեպքեր, երբ փոխազդեցությունը չի բացում միանգամայն նոր էջ կամ էկրան: Ինտերակտիվ բովանդակության ստեղծման ժամանակակից մոտեցումը պահանջում է անցումներ դիզայնի ինտերֆեյսի տարրերի միջև, որպեսզի օգտագործողը զարմանա և հիացած լինի բովանդակության փոփոխման փորձով: Այս ամենը տեղի է ունենում նույն էկրանին կամ էջում, առանց թարմացման: Այս տեսակի փոխազդեցությունների ձևավորումը և դրանց ճիշտ կատարումը զտելը կարող է ժամանակ պահանջել, բայց արժե դա անել նախքան ձեր կոդը գրելը:
Սա այն է, ինչ Adobe XD- ն անցկացրել է զարգացման վերջին մի քանի ամիսները `ճիշտ դառնալով: Ստեղծեք բովանդակություն մեկ էկրանին մեկ վիճակում, տեղափոխեք այդ բովանդակությունը նոր վիճակում նոր էկրանին և պարզապես ընտրեք անցում կատարելու «Ավտոմատ անիմացիա» տարբերակը: Ամբողջ բովանդակությունը, որը նույնն է երկու էկրաններին, ինքնաբերաբար շարժվում է մի դիրքից մյուսը: Եթե չեք ցանկանում, որ ամբողջ էկրանը տեսանելի լինի երկու էկրաններին, ապա առաջինը բովանդակությունն անտեսանելի դարձրեք, և այն կփոխվի իր տեղում:
Իմացեք Adobe- ի այլ ծրագրակազմի մասին, ինչպիսիք են Adobe Dimension.
- 8 հիմնական նախատիպավորման և կառուցման գործիքներ
Այստեղ մենք ձեզ ցույց կտանք, թե ինչպես ստեղծել ծրագրի նախատիպը, որը դա անում է հենց դա (հավելվածի վերաբերյալ, թե ինչպես ստեղծել հավելվածների ձեռնարկներ, ստուգեք մեր լավագույնների հյուծվածությունը): Եվ դրանից այն կողմ անցնելով, XD- ի նոր առանձնահատկությունը օգտվողին հնարավորություն է տալիս վերահսկել փոխազդեցությունն իր ձայնի միջոցով: Մենք կբացահայտենք սա որպես դիզայնի առանձնահատկություն և այն, թե ինչպես ծրագիրը կարող է պատասխանել նաև օգտագործողի հետ, ինչը կարող է ապահովել դիզայնի որոշ հետաքրքիր հնարավորություններ:
Ներբեռնեք ծրագրի ֆայլերը այս ձեռնարկի համար:
01. Startրագրի մեկնարկը
Եթե Adobe XD չունեք, այն կարող եք ներբեռնել և տեղադրել այստեղ: Տեղադրումն ավարտելուց հետո բացեք ծրագրակազմը և ողջույնի էկրանը հնարավորություն կտա ձեզ ընտրել էկրանի չափը ներբեռնելու համար: Այս դեպքում ընտրեք iPhone 6/7/8, քանի որ դա ճիշտ չափն է այս նախագծի համար, բայց կտեսնեք, որ առկա են տարբեր չափերի առկայություններ:
02. Ներմուծեք առաջին պատկերը
Պատկերներ ներմուծելու տարբեր եղանակներ կան, բայց այս առաջին դեպքում գնացեք Ֆայլ> Ներմուծում: Filesրագրի ֆայլերից ընտրեք «ակտիվների» պանակը և ներմուծման համար առաջին պատկերը կլինի «sky.png»: Տեղադրեք այն էկրանի վերևում և տեղափոխեք այն մի քանի պիքսել ներքև:
03. Տեղադրեք տնակը
Դիզայնի հաջորդ պատկերը կլինի 'cabin.png': Ուղղակի ներմուծեք սա այնպես, ինչպես նախորդ քայլում եք արել, ապա տեղադրել այն էկրանը լրացնելու համար: Ի վերջո, ներմուծեք «trees.png» պատկերը և տեղադրեք այն էկրանի ներքևում ՝ լճի վրա գտնվող ծառերի հետ միասին:
04. Ներկայացրե՛ք պատկերանշանը
Այդ պատկերների առանձին շերտերի պատճառն այն է, որ երբ էկրանների միջեւ անցում է ստեղծվում, նրանք կարող են շարժվել առանձին: Գնացեք File ընտրացանկում և ընտրեք Ներմուծում: Այս անգամ ընտրեք 'logo.ai', որը վեկտորային պատկեր է: Տեղադրեք այս պատկերը էկրանի վերին կենտրոնում:
05. Ավելացրեք շրջան
Ընտրեք շրջանակի գործիքը և գծանշանով մի փոքր ավելի մեծ շրջան նկարեք: Աջ կողմում գտնվող Հատկությունների վահանակում հանեք հարվածը և ֆոնը դարձեք սեւ: Ընտրեք Background blur- ը և պայծառությունը նվազեցրեք -30-ով, որպեսզի շրջանակը դեռ սեւ լինի:
06. Վերադասավորեք գրաֆիկան
Այժմ շրջանն անհրաժեշտ է շարժվել պատկերանշանի ետևում: Ընտրեք Օբյեկտ> Կազմակերպել և հետ ուղարկել: Ինչպես Adobe- ի մյուս արտադրանքներում, դա նույնպես Cmd / Ctrl + [ որևէ գրաֆիկա հետևից տեղափոխել շերտերի հերթականությամբ: Միևնույն ժամանակ, ճիշտ քառակուսի փակագծի օգտագործումը կարգի առարկա կբերի առաջ:
07. Նետեք խոսափողը
Այժմ ներմուծեք «mic.ai» պատկերը և չափը փոխեք, որպեսզի այն համեմատաբար փոքր լինի: Տեղադրեք սա էկրանի ներքևում: Սրա շուրջ շրջան գծեք և ապանշեք լրացումը, որպեսզի այն հանվի: Դրանից հետո հարվածը դարձեք սպիտակ և երկու պիքսել լայնությամբ: Տեղադրեք այն «խոսափողի» պատկերի շուրջ:
08. Տեքստային հաղորդագրություն
Օգտագործեք տեքստային գործիքը `խոսափողի տակ ավելացնել« խոսել որոնելու համար »բառերը: Տեքստը դարձնել սպիտակ և փոխել Helvetica Neue խտացրած սև: Էկրանի ներքևի ձախ մասում կտտացրեք Ակտիվների վահանակի պատկերակին ՝ այն բացելու համար: Էկրանի վրա ընտրված տեքստով կտտացրեք այս տեքստի համար այս ձևաչափը պահպանելու համար կտտացրեք «+» պատկերակին ՝ «Նիշերի ոճերի» կողքին:
09. Միացեք խմբին
Ընտրեք Layer panel պատկերակը էկրանի ներքևի ձախ մասում: Էկրանի վրա ընտրեք «որոնման» տեքստը և Սեղմեք սեղմումով շրջանն ու խոսափողի պատկերակը ավելացնելու համար: Գնացեք Օբյեկտ և ընտրեք Խումբ: Շերտերի վահանակում վերանվանեք այս խումբը «Որոնում»: Օգտակար է անվանել խմբեր, հատկապես դրանք անիմացիոն դարձնելիս:
10. Խմբավորել պատկերանշանը
Asիշտ այնպես, ինչպես վերջին քայլում, ընտրեք պատկերանշանն ու դրա շուրջ աղոտ շրջանակը, ապա խմբավորեք դրանք միասին: Շերտի վահանակում վերանվանեք ամբողջ խմբի «տարբերանշանը», որպեսզի այն հեշտությամբ ճանաչելի լինի, եթե հետագայում նորից խմբագրեք: Այս պահին առաջին էկրանի դիզայնն ավարտված է:
11. Լրացուցիչ տարրեր
Չնայած առաջին էկրանն ավարտված է, այնուամենայնիվ, կան ավելի շատ դիզայնի տարրեր, որոնք պետք է ավելացվեն: Ահա թե ինչպես է ստեղծվում անիմացիան ՝ էկրանների միջեւ տարրերի դիրքավորումը փոխելով: Գնացեք ուղղանկյան գործիքի վրա և պահեք Հերթափոխ քառակուսի ավելացնել էկրանին ՝ եզրը դարձնելով սպիտակ:
12. Տարբեր ներմուծում
Այժմ ձեր գործավար համակարգի միջոցով բացեք ակտիվների պանակը: Ընտրեք 'cabin1.png' պատկերը և քաշեք այն անմիջապես այն քառակուսիի վրա, որը դուք ստեղծել եք նախորդ քայլում: Այն ինքնաբերաբար դիմակավորված կլինի սրա ներսում: Կրկնակի կտտացրեք ՝ պատկերի դիրքը խմբագրելու համար և համոզվեք, որ տնակում տեսանելի է տնակը:
13. Ավելացնել պիտակ
Օգտագործելով «Տեքստ» գործիքը, տեքստի տակ ավելացրեք «Անտառային տնակ» պիտակը և օգտագործեք «Ակտիվներ» վահանակը ՝ տեքստը պահված ոճով ոճավորելու համար 8. քայլից: Ընտրեք պատկերն ու պիտակը և խմբավորեք դրանք միասին: Շերտերի վահանակում անվանեք խմբի «ձախ խցիկը»:
14. Կրկնօրինակեք խումբը
Սովորաբար ինտերֆեյսի տարրը կրկնելը կատարյալ աշխատանք է «Կրկնել ցանցը» գործիքի համար: Այնուամենայնիվ, սա հատուկ անիմացիայի կարիք կունենա, որը չի աշխատում «Կրկնել ցանցի» հետ: Ընտրեք պատկերի և տեքստի խումբը, այնուհետև պատճենեք և կպցրեք այնպես, որ այն նստի բնագրի կողքին և փոխարենը ավելացնեք 'cabin2.png' պատկերը:
15. Վերանվանել, ապա նորից պատճենել
Տեքստը փոխեք «Ձյունե տնակ», իսկ շերտերի վահանակում անվանեք «աջ խցիկ»: Ընտրեք և՛ ձախ, և՛ աջ խցիկը և կրկնօրինակեք դրանք, տեղադրեք կրկնօրինակները ներքևում և թարմացրեք դրանց տեքստերն ու պատկերները ՝ 'cabin3.png' և 'cabin4.png': Այս բոլորը միասին խմբավորեք և անվանեք խմբի «ստորին տնակ»:
16. Տեքստի վերնագիրը
«Լոգարանախցիկների որոնման արդյունքներ» տեքստով էջին ավելացրեք տեքստ: Տվեք Rockwell տառատեսակը և պահեք սա Ակտիվների վահանակի Նիշերի ոճերը: Այժմ տեղադրեք «ստորին խցիկի» խումբը հենց էկրանի ներքևում և տեսքը հասցրեք զրոյի, որպեսզի այն անտեսանելի լինի այս էկրանին:
17. Անթափանցիկություն փոխելը
Այժմ ընտրեք ձախ և աջ խցիկները, տեղափոխեք դրանք էկրանի ներքևի մաս և տեսքի սահնակը հասցրեք զրոյի: Կրկին կրկնեք որոնման տեքստի համար: Երբ մենք տեղափոխվենք մեկ այլ էկրան, դրանք բոլորը կենդանի են լինելու իրենց նոր դիրքերի համար: Շերտի վահանակում տեղափոխեք «ձախ խցիկը» ՝ մնացած բոլոր տնակային խմբերի վերևում:
18. Կրկնօրինակեք էկրանը
Ընտրեք գեղարվեստական տախտակը ՝ կտտացնելով դրա անունը, ապա կրկնակի կտտացրեք գեղարվեստական տախտակին և անունը փոխեք «home»: Պատճենեք և տեղադրեք գեղարվեստական տախտակը և անվանափոխեք այն «որոնում»: Այժմ ընտրեք պատկերանշանը և տեղափոխեք այն գրեթե էկրանից դուրս, այնուհետև դրա տեսքը հասցրեք զրոյի:
19. Տեղափոխեք ֆոնները
Ընտրեք երկնքի պատկերը և մի փոքր մերկացրեք այն էկրանին: Ընտրեք սրահի պատկերը և տեղափոխեք այն վերև, մինչև տնակը գտնվում է էկրանի վերևում: Դրանից հետո կտտացրեք ծառերի պատկերին և տեղափոխեք այն տնակի վրայով: Ի վերջո, ընտրեք «որոնման» խումբը և տեսքը հասցրեք զրոյի:
20. Նոր տարրեր են հայտնվում
Ընտրեք որոնման արդյունքները Layer վահանակում և դրա տեսքը հասցրեք 100-ի: Տեղափոխեք այն էկրանին վերև: Կրկնեք սա ձախ խցիկի, աջ խցիկի և ներքևի խցիկի համար: Գրիչի գործիքով պարզ հետադարձ կոճակ նկարեք և դրա շուրջ շրջան ավելացրեք: Ֆոնի վրա աղոտություն մտցրեք և դրա պայծառությունը իջեցրեք մինչև -30:
21. Լրացրեք հետի կոճակը
Ընտրեք հետևի սլաքը և շրջանը, խմբավորեք դրանք և անվանեք նրանց «ետ կոճակը» Շերտային վահանակում: Անցեք «Նախատիպ» ռեժիմին ՝ XD ինտերֆեյսի վերևի ձախ մասում սեղմելով «Նախատիպ»: Ընտրեք հիմնական էկրանը, կապույտ սլաքը քաշեք որոնման էկրանին և կհայտնվի ելնող վահանակ:
22. Ձայնային հրաման
Կարգավորիչը փոխեք Ձայնի և մուտքագրեք «որոնում» բառը որպես ձայնային հրաման ՝ դա կառավարելու համար: Գործողությունը փոխեք Auto-Animate- ին և հեշտացնել Snap- ին: Տևողությունը դարձրեք 1.5s: Որոնման էկրանին կտտացրեք հետևի կոճակին և կապույտ սլաքը հետ քաշեք դեպի «հիմնական» էկրան: Պարզապես փոխեք Ձգանը և հպեք:
23. Փորձիր նախատիպը
XD ինտերֆեյսի վերևի աջ մասում կա խաղի կոճակ: Կտտացրեք այն և գործող նախատիպը էկրանին կհայտնվի: Սկզբնական էջում պետք է պահեք «Տիեզերք» տողը, մինչ դուք խոսում եք ձայնային հրամանի «որոնումը»: Երբ դուք բաց եք թողնում Space բարը, այն ձեզ կտանի դեպի հաջորդ էկրան և կակտիվացնի գրաֆիկական միջերեսը դիրքում:
24. Վերադառնալ
Անցումը գործարկելուց հետո կարող եք սեղմել հետևի կոճակը ՝ հիմնական էկրան վերադառնալու համար: Փակեք նախատիպը և կտտացրեք որոնման էկրանին, այնուհետև կտտացրեք կապույտ սլաքին աջ (մի քաշեք): Փոխեք ձգանը ժամանակի վրա, հետաձգումը դարձրեք 0-ներ և գործողությունը սահմանեք խոսքի նվագարկում: Դարձեք ելույթը ՝ «հասանելի խցիկների որոնման արդյունքները»:
25. Խոսքի հաստատում
Փորձեք սա հիմա խաղալու կոճակի միջոցով ՝ որոնման ձայնային հաստատում լսելու համար: Փակեք նախատիպը, երբ փորձեք դա: Մեկ այլ էկրան է ստեղծվելու, այնպես որ եկեք նորից կտտացրեք XD ինտերֆեյսի վերևի ձախ մասում գտնվող «Դիզայն» տեսքը: Սեղմեք որոնման էկրանին ՝ կտտացնելով անունը, ապա պատճենեք և տեղադրեք այն:
26. Պատկերի մասշտաբավորումը
Վերանվանել նոր էկրանի «տնակը»: Կրկնակի կտտացրեք «ձախ խցիկ» շերտի պատկերին: Անկյունների բռնակները չափափոխեք այնպես, որ այն լցնի էկրանը, այնուհետև տեղադրեք պատկերը ներսից այնպես, որ այն ծածկի այդ էկրանը: Կտտացրեք որոնման արդյունքների տեքստին և տեսքը հասցրեք զրոյի ՝ այն տեսադաշտից հեռացնելու համար:
27. Էկրանի նոր տարրեր
Կրկնակի կտտացրեք «Անտառային տնակ» տեքստին, քանի որ այն խմբի մաս է: Տեքստի չափը մեծացրեք 26 պիքսել և մի փոքր տեղափոխեք էկրանի վրա: Ավելացրեք էկրանին Helvetica Neue Medium- ի տեքստը 14 պիքսել չափսով և այն դրեք սպիտակ ՝ ֆոնին առանձնանալու համար: Վերնագրի տակ գծային գործիքով ավելացնել սպիտակ գիծ:
28. Ստեղծեք կոճակ
Ուղղանկյուն գործիքի միջոցով դիզայնի ներքեւի մասում գտնվող էկրանին ուղղանկյուն նկարեք: Քաշեք անկյունային բռնակներով ՝ այս ձևին կլոր անկյուններ տալու համար: Սրան ավելացրեք «Պահուստ» բառը ՝ օգտագործելով պահպանված նիշերի ոճը Helvetica Neue- ի ակտիվների վահանակում ՝ խտացրած տառերով:
29. Տեղափոխել նախատիպի ռեժիմ
Դիզայնի բոլոր տարրերն այժմ գործում են հավելվածի ամբողջ դիզայնի համար: Տեղափոխեք «Նախատիպ» ռեժիմ ՝ վերին ձախ անկյունում կտտացնելով «Նախատիպ» բառը: Որոնման էկրանին կտտացրեք նկարի և տեքստի «անտառային տնակ» խմբին: Կապույտ բռնակն այստեղից քաշեք դեպի «տնակի» էկրան:
30. Անիմացիայի պարամետրեր
Էկրանների միջև անցում կատարելու ելնող վահանակում ընտրեք «Հպեք» -ը որպես «Ձգան», այնուհետև կատարեք «Գործողություն ինքնագործարկվող»: Շարունակեք թեթևացնել որպես Snap, բայց դրա տևողությունը կրճատեք 0.6 վայրկյանում: Սա երաշխավորում է, որ անիմացիան չի քաշվում. Առաջին էկրանի երկրորդ էկրանին շարժումը մեծ շարժում ուներ, որը պահանջում էր ավելի երկար անցում:
31. Կապեք հետևի կոճակը
Այժմ ընտրեք հետի կոճակը վերջնական էկրանից և կապույտ սլաքը քաշեք այս հետևից դեպի «որոնման» էկրան: Նախորդ անցումից կատարված բոլոր պարամետրերը պետք է հիշել: Այժմ դուք պատրաստ եք առաջ գնալ և փորձարկել դա ՝ կտտացնելով խաղալու կոճակին:
32. Ավտոմատ կենդանացնել
Այն, ինչ դուք հիմա կտեսնեք ավտոմատ անիմացիայի միջոցով, այն է, որ պատկերն ընդլայնվում է ՝ էկրանը լցնելու համար, և այլևս անհրաժեշտ տարրերը կթողանան, մինչ նոր տեքստը խամրելու է: Հետդարձը պատահում է: Սա լավ միջոց է տեսնում `տեսնելու, թե ինչպես է երեք-էկրանների վրա աշխատում ինքնագործարկվող անիմացիան:
33. Փրկեք նախագիծը
Լռելյայն, ձեր նախագիծը պետք է ավտոմատ կերպով պահվի Creative Cloud- ում, բայց լավ գաղափար է պատճենը պահել ձեր սեփական կոշտ սկավառակի վրա, եթե խնդիրներ առաջանան: Կտտացրեք Ֆայլ> Պահպանել, փոխեք գտնվելու վայրը ձեր սեփական համակարգչում և անվանեք նախագիծը հարմար անունով:
34. Նախագծի փոխանակում
Նախատիպավորման ամբողջ իմաստը նախագիծը այլ մարդկանց վրա փորձարկելն է: Բարեբախտաբար, XD ինտերֆեյսի վերևի աջ մասում կա կիսելու կոճակ, որը սա քամի է դարձնում: Կտտացրեք համօգտագործման կոճակին, և հայտնվող թողարկման ընտրացանկում ընտրեք Կիսվել վերանայման համար:
35. Հրապարակել նախատիպը
Հաջորդ էկրանին ձեզ ասում են, որ ավտոմատ անիմացիոն աջակցությունը դեռ հասանելի չէ համացանցի համար, բայց շուտով կգա: Կտտացրեք Ստեղծեք հանրային հղում և այնուհետև կտտացրեք վերևի աջում գտնվող հղմանը ՝ վեբ զննարկիչում հանրային հղումը այցելելու համար: Նախատիպի հետ ձայնային հրամանն օգտագործելու համար հարկավոր է ներքև պահել Space տողը:
36. Տեսանյութի վարկած
Մեկ այլ նախատիպը կարելի է տարածել `գործողության մեջ գրանցելով ինտերֆեյսը: Կտտացրեք համօգտագործման կոճակին և ընտրեք Record Video: Սա կբացի պատուհան, և երբ այն փակեք, ձեզ կառաջարկվի էկրանի ձայնագրությունը որպես MP4 ֆայլ պահպանել, ինչը նաև ձեր նախատիպը կիսելու օգտակար միջոց է:
Այս հոդվածն ի սկզբանե տպագրվել է ստեղծագործական վեբ ձևավորման ամսագրի 285 համարում Վեբ դիզայներ. Գնեք 285 համարն այստեղ կամ բաժանորդագրվել Web Designer- ին այստեղ.
