Adobe- ի փորձը հնարքներ, խորհուրդներ եւ տեխնիկա

01-ը 07-ը

Adobe- ի փորձը հնարքներ, խորհուրդներ եւ տեխնիկա

Երբ Adobe- ը ներկայացրեց « Փորձը դիզայնը» որպես հրապարակային նախադեպ , ընկերությունը միաժամանակ երկու հիանալի զարթոնք է իրականացրել: Նախ, նրանք առաջ են քաշում նախատիպային ծրագրային ապահովման շուկայի տարածքը: Երկրորդ, նրանք հնարավորություն են ստեղծում օգտագործողների համար խաղալ «աշխատանքի առաջընթացով» եւ թույլ են տալիս օգտվողներին ազդել այդ առաջընթացի վրա: Այժմ, երբ դիմումը հասանելի է մի քանի ամսվա ընթացքում, ես մտածեցի, որ դա լավ ժամանակ կլիներ կիսել որոշ փորձի նախագծային հնարքներ, խորհուրդներ եւ տեխնիկա:

Բայց առաջին հերթին, դուք կարող եք հետաքրքրվել, թե ինչ է նշանակում նախատիպի ծրագրակազմը: Այս տարածքի խոշոր խաղացողներից են Proto.io, սկզբունք, UXPin, Atomic.io , փորձի նախագծում եւ InVision: Ի տարբերություն ծրագրերի, ինչպիսիք են Sketch 3, Photoshop եւ Illustrator, որտեղ տեղադրվում են ստատիկ նմուշներ, այս գրաֆիկական խմբագիրները ներդնում են ինտերակտիվություն, միջնորդություն եւ այսօրվա բջջային եւ վեբ նախագծման տարածություններում տարածված այլ հատկանիշներ:

Բջջային բջջային եւ անխուսափելի լազերային նմանատիպ ուշադրության կենտրոնում օգտագործողի վրա այն դյուրին չէ, որ դիզայների համար մի քանի նմուշներ քաշեք, քաշեք մի քանի կոմպոզիցիաներ, ապա թողնեք ծրագիրը կամ վերբեռնեք այն վեբ սերվերի վրա: UI / UX աշխատանքի արդյունքը հիմնականում փոխել է իրերը: Գործընթացի ամեն քայլը, օգտագործողը, էսքիզները, wireframes, mockups- ը եւ նախատիպերը հայտնաբերելու համար ենթարկվում են օգտագործողների լայն փորձարկման:

Դա վերջին փուլն է `նախատիպը, որտեղ ցավային կետերը հայտնաբերվել են եւ ամրագրվել նախքան ծրագրի վերջնական արդյունքը: Սա այն է, որտեղ ինտերակտիվությունը, միջնորդությունը, էկրանների անցումը եւ ամեն ինչի տեղադրումը էկրանին այնքան կարեւոր են: Խնդիրները եւ խնդիրները չեն կարող պարզապես ցուցադրվել որպես ստատիկ պատկեր կամ բացատրվել բացատրություններով: Ի վերջո, այդ արտադրանքը իրական մարդկանց համար է: Փոխարենը, այս ամենը տեղափոխելու փոխարեն, նախատիպի գործընթացը գնալով ավելի շատ է կատարվում գրաֆիկական ծրագրերի միջոցով, որոնք նախատեսված են այդ նպատակով: Ավելի հեշտ է սխալը շտկել, փոխել պատկերը, վերագրել մի տեքստ, տեղափոխել կոճակը եւ այլն, օգտագործելով տեսողական խմբագիր, քան անընդհատ վերագրանցելու եւ կարգաբերելու կոդը:

Փաստորեն, այս ծրագրաշարը դարձել է այսօրվա «Արագ դիզայնի նախագծման եւ զարգացման միջավայրում» հիմնական բաղադրիչը:

Դրանից հետո եկեք մի քիչ զվարճանք փորձի նախագծման հետ:

02-ից 07-ը

Ստեղծեք նպատակակետը Pin Adobe Apps- ի դիզայնի պարզ շրջանակով

XD- ի մի կոկիկ կողմը դրա վեկտորային գծագրման գործիքների օգտագործումը: Հնարավոր չէ գտնել պատկերակ: Ոչ մի խնդիր. Roll ձեր սեփական. Ահա թե ինչպես:

1. Ընտրեք Ellipse գործիքը եւ սեղմված Ընտրանք / Alt- Shift ստեղներով, նկարեք շրջանակ:
2. Ընտրված շրջանակով սահմանեք Fill color- ի FF0000 եւ սահմանը հատկությունների մեջ «ոչ մեկը»:
3. Կրկնակի սեղմեք շրջանակը, ցույց տալ խարիսխի միավորները: Քաշեք ներքեւի խարիսխը ներքեւ:
4. Կրկնակի սեղմեք ընտրված խարիսխ կետին եւ կորերը փոխարինվում են գծերով:
5. Draw մեկ այլ փոքր շրջանակ, սպիտակ լցոնով եւ ոչ մի գին: Տեղափոխեք այն պաշտոնում եւ ընտրեք գամասեղը եւ շրջանակը: Հատկացման վահանակում Հատկերի վերեւում սեղմեք Հորիզոնական կենտրոնի կոճակը եւ Pin- ը ստեղծվում է:

03-ից 07-ը

Ստեղծեք Adobe- ի փորձի դիզայնի հիմք բլուր

Ընդհանուր առմամբ, ֆոնային պատկերով տեքստ կամ այլ բովանդակություն ունենալու համար: Խնդիրն այստեղ պատկերն է, ավելի հաճախ, քան ոչ, այն գերազանցում է դրա բովանդակությունը: Այս խնդրի լուծման միջոցներից մեկը ֆոնային պատկերն է խեղաթյուրել: Դուք կարող եք blur պատկերը Photoshop- ում կամ այլ կերպարների խմբագրման ծրագրերում, բայց դա մի քիչ անարդյունավետ է, հատկապես XD- ն այժմ կարող է կարգավորել այս խնդիրը: Ահա թե ինչպես:

1. Ստեղծեք նոր աշխատասեղան եւ ավելացրեք ձեր ֆոնային պատկերը:
2. Ընտրեք ուղղանկյուն գործիք ` նիշը պատկերի վրա ուղղանկյուն նկարել: Ընտրված Ուղղանկյունի միջոցով ընտրեք Լրացրեք Սպիտակ եւ Ներկը `Ոչ:
3. Ընտրված Ուղղանկյունի ընտրությամբ ընտրեք Պատկերի լույսը հատկությունների վահանակում: Երեք թղթապանակները Blur Amount, Brightness եւ Opacity- ն են: Ահա թե ինչ են անում.

• Բլուրի գումարը. Ձեւի տակ գտնվող պատկերի աննկատելիությունը: Առավելագույն արժեքը +50 է:
• Պայծառություն. Պատկերում կարեւոր դրվագներ եւ ստվերներ: Նվազագույն արժեքը `-50, առավելագույն արժեքը` +50:
• Անթափանցիկություն. Ազդում է ձեւի թափանցիկության եւ պատկերի տեսանելիության վրա: Արժեքները կազմում են 0% -ից մինչեւ 100%:

Եթե ​​դուք իսկապես ուզում եք «անցնել բաները», փոխեք ձեւի գույնը եւ անպաշտպան արժեքով խաղադրեք պատկերի «տեսքը» փոխելու համար:

04-ից 07-ը

Adobe Flash- ի դիզայնի մեջ ստեղծեք բծախնդրություն

Ընդհանուր դիզայնի խնդիրը ինտերֆեյսի տարրերի տարրերը պետք է լինեն ընդհանուր գույն, բայց կորցնում են ֆոնային պատկերը կամ պինդ գույնը: Խնդիրը մաքրություն է: A scripper- ն մի քիչ անթափանց gradient է տեղադրված միջեւ ինտերֆեյսի տարր եւ ֆոնային. Դա հեշտ է իրականացնել XD- ում: Ահա թե ինչպես:

1. Ստեղծեք ձեր աշխատասեղան XD- ում, ավելացրեք պատկեր եւ պատճենեք եւ տեղադրեք ինտերֆեյսի տարրերը պատշաճ UI Kit- ից File> Open UI Kit ... -ին: Վերոնշյալ պատկերում լուսանկարը դարձնում է Կարգավիճակը եւ App Bar- ը դժվար է տեսնել:
2. Ընտրեք ուղղանկյուն գործիքը եւ ուղղեք ուղղանկյուն: Հատկություններ Panel- ում ընտրեք Լրացրեք եւ ընտրեք Գրադիենտ գունային ընտրիչից փակցված ներքեւից: Սահմանեք գրադիենտ գույները Սեւ եւ Սպիտակ: Սահմանեք A արժեքը `անփույթություն` մինչեւ 60% , իսկ Սպիտակ արժեքը `0%:
3. Ընտրված Ուղղանկյունով ընտրեք Ընտրեք> Կարգավորել> Ուղղեք Հետ : Միջերեսի տարրերն այժմ երեւում են պատկերը:

05-ից 07-ը

Adobe- ի փորձի դիզայնի պատկերների ստեղծում

Ընդհանուր Դիզայն Պատկերը հայտնաբերվում է Chat ծրագրերում, որտեղ մարդիկ խոսում են միմյանց հետ, իսկ խոսողի նկարը էկրանին է: Այս Անձնագրերը սովորաբար պատկերներ են, որոնք դիմակավորված են: Դա XD- ում մահացած է: Ահա թե ինչպես:

1. Դուք սկսում եք պատկերից եւ շրջանակից կամ այլ ձեւաչափից: Դուք կարող եք լրացնել շրջանակը ցանկացած գույնով: Այն, ինչ ձեզ հարկավոր չէ, պետք է ավելացնել ինսուլտի գույնը: Այն կվերանա, երբ դուք ստեղծեք ազդեցություն, եւ ինչու անհանգստացեք: Եթե ​​դուք պետք է զննել շրջանակը, պատճենեք այն clipboard- ին:
2. Տեղափոխեք շրջանակը նկարին եւ ընտրեք ինչպես պատկերը, այնպես էլ շրջանակը: Ընտրված բոտերի օբյեկտներով ընտրեք Object> Դիմակ ձեւով : Երբ մկնիկը ազատում եք, այն ստեղծվում է: Այստեղից կարող եք չափափոխել այն:
3. Եթե ​​դուք պետք է ավելացնել ինսուլտի, տեղադրեք շրջանակը, նստած ձեր clipboard վահանակի վրա: Ընտրված օրինակով անջատեք հատկությունները Հատկություններ եւ ավելացրեք հարվածի գույնը եւ լայնությունը: Նրանց դասավորելու համար ընտրեք երկու օբյեկտները եւ կտտացրեք հատկությունների վահանակի վերեւում Հարթեցնել ընտրանքներում Կենտրոնի Հարթեցնել կոճակները:
4. Եթե ​​ցանկանում եք տեղափոխել լուսանկարը շուրջ դիմակ, կրկնակի սեղմեք դիմակը: Սա ցույց կտա պատկերը եւ դիմակ ձեւը: Սեղմեք պատկերի վրա եւ քաշեք այն պաշտոնում: Երբ դուք ազատում եք մկնիկը, ապա պատկերը կլինի իր նոր պաշտոնում դիմակի ներսում:

06-ից 07-ը

Խաղալ Adobe փորձի դիզայնի արվեստանոցների հետ

Փորձի դիզայնի արվեստանոցները պարզապես այնտեղ չեն, որ բովանդակություն տեղադրեք: Նրանք նույնպես կարող են շահարկել: Ահա մի քանի բան կարող եք անել.

1. Եթե ​​Ձեզ անհրաժեշտ է դաշտի լանդշաֆտային եւ դիմանկարային տարբերակները, կրկնօրինակեք աշխատասեղանը եւ ընտրված կրկնօրինակով կտտացրեք Հատկությունների վահանակի բնապատկերի կոճակը: Արտատունը փոխվելու է Լանդշաֆտային կողմնորոշմանը: Եթե ​​պատկերակն ունի բովանդակություն, կտտացրեք սանդղակի անունը եւ ցուցադրման հատկությունները կհայտնվեն Properties Panel- ում:
2. Արտատիպի գույնը ավելացնելու համար, եւ դրա համար նախագիծը ընտրեք սանդղակը եւ կտտացրեք Fill color chip- ը Properties Panel- ի Արտաքին տեսք բաժնում: Մուտքագրեք գույնի տասնվեցերորդ արժեքը եւ սեղմեք + նշանը: Գույնը կավելացվի որպես Custom Color: Այլ գույնի կիրառելու համար ընտրեք օբյեկտ եւ սեղմեք Custom Color chip- ը գույնը կիրառելու համար:
3. Արտատախտակները կարելի է ուղղահայացորեն շարժվել: Դա անելու համար ընտրեք աշխատասեղանը եւ փոխեք իր բարձրությունը կամ Properties Panel- ում կամ ներքեւի մասում ներքեւում քարշեքով: Առանձնահատկությունների վահանակի շարժվող տարածքի մեջ ընտրեք ուղղահայաց ներքեւի ցանկից եւ մուտքագրեք տեսադաշտի բարձրությունը էկրանին: Այդ կապտած կապույտ գիծը ցույց է տալիս ձեզ տեսադաշտի ստորին հատվածը: Փորձարկելու համար սեղմեք Խաղալ կոճակը եւ ոլորել հեռավորությունը: Ոլորելն անջատելու համար ընտրեք Ոչ Շարժվող փոփարկչի մեջ:

07-ից 07-ը

Խմբագրել բջջային UI Kit Adobe- ի փորձի նախագծում

Դիզայնի փորձը պարունակում է UI Kit, iOS- ի, Android- ի եւ Windows- ի UI- ի զարգացման համար: Երբ դուք առաջին անգամ բացեք դրանք, կարող եք մտածել, որ դրանք բավականին լավ են տեղակայված: Ոչ այնքան, որքան այդ ամենի բիտերը եւ կտորները լիովին վերափոխվում են: Եկեք պարզենք Android վիդեոկրեսի կառուցումը:

1. Դուք սկսում եք ընտրել ցուցադրական գործիքը եւ ընտրել Android Mobile- ը Properties Panel- ի Google բաժնում :
2. Ընտրեք Պատկեր> Բաց UI Kit> Google Նյութ : Սա բացում է Նյութերի Դիզայն UI Kit: Ընտրեք Magnifying Glass- ը եւ Screen Tips Guide- ը : Ինձ դուր է գալիս սկսել այս մեկը, քանի որ այն տալիս է ինձ ուղեցույցներ ինտերֆեյսի տարրերի պատշաճ էկրանին տեղադրելու համար: Եթե ​​դուք սեղմեք «Կապույտ սանդղակներից», կտեսնեք, որ այն փակ է: Սեղմեք նրանց կախված կողպեքը, այն բացելու համար : Ներկայացրեք գործադարը եւ ընտրության պատճենը clipboard- ին: Վերադարձեք ձեր փաստաթուղթը եւ կցեք ձեր էկրանին:
3. Սեղմեք մեկ անգամ, հավելվածի գագաթին, որը վերեւի մասում աշխատասեղանին: Ուշադրություն դարձրեք, թե ինչպես կարող եք ընտրել այն: Ընտրեք Օբյեկտ> Խնամք> Բլեք դեպի ճակատ: Ձեր ընտրությունը այժմ Screen Guides- ից վեր է: Սա պետք է ասեմ, որ էկրանին գտնվող տարրերից յուրաքանչյուրը կարող է խմբագրվել:
4. Կրկնակի սեղմեք Կարգավիճակի սանդղակը վերեւում, իսկ Properties Panel- ում եւ Գունային գույնը `455A64 : Կրկնակի սեղմեք App Bar- ը եւ այն լրացրեք 607D8B: Սա պետք է ասի, որ UI- ի հավաքածուի յուրաքանչյուր տարրը կարող է խմբագրվել `ծրագրի գունային բնութագրերին համապատասխանելու համար:
5. Ինչ վերաբերում է սրբապատկերներին: Ահա թե ինչպես փոխել իրենց գույնը: Կրկնակի սեղմեք սրտի ընտրությունը: Եթե ​​նայեք Properties Panel- ը, կարող եք ենթադրել, որ չեք կարող խմբագրել ընտրությունը: Ոչ այնքան: Կրկնակի սեղմել սրտին եւս մեկ անգամ : Հատկությունները բաց են եւ փոփոխում եք FF0000- ին: Կրկնեք այս կրկնակի սեղմումով հնչյունը մնացած պատկերիկների եւ տեքստի համար: