Επιλογή χειριστηρίων: κιβώτιο ελέγχου, διακόπτης, κουμπί ραδιοεπικοινωνίας

1) Βασικές διαφορές (δηλαδή όχι «αριθμητικά στοιχεία»)

• Χρειάζεστε ένα από τα Ν - πάρτε το ραδιόφωνο.
• Χρειάζεστε οποιοδήποτε σύνολο σημαιών - κουτιά ελέγχου.
• Χρειάζεστε ένα δυαδικό διακόπτη εναλλαγής που αλλάζει αμέσως τη συμπεριφορά - διακόπτη.

2) Δένδρο απόφασης (σύντομο)

1. Μερικές ανεξάρτητες εκλογές; → Checkboxes.
2. Ακριβώς μία επιλογή από το σύνολο; → Κουμπιά ραδιοεπικοινωνίας (ή χειριστήρια τμήματος/ετικέτες).
3. Μια δυαδική σημαία, το αποτέλεσμα είναι στιγμιαίο και αισθητό; → Switch.
4. Χρειάζεται ένα «μερικό» σήμα (υποσύνολο); → Checkbox με tri-state.
5. Ο κίνδυνος/κόστος είναι υψηλός (πληρωμή, μετριοπάθεια); → Επιβεβαίωση ραδιοεπικοινωνίας/πλαισίου ελέγχου + (μη εναλλαγή).

3) Συμπεριφορά και προσδοκίες των χρηστών

Διακόπτη = άμεσο αποτέλεσμα. Μετά την αλλαγή, ο χρήστης αναμένει ένα άμεσο αποτέλεσμα και αναστρεψιμότητα χωρίς ξεχωριστό Save.
Επιλογή επιλογών Μπορεί να εφαρμοστεί αμέσως ή με κουμπί - είναι σημαντικό να εμφανιστεί ρητά το μοντέλο («Ρυθμίσεις αποθηκευμένες «/» Κλικ Αποθήκευση »).
Radio = επιλογή τρόπου λειτουργίας. Η μετάβαση μπορεί να ανακατασκευάσει τη διεπαφή. Αλλαγές σήματος (μικροαποικιοποίηση/κείμενο).

4) Κράτη και οπτική σημασιολογία

Κανονικό/Hover/εστίαση/ενεργό/απενεργοποιημένο/σφάλμα. Αντίθεση κειμένου και δεικτών ≥ ΣΣ.
Τρι-κατάσταση (πλαίσιο ελέγχου): κενό/μερικώς/επιλεγμένο. Η μερική κατάσταση δεν είναι από μόνη της κλικ - το κλικ αλλάζει σε «επιλεγμένο» και όχι «κενό».
Διακόπτη: Έχει σαφή διάκριση στο χρώμα και τη θέση του δρομέα. Το χρώμα δεν είναι ο μόνος φορέας νοήματος (εικονίδιο/ετικέτα κοντά).

5) Αντιγραφές και υπογραφές

Ρήμα + αντικείμενο ή δήλωση που γίνεται πραγματικότητα όταν επιλέγεται.

Πλαίσιο ελέγχου: «Παραλαβή ειδοποιήσεων ηλεκτρονικού ταχυδρομείου».
Διακόπτης: «Ειδοποιήσεις: On/Off» (ετικέτα στα αριστερά, κατάσταση - στα δεξιά ή στον ίδιο τον διακόπτη).
Ραδιόφωνο: «Μορφότυπος συντελεστή: δεκαδικό/κλασματικό/αμερικανικό».
Αποφύγετε διπλές αρνήσεις: «Μην αποσυνδέσετε»... - μπερδεύει.

Για ριψοκίνδυνες δράσεις, προσθέστε μια δευτερεύουσα περιγραφή: "On. Γρήγορα στοιχήματα (χωρίς επιβεβαίωση) - Μπορείτε να ακυρώσετε μέσα σε 5 δευτερόλεπτα"

6) Προσβασιμότητα (A11y) και πληκτρολόγιο

Checkbox: 'role =' checkbox '', 'aria-checked =' true 'false' mixed '', Space - switching.
Διακόπτης: εγγενής '<τύπος εισόδου =' checkbox '>' με οπτικό διακόπτη ή 'ρόλο =' διακόπτης '' με 'aria-checked'. Συμπεριφορά τύπου Checkbox (Space).
Ραδιόφωνο: 'role =' radiogroup '' στο δοχείο, 'role =' radio '' στα στοιχεία, βέλη ↑/↓ ή ←/→ - μετακινήστε την επιλογή, 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) Ασύγχρονες αλλαγές και σφάλματα

Switch + network: μετάβαση αμέσως αισιόδοξη επιβεβαίωση του διακομιστή UI αν αποτύχει, αναποδογυρίσει απαλά και δείξει το λόγο.
Το Checkbox/ραδιόφωνο στο «Save»: δεν υπάρχει ακόμα επιβεβαίωση - μην αλλάξετε την παγκόσμια συμπεριφορά.
Ριψοκίνδυνες ενέργειες: επιβεβαίωση (modalka) ή undo-panel για 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 δευτερόλεπτα μετά από κάθε λειτουργία.
Συνδρομές/κοινοποιήσεις: κουτιά ελέγχου ανά τύπο γεγονότος (νίκες, τουρνουά, καταθέσεις). Ομαδικό πλαίσιο ελέγχου «Επιλέξτε όλα» - τρι-κατάσταση.
Ζωντανές ενημερώσεις συντελεστών: διακόπτη «Live-mode» με αισιοδοξία και ανατροπή σε σφάλμα δικτύου.
Όρια υπεύθυνου παιχνιδιού: ραδιοηλεκτρικά κουμπιά για περιόδους (ημέρα/εβδομάδα/μήνα) + πεδίο ποσού· επιβεβαίωση του τροποποιημένου ορίου με την εγγραφή «από αύριο».

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 λογικές snippets

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 και αναίρεση συχνότητας σε διακόπτες.
Χρόνος επιλογής και επικύρωσης σφαλμάτων από ραδιοομάδες.
Αναλογία «Επιλέξτε όλους» και σύγκριση με τη χειροκίνητη επιλογή (ταχύτητα, ακρίβεια).
A/B: αντιγραφή ετικέτας, εντολή επιλογής, κατάτμηση έναντι ραδιοφώνου, «εφαρμογή αμέσως» έναντι «με κουμπί».

15) Κατάλογος ελέγχου QA

Σημασία και επιλογή

• Ο έλεγχος αντιστοιχεί σε κιβώτια ελέγχου (πολλαπλά →. ένα από τα ραδιόφωνα N →· στιγμιαίος δυαδικός διακόπτης →).
• Για ριψοκίνδυνες ενέργειες, υπάρχει επιβεβαίωση/αναίρεση.

Διαθεσιμότητα

• Σωστοί ρόλοι ('checkbox '/' switch '/' radiogroup '/' radio'), 'aria-checked '/' undeterminate'.
• Οι δακτύλιοι εστίασης είναι ορατοί, τα βέλη λειτουργούν σε μια ραδιοομάδα, οι διακόπτες διαστήματος είναι το πλαίσιο ελέγχου/ο διακόπτης.

Συμπεριφορά

• Η αλλαγή εφαρμόζει τις αλλαγές αμέσως. σχετικά με το σφάλμα - ανατροπή και μήνυμα.
• Tri-state για «Επιλέξτε όλα» είναι σωστή? κλικ ετικέτας εργασία.

Οπτικό

• Αντίθεση ≥ AA; η κατάσταση δεν είναι μόνο έγχρωμη.
• Κάντε κλικ σε ζώνες ≥ 44 × 44 px; η τάξη και η ευθυγράμμιση είναι σταθερές.

Κινητό

• Διαχωρισμένος έλεγχος για 2-4 ραδιοφωνικές παραλλαγές που υποβάλλονται σε δοκιμή αφής.
• Το χτύπημα και η κύλιση των δαχτύλων δεν συγκρούονται.

16) Τεκμηρίωση στο σύστημα σχεδιασμού

Εξαρτήματα: 'Checkbox', 'Switch', 'Radio Group '/' Segm Control'.
Μέγεθος/κινούμενα σχέδια/μάρκες εστίασης, παραδείγματα αντιγραφής.
Μοτίβα: «Επιλέξτε όλα» (tri-state), «Άμεση εφαρμογή», «Undo after risk».
Do/Don 't gallery: don save switch (don 't), radio αντί checkboxes (don 't), sections for short sets (do).

Σύντομη Περίληψη

Η επιλογή του ελέγχου αφορά το νόημα και τις προσδοκίες: checkbox - ανεξάρτητες σημαίες και ομάδες, διακόπτης - άμεση λειτουργία on/off, ραδιόφωνο - ακριβώς μία επιλογή από το σύνολο. Διατηρήστε τη διαθεσιμότητα, σκεφτείτε ασύγχρονες καταστάσεις και αντιγραφές - και οι χρήστες θα αλλάξουν με αυτοπεποίθηση ρυθμίσεις χωρίς σφάλματα ή εκπλήξεις.