واجهة ملف تعريف المستخدم

1) المبادئ

1. فكرة واحدة لكل شاشة. Profile = مجموعة من الأقسام القصيرة القائمة بذاتها مع 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) قسم الملفات الشخصية

الحقول: الاسم، تاريخ الميلاد، البلد، لغة الواجهة.
الاتصالات: البريد الإلكتروني (التحقق)، الهاتف (مكتب المدعي العام).
الموقع: التاريخ/الوقت/العملة مرتبطة باللغة والبلد.
يتم تحرير تاريخ الميلاد فقط عن طريق الدعم بعد KYC.

UX: مطالبات التنسيق، الأقنعة الناعمة، حفظ السيارات مع فضح الكذب، تأكيد النجاح.

5) السلامة

كلمة المرور: التغيير بواسطة كلمة المرور الحالية + قواعد الجودة (مقياس الضغط/المطالب)، لا تظهر المتطلبات بأثر رجعي.
2FA: TOTP/SMS ؛ التيار الرئيسي البسيط: «تمكين → الرموز الاحتياطية → QR».
الأجهزة والجلسات: قائمة المدخلات النشطة (الجهاز/نظام التشغيل/الموقع/الوقت)، CTA «End all باستثناء الحالية».
تسجيل الدخول الاجتماعي: ربط/فك الارتباط بالتأكيد.

6) المدفوعات

طرق الدفع: بطاقات (قناع '1234')، A2A/wallets ؛ الحالة الافتراضية.
الاستنتاجات: تم حفظ التفاصيل (IBAN/wallet) مع التحقق من النقل الجزئي، إذا انطبق ذلك.
سجل المعاملات: مرشحات حسب النوع/التاريخ/الكمية، تصدير CSV.
الشفافية: اللجان/ETA والدول قيد العملية/المرفوضة/الجاهزة.

7) الحدود (اللعب المسؤول)

الأنواع: الإيداع، السعر، الوقت المستقطع، الاستبعاد الذاتي.
UX: فترة الراديو (يوم/أسبوع/شهر) + المبلغ، نص صريح «سيدخل حيز التنفيذ في»....
التغيير نحو الضعف - تأخر ؛ التشديد - على الفور.

8) KYC

Stepper: Personal data → Documents → Sending → Under Review.
متطلبات الملفات الواضحة (نوع/حجم/وضوح) + معاينة.
الحالة والشروط، وقناة الإخطار للتأهب، وسجل الوثائق المقدمة.

9) الأفضليات

شكل المعاملات عشري/كسري/أمريكي.
الرهانات السريعة: تبديل + تحذير «عدم التأكيد» والتراجع إذا سمح بذلك.
الموضوع: الضوء/الظلام/النظام ؛ وضع التباين لضعاف البصر.
Geo and language: retain but recome jurisdictional requires (content/block lists).

10) الإشعارات

القنوات: الدفع/البريد الإلكتروني/الرسائل القصيرة/في التطبيق.
المجموعات: المالية، والألعاب، والاجتماعية، والتسويق (بشكل معتدل افتراضي).
«لا تزعج»: النطاقات الزمنية والظروف (مثل لا تسويق في الليل).
المعاينة: كيف يبدو الإشعار، وأين يتم إيقاف تشغيله.

11) الخصوصية والبيانات

رؤية الملف الشخصي (إذا كانت وظائف اجتماعية): من يرى اللقب/الصورة الرمزية/النشاط.
تحميل البيانات (DSAR): طلب محفوظات مع مهلة زمنية ؛ الإخطار بشأن الاستعداد.
حذف حساب: شرح العواقب، فترة السماح، «التجميد» كبديل.
سجل الموافقة: ملفات تعريف الارتباط/التسويق/الشروط - التواريخ والإصدارات.

12) تاريخ العمل

الخلاصة: المداخل/المخارج، changes/2FA كلمة السر، التغييرات في تفاصيل الدفع، الحدود.
المرشحات والتصدير ؛ شرح الملكية الفكرية الجغرافية والأجهزة.
CTA «ألم تكن أنت ؟» → تغيير سريع لكلمة السر وتدفق إنهاء الجلسة.

13) A11y والتوطين

يتم ربط الملصقات والأدلة من خلال «aria-description» ؛ الأخطاء - "الدور =" التنبيه ".
على النقيض ≥ AA، مرئي «: التركيز المرئي»، يتوافق ترتيب علامة التبويب مع المرئي.
«prefers-reducted-motion» - الحد الأدنى من الرسوم المتحركة.
التوسع اللغوي: 20-30 في المائة هامش العرض ؛ الأرقام مجدولة ('font-variant-numberic: tabular-nums; ').

14) أنماط الهاتف المحمول

قائمة الملفات الشخصية كدرج ؛ الحالات الرئيسية/CTA - في الأعلى.
Sticky-CTA في الأسفل للأشكال الطويلة («Save Changes»).
تحجيم الحقول ولوحات المفاتيح حسب النوع («inputmode»).
إشعارات/تاريخ - شريط مع تحميل لا نهاية له ومراقب حراسة.

15) فارغة، أخطاء، دول

فارغ: تلميح ودي و «ما التالي» (إضافة طريقة/تضمين 2FA).
خطأ: سبب + كيفية إصلاح + Retry; لا تعيد ضبط المدخلات.
مشغول: محملون محليون، دون قفل الشاشة بأكملها ؛ TTFF ≤ 100 مللي ثانية.

16) المقاييس

معدل الإنجاز حسب الإعدادات الرئيسية (2FA، KYC، طرق الدفع).
الأقسام الزمنية إلى الكاملة (كلمة السر/2FA/KYC/limits).
معدل الخطأ للنماذج + معدل نجاح إعادة التجربة.
تفضيلات التبني (الموضوع، الرهانات السريعة، تنسيق الاحتمالات).
الوضع الأمني: نسبة المستخدمين الذين لديهم 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/الملاحة يعيد القسم الأخير.

النماذج

• تصحيح 'النوع/inputmode/autocomplete' ؛ أقنعة ناعمة، مهنة يمكن التنبؤ بها.
• الفحوصات غير المتزامنة مع فضح الكذب ؛ التوفير لا يفقد البيانات.

السلامة

• تدفق 2FA مفهوم ؛ الرموز الاحتياطية متاحة للتنزيل.
• يتم إنهاء الجلسات/الأجهزة وتسجيل الأحداث.
• الحقول الحساسة غير مسجلة/مخبأة.

تفاصيل iGaming

• حدود مع تأخر الدخول وفترات مختلفة.
• أوضاع ووثائق KYC واضحة ؛ المواعيد النهائية وقناة الإخطار مرئية.
• تنسيق الاحتمالات والرهانات السريعة تعمل كما هو معلن.

А11у/Localization

• التباين ≥ AA ؛ ': التركيز المرئي' انظر ؛ طلب علامة التبويب صحيح.
• يتم تكييف النصوص والأرقام مع اللغة/العملة ؛ يتم دعم RTL (إذا لزم الأمر).

الأداء

• TTFF ≤ 100 mm ؛ عدم وجود نظام للمعلومات القانونية ؛ الصور تتحمل بكسل.
• القوائم الكبيرة (التاريخ) مثبتة/افتراضية.

21) التوثيق في نظام التصميم

Компоненты: "ProfileHeader"، "ProfileSection"، "SecurityPanel'،" SessionsList'، "PayingMethodCard'،" LimitsForm'، "KYCStepper"، "PPForM.
الرموز: حقول/نصف قطر/تركيز/شارات، CUS/حالات الحد، ألوان النجاح/الخطأ/الانتباه.
الأنماط: «واحد CTA لكل قسم»، «Undo/Confirm for risk»، «تصدير/حذف البيانات (DSAR)».
افعل/لا تفعل: إعدادات أمان مخفية، نماذج محملة أكثر من اللازم تخفي إدراجات التسويق.

موجز

واجهة الملف الشخصي هي مركز ثقة: يجب أن تكون بسيطة وصادقة وآمنة. تحول البنية الواضحة والتدفق السريع والقابل للتنبؤ (2FA/KYC/limits/pays) والأشكال الأنيقة وشفافية العمل مع البيانات الملف الشخصي إلى دعم للمنتج وتقليل العبء على الدعم - وهو أمر بالغ الأهمية بشكل خاص لـ iGaming.