UX-роҳнамо ва стандартҳои интерфейс

1) Принсипҳо

Возеҳият пеш аз зебоӣ. Маънӣ ва амал дар 1-2 сония аён аст.
Як ҳадаф дар як экран. Ҳама чизи дигар дуюмдараҷа ё пинҳон аст.
Мутобиқат. Намунаҳои якхела = интизориҳои якхела.
Дастрасии пешфарз. Контраст, фокус, клавиатура, амали овоз.
Контекстуализм. Маслиҳатҳо ва матнҳо маҳз дар куҷо лозиманд.
Маҳаллисозӣ - аввал. Дарозии хатҳо, форматҳо, фарҳанг - дар аввал тарроҳӣ.
Бозсозӣ. Ҳар гуна амали хатарнок метавонад бекор карда шавад/тасдиқ карда шавад.
Андозагирӣ. Ҳар як қоида бо ченак аст (табдили қадам, вақт, хатогиҳо).

2) Grid, indents ва ритм

Grid: қатори 4/8-pt; сутунҳо: 12 (мизи корӣ), 6 (планшет), 4 (мобилӣ).
Ҷузъҳои дохилии компонентҳо: мултипликатсияҳои 4; берунӣ - 8/ 12/16/24.
Ритми амудӣ: title → subtitle → → мундариҷаи амал (CTA).
Сарҳадҳо ва тақсимкунандагон: иқтисодӣ; "ҳаво" ва иерархияи типографияро афзалтар медонанд.

3) Типография

Ҷадвали PIN: 12/14/ 16/20/24/32/40 (бадан 16).
Баландии сатр: 1. 4–1. 6 барои матн, 1. 2–1. 3 барои унвонҳо.
Дарозии хат: 45-75 аломат (мизи корӣ), 35-55 (мобилӣ).
Равшанӣ: ғафс барои аксенти семантикӣ; caps - танҳо дар тамғакоғазҳо.
Хониш бо овози баланд: матнҳо бояд табиӣ садо диҳанд.

4) Ранг ва контраст

Семантика: 'муваффақият/маълумот/огоҳӣ/хато/бетараф'.
Муқоиса: WCAG ҳадди аққал 2. 1 АА (матн/замина ≥ 4). 5:1; калон ≥ 3:1).
Ранг ≠ сигнали ягона. Илова кардани нишона/матн/шакл.
Ҳалқаи фокус: ҳамеша намоён аст (дар CSS хомӯш карда намешавад).

5) Навигатсия ва меъмории иттилоотӣ

Роҳи корбар: "Ман дар куҷоям? Ин ҷо чӣ аст? Боз чӣ?" - аён аст.
Иерархияи меню: ≤ 2 сатҳ дар паймоиши асосӣ.
Нонрезаҳо: барои бахшҳои амиқ.
Ҷустуҷӯ: дар саросари ҷаҳон дар феҳристҳои мураккаб дастрас аст; hotkey '/'.
Ҳолати паймоиш: Ҷадвал/саҳифаи фаъол бо нишонаҳо равшан карда шудааст.

6) Компонентҳо ва намунаҳо

Мо ҷузъҳои системаи тарроҳиро истифода мебарем (бе "хонагӣ").
Як экрани ибтидоӣ-CTA; боқимондаҳо дуюмдараҷа/олӣ мебошанд.
Ҳолатҳо: пешфарз/hover/focus/active/ғайрифаъол/боркунӣ - ҳатмӣ барои ҳар як интерактивӣ.
Ҳолати холӣ: контекст + арзиш + CTA (+ пайванди дуюмдараҷа).
Огоҳиҳои умумӣ: як саҳифа ҳушдор дар як экран + дархостҳои хати маҳаллӣ.

7) Шаклҳо, тасдиқкунӣ ва хатогиҳо

Этикетка ҳатмист. Ҷойгузин мисоли формат аст, на ҷойгузин.
Санҷиши дохилӣ барои норавшан, хатогиҳои мухтасар барои пешниҳод.
Паёми хато: чӣ нодуруст аст + чӣ гуна бояд + маҳдудият/форматро ислоҳ кард.
Ба таври худкор ҳаракат кунед ва ба хатогии аввал тамаркуз кунед; 'aria-беэътибор', 'aria-descripedby'.
Ниқобҳо ва форматҳо: фаврӣ, аммо вурудро вайрон накунед (paist имконпазир аст).
Бехатарии маълумот: ҳангоми бозоғозӣ/хатогӣ ҳеҷ чизро гум накунед.

8) Шартҳо ва фикру мулоҳизаҳо

Муваффақият: тост 2-4 с, оҳанги бетараф-мусбат, CTA "боз чӣ мешавад".
Маълумот/огоҳӣ: баннерҳои мулоим/намуд, ҷараёнро манъ намекунад.
Огоҳӣ/Хатогӣ/Муҳим: иерархия ба таври визуалӣ/семантикӣ; интиқодӣ - модалӣ/баннерӣ бо амали возеҳ.
Боркунӣ: скелет> спиннер; баҳодиҳии вақти интизорӣ> 3 с.

9) Мундариҷа ва микрокопия

Қоидаи се ҷавоб: чӣ рӯй дода истодааст → чаро бояд минбаъд чӣ кор кард.
CTA: амали verb + объект ("Тағиротро захира кунед", "Санҷиши гузариш").
Рақамҳо/санаҳо/асъорҳо: форматҳои маҳаллӣ.
Оҳанг: дӯстона; дар қадамҳои стресс (пардохт/амният) - бетараф.

10) Дастрасӣ (A11y)

Паймоиши пурраи клавиатура; тартиби ҷадвалбандии мантиқӣ.
Нақшҳо ва 'aria-' барои минтақаҳои интерактивӣ, зинда барои тостҳо/статусҳо.
Муқоисаҳо, ҳалқаҳои фокусӣ, андозаҳои интерактивӣ ≥ 44 × 44 px.
Алтернативаҳои матнӣ барои нишонаҳо/тасвирҳо; ҷадвалҳо бо 'th '/' доираи'.
Санҷишҳо: автоматӣ (линтер/сканер) + скриптҳои дастии хонандаи экран.

11) Маҳаллисозӣ ва интернационализатсия

Ҳама сатрҳо дар тугмаҳои i18n мебошанд.
Озмоиши "забонҳои дароз" (DE/TR), режими RTL.
Рақамҳо/асъорҳо/вақтҳо - хизматрасонии форматкунӣ.
Харитаи оҳанг: дараҷаи расмият/эҳсосот аз рӯи сенария (боркунӣ/пардохт/амният).

12) Ҷавобгӯӣ ва ī

Нуқтаҳои бозист: 360/768/1024/1280 +.
Аввалин мобилӣ: Роҳи интиқодӣ бо як даст, CTA дар минтақаи ангушти калон.
Имову ишора ва клавиатура: имову ишора бо тугмаҳо такрор карда мешаванд; дар мизи корӣ - hotkeys.
Зичӣ: дар мизи корӣ - "ҳаво", дар мобилӣ - пасандозҳои амудӣ бидуни вайрон кардани клик.

13) Мавзӯи торик

Баръакси WCAG нигоҳ дошта мешавад; аз "сиёҳи пок" барои замина канорагирӣ кунед (хокистарии торик).
Дурахшон/сояҳо - заиф; муқоисаи ҳалқаи фокус.
Тасвирҳо ва логоҳо - бо нусхаҳои баръакс.
Сиёсати гузариш: интихоби корбарро захира кунед (система/рӯшноӣ/торик).

14) Аниматсияҳо ва ҳаракат

Давомнокӣ: 120-200 мс (хурд), 200-300 мс (гузариш).
Функсияҳои шитоб табиӣ мебошанд (кубик-безер бо сустшавии ночиз).
Аниматсияҳо набояд ҷараёнро боздоранд ва хонишро суст кунанд.
Эҳтиром 'ҳаракатро коҳиш медиҳад'.

15) Иҷро

LCP ≤ 2. 5s, TTI/TBT бо сабз; рамзгузорӣ; боркунии ВАО танбал.
Виртуализатсияи рӯйхатҳои дароз; кэшкунии маълумот.
Скелет барои дарки суръат; ҳадди аққал тарҳбандии "партов".

16) Амният ва махфият дар UI

Шарҳи возеҳи сабабҳои дархостҳо (камера, KYC, geo).
Мӯҳлат/комиссия/маҳдудиятҳои шаффоф; бидуни "фаврӣ", агар таъхирҳо имконпазир бошанд.
Маълумоти махфӣ - ниқоб, возеҳи "нишон/пинҳон".
Тасдиқи амалҳои бебозгашт; Огоҳиномаҳои Log Log/Login.

17) Нишондиҳандаҳои сифати UX

Табдили қадам ва вақти анҷомёбӣ.
Меъёри хатогӣ аз рӯи майдонҳо/қадамҳо ва вақти ислоҳ.
CTR аз ҷониби CTA ва такрори сенария.
Партофтан баъди хатогӣ/баъди боркунӣ> N сония.
Дастгирии зангҳо аз рӯи мавзӯъ (пеш/пас аз тағирот).
A11y-defects озод кардан (ҳадаф - 0 танқидӣ).

18) Рӯйхати санҷишҳо

Экрани пеш аз баромад

• Як ҳадафи асосӣ ва як CTA ибтидоӣ.

Навигатсия ва ҳолати дар куҷо буданам аён аст.

• Мундариҷаи кӯтоҳ: 1-2 ҳукм дар як блок.
• Давлатҳо: боркунӣ/холӣ/хато/муваффақият фаро гирифта шудаанд.
• A11y: Контрасти АА, диққати намоён, 'aria-' ба интерактивӣ.
• Маҳаллисозӣ: дарозии сатр/формат/RTL санҷида шуд.
• Иҷро: Не блокҳои "вазнин" беасос.

Шакли пеш аз озодкунӣ

• Тамғакоғазҳо ва форматҳои намуна мавҷуданд.
• Тасдиқи хаттӣ + мухтасар барои пешниҳод.
• Ба хатогии аввал ҳаракат кунед, дар қуттӣ тамаркуз кунед.
• Паёмҳо: чӣ/чӣ/чаро; бе 500/400 рамз барои корбар.
• Маълумот дар хатогиҳо/азнавборкунӣ гум намешавад.

19) Анти-намунаҳо

"Хуб" ҳамчун CTA дар қадамҳои семантикӣ.
Ҷойгузин ба ҷои нишона.
Ранг ҳамчун сигнали ягона.
Spinners бе сметаи вақт ва алтернатива.
Тирезаҳои модалӣ бе доми фокус ва пӯшидани ESC.
Омезиши услубҳо/нишонаҳо, нусхабардории ҷузъҳои берун аз системаи тарроҳӣ.
Юмор/эмодзи дар сенарияҳои интиқодӣ (пардохт/амният).

20) Пеш аз/баъд аз намунаҳо

Хатои шакл

Пеш: "Хатогии 400"

Баъд аз: "Формати санаи нодуруст. ДД-ро истифода баред. М.М. YYYY"

Ҳолати холӣ

Пеш: "Ин ҷо холӣ аст"

Баъд аз: "Таърихи амалиёт пас аз пуркунии аввал дар ин ҷо пайдо мешавад. [Top Up]"

Паёми муваффақият

Ба: "Иҷро шуд"

Баъд аз: "Пардохт қабул шуд. Тавозун нав карда шуд. [Намоиши таърих]"

Навигатсия

Пеш: Маълум нест, ки корбар дар куҷост

Баъд аз: ҷадвали фаъол + нонрезаҳои нон + унвони саҳифаи возеҳ

21) Қолибҳо барои шарҳи тарроҳӣ

Чорчӯбаи экран

Title тавсифи кӯтоҳ → мундариҷа/рӯйхат → фикру мулоҳизаҳо/статусҳо → амалҳо.

Чаҳорчӯбаи қолаби

Сарлавҳа → майдони фаврӣ (нишона + ёрирасон + хатогӣ) → CTA → амалҳои дуюмдараҷа → қайдҳо.

Қолаби микрокопӣ

Унвон (собиқ)

1-2 ҳукм: контекст + қадами оянда

CTA: амал + объект

Истиноди дуввум: кӯмак/қоидаҳо

22) Равандҳо ва нигоҳдории стандартҳо

Таърифи иҷро (UX): тарҳ + матнҳо + ҳолатҳо + A11y + i18n + ченакҳо.
Шарҳи UX дар PR: рӯйхати назоратӣ аз бахшҳои 18-21.
Ҳуҷҷатгузорӣ: ҳар як хусусият дастурро ба wiki/Storybook илова/навсозӣ мекунад.
Аудит дар як семоҳа: мундариҷа, A11y, иҷро, пайдарҳамӣ.

Варақаи ниҳоии фиреб

Як ҳадаф, як CTA асосӣ.
Давлатҳо ва фикру мулоҳизаҳо пешакӣ таҳия карда мешаванд.
A11y ва маҳаллисозӣ - аз сифр, на "дертар".
Рангҳои камтар - семантика ва ритми бештар.
Андоза: табдили, хатогиҳо, вақт, тағирот.
Ҳама тавассути системаи тарроҳӣ: ҳамон қоидаҳо → ҳамон интизориҳо → UX пешгӯишаванда.

Ман метавонам ин дастурро бо қолабҳои тайёр барои сенарияҳои асосии худ (бақайдгирӣ/CUS, пасандоз/бозхонд, мукофотпулӣ/мусобиқаҳо) илова кунам ва рӯйхати санҷишҳоро барои баррасии шумо ҷамъ оварам.