Bağlam Menüleri ve Hızlı Eylemler

1) Amaç ve kapsam

• Nesne üzerindeki yerel eylemler (kart, tablo satırı, katsayı).
• Seçim üzerinde toplu eylemler.
• Gizli ancak kritik olmayan seçenekler (ikincil).
• Kural: kritik ve birincil eylemleri yalnızca bağlam menüsünde gizlemeyin.

2) Tetikleyiciler ve varyantlar

Sağ tıklatın/Shift + F10/Menu tuşu - klasik bağlamsal.
Simge düğmesi (kebap '⋮', köfte '... ', bağlam) - dokunmatik/masaüstü için evrensel.
Uzun basın (400-600 ms), sağ tıklamanın mobil eşdeğeridir.
Komut paleti (⇧⌘P/Ctrl + K) - arama ile global hızlı komutlar.
Swipe-reveal (iOS/Android listeleri) - bir dizi hızlı kısayol açar.

Öneri: en az iki çağrı yöntemi sağlayın (icon + context click/key).

3) İçerik ve öncelik

İlk 1-3 nokta sık yapılan eylemlerdir; Sonra bir ayırıcı; Dahası - daha az yaygın olarak kullanılır.
Yıkıcı - sonunda, bir renk/simge ile işaretlenmiş (ve genellikle - onay/geri alma yoluyla).
İfadeler - fiil + nesne ("Favorilere ekle", "Kimliği kopyala").
Etiketin yalnızca bir simgesi ≠: Bir simge bir amplifikatördür, metnin yerine geçmez.

4) Gruplama ve durum

Mantıksal bloklar için sınırlayıcılar (görünüm, düzenleme, yönetici, tehlikeli).
Состояния: 'disabled', 'checked' ('menuitemcheckbox'/' menuitemradio'), 'destructive'.
Bu kafa karıştırıcıysa, erişilemez rol göstermeyin; Alternatif olarak - bir sebep ipucu ile 'engelli'olarak göster.

5) Kullanılabilirlik (A11y)

Kapsayıcı: 'rol =' menü ', öğeler:' rol = 'menuitem''/' menuitemcheckbox'/' menuitemradio '.
Gezici tabindex: Geçerli eleman üzerindeki tek' tabindex =" 0 "', geri kalan '-1'.
↑↓ oklar - hareket, →/← - alt menüden giriş/çıkış. Enter/Boşluk - aktivasyon, Esc - kapat.
Typeahead: İlk harfin yazdırılması odağı noktaya kaydırır.
Odak halkası görünür; Metin ve simgelerin kontrastı ≥ AA.
Düğme simgesi için 'aria-haspopup = "menu've' aria-expanded 'kullanın.

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) Konumlandırma ve performans

Menüyü kaynakta açın (tıklama noktası/simge), 4-8 piksel kaydırın; Ekranın kenarlarını izleyin (çevirme/kaydırma).
Portal/layer over ('z-index ") ile click catching out.
Tembel bir şekilde oluşturun, listeyi uzun menülerde geri dönüştürün (sanallaştırma gerekmez, ancak yüzlerce öğeden kaçının).
Animasyonlar sadece 'opaklık/dönüşüm', süre 140-200 ms (daha hızlı: 100-160 ms).
Alt menüyü 'ArrowRight'tarafından açın ve 80-120 ms gecikmeyle (anti-titreme) gezdirin.

7) Mobil desenler

Haptiklerle uzun baskı; Zamanlamalar 450 ± 100 ms.
Bir bağlam menüsü biçimi olarak alt sayfa (başparmak ile erişilebilir).
Listelerdeki eylemleri kaydırın: solda - "arşiv/favoriler", sağda - "sil" (onay/geri al).
Bölgelere tıklayın ≥ 44 × 44, kısa imzalar, simgeler 20-24 piksel.

8) Onaylar, geri alma ve güvenlik

Yıkıcı eylemler: Ya ikinci onay (modal/confirm pattern), ya da 5-10 s geri.
Finansal/risk - sonuçların bağlamı ile açık teyit yoluyla.
'Devre dışı' nedenini göster ("Yetersiz haklar", "Sınıra ulaşıldı").

9) Menüsüz hızlı eylemler

Satırdaki satır içi kısayollar (simgeler, "", "" ⋯ ").
Hover-reveal (masaüstü): Gezinirken eylemleri gösterir, ancak açık bir tetikleyici bırakır.
Komut paleti: eylemlere göre arama, araç ipuçlarındaki kısayol tuşları ("⌘S", "Ctrl + Enter").

10) Metin yazarlığı ve simgeler

Fiil + nesne, 2-3 kelime.
Bir eylemle başlayın ("Girişi sil"...), bir isim değil ("Girişi sil").
Tek bir setten simgeler; Ürün genelinde aynı eylemler için aynı simgeleri kullanın.
Belirsiz öğeler için açıklayıcı ipuçları ('başlık'/araç ipucu).

11) Telemetri ve deneyler

Öğeye göre TO, açılıştan tıklamaya kadar geçen medyan süre, iptal/geri alma oranı.
Yanlış tıklama sayısı (yıkıcı - iptal edildi).
A/B: Öğelerin sırası ve gruplandırılması, listede hızlı kısayolların varlığı.
"Görünmez" öğelerin günlükleri (kimse kullanmaz) - silme/aktarma için adaylar.

12) Tasarım sistemi belirteçleri (örnek)

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) Bileşen desenleri

Kartlar/fayanslar: sağ üst köşede '⋯' simgesi; Hover üzerinde - gösterilen, dokunmatik - her zaman görünür.
Tablo satırları: Son sütundaki '⋯'; Çoklu seçim durumunda - üstten/alttan toplu eylem paneli.
Sohbet/bildirim listeleri: Geri alma ile kaydırma eylemleri (arşiv/okuma/silme).
Medya galerileri: uzun dokunun - çoklu seçim modu + alt eylem paneli.

14) iGaming'in özellikleri

hızlı bahis: katsayının bağlam menüsünde - "Put X" (ön ayarlar), "Kupona ekle", "Katsayıyı değiştirmek için abone ol. "Onay/geri alma gereklidir.
Favoriler/abonelikler: "Favorilere sağlayıcı/oyun ekle", "Turnuvaya abone ol".
Nakit çıkışı: satır içi onay ve mevcut tutar ile; Sadece piyasa durumu ile kullanılabilir.
Moderasyon/raporlar: "Şikayet", "Sohbeti engelle" - güvenli, role göre görünür.
Sorumlu oyun: "Bir sınır ayarla", "24 saat duraklat" - agresif renkler olmadan, sonuçların net bir açıklaması ile.

15) Anti-desenler

Kritik eylemler yalnızca bağlam menüsünde gizlenir.
Metin içermeyen öğeler (yalnızca simgeler), özellikle listelerde.
Alt menüye geçerken imlecin yanlışlıkla kapanması (gecikme/koridor yok).
Menü kaynak öğeyle çakışır veya ekranın arkasına gider (çevirme/kaydırma yok).
Doğrulama/geri alma olmadan yıkıcı.
Açık olmayan haklar (madde açıklama olmadan kaybolur).

16) KG kontrol listesi

Kullanılabilirlik

• 'rol = "menü "'/' menuitem 'doğrudur, gezici tabindex ve oklar çalışır.
• Esc menüyü kapatır, odak kaynağa döner.
• Kontrast ve odak halkaları AA'ya karşılık gelir.

Davranış

• Öğelerin sırası sıklığı ve riski yansıtır; Altta yıkıcı.
• Konumlandırma kenarları dikkate alır (çevirme/kaydırma); Hızlı animasyonlar (≤ 200 ms).
• Alt menü ArrowRight tarafından açılır ve "titremez" (gezinme amaçlı 80-120 ms).

Mobil

• Haptiklerle uzun baskı; Alt tabaka baş parmağınızla rahattır.
• Kaydırma eylemleri geri alındı; 44 44 alanları .

Güvenlik

• Tehlikeli eylemler için onay/geri alma; Engellilik nedenleri açıktır.
• İpuçları/etiketlerde özel veri sızıntısı yok.

Metrikler

• Tıklama CTR/zaman kaldırılır; Misclick/undo izlenir.

17) Uygulama: açma/kapatma ve tıklama

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) Tasarım sistemindeki belgeler

Компоненты: 'ContextMenu', 'MenuItem', 'Alt Menü', 'BottomSheet', 'SwipeAction', 'CommandPalette'.
Boyut/satır yüksekliği/yarıçap/animasyon belirteçleri.
Erişilebilirlik kılavuzları (ARIA, klavye, typeahead).
Gruplama, konumlandırma ve onaylama örnekleriyle "Yap/Yapma".

Kısa özet

Bağlam menüleri ve hızlı eylemler, öngörülebilir, erişilebilir ve güvenliyse çalışmayı hızlandırır: iki çağrı yolu, simgeli net etiketler, makul gruplama, risk için onay/geri alma, doğru klavye navigasyonu ve net konumlandırma. Tasarım sistemindeki belirteçleri ve kalıpları yakalayın - ve kullanıcılar hata yapma korkusu olmadan hızlı bir şekilde hareket edecektir.