Ниқобҳои вуруд ва шаклҳои UX

1) Принсипҳо

1. Кӯмак кунед, ҷазо надиҳед. Маска хатогиҳоро роҳнамоӣ мекунад ва кам мекунад, аммо чоп ва воридкуниро манъ намекунад.
2. Намоиши ≠ маълумот. Мо арзишҳои муқарраршудаи "хом" -ро нигоҳ медорем, форматро танҳо дар UI.
3. Курсори пешгӯишаванда. Ҳама гуна ивазкунии худкор ба карет "ҷаҳидан" ё барҳам додани/redo нест.
4. Локал ва дастгоҳ. Клавиатура, тақсимкунандагон, тақвим ва асъор - аз рӯи минтақа ва платформа.
5. Дастрасӣ ва махфият. Матн + нишона/ранг; мо майдонҳои ҳассосро ниқоб мекунем, аммо ба менеҷерони парол/худкори нопурра халал намерасонем.

2) Вақте ки ниқоб мувофиқ аст (ва вақте ки не)

• Форматҳо бо сохтори устувор: телефон, IBAN, PAN (кортҳо), CVC, сана, вақт, индекс, OTP.
• Маблағи пулӣ бо ҷудосозҳо (ҳангоми чоп - вуруди "тоза", ҳангоми норавшан - формат).
• Рамзҳо (рамзҳои ref., promo), дарозии собит.

• Номҳо/адресҳо/Email (ниқоб аломатҳо/забонҳои дурустро маҳдуд мекунад).
• Майдонҳои ройгони мураккаб (шарҳҳо, номҳои ширкатҳо).
• Вуруд бо формати эҳтимолан номаълум (рақамҳои байналмилалӣ бидуни кишвар).

3) Маска vs формати худкор vs санҷиш

Маска - ишораи сохтори парвоз (қавс, гипс); набояд вуруд/воридкуниро вайрон кунад.
Формати худкор - истифода барои холӣ/гум кардани фокус (ҳазорҳо, фазои IBAN).
Санҷиш - мантиқи дурустӣ (дарозӣ, чекҳо), нишон додани хатогиҳо пас аз 'норӯшан' ё 'пешниҳод'.

Қоида: ниқоб тасдиқро иваз намекунад ва формати худкор набояд маънои воридшударо тағир диҳад.

4) клавиатура ва хусусиятҳои HTML

5) Интиқол, хамираи нусхабардорӣ ва муқаррарӣ

Каресро вайрон накунед: ҳангоми худкори гузоштани аломатҳо (фосила/қавс), ҳолати курсорро танзим кунед.
Нусхабардории часбонидан: ҳангоми гузоштан фосилаҳо/hyphens-ро тоза кунед → намоишро бо форматкунӣ тасдиқ кунед.
Нормализатсия: буридан, иваз кардани "хатҳо" -и аломатҳо ('O' → '0' наметавонад бошад!), Тарҷума ба ҳолати болоӣ барои IBAN, формати ягонаи нигаҳдорӣ (ISO).

js const clean = s => s. replace(/[^\da-zA-Z]/g,'');
const normalizePAN = s => clean(s). slice (0.19) ;//no spaces/hyphens const normalizeIBAN = s => clean (s). toUpperCase();   // A–Z0–9

6) Рақамҳо, асъорҳо ва маҳалҳо

Вуруди "ҳамчун чопшуда" (таҳаммулпазирӣ 'ё'.. ҳамчун ҷудосоз), нигоҳдорӣ дар воҳидҳои хурд (копекҳо/сент).
Харитаи локалӣ (гурӯҳбандии ҳазорҳо) оид ба пешниҳоди норавшан/баъд аз пешниҳод; дар фокус, арзиши "хом" -ро барои осон кардани таҳрир нишон диҳед.
Асъорро ба таври возеҳ муайян карда, саҳеҳиятро ислоҳ кунед (масалан, 2 аломат).

js function parseMoney(input) {
//resolve both comma and period as decimal const s = input. replace(/\s/g,''). replace(',', '.');
const num = Number(s);
if (Number. isNaN(num)) return null;
return Math. round(num 100); // cents
}

function formatMoney(cents, locale='ru-RU', currency='RUB') {
return (cents/100). toLocaleString(locale, { style:'currency', currency });
}

7) Санаҳо ва замонҳо

Агар интихобкунандагони маҳаллӣ дар платформаҳо нороҳат бошанд/фарқ кунанд - қуттии матниро бо ниқоби 'DD истифода баред. М.М. YYYY ', аммо нигоҳ доштани ISO' YYYY-MM-DD '.
Санаи санҷиши воқеият (29). 02, диапазон), вақтсанҷ - дар сервер.
Илова кардани тугмаҳои "Имрӯз", "Ҳозир", "Тоза".

8) Телефонҳо ва кишварҳо

Ду соҳа: кишвар (+ рамз) ва рақам ё ниқоби интеллектуалӣ барои кишвари интихобшуда.
Ҳангоми ворид кардани пурраи '+ CC...', кишварро худкор пур кунед.
Store E.164 ('+ CCXXXXXXXX'), бо ҷойҳои маҳаллӣ нишон диҳед.

9) Тафсилоти пардохт: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 гурӯҳбандӣ; дар арзиш - танҳо ададҳо; Luhn-чек; ягон сабти/таҳлил бо PAN нест.
CVC:' парол' -style (пинҳон), 'autocomplete =" cc-csc"', ба нақшаҳо захира накунед.
EXP: 'MM/YY', худкор гузоштан '/' пас аз 2 рақам, диапазони 01-12 ва соли оқилро санҷед.
IBAN: ҳолати болоӣ, ҷойҳо танҳо дар UI; Санҷидани дарозӣ аз рӯи кишвар ва checksum.

10) OTP/рамзи тасдиқ

6 (ё N) ҳуҷайраҳои дорои автофокус ва худкори гузариш, гузоштани буфер ҳамаи рамзҳоро эътироф мекунад.
' autocomplete =" як вақт-рамз"', дар телефонҳои мобилӣ - худкори истихроҷ аз SMS.
Вуруди нусхабардорӣ бе майдонҳои тақсимшуда (як майдон) - барои хонандагони экран.

html
<div class="otp" role="group" aria-label="Код из SMS">
<input inputmode="numeric" maxlength="1">
<input inputmode="numeric" maxlength="1">
<!-- … -->
</div>

11) Маскаҳо ва a11y

Нишона лозим аст ('<label барои>'), ҷойгоҳ намуна аст, на ҷойгузин.
Қоидаро паҳлӯ ба паҳлӯ фаҳмонед: матни ёрирасон бо мисол ("Формат: + CC ХХХ ХХХ-ХХ-ХХ").
Хатогиҳои шарикӣ тавассути 'aria-descripedby', интиқодӣ - 'нақш = "ҳушдор"'.
Муқоисаи матн ва контурҳо ≥ АА, ': фокус намоён' пинҳон карда намешавад.

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

Майдонҳои ҳассос: сабт накунед, ба RUM нанависед, ба лоиҳаҳо захира накунед (PAN, CVC, шиноснома).
Ниқобҳо ва форматкунӣ набояд дурустии ҳисобро ошкор кунанд ("Агар почтаи электронӣ сабт шуда бошад"... - матни бетараф).
Idempotency ва дубора барои пешниҳоди интиқодӣ (пардохт/меъёри).

13) Рафтор ва иҷрои шакл

Дебети чекҳои асинхронӣ (250-400 мс), нишонаи намоёни "Санҷед"....
Тамоми экранро ба хотири як майдон қулф накунед; spinner/скелети маҳаллӣ.
Тағироти бастаи DOM; танҳо аниматсия 'табдил/шаффофият'.
Дар мобилӣ - ҳангоми пайдо шудани клавиатура аз "ҷаҳиш" канорагирӣ кунед (минтақаи бехатар, мета viewport).

14) Код-порчаҳо

js function formatPhoneVisible(value) {
const d = value. replace(/\D/g,''). slice(0,15);
if (!d) return '';
if (d. startsWith('7')          d. startsWith('8')) {
return d. replace(/^([78])? (\d{3})(\d{3})(\d{2})(\d{2})./, '+7 ($2) $3-$4-$5');
}
// generic E.164 grouping: +CC XXX XXX XX XX return d. replace(/^(\d{1,3})(\d{0,3})(\d{0,3})(\d{0,2})(\d{0,2})./, (m,c1,c2,c3,c4,c5)=>
`+${c1}${c2?` ${c2}`:''}${c3?` ${c3}`:''}${c4?` ${c4}`:''}${c5?` ${c5}`:''}`.trim());
}

const input = document. querySelector('#phone');
input. addEventListener('input', e => {
const raw = e. target. value;
const pos = e. target. selectionStart;
const digitsBefore = raw. slice(0,pos). replace(/\D/g,''). length;
const cleaned = raw. replace(/[^\d+]/g,'');
const visible = formatPhoneVisible(cleaned);
e. target. value = visible;
// restore caret by counting digits let p = 0, count = 0;
while (p < e. target. value. length && count < digitsBefore) { if (/\d/.test(e. target. value[p])) count++; p++; }
e. target. setSelectionRange(p, p);
});

js const amount = document. getElementById('amount');
let cents = null;

amount. addEventListener('focus', () => {
if (cents!=null) amount. value = String(cents/100). replace('.', ',');
});
amount. addEventListener('blur', () => {
const v = parseMoney(amount. value) ;//from section 6 if (v = = null) return; cents = v;
amount. value = formatMoney(cents, 'ru-RU', 'RUB');
});

js const iban = document. getElementById('iban');
iban. addEventListener('input', () => iban. value = iban. value. toUpperCase());
iban. addEventListener('blur', () => {
const raw = normalizeIBAN(iban. value);
iban. dataset. raw = raw ;//for iban submission. value = raw. replace(/(.{4})/g,'$1 '). trim () ;//view only
});

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

json
{
"input": {
"radius": 10,
"height": { "sm": 36, "md": 40, "lg": 48 },
"gap": 8,
"icon": 16
},
"mask": {
"debounceMs": 300,
"otpLength": 6,
"moneyPrecision": 2,
"phoneMaxDigits": 15
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

css
.input { height:40px; 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; }
.otp input { width:40px; text-align:center; }

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

Пардохтҳо/бозхонд: PAN/IBAN/маблағ бо ниқобҳои мулоим; idempotence қатъӣ ва набудани гузоришҳои саҳроии ҳассос; маслиҳатҳо дар бораи комиссияҳо ва мӯҳлатҳо.
KYC: ниқобҳо барои санаҳо, рақамҳои шиноснома (бе филтри "сахт" - бо назардошти форматҳои гуногун), андоза/намуди файл, пешнамоиш.
Маҳдудиятҳо ва бозии масъул: миқдори/давраҳои фаҳмо (рӯзҳо/ҳафтаҳо/моҳҳо), ёварони наздик, муқоисаи AAA.
Гаравҳо: воридшавии фаврии миқдор (пешнамоиш + майдон), дар рақами фокусии "хом", ҳангоми формати норавшан аз рӯи локал; қабул накардан, "..... "/ҷудосози дугона.

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

Ниқобҳои сахт, ки аломатҳои/воридкунии дурустро рад мекунанд.
Карераи ҷаҳида бо формати худкор; аз даст додани истихроҷ/бекоркунӣ.
Ҷойгузин ба ҷои нишона.
Худкори илова кардани асъор дар дохили арзиш (хамираи нусхабардориро мешиканад).
Хатогиҳо "барои як аломат" бидуни debunking.
Форматҳои вобастагӣ дар анбор (мағозаи ISO/рақамҳо).
Сабти рақамҳои PAN/шиноснома ва нишон додани сабабҳои "хеле ростқавл" барои рад.

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

Меъёри хатогӣ аз рӯи майдонҳо (пеш/пас аз ниқоб).
Шаклҳо ва такрори вақт.
Таносуби воридоти ноком (часбонидан нусхабардорӣ) ва ғалтакҳо (бекор кардан).
CTR маслиҳатҳо/намунаҳо, таносуби автокомплетҳо.
Дар қадами пардохт/ACC даст кашед.

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

Воридшавӣ ва нигоҳубин

• Ҷойгиркунӣ аз буфер вайрон намешавад, фосила/hyphens дуруст тоза карда мешаванд.
• Карет пас аз формати худкор пешгӯишаванда боқӣ мемонад.

Ҷойгиршавӣ ва формат

• Маблағҳо иҷозат медиҳанд ', '/'.'; нигаҳдорӣ дар воҳидҳои хурд.
• Санаҳо таҳлил ва тасдиқ карда мешаванд; нигаҳдорӣ дар ISO.

A11y

• Тамғакоғазҳо ва 'aria-describby' пайваст карда шудаанд; 'role = "ҳушдор"' барои интиқодӣ.
• Ҳалқаҳои контраст ва фокус ба АА мувофиқанд.

Амният

• Майдонҳои ҳассос ба қайд гирифта нашудаанд/кэш карда намешаванд.
• Номутобиқатӣ ва дубора дар қадамҳои муҳим.

UX

• Ҷойгоҳ - намуна, на нишона; ёрдамчии наздик.
• Ниқобҳо ба чоп дар телефонҳои мобилӣ монеъ намешаванд; клавиатураҳои дуруст ('inputmode').

20) Ҳуҷҷатгузорӣ дар системаи тарроҳӣ

Компоненты: 'Ниқобпӯш', 'Money

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

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

Ниқобҳо ва шаклҳо вақте хубанд, ки вурудро суръат мебахшанд, маълумотро тоза нигоҳ медоранд ва халал намерасонанд. Формат бодиққат, дар даромадгоҳ ба эътидол оварда, дар шакли устувор нигоҳ доред, ҷойгоҳҳо ва мавҷудиятро ба назар гиред. Пас шаклҳо зуд ва осон мешаванд - хусусан дар пардохти ҳассос, KYC ва сенарияҳои букмекерӣ.