בחירת פקדים: תיבת בדיקה, מתג, כפתור רדיו

1) הבדלי מפתח (כלומר, לא ”דמות”)

• אני צריך אחד מהאן. קח את הרדיו.
• אתה צריך כל קבוצה של דגלים - תיבות המחאה.
• אתה צריך מתג בינארי אחד שמשנה את ההתנהגות באופן מיידי.

2) עץ החלטה (קצר)

1. כמה בחירות עצמאיות?
2. בדיוק אפשרות אחת מתוך הסט? = כפתורי רדיו (או לוח בקרה/תגיות).
3. דגל בינארי אחד, האפקט מיידי וניתן להבחנה?
4. צריך סימן ”חלקי” (תת-קבוצה)?
5. סיכון/עלות הוא גבוה (תשלום, מתינות)? = רדיו/צ 'ק בוקס + אישור (לא החלפה).

3) התנהגות משתמש וציפיות

החלפה = תוצאה מיידית. לאחר ההחלפה, המשתמש מצפה להשפעה מיידית והפיכה ללא שמירה נפרדת.
תיבת צ 'ק = בחירה של אפשרויות. ניתן ליישם אותו באופן מיידי או על ידי כפתור - חשוב להראות במפורש את המודל (”הגדרות שנשמרו ”/” לחץ על שמירת ”).
רדיו = בחירת מצב. המעבר יכול לבנות מחדש את הממשק. שינויי אותות (מיקרו-אנימציה/טקסט).

4) מצבים וסמנטיקה חזותית

תקינה/ריחוף/מיקוד/פעילות/ביטול/שגיאה. ניגוד של טקסט ואינדיקטורים AA.
Tri-state (תיבת צ 'קים): ריק/חלקי/נבחר. המצב החלקי אינו ניתן לשליטה כשלעצמו - הלחץ משתנה ל ”נבחר” ולא ל ”ריק”.
מתג: יש לו הבחנה ברורה של דלקת/כיבוי בתנוחת צבע ורץ. הצבע אינו נושא המשמעות היחיד (סמל/תווית בקרבת מקום).

5) קופירייטינג וחתימות

פועל + אובייקט או הצהרה שהופכים לאמיתיים כאשר נבחרים.

תיבת צ 'ק: ”קבל הודעות דואר אלקטרוני”.
החלפה: ”הודעות: On/Off” (תווית משמאל, מדינה - מימין או במתג עצמו).
רדיו: ”תבנית מקדם: עשרוני/שבר/אמריקאי”.
הימנע מהכחשות כפולות: ”אל תנתק”... - מבלבל.

לפעולות מסוכנות, להוסיף תיאור משני: "הלאה. הימורים מהירים (אין אישור) - אתה יכול לבטל בתוך 5 שניות"

6) נגישות (A11y) ומקלדת

צ 'ק בוקס: ”תפקיד =” checkbox ””, aria-checked = ”true' false 'mixed”, space - מתגים.
החלפה: ילידי ”<קלט סוג =” checkbox ”>” עם החלפה ויזואלית או ”תפקיד” = ”מתג” עם ”aria-check”. התנהגות דמוית קופסת צ 'קים (מרחב).
רדיו: ”radiogroup” על המיכל, ”radio” על היסודות, חיצים drugroup/extor ←/→ - להזיז את הבחירה, Space/Enter - לאשר.
קבוצות: השתמש ב ”שדה שדה ”/” אגדה” עבור הקשר כללי.
השאר טבעות מיקוד גלויות; ממדים של אזורי לחיצה 44 × 44 px למגע.

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: switching acting action optimal UI # exployment server importment ac.if אם לא הצליח, גלגל בעדינות בחזרה והראה את הסיבה.
Checkbox/radio on ”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 (דוגמאות)

הפורמט של המקדמים: Decimal/Fractional/American radio group - מיושם באופן מיידי ונשמר בפרופיל.
הימור מהיר: הימורים מהירים (ללא אישור) מתחלפים בתיאור מפורש ומבטלים למשך 5-10 שניות לאחר כל פעולה.
מנויים/הודעות: תיבות בדיקה לפי סוג האירוע (ניצחונות, טורנירים, הפקדות). תיבת בדיקות קבוצתית ”בחר את הכל” - שלוש מדינות.
עדכונים חיים של מקדמים: לעבור ”Live-mode” עם אופטימיות ו rollback על שגיאת רשת.
מגבלות משחק אחראיות: כפתורי רדיו לתקופות (יום/שבוע/חודש) + כמות שדה; אישור של הגבלת השינוי עם הכניסה ”ממחר”.

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: קופירייטינג מותג, סדר אפשרויות, מקוטע נגד רדיו, ”החל מיד” vs ”על ידי כפתור”.

15) רשימת QA

משמעות ובחירה

[ בקרת ] מתאימה למשימה (מספר תיבות צ 'ק-בוקס; אחד ממכשירי הקשר של N. מתג בינארי מיידי).

[ ] לפעולות מסוכנות, יש אישור/ביטול.

זמינות

[ ] התפקידים הנכונים (”checkbox ”/” switch ”/” radiogroup ”/” radio”), ”aria-check ”/” instrinate”.

[ טבעות המיקוד ] נראות לעין, חצים עובדים בקבוצת רדיו,

התנהגות

[ ] מתג חל השינויים באופן מיידי; על שגיאה - rollback ומסר.

[ ] Tri-state עבור ”בחר את כל” נכון; קליקים תווית לעבוד.

חזותי

[ ניגוד ] AA; המדינה אינה צבעונית בלבד.

[ ] לחצו על אזורים 44 × 44 px; הסדר והיישור יציבים.

Mobile

[ ] בקרת סגמנט עבור 2-4 וריאנטי רדיו נבדק למגע.

[ ] אצבע מכה וגלילה לא לסכסך.

16) תיעוד במערכת התכנון

רכיבים: "Ceckbox", "Switch", "Radio Group "/" SegmaStage Control'.
אסימונים בגודל/אנימציה/מיקוד, דוגמאות לקופירייטינג.
תבניות: ”בחר את כל” (tri-state), ”יישום מיידי”, ”ביטול לאחר סיכון”.
Do/Don 't Gallery: מתג עיכוב-חיסכון (לא), רדיו במקום תיבות צ' ק-בוקס (לא), מקטעים לסטים קצרים (דו).

תקציר

בחירת השליטה עוסקת במשמעות ובציפיות: צ 'ק-בוקס - דגלים וקבוצות עצמאיים, החלפה מיידית של פונקציית און-אאוט, רדיו - בדיוק אפשרות אחת מתוך הסט. שמור על זמינות, חשוב על מדינות אסינכרוניות ועל קופירייטינג - והמשתמשים ישנו את ההגדרות בביטחון ללא טעויות או הפתעות.