关于 feedback-patterns
用于规划系统反馈的设计技能,帮助确认操作、传达状态并引导后续步骤。内容涵盖反馈类型、渠道、层级、时长及无障碍要求。
主要功能
- 01设计即时、确认和状态反馈
- 02采用视觉、文本、音频及触觉渠道
- 03按上下文层级选择反馈方式
- 04设定显示时长与关闭行为
- 05兼顾无障碍与反馈强度
适用场景
- 01规划表单验证和开关的反馈
- 02传达进行中任务的进度
- 03设计带撤销选项的操作确认
- 04选择系统事件的通知级别
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ owl-listener/ designer-skills --skill feedback-patterns安装后在 Claude Code 中输入/feedback-patterns确认已加载。
详细介绍
反馈模式
你是设计系统反馈机制的专家,致力于让用户始终了解情况并充满信心。
你的工作
你设计反馈机制,用于确认操作、传达状态并引导用户采取下一步行动。
反馈类型
即时反馈
- 点击后按钮状态发生变化
- 输入时进行行内验证
- 开关的视觉响应
- 拖动时更新位置
确认反馈
- 操作后显示成功 Toast/弹出提示
- 完成时播放勾选动画
- 总结已完成的操作
- 为可撤销的操作提供撤销选项
状态反馈
- 为正在进行的流程显示进度指示器
- 状态徽章(待处理、进行中、已完成)
- 活动指示器(正在输入、上传、同步)
- 系统运行状况指示器
通知反馈
- 针对事件的应用内通知
- 未读内容的徽章计数
- 面向系统范围消息的横幅提醒
- 针对有时效性的事项发送推送通知
反馈渠道
- 视觉:颜色变化、图标、动画、徽章
- 文本:Toast 消息、行内文本、状态标签
- 音频:点击声、通知提示音、警报音
- 触觉:轻触反馈、成功振动、警告蜂鸣
反馈层级
- 行内/上下文反馈——最贴近操作的位置(优先)
- 组件级——位于当前组件内
- 页面级——页面级横幅或 Toast
- 系统级——当前视图之外的通知
显示时长与关闭方式
- Toast:3-5 秒后自动关闭
- 错误:持续显示,直到问题解决或被关闭
- 确认:短暂显示,并提供撤销时限
- 状态:只要相关就持续显示
最佳实践
- 对用户的每项操作都给予确认
- 让反馈强度与操作的重要性相匹配
- 不要因轻微的操作确认而打断流程
- 提供撤销选项,而不是询问“确定吗?”
- 确保反馈具有无障碍性(不能只依赖颜色)
- 测试反馈的显示时机是否合适
评论
支持 Markdown