Енгізу бетпердесі және UX пішіні

1) Қағидаттар

1. Көмектесу, жазаламау. Маска енгізуді бағыттайды және қателерді азайтады, бірақ басып шығару мен кірістіруді бұғаттамайды.
2. Деректер көрсету ≠. «Шикі» қалыпқа келтірілген мәндерді сақтаймыз, тек UI пішімдейміз.
3. Болжамды меңзер. Кез келген автоалмасу caret «секірмейді» және undo/redo бұзбайды.
4. Локаль және құрылғы. Пернетақталар, бөлгіштер, күнтізбе мен валюталар - аймақ пен платформа бойынша.
5. Қолжетімділік және құпиялылық. Мәтін + белгішесі/түсі; сезімтал өрістерді жасырамыз, бірақ құпия сөз менеджерлеріне/автотолтыруға кедергі жасамаймыз.

2) Маска орынды болғанда (және жоқ болғанда)

• Құрылымы тұрақты форматтар: телефон, IBAN, PAN (карталар), CVC, күні, уақыты, индексі, OTP.
• Бөлгіштері бар ақшалай сома (мөр басылған кезде - «таза» енгізу, мөр басылған кезде - формат).
• Кодтар (реф. кодтар, промо), тіркелген ұзындықтар.

• Аттары/мекенжайлары/Email (маска жарамды таңбаларды/тілдерді шектейді).
• Күрделі бос алаңдар (түсіндірмелер, компания атаулары).
• Әлеуетті беймәлім пішіммен енгізу (елсіз халықаралық нөмірлер).

3) Маска vs автоформат vs валидация

Маска - құрылымның «ұшуға арналған» (жақшалар, дефистер); енгізу/кірістіруді бұзбауы керек.
Автоформат - блюр/фокусты жоғалтқан кезде қолданамыз (мыңдаған, IBAN бос орындар).
Валидация - түзету логикасы (ұзындығы, бақылау сомасы), «blur» немесе «submit» кейін қателерді көрсету.

Ереже: Бет валидацияны алмастырмайды, ал автопішім енгізілген мәнін өзгертпеуі керек.

4) Пернетақта және HTML төлсипаттары

5) Карет, копипаст және қалыпқа келтіру

caretu бұзбаңыз: таңбаларды (бос орындар/жақшалар) автоматты түрде кірістіргенде меңзердің орнын түзетіңіз.
Копипаст: кірістіргенде бос орындардан/дефистерден тазартыңыз → валидация → пішімдеумен көрсетіңіз.
Қалыпқа келтіру: тримминг, «қисық» таңбаларды ауыстыру ('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) Сандар, валюталар және локальдар

«Қалай басып шығарылады» (рұқсат ',' немесе '.' бөлгіш ретінде), minor units (тиын/цент) ішінде сақтау.
Блурларда/сабмиттен кейін локаль бойынша көрсету (мыңдарды топтастыру); өңдеуге ыңғайлы «шикі» мәнін көрсетіңіз.
Валютаны анық көрсетіңіз және дәлдікті белгілеңіз (мысалы, 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' бетпердесі бар мәтін өрісін пайдаланыңыз. MM. YYYY ', бірақ ISO' YYYY-MM-DD 'сақтаңыз.
Күннің нақтылығын тексеру (29. 02, диапазондар), таймзондтар - серверде.
«Бүгін», «Қазір», «Тазалау» түймешіктерін қосыңыз.

8) Телефондар және елдер

Екі өріс: ел (+ код) және таңдалған ел бойынша нөмірі немесе «ақылды» бетперде.
Толық '+ CC...' қойылса, елді автоматты түрде толтырыңыз.
E.164 сақтаңыз ('+ CCXXXXXXXX'), бос орындармен жергілікті көрсетіңіз.

9) Төлем деректемелері: PAN/IBAN/CVC/EXP

PAN: 4-4-4-4/4 топтамасы; мәнінде - тек цифрлар; Luhn-check; PAN бар логтар/талдаулар жоқ.
CVC: 'password' - стиль (жасырын), 'autocomplete =' cc-csc '', жоба жазбаларға сақталмайды.
EXP: 'MM/YY', авто-кірістіру '/' 2 саннан кейін, 01-12 диапазонын және ақылға қонымды жылды тексеру.
IBAN: upper-case, бос орындар тек UI; ел бойынша ұзындықты және бақылау сомасын тексеру.

10) ТБТ/растау коды

6 (немесе N) ұяшықтар автофокусы және автоауыспасы бар, буферден кірістіру бүкіл кодты таниды.
' autocomplete =» one-time-code»', ұялы телефондарда - СМС-тен автоматты түрде емдеу.
Бэкап-енгізу сплит-өрістерсіз (бір өріс) - скринридерлер үшін.

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

11) Маскалар және a11y

Лейбл міндетті ('<label for>'), placeholder - алмастыру емес, мысал.
Қатар ережені түсіндіріңіз: мысалы бар helper text («Формат: + CC ХХХ ХХХ-ХХ-ХХ»).
Қателерді 'aria-describedby', сыни 'role =' alert 'арқылы байланыстырыңыз.
Мәтін мен контурдың қарама-қайшылығы ≥ AA, ': focus-visible' жасырылмайды.

12) Құпиялылық және қауіпсіздік

Сезімтал өрістер: Логин жасамаңыз, RUM-ға жазбаңыз, жоба жазбаларға (PAN, CVC, паспорт) сақтамаңыз.
Қалқалар мен пішімдеу тіркелгінің дұрыстығын ашпауы тиіс («Егер email тіркелген болса...» - бейтарап тұжырым).
Сыни сабмиттерге арналған теңсіздік және retry (төлем/мөлшерлеме).

13) Пішіндердің мінез-құлқы және өнімділігі

Дебаунс асинхронды тексерулер (250-400 мс), көрінетін индикация «Тексереміз»....
Бір өріс үшін бүкіл экранды бұғаттамаңыз; жергілікті спиннер/скелет.
DOM өзгерту батчиті; тек 'transform/opacity' анимациялансын.
Ұялы телефондарда - пернетақта пайда болғанда «секіруден» аулақ болыңыз (safe-area, viewport meta).

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/amount; қатаң демпотенттілік және сезімтал өрістердің логының болмауы; комиссиялар туралы ескертпелер және мерзімдер.
KYC: күндер, төлқұжат нөмірлері үшін маскалар («қатты» сүзгісіз - әртүрлі пішімдердегі есепке алу), файл өлшемі/түрі, алдын ала қарау.
Лимиттер және жауапты ойын: түсінікті сомалар/кезеңдер (күндер/апталар/айлар), қатар хелперлер, AAA контраст.
Ставкалар: соманы жылдам енгізу (пресет-түймелер + өріс), фокуста «шикі» сан, локаль бойынша форматы; «, «...../қос бөлгіштің жарамсыздығы.

17) Қарсы үлгілер

Рұқсат етілген таңбалар/кірістіруге тыйым салатын қатты қалқалар.
Автоматты пішімде секіру caret; / undo.
Лейбл орнына Placeholder.
Валютаны мәннің ішіне авто қосу (копипастты бұзады).
Әрбір таңбаға "қателері дебаунсыз.
Сақтаудағы жергілікті тәуелсіз пішімдер (ISO/сандарды сақтаңыз).
PAN/төлқұжат нөмірлерін логиндеу және «тым адал» ауытқу себептерін көрсету.

18) Метрика және эксперименттер

Error rate өрістері бойынша (бетпердеге дейін/кейін).
Time-to-Complete пішіндері және қайта жіберу.
Сәтсіз кірістірулер (копипаст) және «қайтарулар» (undo) үлесі.
CTR кеңестер/мысалдар, автотолтырулар үлесі.
Abandon rate төлем сатысында/АКҚ.

19) QA-чек парағы

Енгізу және сақтау

• Буферден кірістіру сынбайды, бос орындар/дефистер дұрыс тазартылады.
• Caret автоматты пішімнен кейін болжамды күйде қалады.

Локаль және пішім

• Сомаларға жол беріледі ', '/'.'; minor units.
• Күндер бөлінеді және валидацияланады; ISO-да сақтау.

A11y

• Таңбалар мен 'aria-describedby' қосылған; 'role =' alert 'сыни үшін.
• Контраст пен фокус сақинасы AA-ға сәйкес келеді.

Қауіпсіздік

• Сезімтал өрістер логин/кэштелмейді.
• Сыни қадамдардағы теңсіздік және retry.

UX

• Placeholder - мысалы, лейбл емес; helper жанында.
• Маскалар ұялы телефондарға басып шығаруға кедергі келтірмейді; дұрыс пернетақталар ('inputmode').

20) Дизайн-жүйедегі құжаттама

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.
Маска токендері (ұзындығы/үлгілері), caret/қою ережелері, сандарды/күндерді оқшаулау.
Гайдтар құпиялылығы бойынша (не логикалық емес), қол жетімділігі бойынша және автоформаты бойынша vs блюр.
«Do/Don 't» нақты мысалдары мен өлшемдері бар.

Қысқаша түйіндеме

Маскалар мен пішіндер енгізуді жеделдеткенде жақсы, деректерді таза сақтайды және кедергі келтірмейді. Ұқыпты пішімдеңіз, кіре берісте қалыпқа келтіріңіз, тұрақты түрде сақтаңыз, жергілікті жерлерді және қолжетімділікті ескеріңіз. Сонда формалар жылдам және түсінікті болады - әсіресе төлемдер, KYC және мөлшерлемелердің сезімтал сценарийлерінде.