Μενού πλαισίου και ταχείες δράσεις

1) Σκοπός και πεδίο εφαρμογής

• Τοπικές δράσεις επί του αντικειμένου (κάρτα, επιτραπέζια σειρά, συντελεστής).
• Ομαδοποιημένες δράσεις για την επιλογή.
• Κρυφές αλλά όχι κρίσιμες επιλογές (δευτερεύουσες).
• Κανόνας: μην κρύβετε κρίσιμες και πρωτογενείς δράσεις μόνο στο μενού.

2) Ενεργοποιήσεις και παραλλαγές

Δεξί κλικ/πλήκτρο Shift + F10/Menu - κλασικό πλαίσιο.
Κουμπί εικονιδίου (kebab '⋮', κεφτέδες... ", πλαίσιο) - καθολικό για αφή/επιφάνεια εργασίας.
Το μακρύ πιεστήριο (400-600 ms) είναι το κινητό ισοδύναμο του δεξιού κλικ.
Παλέτα εντολών (⇧⌘P/Ctrl + K) - παγκόσμιες γρήγορες εντολές με αναζήτηση.
Swipe-reveal (λίστες iOS/Android) - ανοίγει μια σειρά από γρήγορες συντομεύσεις.

Σύσταση: παροχή τουλάχιστον δύο μεθόδων κλήσης (εικονίδιο + πλαίσιο κλικ/κλειδί).

3) Περιεχόμενο και προτεραιότητα

Τα πρώτα 1-3 σημεία είναι συχνές δράσεις. στη συνέχεια διαχωριστής· - λιγότερο συχνά χρησιµοποιούµενο.
Καταστρεπτικό - στο τέλος, σημειωμένο με χρώμα/εικονίδιο (και συχνά - μέσω επιβεβαίωσης/αναιρέσεως).
Κείμενο - ρήμα + αντικείμενο («Προσθήκη στα αγαπημένα», «Αντιγραφή ταυτότητας»).
Η ετικέτα ≠ μόνο εικονίδιο: ένα εικονίδιο είναι ενισχυτής, όχι αντικατάσταση κειμένου.

4) Ομαδοποίηση και καθεστώς

Οριοθετητές για λογικά μπλοκ (προβολή, επεξεργασία, διαχείριση, επικίνδυνο).
: «απενεργοποιημένο», «ελεγμένο» («menuitemcheckbox »/« menuitemradio»), «καταστροφικό».
Μην επιδεικνύετε μη προσβάσιμο ρόλο εάν αυτό προκαλεί σύγχυση. Εναλλακτικά - δείξτε ως "ανάπηρος 'με ένα λόγο υπαινιγμός.

5) Διαθεσιμότητα (A11y)

Περιέκτης: 'role =' menu '', στοιχεία: 'role =' menuite '/' menuitemcheckbox '/' menuitemradio '.
Roving tabindex: Το μόνο' tabindex =» 0 «'στο τρέχον στοιχείο, το υπόλοιπο '-1'.
βέλη - κίνηση, - είσοδος/έξοδος από το υποβρύχιο. Εισάγετε/Διάστημα - ενεργοποίηση, Esc - κλείσιμο.
Τυπική κεφαλή: Η εκτύπωση του πρώτου γράμματος μετατοπίζεται στο σημείο.
Ο δακτύλιος εστίασης είναι ορατός. αντίθεση κειμένου και εικονιδίων ≥ ΑΑ.
Για το εικονίδιο κουμπιού, χρησιμοποιήστε το' aria-haspopup =» μενού»' και 'aria-επεκτεινόμενο'.

html
<button id="more" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-1">Еще</button>
<ul id="menu-1" role="menu" aria-labelledby="more" hidden>
<li role="menuitem" tabindex="0">Открыть</li>
<li role="menuitem">Скопировать ссылку</li>
<li role="menuitemcheckbox" aria-checked="true">В избранном</li>
<li role="menuitem" data-danger="true">Удалить</li>
</ul>

js const menu = document.getElementById('menu-1');
menu.addEventListener('keydown', e=>{
const items=[...menu.querySelectorAll('[role^="menuitem"]')];
let i=items.findIndex(n=>n.tabIndex===0);
if(e.key==='ArrowDown'){ items[i].tabIndex=-1; items[(i+1)%items.length].tabIndex=0; items[(i+1)%items.length].focus(); e.preventDefault(); }
if(e.key==='ArrowUp'){ items[i].tabIndex=-1; items[(i-1+items.length)%items.length].tabIndex=0; items[(i-1+items.length)%items.length].focus(); e.preventDefault(); }
if(e.key==='Escape'){ menu.hidden=true; document.getElementById('more').focus(); }
});

6) Προσδιορισμός θέσης και επιδόσεις

Άνοιγμα του μενού στην πηγή (κλικ-σημείο/εικονίδιο), μετατόπιση 4-8 px; παρακολουθούν τις ακμές της οθόνης (flip/shift).
Portal/layer over ('z-index') με κλικ στο catch out.
Κάντε τεμπέληδες, ανακυκλώστε τη λίστα σε μεγάλα μενού (δεν χρειάζεται εικονοποίηση, αλλά αποφύγετε εκατοντάδες αντικείμενα).
Κινούμενα σχέδια μόνο 'αδιαφάνεια/μετασχηματισμός', διάρκειας 140-200 ms (έξω γρηγορότερα: 100-160 ms).
Ανοίξτε το submenu με 'ArrowRight' και αιωρείται με καθυστέρηση 80-120 ms (anti-flicker).

7) Κινητά μοτίβα

Μακρύ πιεστήριο με απτικά. χρονικές στιγμές 450 ± 100 ms.
Κάτω φύλλο ως μορφή μενού πλαισίου (αντίχειρα-προσβάσιμο).
Swipe actions in the lists: στα αριστερά - «αρχείο/αγαπημένα», στα δεξιά - «διαγραφή» (επιβεβαίωση/αναίρεση).
Κλικ ζώνες ≥ 44 × 44, σύντομες υπογραφές, εικονίδια 20-24 px.

8) Επιβεβαίωση, αναίρεση και ασφάλεια

Καταστροφικές ενέργειες: είτε η δεύτερη επιβεβαίωση (μοτίβο τρόπου/επιβεβαίωσης), είτε η αναίρεση 5-10 s.
Χρηματοοικονομικός/κίνδυνος - μέσω ρητής επιβεβαίωσης με το πλαίσιο των συνεπειών.
Εμφάνιση του λόγου «άτομα με ειδικές ανάγκες» («Ανεπαρκή δικαιώματα», «Περιορισμός»).

9) Γρήγορες ενέργειες χωρίς μενού

Συντομεύσεις εισόδου στη γραμμή (εικονίδια "," "," ⋯ ").
Hover-αποκάλυψη (επιφάνεια εργασίας): εμφάνιση ενεργειών όταν αιωρείται, αλλά αφήστε μια ρητή σκανδάλη.
Παλέτα εντολών: αναζήτηση με ενέργειες, hotkeys in tooltips («⌘S», «Ctrl + Enter»).

10) Αντιγραφικά και εικονίδια

Ρήμα + αντικείμενο, 2-3 λέξεις.
Αρχίστε με μια ενέργεια («Διαγραφή καταχώρισης»...), όχι ένα ουσιαστικό («Διαγραφή καταχώρισης»).
Εικονίδια από ένα σύνολο. Χρησιμοποιήστε τα ίδια εικονίδια για τις ίδιες ενέργειες σε όλο το προϊόν.
Επεξηγηματικές υποδείξεις («τίτλος »/εργαλειοθήκη) για διφορούμενα θέματα.

11) Τηλεμετρία και πειράματα

CTR ανά στοιχείο, διάμεσος χρόνος από το άνοιγμα έως το κλικ, ρυθμός ακυρώσεων/ανάκληση.
Αριθμός λανθασμένων κλικ (ακυρώσεις καταστροφικών →).
A/B: σειρά και ομαδοποίηση των αντικειμένων, παρουσία γρήγορων συντομεύσεων στον κατάλογο.
Αρχεία καταγραφής «αόρατων» αντικειμένων (κανείς δεν χρησιμοποιεί) - υποψήφιοι για διαγραφή/μεταφορά.

12) Μάρκες συστήματος σχεδιασμού (παράδειγμα)

json
{
"menu": {
"minWidth": 208,
"itemHeight": 36,
"gap": 4,
"padding": 8,
"radius": 12,
"elev": 8,
"anim": { "inMs": 180, "outMs": 120, "ease": "cubic-bezier(0.2,0,0.2,1)" }
},
"swipe": { "revealThresholdPx": 56, "confirmDestructive": true }
}

css
.menu{min-width:208px;padding:8px;border-radius:12px;box-shadow:var(--elev-3);background:var(--bg-elevated)}
.menu [role^="menuitem"]{height:36px;padding:0 12px;display:flex;gap:8px;align-items:center;border-radius:10px}
.menu [role^="menuitem"]:hover,
.menu [role^="menuitem"][tabindex="0"]{background:var(--bg-hover)}
.menu [data-danger="true"]{color:var(--role-danger)}

13) Μοτίβα συστατικών στοιχείων

Φύλλα/πλακάκια: εικονίδιο «⋯» στην επάνω δεξιά γωνία. σε hover - εμφανίζονται, σε επαφή - πάντα ορατό.
Γραμμές πίνακα: «⋯» στην τελευταία στήλη. σε περίπτωση πολλαπλής επιλογής - η ομάδα των δράσεων κατά παρτίδες από πάνω προς τα κάτω.
Κατάλογος συνομιλιών/κοινοποίησης: swipe-actions (αρχείο/ανάγνωση/διαγραφή) με αναίρεση.
Γκαλερί πολυμέσων: μεγάλη βρύση - πολυ-επιλεγμένη λειτουργία + κάτω πίνακα δράσης.

14) Οι ιδιαιτερότητες του iGaming

γρήγορο στοίχημα: στο πλαίσιο του μενού του συντελεστή - "Put X" (προκαθορισμένες ρυθμίσεις), "Προσθήκη στο τοκομερίδιο", "Εγγραφή για αλλαγή του συντελεστή. "Απαιτείται επιβεβαίωση/αναίρεση.
Αγαπημένα/συνδρομές: «Προσθέστε πάροχο/παιχνίδι σε αγαπημένα», «Εγγραφείτε στο τουρνουά».
Ταμειακές ροές: με εσωτερική επιβεβαίωση και τρέχον ποσό· διατίθεται μόνο με την ιδιότητα της αγοράς.
Μετριοπάθεια/εκθέσεις: «Παραπονεθείτε», «Block chat» - ασφαλής, ορατή ανά ρόλο.
Υπεύθυνο παιχνίδι: «Ορίστε», «Παύση 24h» - χωρίς επιθετικά χρώματα, με σαφή περιγραφή των συνεπειών.

15) Αντι-μοτίβα

Οι κρίσιμες ενέργειες είναι κρυμμένες μόνο στο μενού πλαισίου.
Αντικείμενα χωρίς κείμενο (μόνο εικονίδια), ιδίως στους καταλόγους.
Τυχαίο κλείσιμο του δρομέα κατά τη μετάβαση στο υποβρύχιο (χωρίς καθυστέρηση/διάδρομο).
Το μενού επικαλύπτει το στοιχείο πηγής ή πηγαίνει πίσω από την οθόνη (χωρίς αναποδογύρισμα/μετατόπιση).
Καταστρεπτικό χωρίς επιβεβαίωση/αναίρεση.
Μη προφανή δικαιώματα (η ρήτρα καταργείται χωρίς εξήγηση).

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

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

• 'role =' menu ''/' menuitem' are right, roving tabindex and arrows work.
• Esc κλείνει το μενού, εστίαση επιστρέφει στην πηγή.
• Οι δακτύλιοι αντίθεσης και εστίασης αντιστοιχούν σε ΑΑ.

Συμπεριφορά

• Η σειρά των στοιχείων αντικατοπτρίζει τη συχνότητα και τον κίνδυνο. καταστρεπτική στον πυθμένα.
• Η τοποθέτηση λαμβάνει υπόψη τις ακμές (αναποδογύρισμα/μετατόπιση). γρήγορες κινούμενες εικόνες (≤ 200 ms).
• Το υπομενού ανοίγεται από το ArrowRight και δεν «τρέμει» (hover-intent 80-120 ms).

Κινητό

• Μακρύ πιεστήριο με απτικά? Το κάτω φύλλο είναι άνετο με τον αντίχειρά σας.
• Swipe-actions have undo? κλικ σε περιοχές ≥ 44 × 44.

Ασφάλεια

• Επιβεβαίωση/ανάκληση για επικίνδυνες ενέργειες. οι λόγοι για τα άτομα με ειδικές ανάγκες είναι σαφείς.
• Καμία διαρροή ιδιωτικών δεδομένων σε υποδείξεις/ετικέτες.

Μετρήσεις

• Η CTR/ώρα για κλικ αφαιρείται. misclick/undo παρακολουθούνται.

17) Εφαρμογή: ανοικτό/κλειστό και κλικ-άουτ

js const btn=document.getElementById('more'), menu=document.getElementById('menu-1');
const open=()=>{ menu.hidden=false; btn.setAttribute('aria-expanded','true'); menu.querySelector('[role^="menuitem"]').focus(); };
const close=()=>{ menu.hidden=true; btn.setAttribute('aria-expanded','false'); btn.focus(); };
btn.addEventListener('click', e=>{ menu.hidden?open():close(); });
document.addEventListener('pointerdown', e=>{ if(!menu.hidden &&!menu.contains(e.target) && e.target!==btn) close(); });
window.addEventListener('blur', close);

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

: 'ClickMenu', 'MenuIte ,' Submenu ',' Sheet ',' SwipeAction ',' AccountPalette '.
Διάσταση/ύψος σειράς/ακτίνα/μάρκες κινουμένων σχεδίων.
Οδηγοί προσβασιμότητας (ARIA, πληκτρολόγιο, typeahead).
«Do/Don» με παραδείγματα ομαδοποίησης, τοποθέτησης και επιβεβαίωσης.

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

Τα μενού πλαισίου και οι γρήγορες ενέργειες επιταχύνουν την εργασία εάν είναι προβλέψιμες, προσβάσιμες και ασφαλείς: δύο διαδρομές κλήσης, σαφείς ετικέτες με εικονίδια, λογική ομαδοποίηση, επιβεβαίωση/αναίρεση κινδύνου, σωστή πλοήγηση πληκτρολογίου και σαφής τοποθέτηση. Συλλάβετε μάρκες και μοτίβα στο σύστημα σχεδιασμού - και οι χρήστες θα δράσουν γρήγορα χωρίς να φοβούνται ότι θα κάνουν λάθος.