터치 장치의 제스처 및 UX
1) 제스처와 적절한시기
제스처는 사용자의 동작 경로를 단축시킵니다. 하나는 세 개의 탭 대신 스 와이프합니다. 다음과 같은 경우 속도와 유지력을 향상시킵니다
예측 가능한 (플랫폼 기대치에 따라).
감지 가능 (사용자는 제스처를 사용할 수 있다고 추측).
피드백 (비주얼/오디오/촉각) 지원.
잘못된 터치와 다른 장치로 신뢰할 수 있습니다.
원칙: 먼저 명시 적 UI 요소 → 그런 다음 제스처를 힌트 한 다음 고급 숨겨진 제스처를 암시합니다. 중요한 동작-항상 명시 적 버튼으로 복제됩니다.
2) 제스처 분류법
탭/더블 탭/롱 프레스-선택/추가 메뉴/고급 작업.
스 와이프 (산/버트) -탐색, 삭제/보관, 동작 공개.
드래그 앤 드롭-정렬, 전송, 계층 구조 변경.
핀치/스프레드 (줌) - 스케일 (갤러리, 지도, 그래프).
회전-드물고 편집기/뷰에 적합합니다.
새로 고침/풀투 액션-업데이트/보조 작업.
가장자리 스 와이프-웹에서주의 깊게 시스템 탐색 (뒤/메뉴).
멀티 터치-고급 시나리오를위한 2-3 손가락 제스처.
시스템 제스처 (스크린 샷, PiP, 시스템 "Back" (Android)) 는 충돌을 고려합니다.
3) 인체 공학 및 엄지 영역
엄지 영역: 영역 도달-화면의 절반; 주요 CTA, 칩 필터 및 탭이 맨 아래에 있습니다.
적중 대상: 최소 44 × 44 pt/48 × 48 dp. 작은 품목에 적중 슬롭을 추가하십시오.
가장자리 들여 쓰기: 잘못된 가장자리 스 와이프를 줄입니 중요한 상호 작용-가장자리에 가깝지 않습니다
오리엔테이션: 세로 - 기본; 풍경-두 개의 엄지 손가락 (특히 게임/비디오) 에 최적화됩니다.
4) 탐지 및 훈련
Affordance: 제스처의 힌트 (측면에 세미 가시 카드, 시트 하단에 "펜").
마이크로 온 보딩: "Got it" 으로 일회성 단서 ("삭제하기 위해 스 와이프").
시험 제스처: 패턴의 첫 등장시 데모 애니메이션.
반복성: 제스처는 비슷한 내용의 모든 장소에서 동일한 방식으로 작동해야합니다.
5) 피드백: 비주얼, 촉각, 오디오
시각: 그림자, 시차, 가이드 고착, 새로 고침 할 때 진행 표시기.
Haptics: 드래그를 잡을 때 가벼운 임펄스, 더 "무거운" -낙하/성공시.
오디오 (보통): 게임 또는 유형의 이벤트에서 짧은 클릭/클릭 (승리/오류).
취소 상태: 파괴적인 스 와이프가있는 시각적 "적색 영역", 제거 전에 진동 힌트.
6) 제스처 갈등과 우선 순위
인식 계층 구조: 내부 스크롤> 스 와이프 카드> 시스템 엣지 백 (웹에서-그 반대). 제스처 경기장/우선 순위 설정.
수직 스크롤 대 수평 스 와이프: 10-15 px 이동 후 한 축을 잠그십시오.
가장자리 스 와이프 대 자체 제스처: 시스템을 가로 채지 않도록 내부 입력 또는 "펜" 제스처를 추가하십시오.
글로벌 백 제스처 (Android/iOS): 예상되는 탐색을 중단하지 마십시오. "백" 버튼으로 중요한 동작을 중복하십시오.
7) 스크립트 패턴
7. 목록 및 카드 1 개
스 와이프 동작: 짧은 스 와이프-동작 (아이콘) 의 힌트, 길고 즉각적인 동작.
실행 취소 패러다임: 파괴적인 제스처 후 스냅 바 "취소".
드래그 재주문: "핸들" 을 드래그하십시오. 세로 축을 수정하십시오.
7. 지도 2 개, 갤러리, 그래프
스케일링을위한 핀치 줌 + 이중 탭.
관성 및 경계: 탄성 경계, 부드러운 관성.
"돋보기 "/그래프의 점의 세부 사항에 대한 탭홀드.
7. 내비게이션 및 방패 3 개
하단 시트: 핸들에서 제스처를 당기고, 축소/부분/전체 상태; 아래로 스 와이프하여 닫습니다.
탭/칩: 진행 표시기를 사용하여 탭 사이에서 수평 스 와이프합니다.
7. 4 게임 및 빠른 시나리오
한 손으로 플레이: 하단 가장자리에 큰 베팅/액션 영역.
이중 제스처: "반복 베팅" (확인 합성) 으로 이중 탭.
파괴적인 임계 값: 300ms에서 손가락을 "잠그거나" 빨간색 영역 "을 통과하여 실행하십시오.
8) 가용성 (A11y)
모든 제스처는 버튼이나 메뉴 항목과 함께 복제됩니다.
VoiceOver/TalkBack: 올바른 설명 및 초점 순서.
모터 접근성: 롱 프레스 (아이콘 "얼른") 에 대한 대안, 터치 영역 증가.
대조와 규모: 제스처가 행동에 도달하는 유일한 방법은 아닙니다.
9) 성능과 신뢰성
주요 제스처에 대한 INP (Interaction to Next Paint)
터치 대기 시간: 첫 번째 응답 전에 목표 <50-100ms (시각적 캡처/조명).
60 FPS: 드래그/스크롤을위한 부드러움; 움직일 때 무거운 그림자를 끄고 흐림.
적중 테스트: 겹치는 것을 피하십시오 (z- 인덱스/오버플로) - 트랩은 "부드럽습니다".
그립 테스트: 오른 손잡이/왼손, 엄지 손가락/작은 손가락, 서있는/운송 중.
10) 웹 vs 네이티브
웹/PWA: 스크롤을위한 수동 청취자 ('수동: 참'), 축을 잠그기위한 '터치 액션', 불필요하게 시스템 제스처 가로 채기를 피하십시오.
iOS/Android 기본: 시스템 인식 기 (UIGestureRecognizer/Android GestureDetector), 표준 합성, 예측 "백" (Android 14 +) 사용.
웹뷰: 교량 및 안전 지대, 방패의 예측 폐쇄-웹 내부, 시스템 "백" 을 깨지 않고.
11) 멀티 터치 및 고급 제스처
두 손가락: 줌이 잠겨있는 동안 패닝; 카드에-add를위한 "두 손가락 아래로" 제스처. 레이어.
세 손가락: 전력 사용자 전용; 항상 대안을 제시하십시오.
조합: 범위 선택/그룹 이동을위한 긴 프레스 + 드래그.
12) 검증, 원격 측정, 지표
확인: '제스처 _ 시작', '제스처 _ 커밋', '제스처 _ 커밋', '대기 시간 _ ms', '거리 _ px', '오버 스크롤', '오버 스크롤', '미스 파이어' (ло보이지 않는 사람), 'unundo _ resed'.
KPI: 성공률, 잘못된 발사 율, 실행 취소 속도, INP, 행동 시간, 제스처 충돌에 대한 하차.
13) 현지화와 문화적 차이
RTL 언어: 미러 수평 제스처 및 아이콘.
상징: "스 와이프 왼쪽 = 제거" 는 보편적이지 않습니다. 온 보딩에서 확인하십시오.
촉각 패턴: 시스템 프로파일을 사용하면 이미 사용자에게 친숙합니다.
14) 보안 및 버그
파괴적인 제스처-실행 취소/확인만으로.
가장자리 스 와이프가 실수로 중요한 프로세스를 닫지 않아야합니다 (지불/CCM)
시버 보호: 제스처를 시작하기 전에 모션 임계 값 (5-10 px).
차단 상태 (결제 로더, 확인 모달) 에서 제스처 비활성화
15) 터치 테이블/태블릿 패턴
양손 시나리오: 제어 구역 분리.
다중 사용자 모드: 제스처가 충돌하지 않습니다. 터치 시간 우선 순위.
큰 적중 대상: 56-64 dp; 드래그 작업을위한 비주얼 가이드.
16) 안티 패턴
제스처만으로 숨겨진 중요한 동작 (버튼 없음).
시스템과 충돌하는 제스처 (엣지 백, 알림 쉐이드).
시각적 인 "스크램블" 및 사운드/분위기없이 긴 압축.
축 방향 잠금 장치없이 수평 스크롤 내부를 스 와이프하십시
항력 → 지연 및 FPS 하락시 "무거운" 그림자/흐림.
응용 프로그램의 다른 부분에서 일관되지 않은 제스처.
17) 구현 점검표 (단계별)
1. 제스처 맵: A11y에 대한 대안이있는 장소와 무엇입니까?
2. 인식 우선 순위: 축 방향 잠금, 가장자리 안전 구역, 제스처 경기장.
3. 피드백: 비주얼 트랩, 랩틱스 프로필, 애니메이션
4. 성능: FPS INP/60, 드래그/스크롤 프로파일 링.
5. 온 보딩: 꺼질 수있는 프롬프트 및 시험 제스처.
6. 원격 측정: 성공/misfire/undo, 히트 맵 터치.
7. 테스트 매트릭스: 장치, 밀도, 왼손/오른 손잡이, 나쁜 네트워크 케이스.
8. 문서: 디자인 시스템의 제스처 가이드, 예 및 대소 문자.
18) 결론
유능한 몸짓은 빠르고 이해하기 쉽고 신뢰할 수 있습니다. 시스템 기대치를 깨고 모든 사람에게 접근성을 보장하지 않으면 서 목표로가는 길을 줄입니다 설계 시스템의 일부로 설계 제스처: 균일 한 패턴, 명확한 우선 순위, 풍부한 피드백 및 엄격한 성능 제어-UX는 모든 장치 및 모든 시나리오에서 동일하게 즐겁습니다.