კონტექსტური მენიუ და სწრაფი მოქმედებები

1) დანიშნულება და გამოყენების სფერო

• ადგილობრივი მოქმედებები ობიექტზე (ბარათი, ცხრილის სტრიქონი, კოეფიციენტი).
• პაკეტის მოქმედებები გამოყოფაზე.
• ფარული, მაგრამ არა კრიტიკული ვარიანტები (მეორეხარისხოვანი).
• წესი: კრიტიკული და პირველადი მოქმედებები არ იმალება მხოლოდ კონტექსტურ მენიუში.

2) ტრიგერები და ვარიანტები

Right-click/Shift + F10/Menus key არის კლასიკური კონტექსტი.
Icon button (kebab ', meatballs'...... ', context) - უნივერსალურად tach/desctop.
გრძელი პრესა (400-600 ms) არის right-click- ის მობილური ეკვივალენტი.
Command palette (- P/Ctrl + K) - გლობალური სწრაფი ძიების გუნდები.
Swipe-reveal (iOS/Android სიები) - ხსნის უამრავ სწრაფ შორტკატს.

რეკომენდაცია: უზრუნველყეთ ზარის მინიმუმ ორი მეთოდი (ხატი + კონტექსტური კლიკი/კლავიში).

3) შინაარსი და პრიორიტეტი

პირველი 1-3 ქულა - ხშირი მოქმედებები; შემდეგ გამყოფი; შემდეგი - ნაკლებად ხშირად გამოყენებული.
დამანგრეველი - ბოლოს, აღინიშნება ფერი/ხატი (და ხშირად დადასტურების/უნდოს საშუალებით).
ფორმულირებები - ზმნა + ობიექტი („დამატება არჩეულ“, „კოპირება ID“).
ეტიკეტი მხოლოდ ხატია: ხატი გამაძლიერებელია, არა ტექსტის შეცვლა.

4) ჯგუფი და მდგომარეობა

ლოგიკური ბლოკების გამყოფები (ნახვა, რედაქტირება, admin, საშიში).
Состояния: `disabled`, `checked` (`menuitemcheckbox`/`menuitemradio`), `destructive`.
ჩვენ არ ვაჩვენებთ მიუწვდომელ როლს, თუ ეს დაბნეულია; ალტერნატიულად - ჩვენ ვაჩვენებთ, როგორც 'disabled' მიზეზის მითითებით.

5) წვდომა (A11y)

კონტეინერი: 'role = „mene“', ელემენტები: 'role = „menuitem“ '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: ერთადერთი' tabindex =“ 0“ მიმდინარე ელემენტზე, დანარჩენი' -1 '.
ისრები - გადაადგილება, 1/2 - შესასვლელი/გასასვლელი ჩანაცვლებიდან. Enter/Space - გააქტიურება, Esc - დახურვა.
Typeahead: პირველი ასოს ბეჭდვა ფოკუსს გადასცემს წერტილს.
ფოკუსის რგოლი ჩანს; ტექსტისა და ხატების კონტრასტი AA.
ღილაკის იკონკისთვის გამოიყენეთ' aria-haspopup =“ menu“ და' 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 "> Open </li>
<li role = "menuitem"> Copy link </li>
<li role = "menuitemcheckbox" aria-checked =" true"> Favorites </li>
<li role = "menuitem" data-danger = "true "> Delete </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).
პორტალი/ფენა თავზე ('z-index') დაწკაპუნებით გარეთ.
შეაფასეთ ზარმაცი, გადააკეთეთ სია გრძელი მენიუში (ვირტუალიზაცია არ არის საჭირო, მაგრამ თავიდან აიცილეთ ასობით ქულა).
ანიმაციები მხოლოდ 'opacity/transform', ხანგრძლივობა 140-200 ms (გარშემო უფრო სწრაფია: 100-160 ms).
შეცვალეთ 'ArrowRight' და hover 80-120 ms (anti-flicker) დაგვიანებით.

7) მობილური ნიმუშები

გრძელი პრესა ჰაპტიკით; ტაიმინგი 450 ± 100 ms.
Bottom sheet, როგორც კონტექსტური მენიუს ფორმა (thumb-reachable).
Swipe actions სიებში: მარცხნივ - „არქივი/არჩეული“, მარჯვნივ - „წაშლა“ (დადასტურება/undo).
დაწკაპუნების ზონები - 44 × 44, ხელმოწერები მოკლეა, ხატები 20-24 px.

8) დადასტურება, უნდო და უსაფრთხოება

დესტრუქციული მოქმედებები: ან მეორე დადასტურება (თანამედროვე/კონფიგურაციის პატრონი), ან undo 5-10.
ფინანსური/სარისკო - აშკარა კონფიგურაციის საშუალებით შედეგების კონტექსტით.
აჩვენეთ მიზეზი 'disabled' („საკმარისი უფლებები“, „მიღწეული ზღვარი“).

9) სწრაფი მოქმედება მენიუს გარეშე

ხაზის Inline-shortkates (ხატები „“, „“, „“).
Hover-reveal (desctop): აჩვენეთ მოქმედებები ხელმძღვანელობის დროს, მაგრამ დატოვეთ აშკარა გამომწვევი.
Command palette: ჩხრეკა მოქმედებების შესახებ, ცხელი კლავიშები მითითებებში ("" S "," Ctrl + Enter ").

10) საავტორო უფლებები და ხატები

ზმნა + ობიექტი, 2-3 სიტყვა.
დაიწყეთ მოქმედებით („ჩანაწერის წაშლა“...), არა არსებითი სახელიდან („ჩანაწერის წაშლა“).
ხატები ერთი ნაკრებიდან; გამოიყენეთ იგივე პიქტოგრამები მთელი პროდუქტის იგივე მოქმედებისთვის.
განმარტეთ რჩევები ('title '/tooltip) ორაზროვანი წერტილებისთვის.

11) ტელემეტრია და ექსპერიმენტები

CTR წერტილებზე, საშუალო დრო გახსნიდან კლიკამდე, გამორთვის სიხშირე/undo.
misclick- ის რაოდენობა (დესტრუქციული და გაუქმებული).
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) კომპონენტების ნიმუშები

ბარათები/ფილები: ზედა მარჯვენა კუთხეში „ხატი“; ჰოვერზე - ნაჩვენებია, ტაჩზე - ყოველთვის ჩანს.
ცხრილის სტრიქონები: 'with' ბოლო სვეტში; მრავლობითი გამოყოფით - პაკეტის მოქმედების პანელი ზემოდან/ქვემოდან.
ჩატის/შეტყობინებების სიები: swipe მოქმედებები (არქივი/წაკითხვა/წაშლა) undo- დან.
მედია გალერეა: გრძელი tap - მულტივირუსის რეჟიმი + მოქმედების ქვედა პანელი.

14) iGaming სპეციფიკა

სწრაფი კურსი (quick bet): კონტექსტურ კოეფიციენტის მენიუში - „დააყენეთ X“ (Express), „დაამატეთ კუპონი“, „გამოიწერეთ კოეფიციენტის შეცვლა“. დადასტურება/undo სავალდებულოა.
არჩეული/გამოწერა: „დაამატეთ პროვაიდერი/თამაში შერჩეულზე“, „გამოიწერეთ ტურნირზე“.
Kash-out: ინლაინ დადასტურებით და მიმდინარე თანხით; ხელმისაწვდომია მხოლოდ ბაზრის სტატუსით.
მოდერაცია/მოხსენებები: „პრეტენზია“, „ჩატის დაბლოკვა“ - უსაფრთხო, ჩანს როლებით.
საპასუხისმგებლო თამაში: „დააწესეთ ლიმიტი“, „პაუზა 24ch“ - აგრესიული ყვავილების გარეშე, შედეგების მკაფიო აღწერით.

15) ანტი შაბლონები

კრიტიკული მოქმედებები იმალება მხოლოდ კონტექსტურ მენიუში.
წერტილები ტექსტის გარეშე (ზოგიერთი ხატი), განსაკუთრებით სიებში.
კურსორის დატოვების შემთხვევითი დახურვა ჩანაცვლების დროს (შეფერხება/დერეფანი არ არის).
მენიუ იბლოკება ელემენტის წყაროს ან მიდის ეკრანზე (არა flip/shift).
დესტრუქციული დადასტურების გარეშე/undo.
აშკარა უფლებები (წერტილი ქრება ახსნის გარეშე).

16) QA ჩეკის სია

წვდომა

• 'role = „mene „'/' menuitem 'სწორია, roving tabindex და ისრები მუშაობენ.
• Esc დახურავს მენიუს, ფოკუსი უბრუნდება წყაროს.
• კონტრასტი და ფოკუს რგოლები შეესაბამება AA- ს.

ქცევა

• წერტილების რიგი ასახავს სიხშირეს და რისკს; დესტრუქციული ქვემოთ.
• პოზიციონირება ითვალისწინებს კიდეებს (flip/shift); სწრაფი ანიმაციები (200 ms).
• ჩანაცვლება იხსნება ArrowRight- ის მიხედვით და არ „ტრიალებს“ (hover-intent 80-120 ms).

მობილური

• გრძელი პრესა ჰაპტიკით; bottom sheet მოსახერხებელია თითით.
• Swipe actions- ს აქვს undo; დაწკაპუნების ზონები - 44 × 44.

უსაფრთხოება

• დადასტურება/undo საშიში ქმედებებისთვის; გაუგებრობის მიზეზები გასაგებია.
• არ არსებობს პირადი მონაცემების გაჟონვა მითითებებში/ეტიკეტებში.

მეტრიკა

• გადაღებულია 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) დოკუმენტაცია დიზაინის სისტემაში

Компоненты: `ContextMenu`, `MenuItem`, `Submenu`, `BottomSheet`, `SwipeAction`, `CommandPalette`.
ხაზის/რადიუსის/ანიმაციის ზომების/სიმაღლის ნიშნები.
ხელმისაწვდომი ჰაიდები (ARIA, კლავიატურა, typeahead).
„Do/Don 't“ ჯგუფის, პოზიციონირებისა და დადასტურების მაგალითებით.

მოკლე რეზიუმე

კონტექსტური მენიუ და სწრაფი მოქმედებები აჩქარებს მუშაობას, თუ ისინი პროგნოზირებადი, ხელმისაწვდომი და უსაფრთხოა: ორი ზარის გზა, მკაფიო ეტიკეტები ხატებით, გონივრული ჯგუფი, დადასტურება/undo რისკისთვის, სწორი კლავიატურის ნავიგაცია და მკაფიო პოზიციონირება. დააფიქსირეთ ნიშნები და ნიმუშები დიზაინის სისტემაში - და მომხმარებლები სწრაფად იმოქმედებენ შეცდომის შიშის გარეშე.