მომხმარებლის პროფილის ინტერფეისი

1) პრინციპები

1. ერთი იდეა ეკრანზე. პროფილი = მოკლე დამოუკიდებელი სექციების ერთობლიობა ერთი CTA- ით.
2. ნაგულისხმევი უსაფრთხოება. ხილული სტატუსები 2FA/სესიები/მოწყობილობები, მოქმედების მარტივი გზები.
3. მონაცემების გამჭვირვალობა. რა ინახება, რატომ, როგორ გამორთეთ/ჩამოტვირთვა/წაშლა.
4. პერსონალიზაცია გადატვირთვის გარეშე. მხოლოდ რეალური პარამეტრები, რომლებიც გავლენას ახდენს გამოცდილებაზე.
5. არასოდეს დაკარგოთ კონტექსტი. მონახაზები, უახლესი განყოფილების დაბრუნება, პროგნოზირებადი URL.

2) ინფორმაციის არქიტექტურა

• პროფილი (ავატარი, სახელი, კონტაქტები)
• უსაფრთხოება (პაროლი, 2FA, მოწყობილობები/სესიები)
• გადახდები (მეთოდები, შენახული ნაწილები, ისტორია)
• ლიმიტები (საპასუხისმგებლო თამაში)
• KYC (სტატუსი, დოკუმენტების დატვირთვა)
• პრეფერენციები (ენა, ვალუტა, კოეფიციენტების ფორმატი, სწრაფი განაკვეთები, თემები)
• შეტყობინებები (ტიპები/არხები, დუმილი/დიგესტი)
• კონფიდენციალურობა და მონაცემები (ხილვადობა, DSAR/ექსპორტი, ანგარიშის წაშლა)

არასოდეს აჩვენოთ სრული PAN/CVC; ნიშნები და ნიღბები მხოლოდ UX- ისთვის.

3) პროფილის ჰედერი

ავატარი (დატვირთვა/ჭრა), დისპლეი-ნეიმი, ID/მომხმარებელი.
Badgy სტატუსი: KYC: გადამოწმებაზე/დასრულება, 2FA: Vkl/Vykle, საპასუხისმგებლო თამაში: აქტივი.
სწრაფი ბმულები: „პაროლის შეცვლა“, „ელექტრონული ფოსტის/ტელეფონის დადასტურება“, „ლიმიტის დაყენება“.

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) განყოფილება „პროფილი“

ველები: სახელი, დაბადების თარიღი, ქვეყანა, ინტერფეისის ენა.
კონტაქტები: ელ.ფოსტა (გადამოწმება), ტელეფონი (OTP).
ლოკალი: თარიღი/დრო/ვალუტა უკავშირდება ენასა და ქვეყანას.
დაბადების თარიღი რედაქტირებულია მხოლოდ sapport- ის საშუალებით KYC- ს შემდეგ.

UX: ფორმატის მინიშნებები, რბილი ნიღბები, სადესანტო მანქანები, წარმატების დადასტურება.

5) უსაფრთხოება

პაროლი: მიმდინარე პაროლის შეცვლა + ხარისხის წესები (მანომეტრი/მინიშნებები), არ აჩვენოთ მოთხოვნები რეტროაქტიულად.
2FA: TOTP/SMS; მარტივი მასტერის ნაკადი: „ჩართეთ QR სარეზერვო კოდები“.
მოწყობილობები და სესიები: აქტიური შეყვანის სია (მოწყობილობა/OS/ადგილმდებარეობა/დრო), CTA „დაასრულეთ ყველაფერი მიმდინარე გარდა“.
Sotz-logins: დასტური/ნაგავი დადასტურებით.

6) გადახდა

გადახდის მეთოდები: ბარათები (ნიღაბი '1234'), A2A/საფულეები; „ნაგულისხმევი“ სტატუსი.
დასკვნები: შენახული დეტალები (IBAN/საფულე) მიკრო ტრანსფერის გადამოწმებით, თუ გამოიყენება.
გარიგების ისტორია: ფილტრები ტიპის/თარიღის/ოდენობის მიხედვით, CSV ექსპორტი.
გამჭვირვალობა: საკომისიო/ETA და მდგომარეობა „დამუშავებაში/უარყოფა/მზად არის“.

7) ლიმიტები (პასუხისმგებელი თამაში)

ტიპები: ანაბარი, განაკვეთები, დროებითი (დრო), თვითკმაყოფილება.
UX: რადიო პერიოდი (დღე/კვირა/თვე) + თანხა, აშკარა ტექსტი „ძალაში შედის“....
შესუსტების შეცვლა - შეფერხებით; გამკაცრება - დაუყოვნებლივ.

8) KYC

Stepper: პირადი მონაცემები

ფაილების მკაფიო მოთხოვნები (ტიპი/ზომა/სიზუსტე) + წინასწარი შემოწმება.
სტატუსი და ვადები, მზადყოფნის შეტყობინებების არხი, წარდგენილი დოკუმენტების ისტორია.

9) პრეფერენციები

კოეფიციენტების ფორმატი: ათობითი/წილადი/ამერიკული.
სწრაფი განაკვეთები: სვიტრი + გაფრთხილება „დადასტურების გარეშე“ და Undo, თუ ნებადართულია.
თემა: მსუბუქი/მუქი/სისტემური; კონტრასტული რეჟიმი მხედველობისთვის.
გეო და ენა: შეინახეთ, მაგრამ გახსოვდეთ იურისდიქციების მოთხოვნები (შინაარსი/ბლოკის ფურცლები).

10) შეტყობინებები

არხები: push/el-mail/SMS/განაცხადში.
ჯგუფები: ფინანსური, თამაში, სოციალური, მარკეტინგი (ზომიერად).
„არ ინერვიულოთ“: დროის დიაპაზონი და პირობები (მაგალითად, ღამით მარკეტინგის გარეშე).
გადახედვა: როგორ გამოიყურება შეტყობინება, სადაც გამორთეთ.

11) კონფიდენციალურობა და მონაცემები

პროფილის ხილვადობა (თუ სოციალური ფუნქციები): ვინ ხედავს მეტსახელს/ავატარს/აქტივობას.
მონაცემთა ჩატვირთვა (DSAR): არქივის მოთხოვნა მომზადების ხანგრძლივობით; მზადყოფნის შეტყობინება.
ანგარიშის წაშლა: შედეგების ახსნა, grace-period, გაყინვა, როგორც ალტერნატივა.
თანხმობის ჟურნალი: cookie/მარკეტინგი/ტერმინები - თარიღები და ვერსიები.

12) მოქმედების ისტორია

ფირზე: შესასვლელი/გასასვლელი, პაროლის შეცვლა/2FA, გადახდის დეტალების ცვლილებები, ლიმიტები.
ფილტრები და ექსპორტი; ახსნა გეო-IP და მოწყობილობების შესახებ.
CTA „თქვენ არ იყავით?“ სწრაფი flow პაროლის შეცვლა და სესიების დასრულება.

13) A11y და ლოკალიზაცია

ეტიკეტები და რჩევები უკავშირდება 'aria-describedby'; შეცდომები - 'role = „alert“'.
კონტრასტი AA, ხილული „: focus-visible“, Tab ბრძანება შეესაბამება ვიზუალურს.
'prefers-reduced-motion' - მინიმალური ანიმაცია.
ენის გაფართოება: რეზერვი 20-30% სიგანეზე; რიცხვები - ფირფიტა ('font-variant-numeric: tabular-nums;').

14) მობილური ნიმუშები

პროფილის მენიუ, როგორც დრაკონი; ძირითადი სტატუსები/STA - ზემოთ.
Sticky-CTA ქვემოთ გრძელი ფორმებისთვის („შენახვა ცვლილებები“).
ველების სკალირება, კლავიატურა ტიპის ('inputmode').
შეტყობინებები/ამბავი - ფირზე უსასრულო დატვირთვით და დამკვირვებლის დამკვირვებლით.

15) ცარიელი, შეცდომები, მდგომარეობა

Empty: მეგობრული რჩევა და „რა შემდეგ“ (დაამატეთ მეთოდი/ჩართვა 2FA).
ერორი: მიზეზი + როგორ უნდა გამოსწორდეს + რეტრი; არ გამოტოვოთ მონაცემები.
Busy: ადგილობრივი მტვირთავები, მთელი ეკრანის დაბლოკვის გარეშე; TTFF - 100 ms.

16) მეტრიკი

ძირითადი პარამეტრების ნაკრები (2FA, KYC, გადახდის მეთოდები).
სექციების დრო (პაროლი/2FA/KYC/ლიმიტები).
Error Rate ფორმები + წარმატებული Retry- ის წილი.
Adoption პრეფერენციები (თემა, სწრაფი განაკვეთები, კოეფიციენტების ფორმატი).
უსაფრთხოება: 2FA- ს მომხმარებელთა წილი, დასრულებული სხვისი სესიების რაოდენობა.

17) ანტი შაბლონები

სიღრმეში დამალული კრიტიკული პარამეტრები (2FA/ლიმიტები).
გრძელი კითხვარები მოდალკაში; მანქანის სატვირთო მანქანის ნაკლებობა.
„მუნჯი“ გაგზავნა busy/დადასტურების გარეშე.
ფოკუსის გადინება და განლაგების „გადახტომა“; 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) Snippets

მოწყობილობების/სესიების სია (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 ჩეკის სია

მნიშვნელობა და ნაკადი

სექციები ლოგიკურია; თითოეულ ეკრანს აქვს ერთი მთავარი CTA.

• URL/ნავიგაცია აღადგენს ბოლო განყოფილებას.

ფორმები

• სწორი 'ტიპი/inputmode/autocomplete'; რბილი ნიღბები, პროგნოზირებადი კარეტი.
• ასინქრონული შემოწმებები დებატებით; შენახვა არ კარგავს მონაცემებს.

უსაფრთხოება

• 2FA flow გასაგებია; სარეზერვო კოდები ხელმისაწვდომია გადმოტვირთვისთვის.
• სავარჯიშოები/მოწყობილობები დასრულებულია, მოვლენები ლოგიკურია.
• მგრძნობიარე ველები არ არის დაფიქსირებული/არ არის გადახურული.

iGaming სპეციფიკა

• ლიმიტები დაგვიანებული შესვლით და სხვადასხვა პერიოდით.
• KYC სტატუსი და დოკუმენტები ნათელია; შეტყობინებების დრო და არხი ჩანს.
• კოეფიციენტების და სწრაფი განაკვეთების ფორმატი მუშაობს როგორც ნათქვამია.

A11u/ლოკალიზაცია

• კონტრასტი AA; ': focus-visible' ჩვენ ვხედავთ; Tab შეკვეთა სწორია.
• ტექსტები და რიცხვები ადაპტირდება ენასთან/ვალუტასთან; RTL მხარს უჭერს (საჭიროების შემთხვევაში).

შესრულება

• TTFF-100 ms; არა CLS; ზარმაცი სურათები იტვირთება.
• დიდი სიები (ისტორია) პაგინირებულია/ვირტუალიზებულია.

21) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `ProfileHeader`, `ProfileSection`, `SecurityPanel`, `SessionsList`, `PaymentMethodCard`, `LimitsForm`, `KYCStepper`, `PreferencesForm`.
ნიშნები: ველები/სხივები/ფოკუსი/ბადი, KUS/ლიმიტის სტატუსები, წარმატების ფერები/შეცდომა/ყურადღება.
ნიმუშები: „ერთი CTA განყოფილებაში“, „Undo/Confirm რისკისთვის“, „მონაცემთა ექსპორტი/წაშლა (DSAR)“.
Do/Don 't: დამალული უსაფრთხო პარამეტრები, გადატვირთული ფორმები, მარკეტინგული ჩანართების შენიღბვა.

მოკლე რეზიუმე

პროფილის ინტერფეისი ნდობის ცენტრია: ის უნდა იყოს მარტივი, პატიოსანი და უსაფრთხო. მკაფიო არქიტექტურა, სწრაფი და პროგნოზირებადი ფლეშ (2FA/KYC/ლიმიტები/გადახდები), სისუფთავე ფორმები და მონაცემებთან მუშაობის გამჭვირვალობა პროფილს პროდუქტის საყრდენად აქცევს და ამცირებს დატვირთვას საფორტეპიანოზე - განსაკუთრებით კრიტიკულად iGaming- ისთვის.