Համատեքստային ընտրացանկեր և արագ գործողություններ

1) Նշանակումը և օգտագործման ոլորտը

Համատեքստային ընտրացանկերը և արագ գործողությունները նվազեցնում են ճանապարհը հաճախ օգտագործվող կոդերին

Օբյեկտի վրա տեղական գործողությունները (քարտը, աղյուսակի տողը, գործակիցը)։

Փաթեթային գործողություններ ընտրության վրա։

Թաքնված, բայց ոչ քննադատական տարբերակները (երկրորդական)։

Կանոն 'կրիտիկական և առաջնային գործողությունները չեն թաքցնում միայն համատեքստային ընտրացանկում։

2) Stuggers և տարբերակներ

Right-click/Shift + F10/Multkey-ը դասական կոնտեքստային է։

Icon button (kebab '71', meatballs '... ", ext) համընդհանուր է տաչի/desktopa համար։

Long-press (400-600 մզ) - right-click բջջային համարժեք։

Command palette (www.P/Ctrl + K) - գլոբալ արագ թիմեր որոնելով։

Swipe-reveal (iOS/Android) - բացում է մի շարք արագ շորտկատներ։

Առաջարկություն 'տրամադրեք զանգահարելու առնվազն երկու մեթոդ (իկոնիկա + կոնտեքստային տեսահոլովակ/կլավիշ)։

3) Բովանդակություն և գերակայություն

Առաջին 1-3 կետերը հաճախակի գործողություններ են։ ապա բաժանիչ; հետո 'ավելի քիչ օգտագործվող։

Ոչնչացնող, վերջում, նշված է գույնով/իկոնով (և հաճախ 'ապացույցի/undo) միջոցով։

Ձևակերպումները 'բայը + օբյեկտ («Ավելացնել ընտրված», «Սկոպատիվացնել ID»)։

Լեյբլը միայն իկոնկա է, իկոնիկան ուժեղացուցիչ է, չի փոխարինում տեքստը։

4) Խմբավորում և վիճակ

Տրամաբանական բլոկների բաժանիչները (դիտում, խմբագրում, ադմին, վտանգավոր)։

Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.

Մենք չենք ցույց տալիս անհասանելի դերում, եթե դա շփոթեցնում է. այլընտրանքային է, մենք ցույց ենք տալիս որպես «www.abled» 'պատճառաբանությամբ։

5) Հասանելիություն (A11y)

Բեռնարկղը ', տարրերը ՝ "role =" menuitem ">/" menuitemcheckbox "/" menuitemradio"։

Roving tabindex: միակ "tabindex =" 0 "ընթացիկ տարրի վրա, մնացած" -1 "։

Հրաձիգներ 105 - շարժում, 108/105 - 108/ելքը փոխարինումից։ Enter/Space-ը ակտիվացում է, Esc-ը 'փակել։

Typeahead: Առաջին տառի կնիքը տեղափոխում է կետ։

Ֆոկուս օղակը կարելի է տեսնել. տեքստի և սրբապատկերների հակադրություն AA։

Կոճակների իկոնկայի համար օգտագործեք "aria-haspopup =" mast "և" aria-expanded "։

Նշման օրինակ

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>

Միգրացիան (roving tabindex սխեմա)

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) Դիրքը և պերֆորմացիան

Բացեք ընտրացանկը աղբյուրի մոտ (clik dot/icon), 4-8 px; հետևեք էկրանի ծայրերին (flip/shift)։

Պորտալ/շերտ վերևում («z-index») կլիկից դուրս։

Rendervo livo, տեղադրեք ցուցակը երկար ընտրացանկում (վիրտուալիզացիան անհրաժեշտ չէ, բայց խուսափեք հարյուրավոր կետերից)։

Անիմացիաները միայն «opacity/transform», 140-200 ms տևողությունը (out ավելի արագ ՝ 100-160 մզ)։

Փոխարենը բացեք «ArrrowRight» և hover '80-120 ms (anti-flicker) ուշացումով։

7) Բջջային արտոնագրեր

Long-press haptica; Թայմինգը 450-100 մզ է։

Bottronsheet-ը որպես համատեքստային ընտրացանկի ձև է (thumb-reachable)։

Swipe acions ցուցակներում 'ձախ կողմում' «արխիվ/ընտրված», աջ կողմում '«հեռացնել» (հաստատում/undo)։

Կլիկի գոտիները 44-44 են, ստորագրությունները կարճ են, 20-24 px իկոնիկները։

8) Հաստատում, undo և անվտանգություն

Կործանիչ գործողությունները ՝ կամ երկրորդ ապացույցը (modal/www.irm pattern), կամ undo 5-10 վ։

Ֆինանսական/ռիսկային - ակնհայտ Eurm-ի միջոցով հետևանքների համատեքստով։

Ցույց տվեք «www.abled» («Բավարար իրավունքներ», «Հասեք սահմանը»)։

9) Արագ գործողություններ առանց ընտրացանկերի

Inter-shortkats տողում (iconks «,», «»)։

Hover-reveal (desktop) 'ցույց տալ գործողությունները առաջնորդության ժամանակ, բայց թողնել և ակնհայտ ձգան։

Command palette: փնտրել գործողություններ, տաք հետազոտություններ հուշերում («www.S», «Ctrl + Enter»)։

10) Կոպիրայթինգը և իկոնիկները

Բայոլ + օբյեկտ, 2-3 բառ։

Սկսեք գործողությունից («Հեռացնել գրառումը»...), ոչ թե գոյականից («Ձայնագրման հեռացում»)։

Իկոնիկները մեկ հավաքածուից; օգտագործեք նույն պիկտոգրամները նույն գործողությունների համար բոլոր ապրանքներում։

Բացատրող հուշագրերը ("title '/tooltip) երկիմաստ կետերի համար։

11) Թելեմետրիա և փորձեր

CTR-ը կետերով, միջին ժամանակ բացումից մինչև կլիք, հաճախականությունը/undo։

Misclick 's (կործանարար պարամետրեր)։

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 ճնշումները

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) Patterns բաղադրիչներով

Քարտեր/սալիկներ 'իկոնիկա' 116 'աջ վերին անկյունում; hover-ը ցույց է տալիս, որ տնակը միշտ տեսանելի է։

Աղյուսակի տողերը '«07» վերջին սյունակում; բազմազանությամբ 'փաթեթավորման վահանակ վերևից/ներքևից։

Չատների/ծանուցումների ցուցակները 'swipe-acions (արխիվ/կարդացեք/հեռացնել) undo-ից։

Մեդիա պատկերասրահները 'երկար tap-ը հակաբիոտիկների ռեժիմը + գործողության ներքևի վահանակը։

14) iGaming հատկությունները

Արագ դրույքաչափը (quick bet) 'պարամետրերի համատեքստային ընտրացանկում' «Տեղադրել X» (պլանավորված), «Ավելացնել կտրոնում», «Ստորագրվել փոփոխման վրա»։ Հաստատումը/undo պարտադիր է։

Ընտրված/2019 '«Ավելացնել պրովայդերը/խաղը ընտրված», «Ստորագրվել մրցույթի վրա»։

Քաշ-աութ 'ինլայնային հաստատմամբ և ներկա գումարով։ հասանելի է միայն շուկայի կարգավիճակում։

Մոդերացիա/լրագրողներ ՝ «Բողոքել», «Արգելափակել չատը» անվտանգ, տեսանելի են դերերով։

Պատասխանատու խաղը '«Տեղադրել սահմանը», «Դադարը»' առանց ագրեսիվ գույների, հետևանքների պարզ նկարագրությամբ։

15) Anti-patterna

Քննադատական գործողությունները թաքնված են միայն համատեքստային ընտրացանկում։

Կետեր առանց տեքստի (մեկ իկոն), հատկապես ցուցակներում։

Պատահական է, որ կուրսորի հեռանալը փոխվում է (չկա ձգձգում/միջանցք)։

Ընտրացանկը արգելափակում է աղբյուրի տարրը կամ գնում էկրանի հետևում (ոչ flip/shift)։

Կործանարար առանց հաստատման/undo։

Անտեսանելի իրավունքները (կետը անհետանում է առանց բացատրության)։

16) QA-chek-թերթ

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

• 'role = «mult» '/« menuitem »ճիշտ, roving tabindex և սլաքները աշխատում են։
• Esc-ը փակում է ընտրացանկը, ֆոկուսը վերադառնում է աղբյուրին։
• Հակադարձ օղակները համապատասխանում են AA-ին։

Վարք

• Կետերի կարգը արտացոլում է հաճախականությունն ու ռիսկը։ կործանարար ներքև։
• Դիրքը հաշվի է առնում ծայրերը (flip/shift); անիմացիաները արագ են (200 մզ)։
• Փոխարինումը բացվում է ArrrowRight-ով և չի «դողում» (hover-intent 80-120 ms)։

Բջջային

• Long-press haptica; bottom-sheet հարմար է մեծ մատով։
• Swipe-acions ունեն undo; կլիկայի գոտին 44 3544 է։

Անվտանգություն

• Հաստատումը/undo վտանգավոր գործողությունների համար; պատճառները հասկանալի են։
• Մասնավոր տվյալների արտահոսք չկա/պիտակների մեջ։

Մետրիկները

• Նկարահանվում է CTR/ժամանակ մինչև տեսահոլովակը; misclick/undo վերահսկվում են։

17) Lenta.ru: Բացահայտում/105 և կլիկ-դուրս

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) Մոսկվա դիզայնի համակարգում

Տողի չափսերի/բարձրության/շառավղերի/անիմացիաների։

Դելդները հասանելիության (ARIA, ստեղնաշար, typeahead)։

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.

«Do/Don 't» -ը խմբի, դիրքի և ապացույցների օրինակներով։

Ռուսական ռեզյումե

Համատեքստային ընտրացանկերը և արագ գործողությունները արագացնում են աշխատանքը, եթե դրանք կանխատեսելի են, հասանելի և ապահով, զանգահարման երկու ուղիներ, պարզ պիտակները իկոններով, խելացի խմբավորումը, ռիսկի համար հաստատումը/undo, ճիշտ ստեղնաշարի լուծումը և համապատասխան դիրքը։ Տեղադրեք հոսանքներն ու փամփուշտները դիզայնի համակարգում, և օգտագործողները արագ կգործեն առանց սխալվելու։