قوائم السياق والإجراءات السريعة

1) الغرض والنطاق

• الإجراءات المحلية على الكائن (بطاقة، صف جدول، معامل).
• دفعة الإجراءات على الاختيار.
• خيارات خفية ولكنها ليست حرجة (ثانوية).
• القاعدة: لا تخفي الإجراءات الحرجة والأولية فقط في قائمة السياق.

2) المشغلات والمتغيرات

النقرة اليمنى/التحول + المفتاح F10/Menu - السياق الكلاسيكي.
زر أيقونة (كباب '⋮'، كرات اللحم '... '، السياق) - عالمية للمس/سطح المكتب.
الضغط الطويل (400-600 مللي ثانية) هو المكافئ المحمول للنقرة اليمنى.
لوحة الأوامر (⇧⌘P/Ctrl + K) - أوامر عالمية سريعة مع البحث.
Swipe-reveal (قوائم iOS/Android) - يفتح عددًا من الاختصارات السريعة.

التوصية: توفير طريقتين على الأقل للاتصال (أيقونة + سياق انقر/مفتاح).

3) المحتوى والأولوية

النقاط الأولى 1-3 هي إجراءات متكررة ؛ ثم الفاصل ؛ أكثر شيوعا.
مدمر - في النهاية، مميز بلون/أيقونة (وغالبًا - من خلال التأكيد/التراجع).
الصياغة - فعل + كائن («أضف إلى المفضلة»، «نسخة معرف»).
التسمية ≠ رمز فقط: الأيقونة هي مكبر للصوت وليست بديلاً للنص.

4) التجميع والمركز

Delimiters للكتل المنطقية (عرض، تحرير، إدارة، خطير).
Состояния: «disabled», «checked» («menuitemcheckbox »/« menuitemradio»), «destributive».
لا تظهر تعذر الوصول إلى الدور إذا كان ذلك مربكًا ؛ بدلاً من ذلك - إظهار «معاق» مع تلميح سبب.

5) التوافر (A11y)

الحاوية: «role =» menu «، العناصر:» role = «menuitem' »/« menuitemcheckbox »/« menuitemradio».
التابينديكس المتجول: "tabindex =" 0 "فقط على العنصر الحالي، والباقي" -1 ".
↑↓ السهام - الحركة، →/← - الدخول/الخروج من الغواصة. أدخل/الفضاء - التنشيط، Esc - قريب.
Typeahead: طباعة الحرف الأول تحول التركيز إلى النقطة.
حلقة التركيز مرئية ؛ تباين النص والرموز ≥ AA.
بالنسبة لأيقونة الزر، استخدم "aria-haspopup =" القائمة "و" aria-expended ".

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 مللي ثانية).
افتح الغواصة بواسطة "ArrowRight' وحوم مع تأخير 80-120 ms (مضاد للوميض).

7) أنماط الهاتف المحمول

الضغط الطويل مع اللمسات ؛ 450 ± 100 مللي ثانية.
الورقة السفلية كشكل من أشكال قائمة السياق (يمكن الوصول إليها بالإبهام).
تمرير الإجراءات في القوائم: على اليسار - «أرشيف/مفضلات» على اليمين - «حذف» (تأكيد/التراجع).
انقر فوق المناطق ≥ 44 × 44، التوقيعات القصيرة، الأيقونات 20-24 px.

8) التأكيدات والتراجع والأمن

الإجراءات المدمرة: إما التأكيد الثاني (نمط النمط/التأكد)، أو التراجع 5-10 ث.
المالية/المخاطر - من خلال تأكيد صريح مع سياق العواقب.
إظهار سبب «الإعاقة» («الحقوق غير الكافية»، «الحد الذي تم الوصول إليه»).

9) الإجراءات السريعة بدون قائمة

Inline shorthuts in the line (icons, "", "" ⋯ ").
الكشف عن التحليق (سطح المكتب): إظهار الإجراءات عند التحليق، ولكن اترك مشغلًا صريحًا.
لوحة الأوامر: البحث عن طريق الإجراءات، hotkeys in tooltips («⌘S»، «Ctrl + Enter»).

10) كتابة الإعلانات والأيقونات

فعل + كائن، 2-3 كلمات.
تبدأ بإجراء («تحذف المدخل...») وليس بإسم («تحذف المدخل»).
أيقونات من مجموعة واحدة ؛ استخدم نفس الأيقونات لنفس الإجراءات في جميع أنحاء المنتج.
تلميحات توضيحية («العنوان »/تلميح الأدوات) للبنود الغامضة.

11) القياس عن بعد والتجارب

CTR حسب العنصر، متوسط الوقت من الفتح إلى النقر، معدل الإلغاء/التراجع.
عدد الأخطاء (المدمرة → الملغاة).
ألف/باء: ترتيب وتجميع البنود، وجود طرق مختصرة سريعة في القائمة.
سجلات الأصناف «غير المرئية» (لا يستخدمها أحد) - المرشحون للحذف/النقل.

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 المرجعية

توافر

• "دور =" قائمة "/" مينويتيم "صحيحة، تابينديكس متجول والسهام تعمل.
• يغلق Esc القائمة، ويعود التركيز إلى المصدر.
• حلقات التباين والتركيز تتوافق مع AA.

سلوك

• يعكس ترتيب الأصناف التواتر والمخاطر ؛ مدمرة في القاع.
• يأخذ تحديد المواقع في الاعتبار الحواف (قلب/تحول) ؛ الرسوم المتحركة السريعة (200 مللي ≤).
• يتم فتح الغواصة بواسطة ArrowRight ولا «ترتجف» (نية التحليق 80-120 مللي ثانية).

جوال

• الضغط الطويل مع اللمسات ؛ الورقة السفلية مريحة مع إبهامك.
• تراجعت إجراءات التمرير السريع ؛ انقر فوق المناطق ≥ 44 × 44.

السلامة

• تأكيد/التراجع عن الأعمال الخطرة ؛ وأسباب الإعاقة واضحة.
• لا تسرب بيانات خاصة في التلميحات/الملصقات.

المقاييس

• تمت إزالة CTR/وقت النقر ؛ تتم مراقبة misclick/التراجع.

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).
«افعل/لا تفعل» مع أمثلة على التجميع والمواضع والتأكيدات.

موجز

تسرع قوائم السياق والإجراءات السريعة العمل إذا كان من الممكن التنبؤ بها ويمكن الوصول إليها وآمنة: مساران للاتصال، وملصقات واضحة مع أيقونات، وتجميع معقول، وتأكيد/التراجع عن المخاطرة، والتنقل الصحيح للوحة المفاتيح، وتحديد المواقع بشكل واضح. التقط الرموز والأنماط في نظام التصميم - وسيتصرف المستخدمون بسرعة دون خوف من ارتكاب خطأ.