Meniuri contextuale și acțiuni rapide

1) Scopul și domeniul de aplicare

• Acțiuni locale asupra obiectului (carte, rând de masă, coeficient).
• Acțiuni de lot pe selecție.
• Opțiuni ascunse, dar nu critice (secundare).
• Regula: nu ascundeți acțiuni critice și primare numai în meniul contextual.

2) Declanșatoare și variante

Faceți clic dreapta/Shift + F10/Menu cheie - contextual clasic.
Buton pictogramă (kebab '⋮', chiftele '... ', context) - universal pentru touch/desktop.
Long-press (400-600 ms) este echivalentul mobil al click-dreapta.
Paleta de comandă (⇧⌘P/Ctrl + K) - comenzi rapide globale cu căutare.
Swipe-dezvăluie (liste iOS/Android) - deschide un număr de comenzi rapide rapide.

Recomandare: furnizați cel puțin două metode de apel (pictogramă + context clic/cheie).

3) Conținut și prioritate

Primele 1-3 puncte sunt acțiuni frecvente; apoi un separator; în continuare - mai puțin frecvent utilizat.
Distructiv - la final, marcat cu o culoare/pictogramă (și de multe ori - prin confirmare/anulare).
Formulare - verb + obiect ("Adăugare la favorite", "Copiere ID').
Eticheta ≠ doar o pictogramă: o pictogramă este un amplificator, nu un înlocuitor pentru text.

4) Gruparea și statutul

Delimitatoare pentru blocuri logice (vizualizare, editare, admin, periculoase).
Состояния: „dezactivat”, „verificat” („menuitemcheckbox ”/„ menuitemradio”), „distructiv”.
Nu arătați rolul inaccesibil dacă acest lucru este confuz; alternativ - arată ca „dezactivat” cu un indiciu motiv.

5) Disponibilitate (A11y)

Container: 'rol =' meniu '', elemente: 'rol =' menuitem ''/' menuitemcheckbox '/' menuitemradio'.
Tabindex rătăcitor: Singurul' tabindex =” 0 „'pe elementul curent, restul '-1'.
săgeți ↑↓ - mișcare, →/← - intrare/ieșire din submeniu. Enter/Space - activare, Esc - închide.
Typeahead: Imprimarea primei litere se concentrează asupra punctului.
Inelul de focalizare este vizibil; contrast de text și icoane ≥ AA.
Pentru pictograma buton, utilizați „aria-haspopup =” meniu „” și „aria-extins”.

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) Poziționare și performanță

Deschideți meniul la sursă (clic-punct/pictogramă), shift 4-8 px; urmăriți marginile ecranului (flip/shift).
Portal/strat peste („z-index”) cu clic pe prinderea.
Redați leneș, reciclați lista în meniuri lungi (nu este necesară virtualizarea, dar evitați sute de elemente).
Animatii numai 'opacitate/transformare', durata 140-200 ms (afara mai repede: 100-160 ms).
Deschideți submeniul prin "ArrowRight' și treceți cu o întârziere de 80-120 ms (anti-flicker).

7) Modele mobile

Apăsați lung cu haptice; calendarul 450 ± 100 ms.
Foaie de jos ca o formă de meniu contextual (degetul mare-accesibil).
Glisați acțiuni în listele: în stânga - „arhivă/favorite”, în dreapta - „șterge” (confirmare/anulare).
Faceți clic pe zone ≥ 44 × 44, semnături scurte, pictograme 20-24 px.

8) Confirmări, anulare și securitate

Acțiuni distructive: fie a doua confirmare (model modal/confirmare), fie anula 5-10 s.
Financiar/risc - prin confirmarea explicită cu context de consecințe.
Arată motivul „cu handicap” („Drepturi insuficiente”, „Limită atinsă”).

9) Acțiuni rapide fără meniu

Comenzi rapide în linie (icoane „”, „”, „⋯”).
Hover-reveal (desktop): afișați acțiunile atunci când plutiți, dar lăsați un declanșator explicit.
Paleta de comandă: căutare după acțiuni, taste rapide în tooltips („⌘S”, „Ctrl + Enter”).

10) Copywriting și icoane

Verb + obiect, 2-3 cuvinte.
Începeți cu o acțiune („Ștergeți intrarea”...), nu un substantiv („Ștergeți intrarea”).
Pictograme dintr-un singur set; Utilizați aceleași pictograme pentru aceleași acțiuni pe tot parcursul produsului.
Sugestii explicative („titlu ”/tooltip) pentru elemente ambigue.

11) Telemetrie și experimente

CTR după element, timpul median de la deschidere la clic, rata de anulări/anulare.
Numărul de clicuri (distructive → anulate).
A/B: ordinea și gruparea elementelor, prezența comenzilor rapide în listă.
Jurnalele elementelor „invizibile” (nimeni nu folosește) - candidați pentru ștergere/transfer.

12) Proiectarea tokenurilor sistemului (exemplu)

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) Modele de componente

Cărți/dale: pictograma „⋯” în colțul din dreapta sus; pe hover - prezentat, la atingere - întotdeauna vizibil.
Rânduri de tabel: „⋯” în ultima coloană; în caz de selecție multiplă - panoul de acțiuni lot de sus/jos.
Liste de chat/notificare: glisați-acțiuni (arhivă/citire/ștergere) cu anulare.
Galerii media: atingeți lung → modul multi-select + panoul de acțiune inferior.

14) Specificul iGaming

pariu rapid: în meniul contextual al coeficientului - "Pune X" (pre-setări), "Adaugă la cupon", "Abonează-te pentru a schimba coeficientul. "Confirmarea/anularea este necesară.
Favorite/abonamente: „Adauga furnizor/joc la favorite”, „Aboneaza-te la turneu”.
Cash out: cu confirmare inline și suma curentă; disponibil numai cu statutul de piață.
Moderare/rapoarte: „Plângeți-vă”, „Blocați chatul” - sigur, vizibil prin rol.
Joc responsabil: „Setați o limită”, „Pauză 24h” - fără culori agresive, cu o descriere clară a consecințelor.

15) Anti-modele

Acțiunile critice sunt ascunse numai în meniul contextual.
Elemente fără text (numai pictograme), în special în liste.
Închiderea accidentală a cursorului la trecerea la submeniu (fără întârziere/coridor).
Meniul se suprapune cu elementul sursă sau merge în spatele ecranului (fără flip/shift).
Distructiv fără confirmare/anulare.
Drepturi non-evidente (clauza dispare fără explicații).

16) Lista de verificare QA

Disponibilitate

• 'rol = „meniu „'/' menuitem 'sunt corecte, rătăcire tabindex și săgeți de lucru.
• Esc închide meniul, focalizarea revine la sursă.
• Inelele de contrast și focalizare corespund AA.

Comportament

• Ordinea elementelor reflectă frecvența și riscul; distructiv în partea de jos.
• Poziționarea ia în considerare marginile (flip/shift); animații rapide (≤ 200 ms).
• Submeniul este deschis de ArrowRight și nu „tremură” (hover-intenție 80-120 ms).

Mobil

• Apăsați lung cu haptice; foaie de fund este confortabil cu degetul mare.
• Swipe-acțiunile au anula; faceți clic pe zonele ≥ 44 × 44.

Siguranță

• Confirmare/anulare pentru acțiuni periculoase; motivele pentru care persoanele cu handicap sunt clare.
• Nu există scurgeri de date private în sugestii/etichete.

Măsurători

• CTR/timp să faceți clic este eliminat; clic/anulare sunt monitorizate.

17) Implementare: deschidere/închidere și clic-out

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) Documentația în sistemul de proiectare

Компоненты: 'ContextMenu', 'MenuItem', 'Submenu', 'BottomSheet', 'SwipeAction', 'CommandPalette'.
Dimensiune/înălțime rând/rază/animație jetoane.
Ghiduri de accesibilitate (ARIA, tastatură, cap de text).
„Do/Don' t” cu exemple de grupare, poziționare și confirmări.

Scurt rezumat

Meniurile contextuale și acțiunile rapide accelerează activitatea dacă sunt previzibile, accesibile și sigure: două căi de apel, etichete clare cu pictograme, grupare rezonabilă, confirmare/anulare pentru risc, navigare corectă la tastatură și poziționare clară. Capturați jetoane și modele în sistemul de proiectare - iar utilizatorii vor acționa rapid fără teama de a face o greșeală.