منوهای زمینه و اقدامات سریع

1) هدف و محدوده

• اعمال محلی روی شیء) کارت، سطر جدول، ضریب (.
• اقدامات دسته ای در انتخاب.
• گزینه های پنهان اما نه بحرانی (ثانویه).
• قانون: اقدامات مهم و اولیه را فقط در منوی زمینه پنهان نکنید.

2) محرک ها و انواع

راست کلیک کنید/کلید Shift + F10/Menu - کلاسیک متنی.
دکمه آیکون (کباب "⋮"، کوفته قلقلی "... '، زمینه) - جهانی برای لمس/دسکتاپ.
Long-press (400-600 ms) معادل تلفن همراه کلیک راست است.
پالت فرمان (⇧⌘P/Ctrl + K) - دستورات سریع جهانی با جستجو.
Swipe-reveal (لیست های iOS/Android) - تعدادی از کلید های میانبر سریع را باز می کند.

توصیه: حداقل دو روش تماس (icon + context click/key) ارائه دهید.

3) محتوا و اولویت

1-3 نکته اول اقدامات مکرر است ؛ سپس یک جداکننده ؛ بیشتر - کمتر استفاده می شود.
مخرب - در پایان، مشخص شده با رنگ/آیکون (و اغلب - از طریق تایید/لغو).
جمله بندی - فعل + شی («اضافه کردن به علاقه مندی ها»، «کپی ID»).
برچسب فقط یک آیکون ≠: یک آیکون یک تقویت کننده است، نه جایگزینی برای متن.

4) گروه بندی و وضعیت

محدود کننده برای بلوک های منطقی (مشاهده، ویرایش، مدیر، خطرناک).
Состояния: 'غیر فعال'، 'چک' ('menuitemcheckbox '/' menuitemradio')، 'مخرب'.
نقش غیر قابل دسترس را نشان ندهید اگر این گیج کننده است ؛ متناوبا - نشان می دهد به عنوان 'غیر فعال' با یک اشاره دلیل.

5) در دسترس بودن (A11y)

Container: 'نقش =' منو '، عناصر:' نقش = 'menuitem '/' menuitemcheckbox '/' menuitemradio'.
Roving tabindex: تنها "tabindex =" 0 "'در عنصر فعلی، بقیه" -1 ".
↑↓ فلش - حرکت، →/← - ورود/خروج از منو. Enter/Space - activation, Esc - close را وارد کنید.
Typeahead: چاپ حرف اول تمرکز را به نقطه تغییر می دهد.
حلقه تمرکز قابل مشاهده است ؛ کنتراست متن و آیکون ها ≥ AA.
برای نماد دکمه، از "aria-haspopup =" منو "و" 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>

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 پیکسل ؛ تماشای لبه های صفحه نمایش (تلنگر/تغییر).
پورتال/لایه بیش از ('z-index') با کلیک گرفتن.
ارائه lazily، بازیافت لیست در منوهای طولانی (بدون مجازی سازی مورد نیاز است، اما اجتناب از صدها نفر از موارد).
انیمیشن ها فقط «کدورت/تبدیل»، مدت زمان 140-200 میلی ثانیه (سریعتر: 100-160 میلی ثانیه).
منوی «ArrowRight» را باز کنید و با تاخیر 80-120 میلی ثانیه (ضد سوسو زدن) شناور شوید.

7) الگوهای تلفن همراه

مطبوعات طولانی با haptics ؛ زمان بندی 450 ± 100 میلی ثانیه

ورق پایین به عنوان یک فرم از منوی زمینه (انگشت شست قابل دسترسی).
اقدامات ضربه تند وشدید زدن در لیست: در سمت چپ - «آرشیو/مورد علاقه»، در سمت راست - «حذف» (تایید/لغو).
کلیک کنید مناطق ≥ 44 × 44، امضای کوتاه، آیکون 20-24 پیکسل.

8) تأیید، لغو و امنیت

اقدامات مخرب: یا تأیید دوم (الگوی معین/تأیید)، یا خنثی کردن 5-10 ثانیه.
مالی/ریسک - از طریق تأیید صریح با زمینه عواقب.
دلیل «معلول» را نشان دهید («حقوق ناکافی»، «حد مجاز»).

9) اقدامات سریع بدون منو

میانبرهای درون خطی در خط (icons, "" "," ⋯ ").
Hover-reveal (دسک تاپ): اقدامات را هنگام شناور نشان می دهد، اما یک ماشه صریح را ترک می کند.
پالت فرمان: جستجو توسط اقدامات، کلید های میانبر در راهنمایی ابزار («⌘S»، «Ctrl + Enter»).

10) کپی رایت و آیکون ها

فعل + مفعول، 2-3 کلمه.
با یک عمل شروع کنید («حذف ورود»...)، نه یک اسم («حذف ورود»).
آیکون ها از یک مجموعه واحد ؛ از آیکون های مشابه برای اقدامات مشابه در سراسر محصول استفاده کنید.
نکات توضیحی ('title '/tooltip) برای موارد مبهم.

11) تله متری و آزمایش

CTR بر اساس مورد، زمان متوسط از باز شدن تا کلیک، میزان لغو/لغو.
تعداد misclicks (مخرب → لغو).
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

شرط سریع: در منوی زمینه ضریب - "قرار دادن X" (قبل از تنظیمات)، "اضافه کردن به کوپن"، "مشترک شدن برای تغییر ضریب. "تأیید/لغو لازم است.
علاقه مندی ها/اشتراک ها: «اضافه کردن ارائه دهنده/بازی به علاقه مندی ها»، «اشتراک در مسابقات».
نقدی: با تایید درون خطی و مقدار فعلی ؛ فقط با وضعیت بازار در دسترس است.
اعتدال/گزارش: «شکایت»، «چت بلوک» - امن، قابل مشاهده توسط نقش.
بازی مسئول: «تعیین حد»، «مکث 24 ساعت» - بدون رنگ های تهاجمی، با شرح روشنی از عواقب.

15) ضد الگوهای

اقدامات بحرانی فقط در منوی زمینه پنهان هستند.
موارد بدون متن (فقط آیکون ها)، به ویژه در لیست ها.
بسته شدن تصادفی مکان نما هنگام تعویض به منو (بدون تاخیر/راهرو).
منو آیتم منبع را همپوشانی می کند یا پشت صفحه نمایش می رود (بدون تلنگر/تغییر).
مخرب بدون تایید/لغو.
حقوق غیر آشکار (بند بدون توضیح ناپدید می شود).

16) چک لیست QA

در دسترس بودن

• 'role =' menu '/' menuitem 'درست است، چرخش tabindex و فلش کار می کنند.
• Esc منو را می بندد، تمرکز به منبع باز می گردد.
• حلقه های کنتراست و تمرکز مربوط به AA است.

رفتار ها

• ترتیب اقلام نشان دهنده فرکانس و خطر است ؛ مخرب در پایین
• موقعیت لبه ها را در نظر می گیرد (تلنگر/تغییر) ؛ انیمیشن های سریع (≤ 200 میلی ثانیه).
• منو توسط ArrowRight باز می شود و «لرزش» (80-120 میلی ثانیه شناور) نیست.

تلفن همراه

• مطبوعات طولانی با haptics ؛ پایین صفحه با انگشت شست شما راحت است.
• ضربه تند وشدید زدن اقدامات اند خنثیسازی ؛ مناطق کلیک کنید ≥ 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) مستند سازی در سیستم طراحی

Компоненты: 'ContextMenu', 'MenuItem', 'Submenu', 'BottomSheet', 'SwipeAction', 'CommandPalette'.
ابعاد/ارتفاع ردیف/شعاع/نشانه انیمیشن.
راهنماهای دسترسی (ARIA، صفحه کلید، typeahead).
«انجام/انجام» با نمونه هایی از گروه بندی، موقعیت و تایید.

خلاصه ای کوتاه

منوهای زمینه و اقدامات سریع اگر قابل پیش بینی، در دسترس و ایمن باشند، سرعت کار را افزایش می دهند: دو مسیر تماس، برچسب های روشن با آیکون ها، گروه بندی معقول، تأیید/لغو خطر، ناوبری صفحه کلید صحیح و موقعیت یابی روشن. نشانه ها و الگوهای موجود در سیستم طراحی را ضبط کنید - و کاربران بدون ترس از اشتباه به سرعت عمل می کنند.