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-skillsDesigner Skills开源设计技能集为 AI 编程助手提供了一套可执行的设计方法论其中interaction-design 交互设计集收录了22 个交互技能和 5 条命令覆盖微交互、状态机、认知法则、表单设计、引导流程等核心场景。本指南将带你快速理解这 22 个认知法则技能如何落地为微交互规范、状态机建模与低摩擦表单设计。一键上手安装交互设计技能集Designer Skills 以插件形式运行在 AI 编程助手如 Claude Code、Gemini CLI中。安装只需两步打开助手后执行/plugin marketplace add Owl-Listener/designer-skills添加技能市场输入/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用四个必答问题消灭这种模糊要素要回答的问题示例1️⃣ Trigger 触发器是什么动作引发交互点击、悬停、下拉刷新、系统事件2️⃣ Rules 规则触发后的逻辑与分支长按超过阈值才进入径向进度3️⃣ Feedback 反馈用户如何感知结果颜色/位移动画、音效、震动4️⃣ Loops 循环与模式会重复吗首次与后续行为不同吗首次点赞有庆祝动画之后只缩放配合 animation-principles 技能SKILL.md动效也有明确预算按钮态 50–100ms、淡入淡出 150–250ms、页面转场 250–400ms相关元素以 30–50ms 间隔错落出现总序列不超过 700ms并始终支持减少动效偏好。状态机建模消灭不可能状态表单能不能边加载边报错播放器暂停后还能缓冲吗这类问题靠口头约定很容易漏。state-machine 技能SKILL.md给出统一建模语言States 状态UI 可处的离散模式idle / loading / success / errorEvents 事件触发迁移的动作点击、提交、超时Transitions 转移在状态 A 遇到事件 X进入状态 BGuards 守卫转移成立的条件isValid、hasPermissionActions 动作转移时的副作用请求数据、弹出提示技能内置了 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条定律何时用遇到具体设计决策时按这张表找对应技能即可场景法则一句话行动选项太多希克定律减少同时呈现的选项数信息记不住米勒定律每屏核心信息控制在 ~4 组误触率高菲茨定律扩大高频操作热区靠近拇指区感觉卡多尔蒂阈值交互响应压到 400ms 内超过就立刻给反馈用户看不懂新界面雅各布定律复用其他产品已建立的心智模型流程太复杂特斯勒定律复杂度由产品吸收而非转嫁用户体验记忆平淡峰终定律专门设计高潮时刻与收尾体验命令清单5个命令覆盖交互设计全流程命令用途/design-interaction为功能或组件设计完整交互流程design-interaction.md/map-states为复杂组件建模状态与转移/error-flow设计完整错误处理流程error-flow.md/design-form低摩擦表单设计/design-onboarding快速触达价值的新手引导design-onboarding.md总结让认知法则成为可执行的检查清单interaction-design 集的价值在于它没有停留在菲茨定律是什么的理论层而是把 22 个认知法则与交互模式翻译成了可被执行的技能单元——触发器、状态、时长、热区、验证时机每一项都有明确产出。建议的使用路径新流程 →/design-interaction搭骨架有状态变化的组件 →/map-states建模表单与引导 →/design-form、/design-onboarding专项优化出错分支 →/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考