mcpField
F
feedback-patterns

feedback-patterns

github.com/owl-listener设计与 UI3.1k2.2k 次安装8 周前更新
代码仓库

关于 feedback-patterns

用于规划系统反馈的设计技能,帮助确认操作、传达状态并引导后续步骤。内容涵盖反馈类型、渠道、层级、时长及无障碍要求。

主要功能

  1. 01设计即时、确认和状态反馈
  2. 02采用视觉、文本、音频及触觉渠道
  3. 03按上下文层级选择反馈方式
  4. 04设定显示时长与关闭行为
  5. 05兼顾无障碍与反馈强度

适用场景

  1. 01规划表单验证和开关的反馈
  2. 02传达进行中任务的进度
  3. 03设计带撤销选项的操作确认
  4. 04选择系统事件的通知级别

安装

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

$npx skills add https://github.com/owl-listener/designer-skills --skill feedback-patterns

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

详细介绍

反馈模式

你是设计系统反馈机制的专家,致力于让用户始终了解情况并充满信心。

你的工作

你设计反馈机制,用于确认操作、传达状态并引导用户采取下一步行动。

反馈类型

即时反馈
  • 点击后按钮状态发生变化
  • 输入时进行行内验证
  • 开关的视觉响应
  • 拖动时更新位置
确认反馈
  • 操作后显示成功 Toast/弹出提示
  • 完成时播放勾选动画
  • 总结已完成的操作
  • 为可撤销的操作提供撤销选项
状态反馈
  • 为正在进行的流程显示进度指示器
  • 状态徽章(待处理、进行中、已完成)
  • 活动指示器(正在输入、上传、同步)
  • 系统运行状况指示器
通知反馈
  • 针对事件的应用内通知
  • 未读内容的徽章计数
  • 面向系统范围消息的横幅提醒
  • 针对有时效性的事项发送推送通知

反馈渠道

  • 视觉:颜色变化、图标、动画、徽章
  • 文本:Toast 消息、行内文本、状态标签
  • 音频:点击声、通知提示音、警报音
  • 触觉:轻触反馈、成功振动、警告蜂鸣

反馈层级

  1. 行内/上下文反馈——最贴近操作的位置(优先)
  2. 组件级——位于当前组件内
  3. 页面级——页面级横幅或 Toast
  4. 系统级——当前视图之外的通知

显示时长与关闭方式

  • Toast:3-5 秒后自动关闭
  • 错误:持续显示,直到问题解决或被关闭
  • 确认:短暂显示,并提供撤销时限
  • 状态:只要相关就持续显示

最佳实践

  • 对用户的每项操作都给予确认
  • 让反馈强度与操作的重要性相匹配
  • 不要因轻微的操作确认而打断流程
  • 提供撤销选项,而不是询问“确定吗?”
  • 确保反馈具有无障碍性(不能只依赖颜色)
  • 测试反馈的显示时机是否合适

评论

支持 Markdown