企业官网建设流程全解析

Designer Skills交互设计完全指南：22个认知法则技能如何驱动微交互、状态机与表单设计

【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills

Designer Skills（开源设计技能集）为 AI 编程助手提供了一套可执行的设计方法论，其中interaction-design 交互设计集收录了22 个交互技能和 5 条命令，覆盖微交互、状态机、认知法则、表单设计、引导流程等核心场景。本指南将带你快速理解这 22 个认知法则技能如何落地为微交互规范、状态机建模与低摩擦表单设计。

一键上手：安装交互设计技能集

Designer Skills 以插件形式运行在 AI 编程助手（如 Claude Code、Gemini CLI）中。安装只需两步：

1. 打开助手后执行/plugin marketplace add Owl-Listener/designer-skills添加技能市场；
2. 输入/plugin进入 Discover 页，勾选interaction-design即可安装。

如果你只想装交互设计这一部分，这一步就完成了——技能包很轻量，按需安装即可。完整安装说明见 README.md。

💡 技能（Skills）是"名词"——沉淀某一设计主题的领域知识；命令（Commands）是"动词"——把多个技能串成完整工作流。日常使用主要靠命令。

22个交互技能全景：三大板块速览

interaction-design 集的技能可分为三个板块（详见 interaction-design/README.md）：

🎯 交互工程类— 把交互写清楚、做出来

• micro-interaction-spec：用"触发器 → 规则 → 反馈 → 循环/模式"四段框架规范微交互
• animation-principles：为 UI 动效应用缓动、时长、编排原则
• state-machine：把复杂 UI 行为建模为有限状态机
• gesture-patterns：触控与指针设备的手势交互设计
• feedback-patterns：用户动作后的系统反馈（确认、状态提示）
• loading-states：加载、骨架屏与渐进式内容呈现

🧠 认知法则类— 让界面符合人脑的工作方式

• hicks-law（希克定律）：减少同时呈现的选项数以缩短决策时间
• millers-law（米勒定律）：把信息分组成约 4 个记忆块
• fitts-law（菲茨定律）：根据目标尺寸与距离优化交互热区
• doherty-threshold（多尔蒂阈值）：把系统响应控制在 400ms 内维持心流
• jakobs-law（雅各布定律）：遵循用户在其他产品里形成的心智模型
• teslers-law（特斯勒定律）：把复杂度留给产品，而不是用户
• peak-end-rule（峰终定律）：让流程的最高潮与结尾都是正面体验
• zeigarnik-effect（蔡格尼克效应）：用未完成任务作为回访钩子
• serial-position-effect（序列位置效应）：把最重要的项放在列表首尾

📋 场景实战类— 高频业务场景的完整方案

• form-design（表单设计）、onboarding-design（新手引导）、error-handling-ux（错误处理）、navigation-patterns（导航）、search-ux（搜索）、conversational-ux（对话式交互）、interfaces-that-feel（情感化界面）

微交互规范：四步框架让界面"活"起来

很多团队的微交互只有一句"加个动画"，开发拿到后只能瞎猜。micro-interaction-spec 技能（SKILL.md）用四个必答问题消灭这种模糊：

配合 animation-principles 技能（SKILL.md），动效也有明确预算：按钮态 50–100ms、淡入淡出 150–250ms、页面转场 250–400ms，相关元素以 30–50ms 间隔错落出现，总序列不超过 700ms，并始终支持"减少动效"偏好。

状态机建模：消灭"不可能状态"

表单能不能边加载边报错？播放器暂停后还能缓冲吗？这类问题靠口头约定很容易漏。state-machine 技能（SKILL.md）给出统一建模语言：

• States 状态：UI 可处的离散模式（idle / loading / success / error）
• Events 事件：触发迁移的动作（点击、提交、超时）
• Transitions 转移：在状态 A 遇到事件 X，进入状态 B
• Guards 守卫：转移成立的条件（isValid、hasPermission）
• Actions 动作：转移时的副作用（请求数据、弹出提示）

技能内置了 4 套常见模板，例如表单的经典链路：

idle → editing → validating → submitting → success/error → idle

三条最佳实践值得记住：从成功路径开始再补错误状态、每个状态都必须有出口、一个状态机只负责一个关注点。

在 AI 助手中直接输入/map-states 多步结账，命令（map-states.md）会自动串联 state-machine、loading-states、error-handling-ux、feedback-patterns、animation-principles 五个技能，输出一张带守卫、动作与 UI 呈现的完整状态图。

表单设计实战：把用户送到"提交成功"

表单是流失率的重灾区。form-design 技能（SKILL.md）给出一套反直觉但高效的规则：

• 布局：几乎永远用单列；字段宽度反映预期输入长度（邮编窄、简介宽）；标签置顶而非左对齐
• 标签：永远保留持久标签，绝不拿占位符充当唯一标签
• 输入类型匹配数据：≤5 个选项用单选、≥6 个用下拉、日期禁用自由文本
• 验证时机：失焦时校验，而不是每个键都校验；错误信息紧贴字段下方，且说明"怎么改"而非只说"无效"
• 多步表单：显示进度指示、允许返回不丢数据、自动保存草稿

在助手中输入/design-form 结账表单，命令（design-form.md）会按"结构 → 认知负荷 → 热区 → 错误预防 → 反馈 → 加载"六步调用对应技能，最终输出一份含字段分组依据、验证规则与提交状态的设计说明，并建议接着跑/error-flow补全错误处理模型。

认知法则速查：7条定律何时用

遇到具体设计决策时，按这张表找对应技能即可：

命令清单：5个命令覆盖交互设计全流程

总结：让认知法则成为可执行的检查清单

interaction-design 集的价值在于：它没有停留在"菲茨定律是什么"的理论层，而是把 22 个认知法则与交互模式翻译成了可被执行的技能单元——触发器、状态、时长、热区、验证时机，每一项都有明确产出。

建议的使用路径：

1. 新流程 →/design-interaction搭骨架
2. 有状态变化的组件 →/map-states建模
3. 表单与引导 →/design-form、/design-onboarding专项优化
4. 出错分支 →/error-flow兜底

配合 design-research（前期研究）与 visual-critique（交付前评审），即可覆盖从研究到交付的完整设计周期。

【免费下载链接】designer-skillsDesigner Skills Collection: agentic skills, commands, and plugins for design — from research to systems, UI, interaction, and delivery.项目地址: https://gitcode.com/gh_mirrors/de/designer-skills