संदर्भ मेनू और त्वरित कार्रवाई

1) उद्देश्य और दायरा

शॉर्टकट मेनू और त्वरित क्रियाएं अक्सर उपयोग किए जाने वाले ऑपरेशनों के पथ को छोटा

वस्तु पर स्थानीय क्रिया (कार्ड, तालिका पंक्ति, गुणांक)।

चयन पर बैच क्रिया।

छिपा हुआ लेकिन महत्वपूर्ण विकल्प नहीं (द्वितीयक

नियम: केवल संदर्भ मेनू में महत्वपूर्ण और प्राथमिक क्रियाओं को छुपाएँ नहीं.

2) ट्रिगर और वेरिएंट

राइट-क्लिक/शिफ्ट + F10/Menu कुंजी - क्लासिक प्रासंगिक।

प्रतीक बटन (कबाब '⋮', मीटबॉल '... ', संदर्भ) - स्पर्श/डेस्कटॉप के लिए सार्वभौमिक।

लॉन्ग-प्रेस (400-600 एमएस) राइट-क्लिक के बराबर मोबाइल है।

कमांड पैलेट (⇧⌘P/Ctrl + K) - खोज के साथ वैश्विक त्वरित कमांड।

स्वाइप-रिवील (iOS/Android सूची) - कई त्वरित शॉर्टकट खोलता है।

सिफारिश: कम से कम दो कॉल विधियाँ प्रदान करें (आइकन + संदर्भ क्लिक/कुंजी)।

3) सामग्री और प्राथमिकता

पहले 1-3 अंक लगातार क्रियाएं हैं; फिर एक विभाजक; आगे - कम आमतौर पर उपयोग किया जाता है।

विनाशकारी - अंत में, एक रंग/आइकन के साथ चिह्नित (और अक्सर - पुष्टि/पूर्ववत के माध्यम से)।

वर्डिंग - क्रिया + ऑब्जेक्ट ("पसंदीदा में जोड़ें", "कॉपी आईडी")।

लेबल - केवल एक आइकन: एक आइकन एक एम्पलीफायर है, पाठ के लिए प्रतिस्थापन नहीं।

4) समूह और स्थिति

तार्किक ब्लॉकों के लिए परिसीमन (दृश्य, संपादित, व्यवस्थापक, खतरनाक)।

Состояния: 'अक्षम', 'चेक' ('menuitemcheckbox '/' menuitemradio'), 'विनाशकारी'।

यदि यह भ्रामक है तो भूमिका दुर्गम न दिखाएँ; वैकल्पिक रूप से - एक कारण संकेत के रूप में 'अक्षम' दिखाएं।

5) उपलब्धता (A11y)

कंटेनर: 'roile = "menu", तत्व:' roile = "menuitem "/' menuitemcheckbox '/' menuitemeckbox '।

रोविंग टैबिंडेक्स: वर्तमान तत्व पर एकमात्र' टैबिंडेक्स =" 0 ", बाकी '-1 '।

↑↓ तीर - उपमेनू से आंदोलन, →/← - प्रविष्टि/निकास। भरें/स्थान - सक्रियण, Esc - बन्द करें।

टाइपहेड: पहले अक्षर को मुद्रित करने से बिंदु पर ध्यान केंद्रित होता है।

फोकस रिंग दिखाई दे रही है; पाठ और प्रतीक के विपरीत ≥ AA।

बटन आइकन के लिए,' आरिया-हास्पोप =" मेनू" और' आरिया-विस्तारित 'का उपयोग करें।

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; स्क्रीन के किनारों देखें (फ्लिप/शिफ्ट)।

क्लिक कैच आउट के साथ पोर्टल/परत ओवर ('z-index')।

रेंडर आलसी, लंबे मेनू में सूची को रीसायकल करें (कोई वर्चुअलाइजेशन की आवश्यकता नहीं है, लेकिन सैकड़ों वस्तुओं से बचें)।

एनिमेशन केवल 'अपारदर्शिता/परिवर्तन', अवधि 140-200 एमएस (तेजी से बाहर: 100-160 एमएस)।

'एरोराइट' द्वारा सबमेनू खोलें और 80-120 एमएस (एंटी-फ्लिकर) की देरी के साथ मंडराएं।

7) मोबाइल पैटर्न

हैप्टिक्स के साथ लंबे समय तक प्रेस; समय 450 ms 100 ms।

संदर्भ मेनू (अंगूठे-पहुंच योग्य) के रूप में नीचे की शीट।

सूचियों में स्वाइप क्रियाएं: बाईं ओर - "संग्रह/पसंदीदा", दाईं ओर - "हटाएं" (पुष्टि/पूर्ववत)।

क्लिक करें क्षेत्र ≥ 44 × 44, लघु हस्ताक्षर, आइकन 20-24 px।

8) पुष्टि, पूर्ववत और सुरक्षा

विनाशकारी क्रियाएं: या तो दूसरी पुष्टि (मोडल/पुष्टि पैटर्न), या पूर्ववत 5-10 एस।

वित्तीय/जोखिम - परिणामों के संदर्भ में स्पष्ट पुष्टि के माध्यम से।

कारण दिखाएँ 'अक्षम' ("अपर्याप्त अधिकार", "सीमा तक पहुंच गया").

9) मेनू के बिना त्वरित कार्रवाई

पंक्ति में इनलाइन शॉर्टकट (प्रतीक "", "", "" ⋯ ")।

होवर-रिवील (डेस्कटॉप): मंडराते समय क्रियाएं दिखाएं, लेकिन एक स्पष्ट ट्रिगर छोड़ दें।

कमांड पैलेट: क्रिया द्वारा खोजें, टूलटिप्स में हॉटकी ("⌘S", "Ctrl + Enter")।

10) नकल लेखन और प्रतीक

क्रिया + वस्तु, 2-3 शब्द।

एक क्रिया के साथ प्रारंभ करें ("प्रविष्टि मिटाएँ"...), संज्ञा नहीं ("हटाएँ प्रविष्टि")।

एकल सेट से प्रतीक; पूरे उत्पाद में समान क्रियाओं के लिए एक ही प्रतीक का उपयोग करें।

अस्पष्ट वस्तुओं के लिए व्याख्यात्मक संकेत ('शीर्षक '/टूलटिप)।

11) टेलीमेट्री और प्रयोग

आइटम द्वारा सीटीआर, खोलने से क्लिक तक का औसत समय, रद्दीकरण/पूर्ववत की दर।

मिसक्लिक की संख्या (विनाशकारी → रद्द)।

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) घटक पैटर्न

कार्ड/टाइल्स: ऊपरी दाएँ कोने में आइकन '⋯'; होवर - दिखाया, स्पर्श पर - हमेशा दिखाई देता है।

तालिका पंक्तियाँ: अंतिम स्तंभ में '⋯'; एकाधिक चयन के मामले में - ऊपर/नीचे से बैच क्रियाओं का पैनल।

चैट/अधिसूचना सूची: स्वाइप-एक्शन (आर्काइव/रीड/डिलीट) पूर्ववत.

मीडिया गैलरी: लॉन्ग टैप → मल्टी-सेलेक्ट मोड + बॉटम एक्शन पैनल।

14) iGaming की बारीकियां

त्वरित शर्त: गुणांक के संदर्भ मेनू में - "पुट एक्स" (पूर्व-सेटिंग्स), "कूपन में जोड़ें", "गुणांक को बदलने के लिए सदस्यता लें। "पुष्टि/पूर्ववत आवश्यक है।

पसंदीदा/सदस्यता: "पसंदीदा के लिए प्रदाता/खेल जोड़ें", "टूर्नामेंट की सदस्यता लें।"

नकद बाहर: इनलाइन पुष्टि और वर्तमान राशि के साथ; केवल बाजार की स्थिति के साथ उपलब्ध

मॉडरेशन/रिपोर्ट: "शिकायत करें", "ब्लॉक चैट" - सुरक्षित, भूमिका से दिखाई देता है।

जिम्मेदार खेल: "एक सीमा निर्धारित करें", "ठहराओ 24h" - आक्रामक रंगों के बिना, परिणामों का स्पष्ट विवरण के साथ।

15) एंटी-पैटर्न

गंभीर क्रियाएँ केवल संदर्भ मेनू में छुपी होती हैं।

पाठ के बिना आइटम (केवल प्रतीक), विशेष रूप से सूचियों में।

उपमेनू में स्विच करते समय संकेतक का आकस्मिक समापन (कोई विलंब/गलियारा नहीं)।

मेनू स्रोत मद को ओवरलैप करता है या स्क्रीन के पीछे चला जाता है (कोई फ्लिप/शिफ्ट नहीं)।

पुष्टि/पूर्ववत के बिना विनाशकारी।

गैर-स्पष्ट अधिकार (खंड बिना स्पष्टीकरण के गायब हो जाता है)।

16) क्यूए चेकलिस्ट

उपलब्धता

• 'रोल = "मेनू "/' मेन्यूइटेम 'सही हैं, टैबिंडेक्स और तीर काम करते हैं।
• Esc मेनू बंद करता है, फ़ोकस स्रोत पर लौटता है।
• कंट्रास्ट और फोकस रिंग एए के अनुरूप हैं।

व्यवहार

• वस्तुओं का क्रम आवृत्ति और जोखिम को दर्शाता है; तल पर विनाशकारी।
• स्थिति किनारों को ध्यान में रखती है (फ्लिप/शिफ्ट); तेज एनिमेशन (≤ 200 एमएस)।
• सबमेनू एरोराइट द्वारा खोला गया है और "कांपने" (होवर-इरादे 80-120 एमएस) नहीं है।

मोबाइल

• हैप्टिक्स के साथ लॉन्ग-प्रेस; नीचे की चादर आपके अंगूठे के साथ आरामदायक है।
• स्वाइप-एक्शन पूर्ववत है; क्षेत्रों ≥ 44 × 44 पर क्लिक करें।

सुरक्षा

• खतरनाक कार्यों के लिए पुष्टि/पूर्ववत; विकलांगों के कारण स्पष्ट हैं।
• संकेत/लेबल में कोई निजी डेटा लीक नहीं।

मेट्रिक्स

• क्लिक करने के लिए CTR/समय हटा दिया गया है; मिसक्लिक/पूर्ववत निगरानी की जाती है।

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) डिजाइन प्रणाली में प्रलेखन

: 'MenuMenu', 'MenuItem', 'Sumbenu', 'SwipEction', ' Palette'।

आयाम/पंक्ति ऊंचाई/त्रिज्या/एनीमेशन टोकन।

एक्सेसिबिलिटी गाइड (ARIA, कीबोर्ड, टाइपहेड)।

समूह, स्थिति और पुष्टि के उदाहरणों के साथ "करो/मत करो"।

संक्षिप्त सारांश

संदर्भ मेनू और त्वरित क्रियाएं काम को गति देती हैं यदि वे अनुमानित, सुलभ और सुरक्षित हैं: दो कॉल पथ, आइकन के साथ स्पष्ट लेबल, उचित समूह, जोखिम के लिए पुष्टि/पूर्ववत, सही कीबोर्ड नेविगेशन और स्थिति। डिजाइन प्रणाली में टोकन और पैटर्न पर कब्जा करें - और उपयोगकर्ता गलती करने के डर के बिना जल्दी से कार्य करेंगे।