Օգտագործողի կոդավորման ինտերֆեյսը

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

1. Մի միտք էկրանի վրա։ Պրոֆիլը = կարճ անկախ հատվածների մի շարք, որոնցից յուրաքանչյուրը CTA-ն է։

2. Լռելյայն անվտանգությունը։ Տեսանելի կարգավիճակները 2FA/նստաշրջաններ/սարքեր, պարզ ուղիներ գործողության համար։

3. Տվյալների թափանցիկությունը։ Ինչ է պահպանվում, ինչու՞ անջատել/ներբեռնել/հեռացնել։

4. Կերպարացում առանց ծանրաբեռնվածության։ Միայն իրական պարամետրերը, որոնք ազդում են փորձի վրա։

5. Երբեք մի կորցրեք համատեքստը։ Չեռնովիկները, որոնք համապատասխանում են վերջին պայմանագրին, կանխատեսելի URL-ն։

2) Տեղեկատվական ճարտարապետությունը

Առաջարկվող կառուցվածքը (ձախ ընտրացանկը/ներդրումը)

Պրոֆիլը (ավատար, անուն, կոնտակտներ)

Անվտանգություն (գաղտնաբառ, 2FA, սարքեր/նստաշրջաններ)

Վճարումներ (մեթոդներ, ավտոտրանսպորտային մանրամասներ, պատմություն)

Լիմիտներ (պատասխանատու խաղ)

KYC (կարգավիճակը, փաստաթղթերի բեռնումը)

Նախընտրություններ (լեզուն, արժույթը, գործակիցների ձևաչափը, արագ տոկոսադրույքները, թեմաները)

Ծանուցումներ (տեսակներ/ալիքներ, լռություն/դիգեստ)

Գաղտնիությունը և տվյալները (տեսանելիությունը, DSAR/էքսպորտը, հաշիվը հեռացնելը)

Երբեք մի ցույց մի տվեք ամբողջական PAN/CVC; հոսանքներն ու դիմակները միայն UX-ի համար։

3) Հեդեր

Ավատարը (բեռնումը/կտրումը), ցուցադրական նեյմը, ID/juzerneim։

Բեյջի կարգավիճակը ՝ KYC: Ստուգման/Proiden, 2FA: Wikl/Vikle, պատասխանատու խաղը ՝ ակտիվ։

Արագ հղումները ՝ «Փոխել գաղտնաբառը», «Հաստատել e-mail/հեռախոսը», «Տեղադրել սահմանը»։

html
<header class="profile-head">
<img class="avatar" alt="Аватар пользователя">
<div>
<h1>Имя пользователя</h1>
<div class="badges"><span class="badge">KYC: На проверке</span><span class="badge">2FA: Выкл</span></div>
</div>
<button class="btn btn--primary">Загрузить документы</button>
</header>

4) «Պրոֆիլային» բաժինը

Դաշտերը ՝ անունը, ծննդյան ամսաթիվը, երկիրը, ինտերֆեյսի լեզուն։

Կոնտակտներ ՝ e-mail (veriation), հեռախոսը (OTP)։

Յարոսլավլ 'ամսաթիվը/ժամանակը/արժույթը կապված են լեզվի և երկրի հետ։

Ծննդյան ամսաթիվը խմբագրվում է միայն KYC-ից հետո։

UX 'ձևաչափը, դիմակները փափուկ են, ավտոսեյվը դեբաունսի հետ, հաջողության ապացույցը։

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

Գաղտնաբառ 'փոփոխությունը ներկա գաղտնաբառով + որակի կանոնները (martr/հուշումներ), չցուցադրել պահանջներ հետևյալում։

2FA: TOTP/SMS; պարզ վարպետության հոսք. <<Ներառել wwww.QR-ը պահուստային շարժիչներ>>։

Սարքերը և նիստերը 'ակտիվ մուտքերի ցանկը (սարք/OS/միգրացիա/ժամանակ), CTA «Ավարտել ամեն ինչ բացի ընթացիկ»։

Սոչ-լոգոն 'կապիկ/շեղում հաստատման հետ։

6) Վճարումներ

Վճարման մեթոդներ 'քարտեր (դիմակ' 1234 "), A2A/դրամապանակներ; «Լռելյայն» կարգավիճակը։

Եզրակացություններ ՝ պահպանված գրառումներ (IBAN/դրամապանակ) միկրո տրանսֆերի ստուգման հետ, եթե օգտագործվում է։

Գործարքների պատմությունը 'ֆիլտրեր տիպի/ամսաթվով/գումարով, CSV էքսպորտը։

Թափանցելիությունը ՝ 108/ET և «Մշակման/շեղման/պատրաստ» վիճակը։

7) Լիմիտներ (Պատասխանատու խաղ)

Տեսակներ ՝ Դեպոզիտային, Stavence, Ժամանակավոր (Time-24s), Ինքնազարգացում։

UX: Ռադիո ժամանակահատվածը (օր/շաբաթ/ամիս) + գումարը, ակնհայտ տեքստը «Կգործի»...

Փոփոխությունը թուլացման ուղղությամբ 'ուշացումով։ խստացումները անմիջապես են։

8) KYC

Ֆայլերի համար հստակ պահանջներ (տիպ/չափսի/ճշգրտության) + կանխատեսումը։

Ստեպեր ՝ Անձնական տվյալները Windows Windows Windows Windows Windows World.

Կարգավիճակը և ժամանակը, ծանուցումների ալիքը, ներկայացված փաստաթղթերի պատմությունը։

9) Նախապատվություններ

Գործակիցների ձևաչափը 'տասանորդ/կոտորակային/ամերիկյան։

Արագ տոկոսադրույքները 'սվիտչ + նախազգուշացում «առանց հաստատման» և Undo, եթե ռուսական։

Թեման 'լուսավոր/մութ/համակարգային; հակասական ռեժիմ թույլ մարդկանց համար։

Գեոն և լեզուն 'պահպանել, բայց հիշել միգրացիայի պահանջները (բովանդակություն/բլոկային թերթիկներ)։

10) Ծանուցումներ

Ալիքները ՝ push/e-mail/SMS/2019։

Խմբերը ՝ ֆինանսական, խաղային, սոցիալական, մարքեթինգը (լռելյայն չափավոր)։

«Մի անհանգստացեք» 'ժամանակի և պայմանների միջակայքը (օրինակ, առանց գիշերվա մարքեթինգի)։

Այսպիսով, ինչպե՞ ս է կա ծանուցում, որտեղ անջատվում է։

11) Գաղտնիությունը և տվյալները

Տեսանելիությունը (եթե սոցիալական գործառույթները) 'ով տեսնում է նիկ/ավատար/ակտիվություն։

Տվյալների բեռնումը (DSAR) 'արխիվի հարցումը պատրաստման ժամանակահատվածով։ ծանուցում պատրաստակամության համար։

Հաշիվի հեռացումը 'բացատրել հետևանքները, grace-period, «Սառեցրեք» որպես այլընտրանք։

Համաձայնությունների ամսագիրը 'cookie/մարքեթինգը/տերմինները' ամսաթվերը և տարբերակները։

12) Գործողությունների պատմությունը

Ժապավենը ՝ մուտքեր/ելքեր, գաղտնաբառի/2FA փոփոխություն, հիբրիդային գրառումների փոփոխություններ, լիմիտներ։

Ֆիլտրերը և էքսպորտը; բացատրություն գեո-IP սարքերի և սարքերի վերաբերյալ։

CTA «Դուք չեք եղել»։ գաղտնաբառի փոփոխության արագ ֆլոուն և նստաշրջանների ավարտը։

13) A1y-ը և տեղայնացումը

Պիտակները և խորհուրդները կապված են «aria-describedby» -ի միջոցով։ սխալները '"role =" alment "։

Focus-visible ", Tab-ի կարգը համապատասխանում է տեսողական։

«wwww.fers-reduced-motion» - առնվազն անիմացիաներ։

Լեզվական էքսպանսիա '20-30 տոկոսի լայնությամբ։ թվերը պլաստիկ են («font-variant-numeric: tabular-nums;»)։

14) Բջջային արտոնագրեր

Ընտրացանկը պատրաստված է որպես www.awer; հիմնական կարգավիճակները/STA - վերևում։

Sticky-CTA-ն ներքևում երկար ձևերի համար («Պահպանել փոփոխությունները»)։

Դաշտերի մեծացումը, ստեղնաշարերը տիպով («inputmode»)։

Ծանուցումներ/պատմությունը անսահման ծանրաբեռնվածությամբ ժապավենն է և sentry-դիտորդը։

15) Դատարկ, սխալներ, վիճակ

Empty: ընկերական հուշում և «ինչ է հետո» (ավելացնել մեթոդը/միացնել 2FA)։

Error: պատճառը + ինչպես շտկել + Retry; չփչացնել մուտքագրված տվյալները։

Busy 'տեղական բեռնիչներ, առանց ամբողջ էկրանի արգելափակման; TTFF 35100 մզ։

16) Մետրիկի

Completion Rate-ը հիմնական պարամետրերով (2FA, KYC, վճարման մեթոդներ)։

Time-to-Complete (գաղտնաբառ/2FA/KYC/limits)։

Error Rate + հաջողակ Retry-ի մասը։

Նախընտրությունների Adoption (թեման, արագ դրույքաչափերը, գործակիցների ձևաչափը)։

Presposture: Օգտագործողների մասնաբաժինը 2FA-ից, ավարտված օտար նիստերի քանակը։

17) Anti-patterna

Թաքնված քննադատական կոմպոզիցիաները (2FA/limita) խորքում։

Երկար հարցաթերթիկները մոդալի մեջ; մեքենայի բացակայությունը։

«Լուռ» ուղարկումը առանց buny/հաստատման։

Ֆոկուսի և մակետի «ցատկման»։ CLS-ը նկարների պատճառով։

Արգելքը 2FA/OTP կոդի վրա։

Մարքեթինգի խառնուրդը և կրիտիկական ծանուցումները լռելյայն։

18) Դիզայնի համակարգը (օրինակ)

json
{
"profile": {
"sectionGap": 20,
"fieldHeight": 44,
"radius": 12
},
"security": {
"badge": { "radius": 8, "px": "4 8" },
"focusRing": { "width": 2, "offset": 2 }
},
"lists": {
"row": { "py": 12, "px": 16 },
"divider": 1
},
"motion": { "hoverMs": 160, "pressMs": 90 },
"a11y": { "contrastAA": true, "reduceMotion": true }
}

19) Սնիպետներ

Սարքերի/նստաշրջանների ցանկը (HTML)

html
<ul class="sessions" role="list">
<li>
<div>Chrome · Windows · Киев</div>
<small>Последняя активность: 14:32</small>
<button class="btn btn--ghost">Выйти</button>
</li>
<li aria-current="true">
<div>Safari · iOS · Текущая сессия</div>
<small>Последняя активность: сейчас</small>
<button class="btn btn--ghost" disabled>Текущая</button>
</li>
</ul>
<button class="btn btn--secondary">Завершить все сеансы</button>

Գործակիցների ձևաչափի անջատիչ (ռադիո)

html
<fieldset>
<legend>Формат коэффициентов</legend>
<label><input type="radio" name="odds" value="decimal" checked> Десятичные</label>
<label><input type="radio" name="odds" value="fractional"> Дробные</label>
<label><input type="radio" name="odds" value="american"> Американские</label>
</fieldset>

Վճարման մեթոդների քարտեզը (դիմակավորում)

html
<article class="pay-card">
<h4>Visa •••1234</h4>
<small>По умолчанию</small>
<div class="actions">
<button>Сделать основным</button>
<button class="danger">Удалить</button>
</div>
</article>

20) QA-chek-թերթ

Իմաստը և հոսքը

• Հատվածները տրամաբանական են. Յուրաքանչյուր էկրան ունի մեկ հիմնական CTA։
• URL/ռոտացիան վերականգնում են վերջին բաժինը։

Ձևեր

• Ճիշտ «type/inputmode/autocomplete»; փափուկ դիմակներ, կանխատեսելի caret։
• Asinhrone ստուգումները դեբաունսի հետ; պահպանումը չի կորցնում տվյալները։

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

• 2FA ֆլոուն հասկանալի է. պահուստային շարժիչները հասանելի են լողալու համար։
• Նստաշրջանները/սարքերը ավարտվում են, իրադարձությունները տրամաբանվում են։
• Զգայուն դաշտերը չեն տրամաբանվում/չեն քշվում։

Igaming հատկություն

• Լիմիտները հետաձգված ներածությամբ և տարբեր ժամանակահատվածներով։
• KYC ստատուսները և փաստաթղթերը պարզ են. ծանուցման ժամանակը և ալիքը տեսանելի են։
• Գործակիցների ձևաչափը և արագ դրույքաչափերը աշխատում են որպես հայտարարված։

A1u/Տեղայնացում

• Հակադրություն No. AA; <: focus-visible> տեսնում ենք; Tab-կարգը ճիշտ է։
• Տեքստերն ու թվերը հարմարվում են լեզվին/108; RTL-ն աջակցում է (եթե անհրաժեշտ է)։

Պերֆորանսը

• TTFF 35100 մզ; ՈՉ CLS; պատկերները ծույլ են։
• Մեծ ցուցակները (պատմությունը) պարագինացված են/վիրտուալիզացված։

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

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.

Տոկիններ ՝ դաշտեր/ճառագայթներ/ֆոկուս/բեյջի, KUS/limits արձաններ, հաջողության գույներ/սխալ/ուշադրություն։

Արտոնագրեր ՝ «Մեկ CTA բաժին», «Undo/Medirm ռիսկի համար», «Էքսպորտ/տվյալների հեռացում (DSAR)»։

Do/Don 't: թաքնված անվտանգ շարժիչներ, ծանրաբեռնված ձևեր, որոնք քողարկում են մարքեթինգային ներառումները։

Ռուսական ռեզյումե

Մրցույթի ինտերֆեյսը վստահության կենտրոնն է, այն պետք է լինի պարզ, ազնիվ և անվտանգ։ Պարզ ճարտարապետությունը, արագ և կանխատեսելի ֆլոուն (2FA/KYC/limits/վճարումներ), կոկիկ ձևերը և տվյալների հետ աշխատելու թափանցիկությունը վերածում են ապրանքի աջակցության և նվազեցնում են կոշիկի բեռը, հատկապես iGaming-ի համար։