Тарҳрезии шаклҳои UX

1) Принсипҳо

1. Аввал вазифа, баъд майдонҳо. Шаклҳо идомаи скрипти корбар мебошанд, на рӯйхати пойгоҳи додаҳо.
2. Як экран як ҳадаф аст. Нест кардани ҳар чизе, ки супоришро иҷро намекунад.
3. Ҳеҷ гоҳ маълумотро гум накунед. Autosave, барқарор кардани тарҳ, такрори бехатар.
4. Нишон диҳед "чӣ тавр. "Қоидаҳо ва намунаҳои пеш аз хатогӣ; бодиққат тасдиқ кунед.
5. Дастрасии пешфарз. Тамғакоғазҳо, фокус, контраст, паймоиши клавиатура.
6. Суръати пешбинишаванда. Ҷавоби аввал ≤ 100 мс, бо фиристодани мақоми возеҳ ва пешрафт.

2) Ташаккули меъмории иттилоотӣ

Мақсад → қадамҳо → майдонҳо. Аз натиҷа оғоз кунед (масалан, "пардохт") ва маҷмӯи ҳадди аққали майдонҳоро интихоб кунед.
Гурӯҳбандӣ аз рӯи маъно: "Маълумоти шахсӣ", "Пардохт", "Тасдиқ. "Ҳар гурӯҳ 6 майдонро ≤.
Ифшои прогрессивӣ: майдонҳои иловагиро аз рӯи шарт нишон диҳед (гузариш/интихоби кишвар).
Тартиби майдонҳо ба сари корбар монанд аст: аз маъруф ба маҷмаа.

3) Тарҳ ва шабака

Як сутун барои мобилӣ ва аксари вазифаҳо зудтар дар намуди зоҳирӣ ва ҷадвал аст.
Ду сутун барои майдонҳои бо ҳам алоқаманд мувофиқанд (сана/вақт, ном/насаб).
Баландии хат 40-48 px, масофаи байни майдонҳо 8-12 px (алоқаманд )/16-24 px (гурӯҳҳо) мебошад.
Ҳаммарказкунии нишона дар болои майдон; дар тарафи рост - барои шаклҳои танг истифода набаред.

4) Тамғакоғазҳо, ҷойгузинҳо, ёварон

Этикетка ҳатмист. Ҷойгоҳ намуна аст, на ҷойгузин.
Матни ёрирасонро дар майдон ҷойгир кунед: қоидаҳо, формат, истинод ба мисол.
Ба майдонҳои ихтиёрӣ "(ихтиёрӣ)" ба ҷои "" дар майдонҳои зарурӣ дохил мешаванд.

Намуна:

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) Қадамҳо ва пешрафт

Шаклҳои бисёрқабата (ASC/Payouts): 3-5 қадам, пешрафти равшан "Қадами 2 аз 4".
Қадамҳои анҷомшударо захира кунед; Иҷозат диҳед, ки бе талафи маълумот баргардед.
Тугмаҳои навигатсионӣ: "Бозгашт", "Оянда", ниҳоии "Тасдиқ" - ҳамеша дар як ҷо.

6) Назорати вуруд

Клавиатура ва сифатҳо: 'намуд', 'inputmode', 'autocplete' барои навъи маълумот.
Ниқобҳои вурудро мулоим истифода баред (телефон, IBAN, PAN, сана), арзишҳои муқарраршудаи анбор.
Автокомплетро вайрон накунед: дуруст' autocomplete =" додашуда-ном" | "cc-number" | "як-вақт-рамз"' ва ғайра.
Маблағи пешпардохт/миёнабурҳо: "+ 50/+ 100/All" дар паҳлӯи майдони маблағ.

Ҷадвали атрибут (abbr.):

Майдон	навъи	inputmode	автокомплет
Почтаи электронӣ	почтаи электронӣ	почтаи электронӣ	почтаи электронӣ
Телефон	тел	тел	тел
Ҷамъ	матн	даҳӣ	хомӯш
ПАН	матн	ададӣ	cc-рақам
CVC	гузарвожа	ададӣ	cc-csc
Санаи корт	матн	ададӣ	cc-exp
OTP	матн	ададӣ	як вақт-рамз

7) Санҷиш ва хатогиҳо

Стратегия: пеш аз ворид шудан (мададгор), дар вақти (таклифҳои нарм), баъд аз (дар блюз/пешниҳод).
Санҷишҳои асинхронӣ (беҳамтоии воридшавӣ, маҳдудиятҳо, хавф) - бо дебети 250-400 мс.
Матни хатогӣ: боиси → чӣ гуна ислоҳ кардани → алтернатива.
Панели мухтасар дар болои шакл барои якчанд хатогиҳо + фокус ба хатои аввал.
Idempotency-Key барои амалҳои интиқодӣ (дархост/пардохт) ва бозпардохти бехатар.

8) Тугмаҳо ва пешниҳод

CTA ибтидоӣ бо ранг/андоза, ки аз ҷониби Enter дастрас аст, нишон дода шудааст.
'Блоки такрорӣ ва клик; дар таъхир> 3-5 с - "Интизории тасдиқ"....
Пас аз муваффақият - ҳолати возеҳ (тост/экрани тайёр) + баъд чӣ мешавад.

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

Истинодҳои дурусти 'label → вуруд', хатогиҳо тавассути 'aria-describedby', интиқодӣ - 'нақш = "ҳушдор"'.
'Намоён': фокус намоён ', фармоиши ҷадвал ба визуалӣ мувофиқат мекунад.
Контрасти матн/нишона ≥ АА; маъно танҳо ранг нест.
Дастгирии 'кам кардани ҳаракат': аниматсияҳои ҳадди аққал.
Барои гурӯҳҳои тугмаи радио - 'fieldset/legend', барои дархостҳо - 'нақш = "статус"'.

10) Маҳаллисозӣ ва форматҳои байналмилалӣ

Санаҳо/асъорҳо/рақамҳо - маҳаллӣ ҳангоми воридшавӣ, нигаҳдорӣ - ISO/воҳидҳои хурд.
Барои алифбои гуногун дар номҳо/суроғаҳо иҷозат диҳед; гипфенҳо/апострофҳоро маҳдуд накунед.
Телефонро дар E.164 нигоҳ доред; кишвар ба таври возеҳ интихоб шудааст ё аз '+ CC' ба воридкунӣ.

11) Иҷро ва субот

Аввалин вокуниши визуалӣ ≤ 100 мс; санҷишҳои асинхронӣ - экранро қулф накунед.
Скелет ба ҷои спиннери "овезон", баландиро ислоҳ кунед, аз CLS канорагирӣ кунед.
Виртуализатсияи рӯйхати дароз (масалан, кишварҳо/бонкҳо).
Танҳо 'табдил/шаффофият' аниматсия кунед, ягон сояи калон/сояҳо нест.

12) Амният ва махфият

PAN/CVC/Шиносномаро сабт накунед; ба RUM/консол нафиристед.
Майдонҳои ҳассосро маска кунед, онҳоро дар autosave захира накунед.
Ифшо накунед, ки ҳисоб вуҷуд дорад: "Агар почтаи электронӣ сабт шуда бошад, мо почтаи электронӣ мефиристем".
Нигаҳдорӣ - ҳадди аққал лозим аст; нишон диҳед, ки чаро KYC талаб карда мешавад.

13) Намунаҳои сенарияи маъмулӣ

13. 1 Пардохт/амонат

Майдони маблағ бо пешнамоиш, асъор ба таври возеҳ нишон дода шудааст.
PAN бо ниқоби мулоим, санҷиши Luhn; CVC пинҳон аст; санаи 'MM/YY' бо auto- '/'.
Матн дар бораи комиссияҳо/мӯҳлатҳои наздик, на дар абзор.

13. 2 Хуруҷ

Миқдори қадамҳо → Усул → Тасдиқ

Пешрафт ва "Одатан то N дақиқа/соат" (ваъдаҳои сахт нестанд).
Вариантҳои метод аз рӯи кишвар; огоҳиҳоро маҳдуд мекунад.

13. 3 KYC

Боркунии қадам ба қадам: талаботи формат/вазн, пешнамоиш, махфият.
Сана ва канали ҳолатро санҷед (почта/огоҳӣ).

13. 4 Маҳдудиятҳо ва бозии масъул

Воҳидҳои тоза (рӯз/ҳафта/моҳ), танзимоти пешакӣ, тасдиқи тағирот, "Дар амал татбиқ хоҳад шуд"....

14) Антипаттернҳо

Ҷойгузин ба ҷои нишона.
Хатогиҳо "барои як аломат" бидуни debunking.
Варақаро дар хатогӣ барқарор мекунад.
Дастури танқидӣ танҳо дар абзор пинҳон карда мешавад.
Ниқобҳои сахт, ки аломатҳои/воридкунии дурустро манъ мекунанд.
Барои тасдиқи майдони ягона тамоми саҳифаро қулф кунед.
Бе банд/пешрафти возеҳ фиристед.

15) Порчаҳои татбиқ

Хулосаи хатогиҳо + диққатро ба шумораи аввал равона кунед

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

Тугма бо банд ва фаврӣ

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

Чаҳорчӯбаи HTML аз гурӯҳи мавҷудаи радио

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) Нишонаҳои системаи тарроҳӣ (мисол)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

Пешнамоиши CSS

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }

17) Нишондиҳандаҳо ва таҷрибаҳо

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

18) Рӯйхати назоратии QA

Маънӣ ва ҷараён

Майдонҳо ба ҳадаф мувофиқанд; иловагӣ нест.
Гурӯҳҳо мантиқӣ мебошанд; ҳадди аксар 6 майдон барои як гурӯҳ.

Вуруд

Дуруст 'намуди/inputmode/autocomplete'.
Ниқобҳо мулоиманд, дохилкунӣ шикаста намешавад, нигоҳубин пешгӯишаванда аст.

Санҷиш

Ёрӣ пеш аз ворид; хатогиҳо дар blur/пешниҳод; қарзҳои 250-400 мс.
Панели мухтасар барои якчанд хатогиҳо; тамаркуз ба аввал.

Дастрасӣ

Тамғакоғазҳо бо ҳам пайванданд; муқоиса ≥ АА; ': фокус намоён' намоён.
Паймоиши клавиатура; гурӯҳҳои радио бо 'саҳро/афсона'.

Иҷро

Ҷавоби аввал ≤ 100 мс; нест spinners "овезон".
Не CLS; рӯйхатҳои дароз виртуалӣ карда мешаванд.

Амният

Гузоришҳои саҳроии ҳассос нестанд; PAN/CVC дар автозавр нест.
Номутобиқатӣ ва ақибнишинии бехатар дохил карда мешаванд.

19) Хусусиятҳои IGaming

Гаравҳо: майдони маблағ + пешпардохт, фавран "банд", тасдиқи оптимистӣ бо имконияти бекор кардан (агар муқаррарот иҷозат диҳад).

Пардохтҳо/бозхондҳо: пардохтҳо ва мӯҳлатҳои дақиқ дар наздикии майдонҳо, на танҳо дар маслиҳатҳо; Маҳдудиятҳо ва ҳолати KYC-ро санҷед

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

Хулосаи мухтасар

Шакли хуб ҳадафи возеҳ, маҷмӯи ҳадди аққали майдонҳо, қоидаҳои возеҳ пеш аз хатогӣ, вокуниши фаврӣ ва маълумоти захирашуда мебошад. Тарҳрезии сохтор аз скрипт, дастрасии эҳтиром ва маҳалҳо, рафтуомади бехатар ва аблаҳиро дар бар мегирад. Маҳз ҳамин тавр шаклҳо зуд ва эътимоднокро эҳсос мекунанд - алахусус дар сенарияҳои танқидии IGaming.