תפריטי הקשר ופעולות מהירות

1) מטרה והיקף

• פעולות מקומיות על האובייקט (קלף, שורת שולחן, מקדם).
• אצווה פעולות על הבחירה.
• נסתר אבל לא אפשרויות קריטיות (משני).
• כלל: אל תסתיר פעולות קריטיות ועיקריות רק בתפריט ההקשר.

2) טריגרים ווריאנטים

לחיצה ימנית/Shift + F10/Menu key - חיבור קלאסי.
כפתור אייקון (קבב "⋮", כדורי בשר "... ', הקשר) - אוניברסלי למגע/שולחן עבודה.
Long-press (400-600 ms) היא המקבילה הניידת של לחיצה ימנית.
לוח פיקוד (⇧⌘P/Ctrl + K) - פקודות מהירות גלובליות עם חיפוש.
רשימת iOS/Android פותחת מספר קיצורי דרך מהירים.

המלצה: לספק לפחות שתי שיטות שיחה (icon + contract click/key).

3) תוכן ועדיפות

1-3 הנקודות הראשונות הן פעולות תכופות; ואז מפריד; יותר - פחות נפוץ בשימוש.
הרסני - בסוף, מסומן בצבע/סמל (ולעתים קרובות - באמצעות אישור/ביטול).
ניסוח - פועל + אובייקט (”הוסף לפייבוריטים”, ”העתק זיהוי”).
התווית כוללת רק סמל: סמל הוא מגבר, לא תחליף לטקסט.

4) קיבוצים ומעמד

מחליקים בלוקים הגיוניים (נוף, עריכה, ניהול, מסוכן).
”נכה”, ”מסומן” (”menuitemcheckbox ”/” menuitemradio”), ”הרסני”.
אל תראה תפקיד בלתי נגיש אם זה מבלבל; לחלופין - להראות כנכה עם רמז סיבה.

5) זמינות (A11y)

מיכל: 'תפקיד = ”תפריט”, אלמנטים:' תפקיד = 'menuitem '/' menuitemcheckbox '/' menuitemradio'.
טווינדקס משוטט: ה ”טווינדקס” היחיד = ”0” על האלמנט הנוכחי, השאר '-1'.
צמצום חצים - תנועה, →/← - כניסה/יציאה מהצוללת. הזן/מרחב - הפעלה, Esc - קרוב.
Typehead: הדפסת משמרות האותיות הראשונות מתמקדת בנקודה.
טבעת המיקוד נראית לעין; ניגוד של טקסט ואייקונים לאלכוהוליסטים אנונימיים.
עבור סמל הכפתור, השתמש ב ”אריה-אספופופ” = ”תפריט” ו ”אריה-מורחבת”.

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; צפה בקצוות המסך (slap/shift).
פורטל/שכבה מעל ('z-index') בלחיצה תופסת החוצה.
הפעל בעצלנות, מיחזר את הרשימה בתפריטים ארוכים (אין צורך בווירטואליזציה, אך הימנע ממאות פריטים).
אנימציות רק 'אופטימיות/טרנספורמציה', משך 140-200 ms (החוצה מהר יותר: 100-160 ms).
פתח את הצוללת על ידי 'Arrowright' ורחף עם עיכוב של 80-120 ms (אנטי הבהוב).

7) תבניות ניידות

עיתונות ארוכה עם הפטיקה; תזמון 450 שנות 100.
גיליון תחתון כצורה של תפריט הקשר (אגודל ניתן להשגה).
Swipe פעולות ברשימות: משמאל - ”ארכיון/מועדפים”, מימין - ”למחוק” (אישור/ביטול).
אזורי לחיצה - 44 × 44, חתימות קצרות, סמלים 20-24 px.

8) אימות, ביטול וביטחון

פעולות הרסניות: או האישור השני (תבנית מודלית/אישור), או ביטול 5-10 אס.
סיכון פיננסי/סיכון - באמצעות אישור מפורש עם הקשר של השלכות.
הצג את הסיבה ”נכה” (”לא מספיק זכויות”, ”הגבלה הגיעה”).

9) פעולות מהירות ללא תפריט

קיצורי דרך בקו (סמלים, "", "" ⋯ ").
Hover-לחשוף (שולחן עבודה): הצג פעולות בעת ריחוף, אך השאר הדק מפורש.
לוח פקודה: חיפוש על ידי פעולות, הוקי בקצות כלים (”⌘S”, ”Ctrl + Enter”).

10) קופירייטינג ואייקונים

פועל + אובייקט, 2-3 מילים.
התחל עם פעולה (”מחק כניסה...”), ולא עם שם עצם (”מחק כניסה”).
סמלים ממערכה אחת; השתמש באותם סמלים עבור אותן פעולות לאורך המוצר.
רמזים הסברים (”כותרת ”/tooltip) עבור פריטים מעורפלים.

11) טלמטריה וניסויים

CTR לפי פריט, זמן חציוני מפתיחה ללחיצה, קצב ביטולים/ביטול.
מספר הטעויות (הרסני = = מבוטל).
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) תבניות רכיבים

קלפים/אריחים: סמל '⋯' בפינה הימנית העליונה; ברחף, מוצג, במגע, תמיד נראה לעין.
שורות שולחן: ”⋯” בעמודה האחרונה; במקרה של בחירה מרובה - הלוח של פעולות אצווה מלמעלה/למטה.
רשימות צ 'אט/הודעה: swipe-action (ארכיון/קריאה/מחיקה) עם ביטול.
גלריות מדיה: long stape # multi-select mode + botton action panel.

14) הפרטים של iGaming

הימור מהיר: בתפריט ההקשר של המקדם - ”שים X” (הגדרות מראש), ”הוסף לקופון”, ”מנוי לשינוי המקדם”. "אישור/ביטול נדרש.
מועדפים/מנויים: ”הוסף ספק/משחק לפייבוריטים”, ”מנוי לטורניר”.
מזומן החוצה: עם אישור מקוון וסכום נוכחי; זמין רק עם מצב שוק.
מתינות/דיווחים: "להתלונן", "לחסום צ" אט "- בטוח, נראה לפי תפקיד.
משחק אחראי: ”קבע גבול”, ”הפוגה 24” - ללא צבעים תוקפניים, עם תיאור ברור של התוצאות.

15) אנטי דפוסים

פעולות קריטיות מוסתרות רק בתפריט ההקשר.
פריטים ללא טקסט (רק סמלים), במיוחד ברשימות.
סגירה מקרית של הסמן בעת המעבר לסאבינו (ללא השהייה/מסדרון).
התפריט חופף את פריט המקור או הולך מאחורי המסך (ללא הפכה/הזזה).
הרסני ללא אישור/ביטול.
זכויות שאינן ברורות (הסעיף נעלם ללא הסבר).

16) רשימת QA

זמינות

התפקיד של [ ] = ”תפריט ”/” menuitem” נכונים, משוטטים בטינדקס וחצים לעבוד.

[ ] Esc סוגר את התפריט, הפוקוס חוזר למקור.

[ ] חדות וטבעות מיקוד מתאימות לאלכוהוליסטים אנונימיים.

התנהגות

[ ] סדר הפריטים משקף תדירות וסיכון; הרסני בתחתית.

[ מיצוב ] לוקח בחשבון קצוות (slap/shift); אנימציות מהירות (200 ms).

[ ] הצוללת נפתחת על ידי Arrowright' ואינה ”רועדת” (כוונת רחף 80-120 ms).

נייד

[ ] Long-press עם haptics; הסדין התחתון נוח עם האגודל שלך.

[ ]-Swipe-פעולות יש לבטל; לחצו על אזורים 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) תיעוד במערכת התכנון

”תפריט”, ”פריט”, ”Submenu”, ”GuidgGep”, ”SwingAction”, ”GoaspPalette”.
מימד/שורה גובה/רדיוס/אסימונים אנימציה.
מדריכי נגישות (ARIA, מקלדת, typehead).
"Do/Don 'עם דוגמאות של קיבוצים, מיצוב ואישורים.

סיכום קצר

תפריטי הקשר ופעולות מהירות מאיצים את העבודה אם הם צפויים, נגישים ובטוחים: שני מסלולי שיחה, תוויות ברורות עם אייקונים, התקבצות סבירה, אישור/ביטול לסיכון, ניווט מקלדת נכון ומיקום ברור. ללכוד אסימונים ודפוסים במערכת העיצוב - והמשתמשים יפעלו במהירות ללא חשש לטעות.