UX-deline և ինտերֆեյսների ստանդարտները

1) Սկզբունքներ

Նախկինում գեղեցկության հստակությունը։ Իմաստն ու գործողությունը ակնհայտ են 1-2 վայրկյանում։

Էկրանի վրա մի նպատակ։ Մնացած ամեն ինչ վարչական կամ թաքնված է։

Հաջորդականությունը։ Նույն փամփուշտները = նույն սպասումները։

Լռելյայն հասանելիությունը։ Հակադրություն, ֆոկուս, ստեղնաշար, ձայն։

Կոնտեքստը։ Հուշումներն ու տեքստերը հենց այնտեղ են, որտեղ անհրաժեշտ է։

Տեղայնացում-first։ Տողերի երկարությունները, ոճերը, մշակույթը սկզբում դիզայնի մեջ են։

Ուրախություն։ Ցանկացած ռիսկային գործողություն կարելի է վերացնել/հաստատել։

Չափումը։ Յուրաքանչյուր կանոն 'մետրիկի հետ (հակադարձում, ժամանակ, սխալներ)։

2) Ցանցը, նահանջը և ռիթմը

Ցանցը ՝ 4/8-pt քայլ; սյունակներ ՝ 12 (desktop), 6 (tablet), 4 (mobile)։

Բաղադրիչների ներքին նահանջները '4 անգամ; Արտաքին '8/12/16/24։

Ուղղահայաց ռիթմը 'ենթաստամոքսային ենթաօրենսդրության վերնագիր, որը պարունակում է համապատասխան գործողության բովանդակություն (CTA)։

Սահմանները և բաժանողները 'տնտեսապես; նախընտրել օդ և տպագրության հիերարխիա։

3) Տպագրություն

Կեգլիի սանդղակը ՝ 12/14/16/20/24/32/40 (body 16)։

Տողի բարձրությունը 1 է։ 4–1. 6 տեքստի համար, 1։ 2–1. 3 վերնագրերի համար։

Տողի երկարությունը 45-75 նշաններ (desktop), 35-55 (mobile)։

Բաշխումը 'ճարպային իմաստային ակցենտների համար; գլխարկը միայն պիտակների մեջ է։

Կարդալը բարձրաձայն է. Տեքստերը պետք է բնական հնչեն։

4) Գույնը և հակադրությունը

Սեմանտիկան '«success/warning/warning/error/neutral»։

Հակադրություն 'առնվազն WCAG 2։ 1 AA (տեքստ/ֆոն 4։ 5: 1; Թիվ 3:1)։

Գույնը միակ ազդանշանն է։ Ավելացրեք պատկերակը/տեքստը/ձևը։

Ֆոկուս օղակը 'միշտ տեսանելի (CSS)։

5) Ռոտացիան և տեղեկատվական ճարտարապետությունը

Օգտագործողի ճանապարհը. <<Որտե՞ ղ եմ ես։ Ի՞ նչ է այստեղ։ Ի՞ նչ է հաջորդը"։ ակնհայտ է։

Ընտրացանկային հիերարխիա 'հիմնական նավիգացիայի մեջ 242 մակարդակ։

Հացաբուլկեղեն 'խորը բաժանմունքների համար։

Որոնումը 'հասանելի է գլոբալ բարդ ֆորումների վրա։ տաք կլավիշա «/»։

Նավիգացիայի վիճակը 'ակտիվ ներդիր/էջ, որը ծածկված է հոսանքներով։

6) Բաղադրիչներ և արտոնագրեր

Մենք օգտագործում ենք դիզայնի համակարգի բաղադրիչներ (առանց «սամոդելոկ»)։

Մեկ primary-CTA էկրանի վրա; մնացածը secondary/tertiary է։

Վիճակը ՝ www.ru/hover/focus/action/wwww.abled/loading - յուրաքանչյուր ինտերակտիվ։

Դատարկ վիճակներ 'ենթատեքստը + արժեքը + CTA (+ ստացիոնար link)։

Ընդհանուր ալտերտերը 'մեկ page-al.ru էկրանի վրա + տեղական inment-հուշումներ։

7) Ձևեր, վալիդացիա և սխալներ

Լեյբլը պարտական է։ Placeholder-ը ձևաչափի օրինակ է, ոչ թե փոխարինում։

Intert-validation blur, summary սխալներ intit-ի վրա։

Սխալի մասին հաղորդագրությունը, որ ոչ թե + ինչպես շտկել + սահմանափակումը/ձևաչափը։

Auto-scrolle-ը և առաջին սխալի ֆոկուսը '«aria-medalid», «aria-describedby»։

Դիմակները և պարամետրերը ասում են, բայց չեն կոտրում մուտքագրումը (հնարավոր է paist)։

Տվյալների պահպանումը 'ոչ մի բան չենք կորցնում/սխալ։

8) Վիճակը և ֆիբեկը

Հաջողությունը 'tost 2-4 s, չեզոք դրական տոնով, CTA «ինչ է հաջորդը»։

Express/notice: Փափուկ լոգոն/tultip, չի արգելափակում հոսքը։

Warning/Error/Critical 'տեսողական/իմաստաբանական հիերարխիա; կրիտիկական 'մոդալկա/բանան ակնհայտ գործողությամբ։

Բեռնումը 'skeleton> spinner; ժամանակի գնահատումը, երբ սպասվում է> 3 վրկ։

9) Բովանդակություն և microcopy

Երեք պատասխանների կանոնը 'ի՞ նչ է տեղի ունենում, թե ինչու անել հաջորդը։

CTA 'գործողության բայը + օբյեկտ («Պահպանել փոփոխությունները», «Անցնել հավատալիքը»)։

Թվեր/ամսաթվեր/արժույթ ՝ տեղական ձեռնարկություններ։

Թոն 'ընկերական; սթրեսային քայլերում (105/անվտանգություն) չեզոք է։

10) Հասանելիություն (A11y)

Ամբողջական ռոտացիան ստեղնաշարից; տաբերի տրամաբանական կարգը։

Դերերը և «aria-» ինտերակտիվ, լայվ շրջանները տոստների/ստատուսների համար։

Հակադրիչները, ֆոկուս օղակները, ինտերակտիվ չափերը 44-44 px։

Պատկերների/պատկերների տեքստի այլընտրանքները. աղյուսակներ '"th '/" scope"։

Ստուգումներ ՝ ավտոմատ (լինտեր/սկան) + սկրինիդերի ձեռքով սցենարները։

11) Տեղայնացումը և միջազգայնացումը

Բոլոր տողերը i18n-բաներում են համատեքստով։

«Երկար լեզուների» թեստը (DE/TR), RTL ռեժիմները։

Թվեր/արժույթներ/ժամանակներ - անջատման հեռացումներ։

Tone-map: ձևականության/հույզերի աստիճանը սցենարներով (onbording/վճարումներ/անվտանգություն)։

12) Հարգանք և հարմարվողականություն

Breikpoints: 360/768/1024/1280 +։

Mobile-first: կրիտիկական ճանապարհը հասանելի է մեկ ձեռքով, CTA-ը մեծ մատի գոտում։

Գեստեր և ստեղնաշար, ժեստերը կրկնօրինակվում են կոճակներով։ desktop - hotkey.

Խտությունը 'desktop-ի վրա «օդ», mobile-ի վրա ուղղահայաց խնայողությունն է առանց կլինիկաբելության վնասելու։

13) Մութ թեման

WCAG-ի հակադրությունը պահպանվում է; խուսափել «մաքուր սև» ֆոնի համար (մուգ մոխրագույն)։

Ճեղքումը/ստվերը թուլացած են։ ֆոկուս օղակը հակադրվում է։

Նկարները և լոգոները 'հակադարձված տարբերակներով։

Անցման քաղաքականությունը 'մենք պահպանում ենք օգտագործողի ընտրությունը (108/light/dark)։

14) Անիմացիա և շարժում

Տևողությունը 120-200 մզ (փոքր), 200-300 մզ (անցում)։

Արագացման գործառույթները բնական (cubic-bezier, թեթև դանդաղեցմամբ)։

Անիմացիաները չպետք է արգելափակեն հոսքը և վատացնեն ընթերցանությունը։

Հարգել 'www.fers-reduced-motion "։

15) Պերֆորանսը

LCP ≤ 2. 5 գ, TTI/TBT կանաչ գոտում; spliting կոդը; լվանում եմ լրատվամիջոցների բեռնումը։

Երկար ցուցակների վիրտուալացում; տվյալների քշումը։

Skeleton արագությունը ընկալելու համար։ նվազագույնի հասցնել մոդետի «ջանկը»։

16) UI-ում անվտանգությունն ու սեփականաշնորհումը

Հարցումների պատճառների պարզ բացատրությունները (տեսախցիկ, KYC, geo)։

Թափանցիկ ժամկետներ/108/լիմիտներ; առանց «անմիջապես», եթե հնարավոր է հետաձգել։

Գաղտնի տվյալները դիմակավորում են, որը ակնհայտ է «ցույց տալ/թաքցնել»։

Ապացույցը անդառնալի գործողությունների համար. Գործողությունների ամսագիր/ծանուցում մուտքի մասին։

17) UX որակի մետրերը

Կոնվերսիան պատրաստվում է և ժամանակը մինչև ավարտը։

Error rate-ը 105 մ/քայլերով և Time-to-Fix-ով։

CTR-ը CTA-ով և հաճախորդների կրկնությունը։

Drop-off սխալներից հետո/բեռնումից հետո> N վայրկյան։

Դիմումները աջակցության համար (փոփոխությունից առաջ/հետո)։

A11y-թերությունները թողարկման վրա (նպատակը 0 քննադատական է)։

18) Չեկ թերթերը

Էկրանը նախքան թողարկումը

• Ռոտացիան և «որտեղ ես» կարգավիճակը ակնհայտ են։
• Բովանդակությունը հակիրճ է: 1-2 առաջարկներ բլոկին։
• Վիճակը ՝ loading/empty/error/success ծածկված են։
• A1y: հակադրություն AA, ֆոկուսը տեսանելի է, «aria-» ինտերակտիվ։
• Տեղայնացումը 'տողերի երկարությունները/07/RTL ստուգված են։
• Performans: չկա «ծանր» բլոկներ առանց կարիքների։

• Լեյբլները և ձևերի օրինակները ներկա են։
• International-valivation + summary-ի վրա։
• Սկրոլը առաջին սխալին, դաշտում ֆոկուսին։
• Հաղորդագրություններ ՝ ինչ/ինչպես/ինչու; առանց 500/400 օգտագործողի համար։
• Տվյալները չեն կորչում սխալների/բացթողումների ժամանակ։

[Մեկ հիմնական նպատակը և մեկ primary-CTA։

Ձիթապտղի առջև


19) Anti-patterna

«OK» -ը նման է CTA-ին իմաստալից քայլերի վրա։
Պլեյշոլդերը պիտակի փոխարեն։
Գույնը որպես կարգավիճակի միակ ազդանշան։
Սպիններները առանց ժամանակի գնահատման և առանց այլընտրանքի։
Մոդելի պատուհաններ առանց ֆոկուս-տրեպի և ESC-փակման։
Փաթեթների/սրբապատկերների խառնուրդը, բաղադրիչների կրկնօրինակումը դիզայնի համակարգից դուրս։
Հումորը/էմոջին կրիտիկական սցենարներում (108/անվտանգություն)։

20) «Մինչև/հետո» օրինակները

Ձևի սխալ

Մինչ: <<Սխալ 400>>
Հետո '"Ամսաթվի սխալ ձևաչափը։ Օգտագործեք DD։ MM։ ԳԳԳ"

Դատարկ վիճակ

Մինչ «Այստեղ դատարկ է»
Հետո. <<Այստեղ կհայտնվի վիրահատությունների պատմությունը առաջին համալրումից հետո։ [Լրացնել հաշիվը]"

Հաջողության հաղորդագրություն

Դո '«Պատրաստ եմ»
Հետո. <<Մոսկվան ընդունվել է։ Հավասարակշռությունը նորարարված է։ [Տեսնել պատմությունը]"

Ռոտացիան

Դե, պարզ չէ, թե որտեղ է օգտագործողը
Հետո 'ակտիվ ներդիրներ + հացահատիկային նապաստակներ + էջերի վերնագիր

21) Դիզայնի ռևիի ձևանմուշները

Էկրանի շրջանակը

Կոդավորման վերնագիրը նկարագրում է wwww.intent/wwww.fidbek/wwwww.fight-

Ձևի շրջանակը

Վերնագիրը բացատրում է դաշտային (պիտակը + helper + սխալ) wwww.CTA-ն նկարագրում է պաշտոնական գրառումների հիբրիդային գործողությունները (www./ժամկետներ)։

Microcopy

Վերնագիր (opz.)
1-2 նախադասություն 'ենթատեքստը + հաջորդ քայլը
CTA 'գործողություն + օբյեկտ
Ստացիոնար ոսպնյակ 'օգնություն/կանոններ

22) Գործընթացները և ստանդարտների պահպանումը

International of Done (UX): Maket + տեքստերը++ A1y + i18n + metrics։
UX-revew PR-ում '18-21 բաժիններից չեկի թերթ։
Տե՛ ս, յուրաքանչյուր ֆիչ ավելացնում է/նորարարում է wiki/Storybook-ում։
Աուդիտը մեկ անգամ թաղամասում 'բովանդակություն, A1y, պերֆորմացիա, կոնսիստենտություն։

Ալյումինե գնդակը

Մեկ նպատակ, մեկ հիմնական CTA։
Վիճակը և ֆիբեկը նախապես նախագծված են։
A1y-ը և տեղայնացումը զրոյից են, ոչ թե «հետո»։
Ավելի քիչ գույներ 'ավելի շատ սեմանտիկներ և ռիթմ։
Չափեք 'հակադարձում, սխալներ, ժամանակ, դիմումներ։
Ամեն ինչ դիզայնի համակարգի միջոցով է 'նույն կանոնները նույն սպասումները կարգավորվում են կանխատեսելի UX-ով։

Ես կարող եմ լրացնել այս դիֆերենցիալ ձևանմուշները ձեր հիմնական բաղադրիչների համար (wwww.CUS, դեպոզիտ/եզրակացություն, բոնուսներ/ձայնագրություններ) և հավաքել չեկի թերթիկներ ձեր ընթացքի տակ։