跳到正文
cccskills
免费在 GitHub 公开

gesture-patterns

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).

中文简介正在准备中。当前显示原文说明。

查看安装方法

包含的文件(1)

  • SKILL.md2.0 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

Design an A/B experiment — hypothesis, variants, primary metric, and sample size. Use when a change can be measured quantitatively at scale. For observing behaviour qualitatively, use `test-scenario`.

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30112026年9月6日 更新

Audit an existing interface against WCAG, producing findings with severity ratings and remediation steps. Use when you have a design or build to assess now. Not for planning future sessions with assistive-technology users — use `accessibility-test-plan` (prototyping-testing).

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30112026年9月6日 更新

Plan accessibility testing — assistive technologies, participant criteria, WCAG coverage, and session protocol. Use when scheduling testing with real AT users. Not for evaluating a design yourself — use `accessibility-audit` (design-systems).

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30112026年9月6日 更新

Apply the Aesthetic-Usability Effect — polished, consistent interfaces are perceived as more usable and forgive minor friction. Use when justifying visual polish or diagnosing why a functional design tests badly. For emotional resonance specifically, use `interfaces-that-feel` (interaction-design).

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30112026年9月6日 更新

Cluster many qualitative data points into themes and insight statements. Use when synthesising across multiple sessions or sources. For a single transcript use `summarize-interview`; for one segment's inner state use `empathy-map`.

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30112026年9月6日 更新

Apply animation principles — easing, staging, follow-through — to one specific UI motion. Use when tuning how an animation feels. For product-wide duration and easing tokens use `motion-system` (design-systems); for a full interaction spec use `micro-interaction-spec`.

中文简介正在准备中。当前显示原文说明。

Owl-Listener/designer-skills30112026年9月6日 更新

查看 Owl-Listener 的全部技能

报告此技能的问题