UI- ի դիզայնի վերջնական ուղեցույցը

Բովանդակություն

• 01. Ընտրեք ձեր տպագրությունը
• 02. Ընտրեք ճիշտ պալիտրա
• 03. Ոճի հղումներ և կոճակներ
• 04. Ստեղծեք ձեր բաղադրիչները
• 05. Փաստաթղթավորեք և համագործակցեք

Ի՞նչ է օգտվողի ինտերֆեյսի դիզայնը: Ավելի լավ հարց կլինի. Ի՞նչ է իրականում օգտագործվում ինտերֆեյսի ձևավորման մեջ: Գեղագիտությու՞ն: Օգտագործելիությու՞նը: Հասանելիությու՞ն: Բոլոր նրանց? Ինչպե՞ս են այս բոլոր գործոնները միավորվում ՝ օգտագործողի օպտիմալ փորձը հնարավոր դարձնելու համար, և որն առաջին հերթին պետք է լինի:

Հասանելիությունը միշտ պետք է լինի առաջին հերթին ՝ հիմքեր դնելով օպտիմալ օգտագործման համար (այստեղ կօգնի լավագույն վեբ կայքերի ստեղծողը): Եվ հետո, երբ UI- ն ինչպես մատչելի է, այնպես էլ օգտագործելի, այն արդեն պետք է բավականին պատշաճ տեսք ունենա գեղագիտական ​​տեսանկյունից (UI- ի նախագծման գործիքները կօգնեն այստեղ): Ապա, որպեսզի համոզվեք, որ ձեր դիզայնը գործում է բոլոր մակարդակներում, դուք պետք է այն մանրակրկիտ փորձարկեք, ինչը կարող եք անել օգտագործողի փորձարկման լավագույն գործիքների մեր ընտրության դեպքում: Եկեք ավելի սերտ նայենք նմուշների մեծ մասի հիմնարար տարրերին և այն, ինչ կարելի է անել, տեսողական հետեւողականություն ապահովելու համար:

01. Ընտրեք ձեր տպագրությունը

Հիանալի տպագրությունը (ինչպես դիզայնի շատ ասպեկտներ) հասնում է մատչելիության: Տեսողական ձևավորումն, անշուշտ, ավելացնում է օգտագործողի ընդհանուր փորձը, բայց օրվա վերջում օգտվողները փոխազդում են UI- ի հետ ՝ այն չտեսնելով որպես արվեստ: Ընթեռնելի տառերը հանգեցնում են պարզության, իսկ ընթեռնելի բառերն օգնում են օգտվողներին արդյունավետորեն մարսել բովանդակությունը: Երկուսն էլ ավելի կարևոր են, քան ցանկացած տեսողական գեղագիտություն:

Այնուամենայնիվ, լավ մշակված տպագրությունը դեռ կարող է գեղագիտական ​​առումով բավարարել: Սև սպիտակ Helvetica- ն (կամ նմանատիպ տառատեսակը) կարող է գեղեցկություն դառնալ միայն մի քանի պարզ տպագրական բարելավումներից հետո: Լրացումներ ասելով ՝ մենք հասկանում ենք տառատեսակի չափը, տողի բարձրությունը, տառերի միջև տարածությունը և այլն, այլ ոչ թե տառատեսակը կամ տեքստի գույնը:

«Գեղեցիկ» տիպագրությունն իրականում տգեղ է, երբ անընթեռնելի է, քանի որ հիասթափությունը միշտ հաղթահարում է գեղագիտությունը: Հիանալի դիզայնը հավասարակշռված և ներդաշնակ է:

UI ձևավորման շատ ասպեկտների նման, մատչելիությունն ու գեղագիտությունը հավասարակշռելու համար ճշգրիտ պատկերների ճշգրտումը մարտահրավեր չէ: Խնդիրը հետևողականությունն է պահպանել ամբողջ դիզայնի ընթացքում: Հետևողականությունը հստակ հիերարխիա է հաստատում տարբեր կարևորության տարրերի միջև, ինչը, իր հերթին, օգնում է օգտվողներին ավելի արագ հասկանալ UI- ն և նույնիսկ ավելի արդյունավետորեն մարսել բովանդակությունը:

Ինչ վերաբերում է ընթեռնելիությանը և ընթեռնելիությանը, WCAG 2.0 վեբ բովանդակության մատչելիության ուղեցույցներով սահմանված տառատեսակի նվազագույն ընդունելի չափը 18pt է (կամ 14pt տառերով): Տառատեսակի օգտագործման լավագույն չափը մեծապես կախված է տառատեսակից, բայց կարևոր է հաշվի առնել տեսողական հիերարխիան և այն, թե ինչպես է այս բազային չափը տարբերվում իրենից ամփոփագրերից և վերնագրերից (այսինքն հ 1>, h2>, h3>).

Ձեր ընտրովի UI ձևավորման գործիքով (մենք կօգտագործենք InVision Studio) ստեղծեք տեքստի շարքերի շարք (Տ) և այնուհետև հարմարեցնել բոլոր չափերը հետևյալ ձևանմուշի հետ փոխկապակցված լինելու համար.

• հ 1>44px
• h2>: 33 հատ
• h3>: 22 հատ
• p>: 18 հատ

InVision Studio- ի (և այլ UI նախագծման բոլոր գործիքների) միջոցով դա արվում է ոճերը ճշգրտելով ՝ օգտագործելով տեսուչի վահանակը աջ կողմում:

Հաջորդը ընտրեք ձեր տառատեսակը, բայց զգուշացեք, քանի որ այն, ինչ կարող եք նկատել որոշ տառատեսակների հետ, այն է, որ 18 px է պ> և 22 հատ h3> այնքան էլ տարբեր չի թվում: Մենք ունենք երկու տարբերակ ՝ կսմթել տառատեսակի չափերը կամ վերնագրերի համար համարել այլ տառատեսակ: Գնացեք վերջինիս հետ, եթե կանխատեսում եք, որ ձեր դիզայնը ծանրաբեռնված կլինի տեքստով:

Հիշեք, որ.

• Տեսողական UI- ի ձևավորումը հաճախ աղիքային զգացողություն է
• Ոչինչ չի որոշվում; ամեն ինչ ենթակա է փոփոխության

Գծի բարձրությունը

Տողի օպտիմալ բարձրությունը ապահովում է, որ տեքստի տողերը ունենան բավականաչափ հեռավորություն նրանց միջև ՝ ընթերցանության պատշաճ մակարդակներին հասնելու համար: Սա ավելի ու ավելի է ճանաչվում որպես «ստանդարտ». Google- ի Lighthouse Audit գործիքն այն նույնիսկ առաջարկում է որպես ձեռքի ստուգում (կամ նույնիսկ դրոշ, եթե տեքստը պարունակում է հղումներ, որոնք գծի ենթաօպտիմալ բարձրության արդյունքում կարող են շատ մոտ լինել իրար):

Եվս մեկ անգամ, WCAG- ն օգնում է մեզ այս հարցում լուծել, հայտարարելով, որ տողի բարձրությունները պետք է լինեն տառատեսակի չափը 1,5 անգամ: Այսպիսով, ձեր գծի (կամ դրա նման) տակ գտնվող UI նախագծման գործիքի մեջ պարզապես բազմապատկեք տառատեսակի չափը `առնվազն 1.5-ով: Որպես օրինակ, եթե մարմնի տեքստը 18px է, ապա գծի բարձրությունը կլինի 27px (18 * 1.5 - Դուք նաև կարող եք կատարել մաթեմատիկայի գործողությունը անմիջապես Տեսուչում): Սակայն կրկին զգույշ եղեք. Եթե 1.6x ավելի լավ է զգում, օգտագործիր 1.6x: Հիշեք, որ տարբեր տառատեսակները տարբեր արդյունքներ կտան:

Դեռ վաղ է մտածել մեր նախագծում իրական տվյալներ օգտագործելու մասին, բայց, համենայն դեպս, մենք դեռ պետք է օգտագործենք որոշակիորեն իրատեսական տվյալներ (նույնիսկ lorem ipsum): InVision Studio- ն ունի հայրենի իրական տվյալների ծրագիր, որը կօգնի մեզ տեսնել, թե իրականում ինչպիսին կարող է լինել մեր տպագրությունը:

Պարբերությունների հեռավորությունը

Պարբերությունների միջև տարածությունը այն ոճը չէ, որը մենք կարող ենք հայտարարել, օգտագործելով InVision Studio- ի Տեսուչը: Փոխարենը, մենք պետք է ձեռքով դասավորենք շերտերը ՝ օգտագործելով Smart Guides (): Տողի բարձրության նման, կախարդական բազմապատկիչը 2x է (տառատեսակի կրկնակի չափ): Որպես օրինակ, եթե տառատեսակի չափը 18px է, ապա հաջորդ տեքստային բլոկ մուտք գործելուց առաջ պետք է լինի առնվազն 36px տարածք: Նամակների հեռավորությունը պետք է լինի առնվազն 0,12:

Այնուամենայնիվ, մենք պետք չէ այս մասին անհանգստանալ, քանի դեռ չենք սկսել բաղադրիչներ ստեղծել:

Համօգտագործված ոճեր

Եթե ​​ձեր UI դիզայնի գործիքն աջակցում է դրան (InVision Studio- ն դեռևս չունի), հաշվի առեք, որ այս տպագրական ոճերը վերածվում են «Shared Styles» - ի, որպեսզի դրանք արագորեն վերաօգտագործվեն ՝ ապահովելով տեսողական հետևողականություն: Սովորաբար դա իրականացվում է Տեսուչի միջոցով:

02. Ընտրեք ճիշտ պալիտրա

Ձեր դիզայնի համար կատարյալ գույների ընտրությունը գերազանցում է գեղագիտությունը. Այն կարող է տեղեկացնել ձեր կայքի ամբողջ հիերարխիան:

Երբ խոսքը վերաբերում է UI ձևավորմանը, գույնը սովորաբար առաջին բաներից մեկն է, որով մենք սիրում ենք շփվել, բայց մեզ սովորեցրել են, որ տեսողական ձևի մեջ սուզվելը վատ բան է: Սա, անկասկած, ճիշտ է, սակայն երբ խոսքը վերաբերում է տեսողական հետևողականությանը, գույնը պետք է լինի հիմնական մտահոգությունը, քանի որ այն խաղում է այլ դերեր:

UI- ի դիզայնի գույնը կարող է շատ արդյունավետ լինել, բայց քանի որ որոշ օգտվողներ (իրականում շատերը) տառապում են տեսողության տարբեր տեսակի խանգարումներից, դա միշտ չէ, որ հուսալի է: Ասելով, դա պարտադիր չէ, որ օգտագործվի հատուկ գույնի մասին, այլ գույնի տեսակի: Դա չի կարող ճիշտ լինել, երբ խոսքը վերաբերում է բրենդին, քանի որ գույնն օգտագործվում է այս առումով հուզական ազդեցության համար, բայց UI- ի ձևավորման մեջ գույնը օգտագործվում է նաև մտադրությունը, իմաստը և, իհարկե, տեսողական հիերարխիան հաղորդակցելու համար:

01. Սթարքը
Stark plugin- ը համատեղելի է Sketch- ի և Adobe XD- ի հետ և օգնում է ձեզ ստուգել գույների հակադրությունը և ուղղակիորեն կտավից նմանեցնել գույների կուրությունը: Figma- ի և InVision Studio- ի աջակցությունը շատ շուտով:
02.Գույներ
Colors- ը 90 գույների համադրությունների շարք է, որոնք ունեն համապատասխան քանակությամբ գունային հակադրություն `WCAG 2.0 ուղեցույցները բավարարելու համար. Նրանցից ոմանց հաջողվում է նույնիսկ բավարարել AAA ստանդարտը:
03. A11y նախագիծ
A11y նախագիծը հսկայական հանգույց է բոլոր մատչելիության հետ կապված բոլոր իրերի համար: Այն պարունակում է ռեսուրսներ, գործիքներ, խորհուրդներ, ձեռնարկներ և ստեղծվել է Stark plugin- ի ստեղծողի կողմից և ֆինանսավորում է ստանում InVision- ից:

Գույնի երեք տեսակները

Գույները նշանակություն ունեն, ուստի կարևոր է դրանցից շատ չլինել: Չափից շատ իմաստներ բերում են ավելի շատ բաների, որոնք օգտվողը պետք է հասկանա և հիշի. Էլ չենք ասում գույների ավելի շատ համադրություններ, որոնց համար մենք պետք է անհանգստանանք: Ընդհանուր առմամբ, սա կլինի առաջարկվող ձևաչափը.

• Կոչի գործողության գույն (նաև հիմնական ապրանքանիշի գույն)
• Չեզոք մուգ գույն (ավելի լավ UI տարրերի կամ մութ ռեժիմի համար)
• Վերոհիշյալ բոլորի համար մի փոքր ավելի բաց և մութ տատանում

Սա հնարավորություն է տալիս հետևյալին.

• Մութ ռեժիմը հեշտությամբ հասանելի կլինի
• Մեր CTA գույնը երբեք չի հակասի այլ գույների հետ
• Scenarioանկացած սցենարով մենք կկարողանանք շեշտել և ապաշեշտել

Կարգավորեք ձեր ներկապնակը

Ձեր նախընտրած UI նախագծման գործիքով ստեղծեք յուրաքանչյուր գույնի համար մեկ բավականին մեծ գեղարվեստական ​​տախտակ (հպեք A) (անունները ՝ «Ապրանքանիշ», «Չեզոք / լույս» և «Չեզոք / մութ»): Դրանից հետո յուրաքանչյուր գեղարվեստական ​​ցուցանակում ստեղծեք լրացուցիչ ավելի փոքր ուղղանկյուններ, որոնք ցուցադրում են գույնի ավելի մուգ և բաց տատանումները, ինչպես նաև մյուս գույներն իրենք:

Մենք կդիտարկենք մի փոքր ավելի բաց և մուգ, համապատասխանաբար, 10% լրացուցիչ սպիտակ և 10% լրացուցիչ սևեր: Ավարտելուց հետո յուրաքանչյուր գեղարվեստական ​​ցուցանակում ցուցադրեք տպագրական ոճերի պատճենը: Այս տեքստի շերտերի գույնը պետք է լինի չեզոք լույս, բացառությամբ չեզոք լույսի ստվարաթղթի, որտեղ դրանք պետք է լինեն չեզոք մութ:

Հակադրություն

Հաջորդը մենք պետք է ստուգենք մեր գույների գույնի օպտիմալ հակադրությունը: Կան մի շարք գործիքներ, որոնք կարող են դա անել, օրինակ ՝ Stark հավելվածը Sketch- ի և Adobe XD- ի համար կամ հակադրություն macOS- ի համար - այնուամենայնիվ, առցանց լուծումը, ինչպիսիք են Contrast Checker- ը կամ Color Contrast Checker- ը, լավ կլինի:

Ստուգեք գույների հակադրությունը յուրաքանչյուր համադրության համար և համապատասխանաբար շտկեք գույները: Եթե ​​վստահ չեք, թե ինչ գույներ օգտագործել, փորձեք օգտագործել Color Safe- ի առաջարկությունները:

03. Ոճի հղումներ և կոճակներ

Չափը

Կոճակները և հղումները, տպագրության նման, պետք է ունենան մի քանի փոփոխություններ: Ի վերջո, ոչ բոլոր գործողություններն են հավասար կարևորության, և, ինչպես ավելի վաղ քննարկեցինք, գույնը հաղորդակցության անհուսալի մեթոդ է, ուստի այն չի կարող լինել տեսողական հիերարխիայի վրա ազդելու հիմնական մեթոդը: Մենք նույնպես պետք է չափերով խաղենք:

Տեսողական մատչելիության թեստը օգտագործման պիտանիության թեստ է, որն օգտագործվում է ՝ որոշելու համար, թե արդյոք թակել են թիրախները սեղմելի: Համաժամեցեք դիզայնը Studio- ից Freehand (F), ստացված URL- ն ուղարկեք փորձարկողներին և թող նրանց շրջապատեն այն տարրերը, որոնք, նրանց կարծիքով, հնարավոր է սեղմել:

InVision Studio- ի ոչ օգտվողները կարող են օգտվել նաև Freehand- ից, բայց InVision Studio- ի օգտվողները կարող են իրենց դիզայնը Freehand- ի մեջ կատարել անթերի InVision Studio- ից, որը օգտվողներից տեսողական հետադարձ կապ ստանալու ամենաարագ և ամենաարդյունավետ միջոցն է:

Ընդհանրապես, մենք խորհուրդ կտայինք, որ կոճակի տեքստը հայտարարվի որպես 18px (նույնը, ինչ տեքստի տեքստը), բայց որ կոճակները իրենք ունեն չափի երեք տատանումներ.

• Նորմալ: 44px բարձրության վրա (կլորացված անկյուններ ՝ 5px)
• Մեծ: 54 կտոր բարձրություն (կլորացված անկյուններ ՝ 10 հատ)
• Լրացուցիչ մեծ. 64px բարձրության վրա (կլորացված անկյուններ ՝ 15px)

Սա հնարավորություն է տալիս մեզ որոշակի կոճակներ ավելի կարևոր դարձնել, առանց գույնի վրա կախվածության, ինչպես նաև բույն դնելու կոճակները (օրինակ, օգտագործել կոճակ ՝ նվազագույն տեսք ունեցող ձևի դաշտում):

Խորություն

Անկախ նրանից, թե թակել թիրախը կոճակ է, թե ձևի դաշտ, խորքերը մեծացնելու համար ստվերները պետք է օգտագործվեն, ուստի ՝ առաջարկում են փոխազդեցություն: Կոճակների և ձևի դաշտերի բոլոր տարբերակների համար մեկ ստվերային ոճը լավ է:

Ինտերակտիվություն

Կոճակի յուրաքանչյուր տեսակ տատանումների կարիք ունի `իր սավառնելու վիճակը ցույց տալու համար: Սա օգտվողին պարզաբանում է, որ այն, ինչ նա փորձել է անել, միանգամայն լավ է և ապահովում է, որ դրանք շարունակվեն առանց հապաղելու:

Սա իրականում տեսողական հետևողականության պահպանման ավելի բարդ ասպեկտներից մեկն է, որովհետև գույնը հաճախ նախընտրելի ոճ է, որը պետք է փոխվի, երբ բանը հասնում է պետություն ստեղծելուն: Բարեբախտաբար, այս վիճակի փոփոխությունները կարող են համեմատաբար նուրբ լինել, ուստի լավ է փոխել գույնը իր փոքր-ինչ ավելի բաց կամ մուգ տատանումներով `հենց դրա համար են նրանք: Սա վերաբերում է նաև հղումներին:

Սրա դեմ որոշումը կստիպի մեզ օգտագործել այնպիսի գույն, որը կա՛մ արդեն իսկ նշանակալից նշանակություն ունի, որի արդյունքում օգտվողները շփոթվում են, կա՛մ որոշում կայացնում ստեղծել մեկ այլ գույն: Երկրորդական գույնի օգտագործման որոշումը միանգամայն լավ է, բայց այն պետք է պահպանվի ոչ թե UI տարրերի, այլ գովազդային վիզուալների համար: Քիչն ավելին է (և ավելի հեշտ):

Մի մոռացեք կրկնել այս քայլը յուրաքանչյուր արվեստի տախտակի համար: Մի ընդգրկեք ապրանքանիշի ստվարաթղթի վրա նշված CTA ֆիրմային կոճակները. Հետագայում մենք կներկայացնենք, թե ինչ է պատահում, երբ որոշակի համակցություններ չեն գործում:

04. Ստեղծեք ձեր բաղադրիչները

Բաղադրիչները հսկայական ժամանակ են խնայում, և UI նախագծման բոլոր գործիքներն առաջարկում են այս հատկությունը (օրինակ ՝ Sketch- ում դրանք կոչվում են խորհրդանիշներ): Studio- ում մենք կարող ենք ստեղծել բաղադրիչներ ՝ ընտրելով բաղադրիչը կազմող բոլոր շերտերը և օգտագործելովԿ դյուրանցում

Օգտագործելով բաղադրիչներ

Wireframes- ը շատ օգտակար է, ոչ միայն բարձր օգտագործման UI նախագծելու համար, այլև պարզելու, թե երկար ժամանակ ինչ է պահանջելու մեր UI- ն: Դա, կարծես, ապագայից զերծ լինի:

Սա չի նշանակում, որ մենք պետք է նախագծենք բաղադրիչների մեծ քանակություն կամ պատրաստ լինենք ցանկացած հնարավոր սցենարի, բայց նշանակում է, որ մենք պետք է օգտագործենք «Ի՞նչ կլինի» վերաբերմունքը:

Օրինակ, եթե մեր մետաղալարերի շրջանակը պահանջում է 3x1 բաղադրիչ, բայց մենք գիտենք, որ բովանդակությունը քարի մեջ չէ դրված, մի փոքր մտորում կարող է մեզ մտածել. «Ի՞նչ կլինի, եթե այս բաղադրիչները վերջում լինեն 4x1»: Հիմնական կանոնն է. Դիզայնը միայն օգտագործողի կարիքների համար, որոնք արդեն գոյություն ունեն, բայց փորձում են լուծումները համեմատաբար ճկուն դարձնել: Հակառակ դեպքում, մենք կավարտենք մի շարք շատ խառնաշփոթ «դիզայնի պարտքով», որը հետագայում կընկնի:

Այժմ մենք կարող ենք նորից օգտագործել այս բաղադրիչը ՝ այն կտավին քարշ տալով Գրադարաններ> Փաստաթուղթ ձախ կողմում, չնայած հաշվի առեք, որ այս աշխատանքային հոսքը կարող է տարբեր լինել ՝ կախված ձեր UI գործիքից:

Ոճային ուղեցույցներ ստեղծելու այս մեթոդը (և, ի վերջո, ինքնին դիզայնը ստեղծելը) հատկապես լավ է աշխատում մոդուլային / քարտերի վրա հիմնված դասավորությունների հետ, չնայած որ «ընդհանուր տարածքները», ինչպիսիք են վերնագրերը, էջատակը և նավիգացիան, նույնպես բաղադրիչի հիանալի թեկնածուներ են:

Asիշտ այնպես, ինչպես մենք արեցինք մեր տպագրական ոճերը, գույներն ու կոճակները, մենք պետք է հիշենք, որ մեր բաղադրիչները ուշադիր կազմակերպենք:

Օգտագործելով մեր կանոնները

Ավելի վաղ մենք նկատողություն արեցինք ապրանքանիշի գույնի վերևում չօգտագործված ֆիրմային CTA կոճակները, քանի որ ակնհայտորեն CTA կոճակները պետք է առանձնանան մնացած ամեն ինչի մեջ: Այսպիսով, ինչպե՞ս վարվել բրենդային բաղադրիչ ստեղծելու մասին, մինչդեռ դեռ կարողանում ենք օգտագործել բրենդային CTA կոճակը: Ի վերջո, եթե մենք օգտագործում ենք չեզոք մութ կոճակներ, ասենք, նավիգացիոն կոճակների կամ պարզապես պակաս կարևոր կոճակների համար, դա պարզապես տարբերակ չէր, չէ՞:

Ճիշտ. Այսպիսով, սա իդեալական հնարավորություն կլինի բաղադրիչ ստեղծելու համար, մասնավորապես վերնագիր + տեքստ + կոճակի համադրություն: Ուշադրություն դարձրեք, թե ինչպես եմ ես ստեղծել չեզոք լույսի քարտի ֆոն `ֆիրմային կոճակի օգտագործման հնարավորություն տալու համար: Նմանապես, չեզոք լույսի ձևի դաշտը (ձևի դաշտերը սովորաբար սպիտակ են ՝ թղթի ձևերին պատմականորեն հոմանիշ մտավոր մոդելի պատճառով) զարմանալի չի թվում չեզոք լույսի ֆոնի վրա, այնպես որ դրանք կարող են օգտագործվել միայն չեզոք մուգ ֆոնի վրա ՝ ուղղակիորեն կամ ներսում: չեզոք մութ բաղադրիչ: Այս կերպ մենք մեր դիզայնը դարձնում ենք ճկուն `միևնույն ժամանակ պահպանելով մեր կանոնները և պահպանելով հետևողականությունը:

Սթրես-թեստավորում

Իդեալում, մեր դիզայնի կայունությունն ապահովելու ամենաարագ և ամենաարդյունավետ միջոցը սթրես-թեստն է: Դիզայն փորձության ենթարկելը նշանակում է դաժան լինել: Ասենք, որ մենք ունենք նավարկություն նավերի X քանակով, որովհետև դա էր պահանջը. Որպեսզի իսկապես ճկունություն ապահովեն, փորձեք փոխել այս պահանջները ՝ ավելացնելով ավելի շատ նյութեր կամ, իրոք, բանալին նետելու գործերի մեջ, փորձեք նաև ավելացնել ներդիր ավելի բարձր տեսողական հիերարխիայով, քան մյուսները: Մեր չափը, տպագրությունը և գունային կանոնները թույլ տա՞ն նման մի բան: Թե՞ օպտիմալ հարմարավետություն առաջարկելու համար մեզ այլ կանոն է պետք:

Հիշեք, որ կան կանոններ ավելացնելու և կանոնները թեքելու միջև: Ավելի շատ եզրեր նշանակում են ավելի քիչ հետևողականություն, ուստի ժամանակի մեծ մասն ավելի լավ է ՝ բաղադրիչը պարզապես վերանայելու օգտագործման համար:

05. Փաստաթղթավորեք և համագործակցեք

Ինչպե՞ս դյուրին դարձնենք մեր դիզայնի ֆայլերը թե՛ մեզ, թե՛ ցանկացած այլ դիզայներների համար, որոնք կարող են օգտագործել մեր նախագծային ֆայլը: Դե, դրանց անվտանգ պահումը հուսալի, ընդհանուր ամպային պահեստում կարևոր է, ինչպես կիմանաք:

Գույներ

Առաջին քայլը `բոլոր գույները պահպանել« Փաստաթղթի գույների »ցուցանակի մեջ, եթե մենք դա դեռ չենք արել, դա նրանց համար ավելի դյուրին կդարձնի հասանելիություն, երբ անհրաժեշտ լինի դրանք կիրառել մեր նախագծում:Դա անելու համար տեսչից բացեք գույնի ընտրողի widget- ը, բացվող ցանկից ընտրեք «Document Colors» - ը և այնուհետև կտտացրեք + պատկերակին ՝ գույնը ցուցանակին ավելացնելու համար: Սա նույն կերպ է գործում UI գործիքների մեծ մասում:

Համատեղ գրադարաններ

Հաջորդը, մենք պետք է վերափոխենք մեր փաստաթուղթը `ամբողջական տպագրական ոճերով, գույներով, կոճակներով, ընդհանուր տարածքներով և հիմնական բաղադրիչներով, ընդհանուր գրադարանի:

Ըստ էության, սա նշանակում է, որ յուրաքանչյուր տարր պետք է լինի բաղադրիչ, նույնիսկ եթե այն բաղկացած է միայն մեկ շերտից: Կտտացրեք + ‌ կոճակը ձախ կողմի Գրադարանների կողային տողում և այնուհետև ներմուծեք այս փաստաթուղթը նոր փաստաթղթի մեջ: Rightիշտ է. Մեր փաստաթուղթն այժմ գրադարան է և պատրաստ է օգտագործվել երաշխավորված հետեւողականությամբ UI նախագծելու համար:

InVision Studio- ն որոշակի առումով սահմանափակ է այն իմաստով, որ այն դեռ չի համաժամացվում InVision- ի պաշտոնական Design System Manager գործիքի հետ, բայց բավականաչափ հեշտ է գրադարանը տեղավորել Dropbox- ում, որպեսզի այլ դիզայներներ օգտագործեն և թարմացվեն ժամանակի ընթացքում: Երբ փոփոխություն է կատարվում (տեղական կամ հեռակա), յուրաքանչյուր Studio ֆայլ, որն օգտագործում է գրադարանը (կրկին, տեղական կամ հեռակա), կհարցնի, թե արդյո՞ք ցանկանում եք թարմացնել գույներն ու բաղադրիչները: Ահա թե ինչպես են պահպանվում դիզայներական գրադարանները թիմերի միջև:

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

Պարզապես մի ստեղծեք այն բաղադրիչները, որոնք անհրաժեշտ չեն: Հիշեք, որ գրադարան կառուցելը շարունակական, համատեղ ջանք է: Պարտադիր չէ, որ այն միանգամից ավարտվի, ավարտված լինի միայն ձեր կողմից կամ ավարտվի երբևէ: Դա միայն լեզու պետք է փոխանցի:

Դիզայն մասշտաբով

Դիզայնի ընդլայնման հետ մեկտեղ, դրա կառավարումը դառնում է ավելի դժվար: Գոյություն ունեն տարբեր ճշգրտումներ, որոնք մենք գուցե ցանկանանք կատարել `այն արդյունավետ և պահպանելու համար, մանավանդ որ InVision's DSM- ը դեռ չի աշխատում Studio- ի հետ:

Օրինակ ՝ մենք կարող է ցանկանանք օգտագործել տեքստի շերտեր ՝ մեր գրադարանն անոտացիայի ենթարկելու համար, որպես տարբեր տարրերի օգտագործման դեպքերը բացատրելու միջոց: Տպագրական ոճերի համար մենք նույնիսկ կարող ենք խմբագրել տեքստը ավելի նկարագրական (օրինակ ՝ "h1> / 1.3 / 44px"): Սա ասում է, որ հ 1>s- ը պետք է լինի 44 px և գծի բարձրությունը `1.3:

Դիզայնի Handoff

Դիզայնի հենակետային գործիքները ցուցադրում են տարբեր ոճերը, որոնք օգտագործվում են դիզայնի յուրաքանչյուր տարրի կողմից, որպեսզի մշակողները կարողանան ստեղծել ծրագիր կամ կայք: Այս գործիքները ներառում են ոճերի ակնարկ և նաև «փաստաթղթերի գույների» նմուշի պատճեն: Մշակողները կարող են նույնիսկ պատճենել այս ոճերը որպես ծածկագիր, ինչը հիանալի է, եթե դուք որոշել եք ստեղծել որևէ գրավոր նախագծային փաստաթուղթ, և կցանկանայիք ներառել բաղադրիչների կոդի հատվածի ներկայացումներ:

Եթե ​​դուք մտահոգված եք վեբ կայքի անսարքությունների վերացման և կառավարման հարցում, համոզվեք, որ վեբ հոստինգի ճիշտ ծառայություն ունեք, դա կօգնի, բայց ձեր նախագծման համակարգի համար օգտագործելու բան է InVision- ի դիզայնի փոխանցման գործիքը ՝ «Ստուգել» -ը: Այն օգտագործելու համար մենք կտտացնում ենք «Հրապարակել InVision» կոճակին / պատկերակին InVision Studio- ում, բացում ենք ստացված URL- ը և այնուհետև հպում ՝ ստուգելու ռեժիմին անցնելու համար: Դա իսկապես հարմար է:

Այս բովանդակությունն ի սկզբանե հայտնվել է net ամսագրում: