رابط کاربری پروفایل

1) اصول

1. یک فکر در هر صفحه پروفایل = مجموعه ای از بخش های مستقل کوتاه با یک CTA هر کدام.
2. امنیت پیش فرض وضعیت های قابل مشاهده از راه های 2FA/sessions/devices و ساده برای عمل.
3. شفافیت اطلاعات چه ذخیره شده است, چرا, چگونه برای غیر فعال کردن/دانلود/حذف.
4. بدون شخصی سازی بیش از حد. فقط تنظیمات واقعی که بر تجربه تاثیر می گذارد.
5. هرگز زمینه را از دست ندهید. پیش نویس، بازگشت به آخرین بخش، URL قابل پیش بینی.

2) معماری اطلاعات

• مشخصات (نماد، نام، مخاطبین)
• امنیت (رمز عبور، 2FA، دستگاه ها/جلسات)
• پرداخت (روش ها، قطعات خودکار ذخیره شده، تاریخ)
• محدودیت ها (بازی مسئولانه)
• KYC (وضعیت، آپلود سند)
• ترجیحات (زبان، ارز، فرمت شانس، شرط سریع، موضوعات)
• اطلاعیه ها (انواع/کانال ها، سکوت/هضم)
• حریم خصوصی و داده ها (دید، DSAR/صادرات، حذف حساب)

هرگز PAN/CVC کامل را نشان نمی دهد ؛ نشانه ها و ماسک های فقط UX.

3) هدر مشخصات

آواتار (بارگیری/برداشت)، نام نمایش، شناسه/نام کاربری.
مدالها وضعیت: KYC: تحت بررسی/گذشت، 2FA: روشن/خاموش، بازی مسئول: فعال.
لینک های سریع: «تغییر رمز عبور»، «تایید ایمیل/تلفن»، «تنظیم یک حد».

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).
Locale: تاریخ/زمان/ارز مربوط به زبان و کشور است.
تاریخ تولد فقط از طریق پشتیبانی پس از KYC ویرایش می شود.

UX: قالب بندی، ماسک های نرم، ذخیره خودکار با debunking، تایید موفقیت.

5) ایمنی

رمز عبور: با رمز عبور فعلی + قوانین کیفیت (فشار سنج/پیشنهادات) تغییر دهید، الزامات بازگشتی را نشان ندهید.
2FA: TOTP/SMS ؛ جریان اصلی ساده: «فعال کردن → QR → کدهای پشتیبان گیری».
دستگاه ها و جلسات: لیستی از ورودی های فعال (دستگاه/OS/مکان/زمان)، CTA «پایان دادن به همه به جز جریان».
logins اجتماعی: اتصال/unlinking با تایید.

6) پرداخت

روش های پرداخت: کارت (ماسک '1234')، A2A/wallets ؛ وضعیت پیشفرض.
نتیجه گیری: جزئیات ذخیره شده (IBAN/کیف پول) با تأیید میکرو انتقال، در صورت لزوم.
تاریخچه معامله: فیلترها بر اساس نوع/تاریخ/مقدار، صادرات CSV.
شفافیت: کمیسیون/ETA و در حال پردازش/رد/کشورهای آماده.

7) محدودیت ها (بازی مسئولانه)

انواع: سپرده، نرخ، زمان، خود حذفی.
UX: دوره رادیویی (روز/هفته/ماه) + مقدار، متن صریح «در... تأثیر خواهد گذاشت».
تغییر به سمت تضعیف - تاخیر ؛ سفت کردن - بلافاصله.

8) KYC

Stepper: اطلاعات شخصی → اسناد → ارسال → تحت بررسی.
پاک کردن الزامات فایل (نوع/اندازه/وضوح) + پیش نمایش.
وضعیت و شرایط، کانال اطلاع رسانی برای آمادگی، تاریخچه اسناد ارائه شده.

9) ترجیحات

فرمت ضرایب اعشاری/کسری/آمریکایی است.
شرط سریع: سوئیچ + «بدون تایید» هشدار و خنثی کردن اگر مجاز است.
موضوع: نور/تاریک/سیستمیک ؛ حالت کنتراست برای افراد مبتلا به اختلال بینایی.
جغرافیا و زبان: حفظ اما به یاد داشته باشید الزامات قضایی (محتوا/لیست بلوک).

10) اطلاعیه ها

کانال ها: فشار/ایمیل/اس ام اس/در برنامه.
گروه ها: مالی، بازی، اجتماعی، بازاریابی (به طور پیش فرض).

«مزاحم نشوید»: محدوده زمانی و شرایط (به عنوان مثال بازاریابی در شب)

Preview: نوتیفیکیشن چگونه به نظر می رسد، کجا آن را خاموش کنیم.

11) حریم خصوصی و داده ها

دید پروفایل (اگر توابع اجتماعی): چه کسی می بیند نام مستعار/نماد/فعالیت.

بارگیری داده ها (DSAR): درخواست برای آرشیو با زمان سرب ؛ اطلاع رسانی در مورد آمادگی

حذف یک حساب کاربری: توضیح عواقب، فضل دوره، «توقف» به عنوان یک جایگزین.
رضایت ورود: کوکی ها/بازاریابی/شرایط - تاریخ و نسخه.

12) تاریخچه عمل

خوراک: ورودی/خروجی، changes/2FA رمز عبور، تغییر در جزئیات پرداخت، محدودیت ها.
فیلترها و صادرات توضیح جغرافیایی IP و دستگاه ها.
CTA «تو نبودی ؟» → تغییر رمز عبور سریع و جریان ختم جلسه.

13) A11y و محلی سازی

برچسب ها و سرنخ ها از طریق «aria-describedby» مرتبط هستند ؛ errors - «نقش =» هشدار «».
کنتراست ≥ AA، قابل مشاهده «: تمرکز قابل مشاهده»، سفارش Tab مربوط به بصری است.
'prefers-reduced-motion' - حداقل انیمیشن ها.
گسترش زبان: حاشیه 20-30٪ در عرض ؛ اعداد جدولی هستند ('font-variant-numeric: tabular-numers; ').

14) الگوهای تلفن همراه

منوی مشخصات به عنوان کشو ؛ وضعیت های کلیدی/CTA - در بالا.
Sticky-CTA در پایین برای فرم های طولانی («ذخیره تغییرات»).
مقیاس بندی زمینه ها، صفحه کلید بر اساس نوع ('inputmode').
اطلاعیه/تاریخ - نوار با بارگذاری بی پایان و نگهبان ناظر.

15) خالی, خطاها, ایالات

خالی: اشاره دوستانه و «چه بعدی» (اضافه کردن روش/شامل 2FA).
خطا: علت + نحوه رفع + سعی مجدد ؛ ورودی را دوباره تنظیم نکنید.

مشغول: بوت لودرهای محلی، بدون قفل کردن کل صفحه ؛ TTFF ≤ 100 میلی ثانیه

16) معیارها

نرخ تکمیل با تنظیمات کلیدی (2FA، KYC، روش های پرداخت).
بخش های زمان برای تکمیل (رمز عبور/2FA/KYC/محدودیت).
نرخ خطای فرم ها + نرخ موفقیت مجدد.
ترجیحات پذیرش (موضوع، شرط سریع، فرمت شانس).
وضعیت امنیتی: نسبت کاربران با 2FA، تعداد جلسات خارجی تکمیل شده.

17) ضد الگوهای

تنظیمات بحرانی پنهان (2FA/limits) در عمق.
پرسشنامه های طولانی در یک حالت ؛ بدون صرفه جویی در ماشین.
ارسال خاموش بدون اشغال/تایید.
تنظیم مجدد تمرکز و طرح «پرش» ؛ 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

معنی و جریان

• بخش ها منطقی هستند ؛ هر صفحه نمایش یک CTA اصلی دارد.
• URL/navigation آخرین بخش را بازیابی می کند.

فرم ها

• صحیح 'نوع/inputmode/تکمیل خودکار' ؛ ماسک های نرم، مراقبت قابل پیش بینی.
• چک آسنکرون با debunking; پس انداز داده ها را از دست نمی دهد.

امنیت و ایمنی

• جریان 2FA قابل درک است ؛ کدهای پشتیبان برای دانلود در دسترس هستند.
• جلسات/دستگاه ها خاتمه می یابد، رویدادها وارد سیستم می شوند.
• فیلدهای حساس ذخیره/ذخیره نمی شوند.

ویژگی های iGaming

• محدودیت با تاخیر در ورود و دوره های مختلف.
• وضعیت KYC و اسناد روشن است ؛ تاریخ و کانال اطلاع رسانی قابل مشاهده است.
• فرمت شانس و شرط سریع کار به عنوان تبلیغ.

А11у/Localization

• کنتراست ≥ AA ؛ ': focus-visible' see; دستور تب درست است.
• متون و اعداد به زبان/ارز اقتباس شده است ؛ RTL پشتیبانی می شود (در صورت لزوم).

عملکرد

• TTFF ≤ 100 میلی ثانیه ؛ بدون CLS ؛ تصاویر به آرامی بارگذاری می شوند.
• لیست های بزرگ (تاریخ) صفحه بندی/مجازی می شوند.

21) مستندات در سیستم طراحی

Компоненты: 'ProfileHeader', 'ProfileSection', 'SecurityPanel', 'SessionsList', 'PaymentMethodCard', 'LimitsForm', 'KYCStepper', 'PreferencesForm'.
نشانه ها: زمینه ها/شعاع/تمرکز/مدالها، وضعیت CUS/حد، رنگ موفقیت/خطا/توجه.
الگوها: «یک CTA در هر پارتیشن»، «Undo/Confirm for risk»، «صادرات/حذف داده ها (DSAR)».
انجام/انجام ندهید: تنظیمات امنیتی پنهان، فرم های بیش از حد که شامل بازاریابی می شوند.

خلاصه ای کوتاه

رابط کاربری پروفایل یک مرکز اعتماد است: باید ساده، صادقانه و امن باشد. معماری روشن، جریان سریع و قابل پیش بینی (2FA/KYC/محدودیت/پرداخت)، فرم های شسته و رفته و شفافیت کار با داده ها، نمایه را به پشتیبانی محصول تبدیل می کند و بار پشتیبانی را کاهش می دهد - مخصوصا برای iGaming.