Վերահսկիչների ընտրություն 'չեկբոքս, սվիտչ, ռադիոկոնոպկա

1) Հիմնական տարբերությունները (իմաստը, ոչ «նկարը»)

Կանոն

Անհրաժեշտ է N-ից մեկը, վերցրեք ռադիո։

Անհրաժեշտ է դրոշների ցանկացած հավաքածու 'չեկբոքսներ։

Անհրաժեշտ է մի երկուական մառախուղ, որը անմիջապես փոխում է վարքը 'սվիտչը։

2) Որոշումների ծառը (կարճ)

1. Մի քանի նախագահական ընտրություններ։

2. Հենց հավաքածուի մի տարբերակն է, որը կոչվում է Ռադիոկնոպկա (կամ սեգմենթ-հսկիչ/tegla)։

3. Մի երկուական դրոշ, ակնթարթային և նկատելի էֆեկտ։

4. Անհրաժեշտ է «մասնակի» նշանը (ենթաօրենսդրությունը)։

5. Ռիսկի/արժեքը բարձր է (ներմուծում, մոդերացիա)։

3) Օգտագործողի վարքագծն ու սպասումները

Սվիտչ = ակնթարթային արդյունք։ Դեպքից հետո օգտագործողը ակնկալում է անհապաղ ազդեցություն և ուղեկիցներ առանց առանձին «Պահպանելու»։

Chekbox = ընտրությունն է։ Կարող է անմիջապես կամ կոճակով օգտագործվել, կարևոր է հստակ ցույց տալ մոդելը («Մոսկվան պահպանված է»)։

Ռադիո = ռեժիմի ընտրություն։ Անցումը կարող է վերակառուցել ինտերֆեյսը։ Սիգալիզացրեք փոփոխությունները (միկրոանալիզացիա/տեքստ)։

4) Վիճակը և տեսողական սեմանտիկան

Normal / Hover / Focus / Active / Disabled / Error. Տեքստի և կոդավորողների հակադրությունը AA-ն է։

Tri-state (chekbox): դատարկ/մասամբ/ընտրվել է։ Մասնակի վիճակը ինքնաբերաբար, կլիկը փոխում է «ընտրված», ոչ թե «դատարկ»։

Սվիտչ 'ունի «համի/խոռոչի» տարբերությունը գույնի և գույնի «վազողի» տարբերությունը։ Գույնը իմաստի միակ կրողը չէ (իկոնկա/պիտակը մոտակայքում)։

5) Կոպիրայթինգը և ստորագրությունները

Բայը + օբյեկտ կամ հայտարարություն է, որը դառնում է իրական ընտրության ժամանակ։

Չեքբոքսը '«Ստանալ e-mail-ծանուցումներ»։

Սվիտչ ՝ «Ծանուցումներ: Համ/Վիկլ» (պիտակը ձախ կողմում, վիճակը աջ կամ աջ)։

Ռադիո '«Գործակիցների ձևաչափը' տասանորդ/Դրոբնի/Ամերիկյան»։

Խուսափեք երկակի ժխտումներից. <<Մի անջատեք>> շփոթեցնում է։

Ռիսկային գործողությունների համար ավելացրեք կանոնավոր նկարագրություն. <<Համ. արագ դրույքաչափերը (առանց հաստատման) կարող են չեղարկվել 5 վայրկյանում"։

6) Հասանելիություն (A11y) և ստեղնաշար

Chekbox: 'role = «www.kbox» «,» aria-www.ked = «www.dfalse' mixed», Space-ը անցում է։

Սվիտչ 'national' 'սվիտչի կամ "role =" switch "տեսլականի հետ'" aria-corked "։ Վարքագիծը նման է չեքբոքսի (Space)։

Ռադիո ՝ "role =" radiogroup "" բեռնարկղում, "role =" radio "տարրերի վրա, սլաքները ՝ 108/108/108, տեղափոխում են ընտրությունը, Space/Enter - ապացուցում են։

Խմբեր 'օգտագործեք "fieldset '/" legend" ընդհանուր կոնտեքստի համար։

Ֆոկուս օղակները թողեք տեսանելի։ Կլիկի գոտիների չափսերը 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) Ասինխրոնի փոփոխությունները և սխալները

Սվիտչ + ցանցը 'անջատումը անմիջապես լավատեսական UI-ն է, որն ապացուցում է սերվերի հաստատումը, երբ անհաջողության դեպքում փափուկ ցատկում ենք և ցույց ենք տալիս պատճառը։

Chekbox/ռադիո «Պահպանիր», քանի դեռ ապացույցներ չկան, մի փոխեք գլոբալ վարքագիծը։

Ռիսկային գործողությունները 'հաստատումը (մոդալկան) կամ undo վահանակը 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) Բջջային արտոնագրեր

Սվիտչը հիմնական երկուական վերահսկումն է բջջային պարամետրերում։

Ռադիոն կարող է փոխարինել segmented control-ը 2-4-ի համար (ավելի լավ է մատով հարվածելը)։

Chekbox-ը ցուցակներում 'մեծ կլիկի տարածքով և արագ հակաբիոտիկների աջակցությամբ։

9) Խմբավորման և մոդետի փաթթերները

Ռադիո 'ուղղահայաց ցուցակը (ավելի լավ է սկանավորվում), երկու-3 տարբերակների համար' հատվածներ մեկ տողի մեջ։

Չեքբոքսներ 'մեկ սյունակի հավասարեցում; երկար ցուցակների համար '«Ընտրել ամեն ինչ» + tri-state խմբի մոտ։

Սվիտչը 'ձախ կողմում պիտակը, վերահսկում էր աջ կողմում մեկ տողի վրա։ ցույց տվեք ներկայիս վիճակը տեքստով, անհրաժեշտության դեպքում («Համ «/» Վիկլ »)։

10) Անտիպատերնի

Սվիտչը, որը անմիջապես չի կիրառում փոփոխությունները (պահանջում է «Փրկել»)։

Ռադիոկնոպները, որտեղ հնարավոր է բազմաթիվ ընտրություն։

Չեքբոքսը փոխկապակցող տարբերակների համար («Տղամարդ/Կանանց» որպես երկու չեքբոքս)։

Երկուական սվիտչը վտանգավոր անդառնալի գործողության համար (հեռացնել տվյալները)։

Կրկնակի ժխտումները տեքստում։

Մոդետի փոփոխությունը սխալմամբ այնպես է, որ ֆոկուսը կորչում է։

11) iGaming (օրինակներ)

Գործակիցների ձևաչափը '«Տասանորդ/Դոբնի/Ամերիկյան» ռադիոհաղորդումը անմիջապես օգտագործվում է և պահպանվում է պրոֆիլում։

Արագ դրույքաչափը '«Արագ դրույքաչափեր (առանց հաստատման)», որը ունի հստակ նկարագրություն և undo 5-10 վայրկյան յուրաքանչյուր վիրահատությունից հետո։

Մոսկվան/ծանուցում. Չեքբոքսները իրադարձությունների տեսակների վրա (հաղթանակներ, մրցույթներ, դեպոզիտներ)։ «Ընտրել ամեն ինչ» - tri-state։

Գործակիցների նորարարությունը 'System-Corport-ը լավատեսությամբ և արձագանքելով ցանցի սխալի դեպքում։

Պատասխան խաղի լիմիթները 'ռադիոկոպներ ժամանակահատվածների համար (օր/շաբաթ/ամիս) + գումարի դաշտ; «վաղվանից» մտնելու հետ կապված փոփոխված սահմանագծի հաստատումը։

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 պրեսետներ (հայեցակարգ)

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 տրամաբանության Snipets

Tri-state «Ընտրել ամեն ինչ»։

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) Մետրիկի և փորձարկումների

Misclick rate-ը և undo-հաճախականությունը։

Ընտրությունից առաջ ժամանակը և ռադիոհաղորդումների վալիդացիայի սխալները։

«Ընտրել ամեն ինչ» և համեմատել ձեռքի ընտրության հետ (արագություն, ճշգրտություն)։

A/B 'պիտակների պատճենումը, կոդավորման կարգը, segmented vs radio-ը, "անմիջապես օգտագործել" vs "կոճակը։

15) QA-chek-թերթ

Իմաստը և ընտրությունը

• Վերահսկիչը համապատասխանում է առաջադրանքին (բազմաթիվ chekboxs։ N ռուսական ռադիոյից մեկը; ակնթարթային երկուական (սվիտչ)։
• Ռիսկային գործողությունների համար կա հաստատում/undo։

Հասանելիություն

• Ճիշտ դերերը ("www.kbox '/" switch '/" radiogroup "/" radio"), "aria-noked '/" indeterminate"։
• Ֆոկուս օղակները տեսանելի են, սլաքները աշխատում են ռադիոհաղորդման մեջ, Space-ը անցնում է չեկբոքս/սվիտչ։

Վարք

• Սվիտչը անմիջապես կիրառում է փոփոխությունները. սխալմամբ 'արձագանք և հաղորդագրություն։
• Tri-state-ը «Ընտրել ամեն ինչ» ճիշտ է։ պիտակի տեսահոլովակները աշխատում են։

Տեսողություն

• Հակադրություն AA; վիճակը չի փոխանցվում միայն գույներով։
• Կլիկի գոտիները 44-44 px; կարգուկանոնը և հավասարումը կայուն են։

Բջջային

• Segmented-վերահսկում էր 2-4 ռադիո տարբերակների համար փորձարկվում է տնակում։
• Մատը և պտտումը չեն բախվում։

16) Մոսկվա դիզայնի համակարգում

Բաղադրիչները ՝ «Diskbox», «Switch», «RadioGroup »/« SegmentedProl»։

Չափսեր/անիմացիաներ/ֆոկուս, կոպիրայթինգի օրինակներ։

Արտոնագրեր ՝ «Ընտրել ամեն ինչ» (tri-state), «Ակնթարթային օգտագործումը», «Undo ռիսկի հետո»։

Do/Don 't-պատկերասրահը' սվիտչ, հետաձգված պահպանմամբ (don 't), ռադիո, չեկբոքսի փոխարեն (don' t), հատվածներ կարճ հավաքածուների համար (do)։

Live ռեզյումե

Վերահսկման ընտրությունը իմաստի և սպասման մասին է 'chekbox-ը անկախ դրոշներ և խմբեր, սվիտչը ակնթարթային բանաձևն է/ֆունկցիայի անջատումը, ռադիոյը հենց մեկ տարբերակ է հավաքածուից։ Պահպանեք հասանելիությունը, մտածեք ասինխրոն վիճակների և կոպիրայթինգի մասին, և օգտագործողները վստահորեն կփոխեն իրենց ունեցվածքը առանց սխալների և անակնկալների։