تصميم نماذج UX

1) المبادئ

1. أولاً المهمة، ثم الحقول. النماذج هي استمرار لنص المستخدم، وليست قائمة بقواعد البيانات.
2. شاشة واحدة هي هدف واحد. قم بإزالة أي شيء لا يكمل المهمة.
3. لا تفقد البيانات أبدًا. Autosave، استعادة المسودة، الإعادة الآمنة.
4. أظهر "كيف. "القواعد والأمثلة السابقة للخطأ ؛ التحقق بعناية.
5. توافر افتراضي. الملصقات، التركيز، التباين، التنقل في لوحة المفاتيح.
6. سرعة متوقعة. الرد الأول ≤ 100 ملليمتر مكعب، مع إرسال وضع واضح وتقدم.

2) شكل بنية المعلومات

الغرض → الخطوات → الحقول ابدأ بالنتيجة (على سبيل المثال، «صرف») واختر المجموعة الدنيا من الحقول.
التجميع حسب المعنى: "البيانات الشخصية"، "الدفع"، "التأكيد. "كل مجموعة ≤ 6 حقول.
الكشف التدريجي: إظهار مجالات إضافية حسب الحالة (التبديل/اختيار البلد).
ترتيب الحقول يشبه في رأس المستخدم: من المعروف إلى المجمع.

3) التخطيط والشبكة

عمود واحد للجوال ومعظم المهام أسرع في ترتيب المظهر والعلامة التبويب.
عمودان مناسبان للحقول القصيرة المترابطة (التاريخ/الوقت، الاسم/اللقب).
ارتفاع الخط هو 40-48 px، المسافة بين الحقول 8-12 px (ذات صلة )/16-24 px (مجموعات).
توسيم المحاذاة في الجزء العلوي من الحقل ؛ على اليمين - لا تستخدم للأشكال الضيقة.

4) الملصقات والمساعدون والمساعدون

التسمية إلزامية. العنصر المساعد هو مثال وليس بديل.
وضع النص المساعد تحت الميدان: القواعد والشكل والإشارة إلى مثال.
تشمل الحقول الاختيارية «(اختياري)» بدلاً من «» في الحقول المطلوبة.

html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>

5) الخطوات والتقدم

النماذج متعددة الخطوات (ASC/Payouts): 3-5 خطوات، تقدم واضح «الخطوة 2 من 4».
حفظ الخطوات المكتملة ؛ اسمح بالعودة دون فقدان البيانات.
أزرار التنقل: «العودة»، «التالي»، «التأكيد» النهائي - دائمًا في مكان واحد.

6) التحكم في المدخلات

لوحات المفاتيح والسمات: «نوع»، «inputmode»، «مكتمل تلقائيًا» لنوع البيانات.
استخدم أقنعة الإدخال بهدوء (الهاتف، IBAN، PAN، التاريخ)، قيم التخزين الطبيعية.
لا تكسر مكتمل تلقائيًا: صحيح' autocomplete =» الاسم المعطى» | «cc-number» | «رمز لمرة واحدة»، إلخ.
المبلغ المسبق/الاختصارات: «+ 50/+ 100/All» بجوار حقل الكمية.

7) التحقق من الصحة والأخطاء

الاستراتيجية: قبل الدخول (المساعد)، أثناء (الحوافز اللينة)، بعد (عند التشويش/التقديم).
الفحوصات غير المتزامنة (تفرد تسجيل الدخول، والحدود، والمخاطر) - مع خصم 250-400 مللي ثانية.
خطأ النص: سبب → كيفية إصلاح → بديل.
لوحة موجزة فوق النموذج لعدة أخطاء + التركيز على الخطأ الأول.
مفتاح الخصوصية للإجراءات الحاسمة (العطاء/الأجر) وإعادة الطباعة الآمنة.

8) الأزرار والإرسال

يتم تمييز CTA الأساسي باللون/الحجم، وهو متاح بواسطة Enter.
دولة «مشغولة» وانقر فوق كتلة إعادة المحاولة ؛ في التأخير> 3-5 ث - «في انتظار التأكيد»....
بعد النجاح - الحالة الصريحة (نخب/شاشة جاهزة) + ما سيحدث بعد ذلك.

9) التوافر (A11y)

الروابط الصحيحة «التسمية → الإدخال»، والأخطاء من خلال «aria-descedby»، و «critical» - «role =» alert'.
مرئي «: التركيز المرئي»، ترتيب علامة التبويب يتوافق مع المرئي.
تباين النص/الرمز ≥ AA ؛ المعنى ليس فقط اللون.
دعم «يفضل الحركة المخفضة»: الحد الأدنى من الرسوم المتحركة.
لمجموعات أزرار الراديو - "fieldset/legend'، للمطالبات -" الدور = "الحالة" ".

10) التوطين والأشكال الدولية

التواريخ/العملات/الأرقام - المحلية عند الدخول، التخزين - ISO/الوحدات الثانوية.
السماح بحروف أبجدية مختلفة في الأسماء/العناوين ؛ لا تحد من الواصلات/الفاصلة العليا.
إبقاء الهاتف في E.164 ؛ أو من '+ CC' عند الإدراج.

11) الأداء والاستقرار

أول استجابة بصرية ≤ 100 مللي ثانية ؛ الفحوصات غير المتزامنة - لا تقفل الشاشة.
الهيكل العظمي بدلاً من الدوار «المعلق»، أصلح الارتفاعات، تجنب CLS.
افتراضية القوائم الطويلة (على سبيل المثال البلدان/المصارف).
حرك فقط «تحويل/عتامة»، بدون ضبابية/ظلال.

12) الأمن والخصوصية

لا تسجل PAN/CVC/Passport ؛ لا ترسل إلى وحدة التحكم RUM/.
قناع الحقول الحساسة، لا تنقذها في autosave.
لا تكشف عما إذا كان الحساب موجودًا: «إذا تم تسجيل البريد الإلكتروني، فسنرسل بريدًا إلكترونيًا».
التخزين - الحد الأدنى المطلوب ؛ تبين سبب الحاجة إلى KYC.

13) أنماط السيناريوهات النموذجية

13. 1 الدفع/الإيداع

حقل المبلغ مع التجهيزات المسبقة، العملة محددة صراحة.
PAN مع قناع ناعم، فحص Luhn ؛ CVC مخفي ؛ date 'MM/YY' with auto-'/'.
نص حول العمولات/المواعيد النهائية القريبة، وليس في تلميح الأدوات.

13. 2 الانسحاب

الخطوات المبلغ → الطريقة → التأكيد

التقدم و «عادة ما تصل إلى N دقيقة/ساعة» (لا توجد وعود صعبة).
بدائل الأساليب حسب البلد ؛ الحد من التحذيرات.

13. 3 KYC

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

13. 4 الحدود واللعب المسؤول

وحدات واضحة (يوم/أسبوع/شهر)، إعدادات مسبقة، تأكيد التغييرات، «سيدخل حيز التنفيذ في»....

14) أنتيباترن

العنصر المساعد بدلاً من التسمية.
أخطاء «لكل شخصية» دون فضح.
يعيد ضبط النموذج عند الخطأ.
التعليمات النقدية مخفية فقط في تلميح الأدوات.
أقنعة صلبة تحظر الأحرف/الإدخال الصحيح.
قفل الصفحة بأكملها للتحقق من صحة حقل واحد.
أرسل دون انشغال/تقدم صريح.

15) مقتطفات التنفيذ

موجز الأخطاء + التركيز على العدد الأول

js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}

زر مع الانشغال الفوري والغباء

js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});

إطار HTML لمجموعة أزرار الراديو المتاحة

html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>

16) رموز نظام التصميم (مثال)

json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}

CSS يحدد مسبقًا

css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; 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; }

17) المقاييس والتجارب

معدل الإنجاز، وقت الإكمال، معدل الخطأ حسب المجال.
إعادة تجربة معدل النجاح، نسبة النماذج التي تم إلقاؤها، عمق الخطوة.
CTR للتلميحات/الأمثلة، نسبة المكملات الذاتية.
ألف/باء: الترتيب الميداني، الكمية المحددة مسبقا، نصوص الأخطاء، التقسيم إلى خطوات.

18) قائمة QA المرجعية

المعنى والتدفق

• الحقول مطابقة للهدف ؛ لا مزيد.
• المجموعات منطقية ؛ بحد أقصى 6 حقول لكل مجموعة.

مدخلات

• تصحيح «النوع/inputmode/autocomplete».
• الأقنعة ناعمة، والإدراج لا ينكسر، والحذر يمكن التنبؤ به.

التحقق من الصحة

• مساعد قبل الإدخال ؛ والأخطاء في التشويش/التقديم ؛ debouns 250-400 ms.
• فريق موجز للأخطاء المتعددة ؛ التركيز على الأول.

التوافر

• البطاقات مرتبطة ؛ التباين ≥ AA ؛ «: التركيز مرئي» مرئي.
• ملاحة لوحة المفاتيح ؛ مع «مجموعة ميدانية/أسطورة».

الأداء

• الرد الأول ≤ 100 مللي ثانية ؛ لا مغازل «معلقة».
• لا يوجد نظام للمعلومات المدنية ؛ القوائم الطويلة افتراضية.

الأمن

• لا توجد سجلات ميدانية حساسة ؛ PAN/CVC ليس في autosave.
• يتم تضمين الخصوصية والخلوات الآمنة.

19) تفاصيل iGaming

الرهانات: حقل الكمية + التجهيزات المسبقة، «مشغول» الفوري، تأكيد متفائل مع إمكانية التراجع (إذا سمحت اللوائح).

المدفوعات/عمليات السحب: الرسوم والمواعيد النهائية الصريحة بالقرب من الحقول، وليس فقط في الإكراميات ؛ حدود التحقق وحالة KYC

البطولات: شكل من أشكال التسجيل مع مجموعة دنيا من البيانات والقواعد وصناديق التحقق المتفق عليها بدون «أنماط مظلمة».
اللعبة المسؤولة: أشكال وضع الحدود على فترات واضحة ومعاينة النتيجة («الحد اليومي الخاص بك سيكون 2000 ₴ من الغد»).

موجز موجز

الشكل الجيد هو هدف واضح، مجموعة صغيرة من الحقول، قواعد واضحة قبل الخطأ، استجابة فورية وبيانات محفوظة. تصميم الهيكل من النص، واحترام إمكانية الوصول والموقع، بما في ذلك إعادة الطباعة الآمنة والغباء. هذه هي الطريقة التي تشعر بها الأشكال بالسرعة والثقة - خاصة في سيناريوهات iGaming الحرجة.