맥락과 빠른 행동
1) 목적과 범위
바로 가기 메뉴와 빠른 동작으로 자주 사용되는 작업 경로가 단축됩니다
객체에 대한 로컬 동작 (카드, 테이블 행, 계수).
선택에 대한 배치 동작.
숨겨져 있지만 중요하지 않은 옵션 (보조).
규칙: 컨텍스트 메뉴에서만 중요하고 기본적인 동작을 숨기지 마십시오.
2) 방아쇠 및 변형
오른쪽 클릭/시프트 + F10/메뉴 키-클래식 컨텍스트.
아이콘 버튼 (케밥 '화상', 미트볼 '... ', 문맥) -터치/데스크톱에 보편적입니다.
롱 프레스 (400-600ms) 는 오른쪽 클릭과 동등한 모바일입니다.
사용자 정의 팔레트 - 검색이 가능한 글로벌 빠른 명령.
스 와이프 공개 (iOS/Android 목록) -여러 가지 빠른 바로 가기를 엽니 다.
권장 사항: 최소 두 가지 통화 방법 (icon + 컨텍스트 클릭/키) 을 제공합니다.
3) 내용과 우선 순위
처음 1-3 점은 빈번한 행동입니다. 그런 다음 분리기; 덜 일반적으로 사용됩니다.
파괴적인-마지막에는 색상/아이콘으로 표시됩니다 (그리고 종종 확인/실행을 통해).
단어 - 동사 + 객체 ("즐겨 찾기에 추가", "복사 ID").
라벨은 아이콘 만 가능합니다. 아이콘은 텍스트 대체가 아닌 앰프입니다.
4) 그룹화 및 상태
논리적 블록 (보기, 편집, 관리자, 위험) 에 대한 제한 기호.
확인: '비활성화', '확인' ('menuitemchebox '/' menuitemradio'), '파괴적'.
혼란 스러울 경우 액세스 할 수없는 역할을 표시하지 마 또는 이유 힌트와 함께 '비활성화' 로 표시하십시오.
5) 가용성 (A11y)
컨테이너: 'role = "menu"', 요소: 'role = "menuitements" '/' menuitemchebox '/' menuitemradio'.
로빙 테이블 색인: 현재 요소의 유일한 'tabindex = "0"', 나머지 '-1'.
그림% 1개의 캡션을 편집했습니다. 입력/공간-활성화, Esc-닫기.
Typeahead: 첫 번째 문자 시프트를 인쇄하면 초점이 지점으로 이동합니다
포커스 링이 보입니다. 텍스트와 아이콘의 대비는 AA입니다.
버튼 아이콘의 경우 'aria-haspopup = "메뉴" 및' aria 확장 '을 사용하십시오.
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- 인덱스').
게으르게 렌더링하면 긴 메뉴에서 목록을 재활용하십시오 (가상화는 필요하지 않지만 수백 개의 항목은 피하십시오).
애니메이션 만 '불투명도/변환', 지속 시간 140-200 ms (더 빠른 속도: 100-160 ms).
'ArrowRight' 로 서브 메뉴를 열고 80-120ms (깜박임 방지) 지연으로 호버링하십시오.
7) 모바일 패턴
haptics를 사용한 긴 압박; 타이밍 450 λ100 ms.
컨텍스트 메뉴의 형태로 하단 시트 (엄지 손가락 도달 가능).
왼쪽- 오른쪽의 "아카이브/즐겨 찾기" - "삭제" (확인/실행 취소) 목록에서 동작을 스 와이프하십시오.
44 × 44 이상의 클릭 영역, 짧은 서명, 아이콘 20-24 px.
8) 확인, 실행 취소 및 보안
파괴적인 행동: 두 번째 확인 (모달/확인 패턴) 또는 5-10 초 취소
재무/위험-결과의 맥락에서 명시적인 확인을 통해.
'비활성화' ("불충분 한 권리", "제한에 도달") 이유를 보여줍니다.
9) 메뉴가없는 빠른 동작
라인의 인라인 바로 가기 (아이콘, "", "", "우편").
호버 공개 (데스크톱): 호버링 할 때 동작을 표시하지만 명시 적 트리거를 남깁니다.
명령 팔레트: 동작으로 검색, 툴팁의 핫키 ("" S "," www+ Enter ").
10) 카피 라이팅 및 아이콘
동사 + 객체, 2-3 단어.
명사가 아닌 동작 ("항목 삭제"...) 으로 시작하십시오 ("삭제 항목").
단일 세트의 아이콘; 제품 전체에서 동일한 동작에 동일한 아이콘을 사용하십시오.
모호한 항목에 대한 설명 힌트 ('제목 '/툴팁).
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) 구성 요소 패턴
카드/타일: 오른쪽 상단 모서리에있는 아이콘 '바스 테르'; 호버에서-만지면-항상 볼 수 있습니다.
테이블 행: 마지막 열의 '얼굴'; 여러 선택의 경우-상단/하단의 배치 동작 패널.
채팅/알림 목록: 실행 취소로 스 와이프 동작 (보관/읽기/삭제)
미디어 갤러리: 긴 탭 → 다중 선택 모드 + 하단 동작 패널.
14) iGaming의 세부 사항
빠른 내기: 계수의 컨텍스트 메뉴에서 "Put X" (사전 설정), "쿠폰에 추가", "계수 변경을 구독하십시오. "확인/실행이 필요합니다.
즐겨 찾기/구독: "즐겨 찾기에 제공자/게임 추가", "토너먼트 구독".
현금 인출: 인라인 확인 및 현재 금액; 시장 상태로만 사용할 수 있습니다
중재/보고서: "비밀", "차단 채팅" -안전하고 역할별로 표시됩니다.
책임있는 게임: "한계를 설정", "일시 중지 24 시간" -공격적인 색상없이 결과에 대한 명확한 설명.
15) 반 패턴
중요한 동작은 컨텍스트 메뉴에만 숨겨져 있습니다.
텍스트가없는 항목 (아이콘 만), 특히 목록에 있습니다.
서브 메뉴로 전환 할 때 커서를 실수로 닫습니다 (지연/복도 없음).
메뉴는 소스 항목과 겹치거나 화면 뒤로 이동합니다 (플립/시프트 없음).
확인/취소없이 파괴적입니다.
명백하지 않은 권리 (설명없이 조항이 사라짐).
16) QA 체크리스트
가용성
- 역할 = "메뉴" "/' 메뉴 아이템 '이 정확하고 로빙 테이블 색인 및 화살표가 작동합니다.
- Esc는 메뉴를 닫고 초점은 소스로 돌아갑니다.
- 대조 및 초점 링은 AA에 해당합니다.
행동
- 항목의 순서는 빈도와 위험을 반영합니다. 바닥에 파괴적입니다.
- 포지셔닝은 에지 (플립/시프트) 를 고려합니다. 빠른 애니메이션 (소 200ms).
- 서브 메뉴는 ArrowRight에 의해 열리고 "떨림" (호버 의도 80-120ms) 하지 않습니다.
모바일
- 합성물로 긴 압박; 하단 시트는 엄지 손가락에 편안합니다.
- 스 와이프 액션이 취소되었습니다. 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) 설계 시스템의 문서
"ContextMenu", 'MenuItem', 'Submenu', 'BottomSheet', 'SwipeAction', 'CommandPalette'.
차원/행 높이/반경/애니메이션 토큰.
접근성 가이드 (ARIA, 키보드, 타입 헤드).
그룹화, 포지셔닝 및 확인의 예와 함께 "Do/Do n 't".
간단한 요약
컨텍스트 메뉴와 빠른 동작은 예측 가능하고 액세스 가능하며 안전한 경우 작업 속도를 높입니다. 두 개의 통화 경로, 아이콘이있는 명확한 레이블, 합리적인 그룹화, 위험 확인/실행 취소, 올바른 키보드 탐색 및 명확 디자인 시스템에서 토큰과 패턴을 캡처하면 사용자가 실수를 두려워하지 않고 신속하게 작동합니다.