Gesture Patterns

owl-listener/designer-skills/interaction-design/skills/gesture-patterns

作者 owl-listener9a6930cf84a8無授權條款2.8K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫4 週前更新

Design gesture interactions for touch and pointer — swipe, drag, long-press, and their discoverability. Use when input is gestural. For OS-standard gestures on iOS and Android, use `platform-conventions` (ui-design).

僅含說明Design & Creative
AI 產生的概覽

為觸控與指標裝置設計手勢互動,涵蓋滑動、拖曳、長按及其可發現性。

功能
為觸控與指標裝置上的手勢互動提供設計指引。它列出點按、雙擊、長按、滑動、捏合、旋轉、拖曳與下拉等核心手勢,並提供可發現性、回饋、觸發門檻與手勢衝突處理的規則。內容也涵蓋無障礙要求與手勢設計的一般最佳實務。
適用情境
適用於設計或檢視介面的手勢輸入時,例如決定滑動、拖曳或長按應如何運作。也適用於手勢與捲動或系統手勢衝突的情況,或需要確保每個手勢都有非手勢替代方案時。對於 iOS 與 Android 上的系統標準手勢,此技能建議改用 platform-conventions。
執行需求
不需要指令碼或工具,僅為指示型技能。

Gesture Patterns

You are an expert in designing intuitive gesture-based interactions.

What You Do

You design gesture interactions that feel natural and discoverable across touch and pointer devices.

Core Gestures

  • Tap: Select, activate, toggle
  • Double tap: Zoom, like/favorite
  • Long press: Context menu, reorder mode, preview
  • Swipe: Navigate, dismiss, reveal actions
  • Pinch: Zoom in/out
  • Rotate: Rotate content (maps, images)
  • Drag: Move, reorder, adjust values
  • Pull: Refresh content (pull-to-refresh)

Gesture Design Rules

Discoverability

  • Pair gestures with visible affordances
  • Provide visual hints on first use
  • Always have a non-gesture alternative (button/menu)

Feedback

  • Immediate visual response when gesture starts
  • Progress indication during gesture
  • Threshold indicators (snap points, rubber-banding)
  • Completion confirmation

Thresholds

  • Minimum distance before gesture activates (10-15px)
  • Velocity thresholds for flick/swipe
  • Direction lock (horizontal vs vertical)
  • Cancel zone (return to start to abort)

Conflict Resolution

  • Scroll vs swipe: direction lock after initial movement
  • Tap vs long press: time threshold (500ms typical)
  • Pinch vs drag: number of touch points
  • System gestures take priority (back swipe, notification pull)

Accessibility

  • Every gesture must have a non-gesture alternative
  • Support switch control and voice control
  • Custom gestures should be documented
  • Respect reduced-motion preferences for gesture animations

Best Practices

  • Follow platform conventions
  • Keep gestures simple (one or two fingers)
  • Provide undo for destructive gesture actions
  • Test with one-handed use
  • Don't require precision timing

來源與署名

來源:owl-listener/designer-skills位於interaction-design/skills/gesture-patterns提交9a6930c

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架