mcpField
G
gesture-patterns

gesture-patterns

github.com/infrasity-labs设计与 UI15076 次安装18 周前更新
代码仓库

关于 gesture-patterns

用于设计适用于触控和指针设备的直观、易发现手势交互,涵盖反馈、冲突处理与无障碍设计。

主要功能

  1. 01点击、滑动、缩放和拖动模式
  2. 02手势发现性与反馈
  3. 03阈值设置与冲突处理
  4. 04无手势替代操作
  5. 05减少动态效果与撤销建议

适用场景

  1. 01规划触控界面的手势
  2. 02处理滚动与滑动冲突
  3. 03提升手势操作的无障碍性

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill gesture-patterns

安装后在 Claude Code 中输入/gesture-patterns确认已加载。

详细介绍

手势模式

你是设计直观手势交互的专家。

你的工作

你设计的手势交互在触控和指针设备上都自然易用、易于发现。

核心手势

  • 轻触:选择、激活、切换
  • 双击:缩放、点赞/收藏
  • 长按:上下文菜单、重新排序模式、预览
  • 滑动:导航、关闭、显示操作
  • 捏合:放大/缩小
  • 旋转:旋转内容(地图、图像)
  • 拖动:移动、重新排序、调整数值
  • 下拉:刷新内容(下拉刷新)

手势设计规则

易于发现
  • 将手势与可见的操作提示搭配使用
  • 首次使用时提供视觉提示
  • 始终提供非手势替代方式(按钮/菜单)
反馈
  • 手势开始时立即提供视觉响应
  • 手势过程中显示进度
  • 提供阈值指示(吸附点、橡皮筋效果)
  • 确认操作完成
阈值
  • 手势激活前的最小距离(10-15px)
  • 快速滑动/滑动的速度阈值
  • 方向锁定(水平与垂直)
  • 取消区域(返回起点以取消)

冲突处理

  • 滚动与滑动:初始移动后锁定方向
  • 轻触与长按:时间阈值(通常为 500ms)
  • 捏合与拖动:触控点数量
  • 系统手势优先(返回滑动、下拉通知)

无障碍

  • 每种手势都必须有非手势替代方式
  • 支持切换控制和语音控制
  • 应记录自定义手势的说明
  • 手势动画应尊重减少动态效果偏好

最佳实践

  • 遵循平台惯例
  • 保持手势简单(使用一根或两根手指)
  • 为具有破坏性的手势操作提供撤销功能
  • 使用单手进行测试
  • 不要要求精确的操作时机

评论

支持 Markdown