اختيار عناصر التحكم: صندوق التحقق، التبديل، زر الراديو

1) الاختلافات الرئيسية (بمعنى، وليس «الشكل»)

• أحتاج إلى واحد من N - خذ الراديو.
• تحتاج إلى أي مجموعة من الأعلام - صناديق الشيكات.
• تحتاج إلى مفتاح تبديل ثنائي واحد يغير السلوك على الفور - التبديل.

2) شجرة القرار (قصيرة)

1. بعض الانتخابات المستقلة ؟ → صناديق الشيكات.
2. خيار واحد بالضبط من المجموعة ؟ → أزرار الراديو (أو عناصر التحكم/العلامات).
3. علم ثنائي واحد، التأثير فوري وملحوظ ؟ → التبديل.
4. هل تحتاج إلى علامة «جزئية» (مجموعة فرعية) ؟ → Checkbox مع ثلاث حالات.
5. المخاطر/التكلفة عالية (الدفع، الاعتدال) ؟ → تأكيد الراديو/صندوق الشيكات + (وليس التبديل).

3) سلوك المستخدم وتوقعاته

التبديل = نتيجة فورية. بعد التبديل، يتوقع المستخدم تأثيرًا فوريًا وقابلية للعكس بدون حفظ منفصل.
Checkbox = اختيار الخيارات. يمكن تطبيقه على الفور أو بواسطة زر - من المهم إظهار النموذج صراحة («الإعدادات المحفوظة «/» النقر فوق حفظ »).
الراديو = اختيار الوضع. يمكن للانتقال إعادة بناء الواجهة. تغيرات الإشارات (microanimation/text).

4) الدول والدلالات البصرية

Normal/Hover/Focus/Active/Disabled/خطأ. تباين النص والمؤشرات ≥ AA.
Tri-state (checkbox): فارغ/جزئي/مختار. الحالة الجزئية ليست قابلة للنقر في حد ذاتها - النقر يتغير إلى «محدد»، وليس «فارغ».
التبديل: له تمييز واضح بين التشغيل/الإيقاف في وضع اللون والعداء. اللون ليس الناقل الوحيد للمعنى (أيقونة/ملصق قريب).

5) كتابة الإعلانات والتوقيعات

الفعل + كائن أو عبارة تصبح صحيحة عند تحديد.

صندوق الشيكات: «تلقي إشعارات بالبريد الإلكتروني».
التبديل: «الإشعارات: تشغيل/إيقاف» (ملصق على اليسار، الحالة - على اليمين أو في المفتاح نفسه).
Radio: «Coefficial Format: Decimal/Fractional/American».
تجنب الإنكار المزدوج: «لا تفصل»... - الارتباك.

بالنسبة للأفعال المحفوفة بالمخاطر، أضف وصفًا ثانويًا: "على. الرهانات السريعة (بدون تأكيد) - يمكنك الإلغاء في غضون 5 ثوانٍ"

6) إمكانية الوصول (A11y) ولوحة المفاتيح

Checkbox: «role =» checkbox «», «aria-checked =» true 'false' mix «», Space - switching.
التبديل: الأصلي "<نوع الإدخال =" checkbox ">" مع التبديل المرئي أو "الدور =" التبديل "مع" aria-checked ". سلوك يشبه صندوق الشيكات (الفضاء).
Radio: 'role = «radiogroup»' on the container, 'role = «radio» on the ements, arrows ↑/↓ or ←/→ - move the choice, Space/Enter - confirm.
المجموعات: استخدم «fieldset'/» legend' للسياق العام.
ترك حلقات التركيز مرئية ؛ أبعاد مناطق النقر ≥ 44 × 44 بكسل لكل لمسة.

html
<! -- Radio Group -->
<fieldset role="radiogroup" aria-labelledby="odds-format">
<legend id = "odds-format "> Odds format </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"> American </label>
</fieldset>

<! -- Checkbox (tri-state via aria) -->
<div role = "checkbox" aria-checked =" mixed" tabindex =" 0" id = "cb "> Notify about tournaments </div>

<! -- Switch (role = "switch") -->
<button role="switch" aria-checked="false" aria-labelledby="live-title" class="switch" id="live">
<span class="switch__knob"></span>
</button>
<span id = "live-title "> Live updates </span>

7) التغييرات والأخطاء غير المتزامنة

Switch + network: التبديل → تأكيد واجهة مستخدم → متفائل على الفور → إذا لم ينجح، تراجع بلطف وأظهر السبب.
Checkbox/radio على «Save»: لا يوجد تأكيد حتى الآن - لا تغير السلوك العالمي.
الإجراءات المحفوفة بالمخاطر: التأكيد (مودالكا) أو التراجع عن اللوحة لمدة 5-10 ثوانٍ (إذا سمحت اللوائح بذلك).

js
//Optimistic for switch const sw = document. getElementById('live');
sw. addEventListener('click', async ()=>{
const prev = sw. getAttribute('aria-checked') === 'true';
sw. setAttribute ('aria-checked', String (! prev)) ;//instantly try {
const r = await fetch('/api/live', { method:'POST', body: JSON. stringify({ enabled:!prev })});
if(!r.ok) throw new Error();
} catch {
sw. setAttribute('aria-checked', String(prev));     // откат
//show the toast "Failed to enable live"
}
});

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

التبديل هو التحكم الثنائي الرئيسي في الإعدادات على الهاتف المحمول.
يمكن استبدال الراديو بتحكم مقسم لخيارات 2-4 (ضرب الإصبع أفضل).
صناديق التحقق في القوائم - مع مساحة نقر كبيرة ودعم الاختيار السريع متعدد.

9) أنماط التجميع والتخطيط

الراديو: قائمة عمودية (مسح ضوئي أفضل)، لخيارات 2-3 - أجزاء في سطر واحد.
صناديق التحقق: محاذاة ذات عمود واحد ؛ للقوائم الطويلة - «حدد الجميع» + الحالة الثلاثية للمجموعة.
التبديل: وسم على اليسار، والتحكم على اليمين على نفس الخط ؛ إظهار الوضع الحالي مع النص حسب الحاجة (On/Off).

10) أنتيباترن

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

11) تفاصيل iGaming (أمثلة)

يتم تطبيق شكل المعاملات: مجموعة الراديو العشرية/الكسرية/الأمريكية على الفور وحفظها على الملف الشخصي.
الرهان السريع: تبديل الرهانات السريعة (بدون تأكيد) مع وصف صريح والتراجع لمدة 5-10 ثوانٍ بعد كل عملية.
الاشتراكات/الإخطارات: صناديق التحقق حسب نوع الحدث (الانتصارات والبطولات والودائع). Group checkbox "Select all' - tri-state.
التحديثات الحية للمعاملات: قم بتبديل «الوضع المباشر» بتفاؤل والتراجع عن خطأ الشبكة.
حدود التشغيل المسؤولة: أزرار الراديو لفترات (يوم/أسبوع/شهر) + حقل الكمية ؛ تأكيد الحد المعدل مع الدخول «من الغد».

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

json
{
"checkbox": { "size": 20, "radius": 4, "gap": 8 },
"radio": { "size": 20, "dot": 10, "gap": 8 },
"switch": { "width": 44, "height": 24, "knob": 20, "padding": 2 },
"focusRing": { "width": 2, "offset": 2 },
"motion": { "toggleMs": 140, "ease": "cubic-bezier(0. 2,0,0. 2,1)" },
"a11y": { "contrastAA": true }
}

css
.control { display:flex; align-items:center; gap:8px; min-height:36px; }
.switch { width:44px; height:24px; padding:2px; border-radius:999px; background:var(--bg-muted); position:relative; }
.switch[aria-checked="true"]{ background:var(--accent); }
.switch__knob{ position:absolute; width:20px; height:20px; border-radius:50%; left:2px; top:2px; transition: transform. 14s cubic-bezier(.2,0,.2,1); background:#fff; }
.switch[aria-checked="true"].switch__knob{ transform: translateX(20px); }
.control:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

13) مقتطفات منطق UX

js function updateMaster(master, items){
const total = items. length, checked = items. filter(i=>i. checked). length;
master. indeterminate = checked>0 && checked<total;
master. checked = checked===total;
}

js const radios = [...document. querySelectorAll('[role="radio"]')];
let i = radios. findIndex(r => r. getAttribute('aria-checked')==='true');
document. addEventListener('keydown', e => {
if(!['ArrowRight','ArrowDown','ArrowLeft','ArrowUp'].includes(e. key)) return;
e. preventDefault();
const dir = (e. key==='ArrowRight'          e. key==='ArrowDown')? 1: -1;
i = (i + dir + radios. length) % radios. length;
radios. forEach(r => r. setAttribute('aria-checked','false'));
radios[i].setAttribute('aria-checked','true');
radios[i].focus();
});

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

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

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

المعنى والاختيار

• يقابل التحكم صناديق التحقق من المهام (متعددة → ؛ وأحد أجهزة الراديو → N ؛ ثنائي فوري → مفتاح).
• بالنسبة للأفعال المحفوفة بالمخاطر، هناك تأكيد/إلغاء.

التوافر

• الأدوار الصحيحة («checkbox »/« switch »/« radiogroup »/« radio»)، «aria-checked »/« غير محدد».
• حلقات التركيز مرئية، والسهام تعمل في مجموعة راديو، مفتاح/مفتاح مفاتيح الفضاء.

السلوك

• التبديل يطبق التغييرات على الفور ؛ على الخطأ - التراجع والرسالة.
• الحالة الثلاثية لـ «اختر الجميع» صحيحة ؛ نقرات الملصقات تعمل.

مرئي

• التباين ≥ AA ؛ الدولة ليست ملونة فقط.
• انقر فوق المناطق ≥ 44 × 44 px ؛ النظام والمحاذاة مستقران.

موبايل

• تحكم مقسم لمتغيرات لاسلكية 2-4 تم اختبارها لللمس.
• ضرب الأصابع والتمرير لا يتعارض.

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

المكونات: "Checkbox" و "Switch" و "RadioGroup "/" SegmentedControl'.
الحجم/الرسوم المتحركة/رموز التركيز، أمثلة على كتابة الإعلانات.
الأنماط: «حدد الكل» (ثلاثي الحالات)، «التطبيق الفوري»، «التراجع بعد المخاطرة».
افعل/لا تفعل المعرض: مفتاح حفظ متأخر (لا تفعل)، راديو بدلاً من صناديق التحقق (لا تفعل)، مقاطع لمجموعات قصيرة (افعل).

موجز موجز

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