Մուտքագրման դիմակներ և UX ձևեր

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

1. Օգնել, չպատժել։ Դիմակը ուղղում է մուտքագրումը և նվազեցնում սխալները, բայց չի արգելափակում կնիքը և ներդիրը։

2. Նշված քարտեզագրման տվյալները։ Մենք պահպանում ենք «հում» նորմալացված արժեքները, կառավարում ենք միայն UI-ում։

3. Կանխատեսելի ֆորումը։ Յուրաքանչյուր մեքենա չի «ցատկում» և չի կոտրում undo/redo։

4. Յարոսլավլը և սարքը։ Ստեղնաշարերը, բաժանողները, օրացույցը և արժույթը տարածաշրջանի և պլատֆորմի վրա են։

5. Հասանելիությունը և գաղտնիությունը։ Տեքստը + իկոնկա/գույն; զգայուն դաշտերը քողարկվում են, բայց չենք խանգարում գաղտնաբառերի/բեռնաթափման ղեկավարներին։

2) Երբ դիմակը տեղին է (և երբ ոչ)

Օգտագործել

Կայուն կառուցվածքի հետ 'հեռախոսը, IBAN, PAN (քարտեզներ), CVC, ամսաթիվը, ժամանակը, ինդեքսը, OTP-ը։

Բաժանիչների հետ դրամական գումարները (տպագրության դեպքում «մաքուր» շահագործումը, բլուրով 'ձևաչափը)։

Մոսկվան (ռեփը։ ե., պրոմո), ֆիքսված երկարություններ։

Խուսափել

Անունները/www.Email (դիմակը սահմանափակում է թույլատրելի խորհրդանիշները/լեզուները)։

Բարդ ազատ դաշտեր (մեկնաբանություններ, ընկերությունների անուններ)։

Պոտենցիալ անհայտ ձևաչափով (միջազգային համարներ առանց երկրի)։

3) Դիմակ vs ավտոմեքենաների ձևաչափը vs validation

Դիմակը «ամռան» կառուցվածքի հուշումն է (փակագծեր, դեֆիսներ)։ չպետք է կոտրել մուտքագրումը/ներդիրը։

Ավտոֆորֆատը, մենք օգտագործում ենք ֆոկուսի բլուրների/կորստի դեպքում (հազարավոր, IBAN)։

Վալիդացիան ճիշտ տրամաբանություն է (երկարությունը, վերահսկողական գումարները), սխալների ցուցադրումը «blur» կամ «dit» -ից հետո։

Կանոնը 'դիմակը չի փոխարինում վալիդացիան, իսկ ավտոմեքենաների ձևաչափը չպետք է փոխի ներդրվածի իմաստը։

4) HTML ստեղնաշար և ատրիբուտներ

Վերցրեք ճիշտ տեսակները/ռեժիմները, որպեսզի արագացնի շահագործումը և նվազեցնեն սխալները

5) Քարեթ, կոպիտ և նորմալացում

Մի կոտրեք կարետը: Երբ տեղադրում եք նիշերը (ալյումինե/փակագծեր) ուղղեք դասընթացի դիրքը։

Կոպիպաստ. Երբ տեղադրեք գրամեքենաները կամ դեֆիսները, ցույց տվեք, թե ինչպես կարելի է վերափոխել։

Նորմալացում 'տրիմմինգ, «կորերի» փոխարինումը («O' 07 '0»), տեղափոխումը վերին գրանցամատյանում IBAN-ի համար, ամսաթվի մեկ ձևաչափը պահեստում (III)։

PAN/IBAN նորմալիզացիայի օրինակ

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) Ամսաթվերը և ժամանակը

Եթե նյարդային պիկերը անհարմար են/տարբեր հարթակներում, օգտագործեք տեքստային դաշտը 'դիմակով։ MM. YYYY «, բայց պահպանեք ISO 'YYYY-MM-DD»։

Իրականության ստուգումը (29։ 02, միջակայքը), թայմզոնները սերվերի վրա։

Ավելացնել կոճակները «Այսօր», «Հիմա», «Մաքրել»։

8) Հեռախոսներն ու երկրները

Երկու դաշտեր ՝ երկիրը (+ կոդը) և համարը կամ «խելացի» դիմակը ընտրված երկրում։

Ամբողջական '+ CC... "բարձրացրեք երկիրը։

Պահպանեք E.64 («+ XXXXXXXXXXXX»), ցույց տվեք տեղական։

9) Էքսպոզիտներ ՝ PAN/IBAN/CVC/EXP

PAN '4-4-4-4/4 խմբավորում; իմաստով միայն թվերն են։ Luhn-check; PAN-ի հետ ոչ մի բլոգեր/վերլուծաբաններ։

CVC: «password '-stil (թաքնված),» autocomplete = «cc-csc», չմնալ չեռնիվներում։

EXP: «MM/YY», Avto-ներդիր '2 թվից հետո, ստուգում 01-12 և խելացի տարի։

IBAN: upper-case, միայն UI-ում։ երկրի երկարության ստուգում և վերահսկողական գումար։

10) OTR/հաստատման կոդը

6 (N) պատրաստված է ավտոֆոկուսով և մեքենայի անցումով, ածխաջրածինից ներդիրները ճանաչում են ամբողջ կոդը։

"autocomplete =" one-time-code ", բջջային վրա 'SMS-ից ինքնաբացարկ։

Առանց սպիրիտ դաշտերի (մեկ դաշտ) - սկրինդրիդերների համար։

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

11) Դիմակներ և a11y

Լեյբլը պարտավոր է (), placeholder-ը օրինակ է, ոչ թե փոխարինում։

Բացատրեք մի շարք կանոններ. Helper-ը օրինակ է («Ձևաչափը ՝ + CC HHX-HX-HX-HX»)։

Սխալները կապեք "aria-describedby" -ի միջոցով, քննադատական '"role =" alment "։

Տեքստի և կոնտուրների հակադրություն ww.AA, «: focus-visible» չի թաքցնում։

12) Գաղտնիությունը և անվտանգությունը

Զգայուն դաշտերը ՝ ոչ տրամաբանել, չգրել RUM-ում, չմնալ չեռնովիկայի մեջ (PAN, CVC, անձնագիր)։

Դիմակները և լուծումը չպետք է բացահայտեն պաշտոնական ձայնագրման վալիդիությունը («Եթե email գրանցվել է...» չեզոք ձևակերպում է)։

Idempotenty-ը և retry-ը քննադատական սաբմիտների համար (108/տոկոսադրույքը)։

13) Ձևերի և արտադրողականության վարքագիծը

Դեբաունսը ասինխրոն ստուգումներ (250-400 մզ), որը տեսանելի է «Ստուգենք...» ինդիկացիան։

Մի արգելափակեք ամբողջ էկրանը մեկ դաշտի համար։ տեղական սպիններ/կմախք։

Ծեծեք DFC-ի փոփոխությունները։ միայն «transform/opacity»։

Բջջային, խուսափեք «ցատկելուց» ստեղնաշարի հայտնվելուց (safe-area, view.meta)։

14) Snippete կոդը

Հեռախոսի փափուկ դիմակը (առանց կոտրելու)

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');
});

IBAN: upper-cast և խմբավորում բլուրում

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 ճնշումները

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 փափուկ դիմակներով; խիստ idympotenty և զգայուն դաշտերի լոգարանների բացակայությունը. նախազգուշացումներ և ժամկետներ։

KYC 'դիմակներ նվերների, անձնագրային համարների համար (առանց «կոշտ» ֆիլտրի' տարբեր ձևաչափերի չափսը), ֆայլի չափսը/տեսակը, կանխատեսումը։

Լիմիտները և պատասխանատու խաղը 'հասկանալի գումարներ/ժամանակահատվածներ (օրեր/շաբաթ/ամիս), մոտակայքում գտնվող հելպերներ, AAA հակադրություն։

Դրույքաչափերը 'արագ մուտքագրելով գումարը (կոճակները + դաշտը), «հում» համարի ֆոկուսում, բլուրով, լոկալի ձևաչափով։ թյուրիմացություն «, «../կրկնակի բաժանիչ։

17) Anti-patterna

Կոշտ դիմակներ, որոնք արգելում են թույլատրելի խորհրդանիշները/ներդիր։

Ցատկում է կարետը ինքնաբերաբար։ / undo։

Placeholder-ը պիտակի փոխարեն։

Արժույթի ավելացումը արժեքների ներսում (կոտրում է կոպիպաստը)։

Սխալները «յուրաքանչյուր խորհրդանիշի համար» առանց դեբաունսի։

Localess-ը տեղադրված է պահեստում (պահեք RF/համարը)։

PAN/անձնագրային համարների տրամաբանությունը և շեղման «չափազանց ազնիվ» պատճառները։

18) Մետրիկի և փորձարկումների

Error rate-ով (դիմակից առաջ/հետո)։

Time-to-Complete ձևերը և կրկին ուղարկումները։

Անհաջող ներդիրների (կոպիպաստի) և «մատնահետքերի» (undo) մասնաբաժինը։

CTR հուշումներ/օրինակներ, բենզալցակայանների մասը։

Abandon rate-ը 2019/CUS-ում։

19) QA-chek-թերթ

Մուտքագրում և caret

• Ներմուծումը չի կոտրվում, ածխաջրածինները/դեֆիսը ճիշտ մաքրվում են։
• Caret-ը մնում է կանխատեսելի մեքենայական ձևաչափից հետո։

Յարոսլավլ և ձևաչափը

• Գումարները թույլ են տալիս ", "/"; պահեստավորում minor units-ում։
• Ամսաթվերը միաձուլվում են և վալիդացվում։ պահեստավորում RF-ում։

A11y

• Լեյբլները և "aria-describedby" -ը միացված են, "role =" alment "կրիտիկական համար։
• Հակադարձ օղակները համապատասխանում են AA-ին։

Անվտանգություն

• Զգայուն դաշտերը չեն տրամաբանվում/չեն քշվում։
• Idempotenty և retry քննադատական քայլերի վրա։

UX

• Placeholder - օրինակ, ոչ պիտակ; helper մոտակայքում։
• Դիմակները չեն խոչընդոտում բջջային տպագրությանը. ճիշտ ստեղնաշարեր («inputmode»)։

20) Մոսկվա դիզայնի համակարգում

Компоненты: `MaskedInput`, `MoneyInput`, `PhoneInput`, `OtpInput`, `IbanInput`.

Դիմակների հոսանքները (երկարություն/ձևանմուշ), caret/105 կանոնները, թվերի/ամսաթվերի տեղայնացումը։

Մասնավոր (ինչը չի տրամաբանվում), հասանելիության և ավտոմատ ձևաչափով vs բլուր։

«Do/Don 't» իրական օրինակներով և մետրերով մինչև/հետո։

Live ռեզյումե

Դիմակները և ձևերը լավ են, երբ արագացնում են շահագործումը, պահպանում տվյալները մաքուր և չեն խանգարում։ Զգուշացեք, նորմալացրեք մուտքի մոտ, պահեք կայուն տեսակների մեջ, հաշվի առեք լոկալներն ու հասանելիությունը։ Այդ ժամանակ ձևերը դառնում են արագ և հասկանալի, հատկապես վճարումների զգայուն սցենարներում, KYC և ռուսական։