交互设计Skill：让每一次点击、过渡和反馈都“有目的”
- 一句话定位：这是一个专注于「微交互、运动设计、过渡动画与用户反馈模式」的 AI 技能，帮助你把界面从“能用”打磨到“好用且让人愉悦”。
- 核心方法论：以“有目的的运动”为第一原则——反馈、定向、焦点、连续性，动画不是为了炫技，而是为了传达信息。
- 开箱即用的规范：内置时间指南（100-150ms / 200-300ms / 300-500ms / 500ms+）与常用缓动函数（ease-out、ease-in、ease-in-out、spring），让动画参数不再靠“感觉”。
- 覆盖常见交互模式：骨架屏、进度条、开关切换、页面过渡、涟漪反馈、滑动手势、拖放、滚动触发动画、悬停与焦点状态。
- 工程与可访问性并重：强调
transform/opacity达到 60fps、尊重prefers-reduced-motion、动画可中断、渐进增强，避免卡顿与过度动画。
1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？
技能基本信息
| 项目 | 内容 |
|---|---|
| 技能中文名 | 交互设计Skill |
| 技能英文名 | interaction-design |
| 技能 ID | 13166 |
| 适用人群 | 前端工程师、UI/UX 设计师、产品经理、独立开发者 |
| 核心问题 | 界面“能点但不好用”、动画生硬或缺失、加载无反馈、交互细节缺乏统一标准 |
它解决什么问题？
在实际项目中，交互细节往往是最容易被拖延的部分：按钮点下去没有任何反馈、列表加载时页面“闪一下”、弹窗出现得突兀、移动端滑动没有手感、动画写了但掉帧、设计师和工程师为了“动画到底 200ms 还是 300ms”反复拉扯。这个技能把这些反复出现的决策固化成一套可执行的规范与代码模板，让 AI 直接给出“带原则、带时长、带缓动、带可访问性处理”的交互实现方案。
“一键安装”提升效率的思路
所谓“一键安装”，本质是把这套交互设计知识一次性挂载到你的 AI 编程助手中，之后每次对话都自带这份上下文，不需要反复粘贴提示词。通用流程如下（具体命令、入口与版本要求以官方说明为准）：
- 确认前提：你的 AI 编程环境需要支持“技能（Skill）”机制，并已正常登录、可访问技能市场或技能仓库。
- 找到技能入口：在技能市场 / 技能中心 / 插件面板中搜索技能英文名
interaction-design，或直接通过技能 ID13166定位。 - 执行安装：点击安装 / 添加 / 启用按钮，等待状态变为“已安装”或“已启用”。若你的环境采用配置文件方式，则在对应的技能清单中登记该技能，具体写法以官方说明为准。
- 验证是否生效：安装后新开一个会话，提出一个具体请求，例如“帮我给这个按钮加上 hover 和 tap 的微交互反馈”，观察回复是否体现出该技能的特征——是否给出明确的时长建议（如 100-150ms 微反馈）、是否使用
transform/opacity、是否提及prefers-reduced-motion、是否给出类似 Framer Motion 的弹簧参数。若具备这些特征，说明技能已成功加载。 - 持续使用：后续在开发交互时，直接描述场景（加载态、页面切换、手势、拖放等），让技能在既有规范下产出代码，避免每次重新对齐标准。
提示：安装命令、是否收费、支持的客户端版本等信息，技能详情中未提供，请以官方说明为准。
2. 该技能的主要功能和特点
能做什么
- 微交互设计：为按钮、图标、卡片等元素添加 hover、点击（tap）、焦点（focus）反馈，让每一次操作都有明确回应。
- 运动与过渡设计：页面切换、组件进出场、模态框、下拉菜单的过渡编排，包含进入用减速（ease-out）、退出用加速（ease-in）的方向性约定。
- 加载状态体系：骨架屏保持布局不塌陷、确定性进度条展示真实进度、脉冲动画（pulse）表达等待感。
- 手势交互：基于拖拽的滑动消除、阈值判断（如水平位移超过 100px 触发消除）、抓取态光标反馈。
- 反馈模式：点击涟漪（ripple）效果、通知与吐司系统、状态切换的即时确认。
- 滚动触发动画与拖放界面：在页面滚动、元素拖拽场景中提供可用的动效方案。
- CSS 动画模式库：
fadeIn、pulse、spin关键帧，以及基于transition的卡片悬停抬升与阴影变化。
和普通工具比强在哪
- 有原则，不只是代码：普通动画库提供 API，这个技能提供“为什么这么动”的判断依据——反馈、定向、焦点、连续性四条原则。
- 有量化标准：直接给出时间指南表与四组缓动函数（含弹簧曲线
cubic-bezier(0.34, 1.56, 0.64, 1)），把主观审美转化为可讨论的参数。 - 性能与可访问性内建：明确要求优先使用
transform与opacity保证 60fps、始终尊重prefers-reduced-motion、动画可中断、无 JS 也能降级。 - 避坑清单：直接点出卡顿动画（动画
width/height/top/left）、过度动画、动画阻塞输入、监听器未清理导致内存泄漏、滥用will-change造成内容闪烁等常见问题。
3. 如何使用该技能？
步骤一：明确你要解决的交互场景
先用一句话说清“在什么元素上、发生什么、期望什么感受”。例如：“商品卡片在鼠标悬停时轻微上浮，点击时轻微缩小，要有弹性但不能夸张。”
步骤二：在对话中引用技能
在支持技能机制的 AI 编程助手中启用该技能后，直接描述需求即可；若环境支持显式调用，可在请求中点明使用 interaction-design 技能。
步骤三：给出输入示例（可直接参考）
我有一段 React 代码，是一个下拉菜单组件，打开和关闭都是硬切。请按交互设计规范帮我加上过渡：进入时减速、退出时加速，时长控制在 200-300ms，并确保用户开启“减少动态效果”时不做位移。同时请说明你会动画哪些 CSS 属性以及原因。
步骤四：理解输出的结构
典型的输出会包含四层信息：
- 参数决策：所选时长落在哪个区间、为什么（微反馈 100-150ms / 小组件 200-300ms / 模态框 300-500ms / 复杂编排 500ms+）。
- 缓动选择：进入用
--ease-out、退出用--ease-in、位移之间用--ease-in-out，需要趣味感时用--spring。 - 可运行代码：类似技能中给出的按钮示例——
whileHover={{ scale: 1.02 }}、whileTap={{ scale: 0.98 }}，配合type: "spring"、stiffness: 400、damping: 17。 - 注意事项：性能属性选择、减少运动支持、可中断性、清理副作用。
步骤五：按模式复用
把高频需求归入技能提供的模式清单：加载状态、状态过渡、页面过渡、反馈模式、手势交互。同一类需求后续只需替换元素和参数，不必重新设计。
步骤六：验收与回归
用技能自带的“最佳实践”做检查表：是否只动画 transform / opacity？是否处理了 prefers-reduced-motion？动画期间是否阻塞了输入？监听器是否在卸载时清理？在低端设备上实际跑一遍。
4. 同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| 交互设计Skill（interaction-design） | AI 技能：交互设计与动效实现的知识+代码生成 | 微交互、过渡、加载态、手势、反馈模式、时间与缓动规范、可访问性建议 | 需支持技能机制的 AI 编程环境，安装后对话即用 | 从 0 到 1 补交互细节、统一团队动效规范、给现有组件加打磨 | 优势：带原则与量化标准，覆盖设计与工程两端，内建性能与可访问性检查；不足：依赖具体实现库落地，最终代码仍需人工评审 |
| Framer Motion | React 动画库 | 声明式动画、手势、布局动画、AnimatePresence | 需在项目中引入依赖并编写组件代码 | React 项目中的复杂动画与手势 | 优势：API 强大、布局动画成熟；不足：仅限 React 生态，需自行决定时长与缓动等设计决策 |
| Material Design 运动规范 | 设计规范文档 | 运动原则、时长与缓动指南、过渡模式 | 免费阅读，无需安装 | 需要设计系统级动效标准 | 优势：体系完整、权威；不足：偏规范描述，不直接产出可运行代码 |
| GSAP | 通用 JS 动画库 | 时间轴控制、复杂编排、高性能动画 | 需引入依赖、学习时间轴 API | 复杂编排动画、广告级动效 | 优势：性能与编排能力强；不足：学习成本较高，简单交互容易“杀鸡用牛刀” |
说明：上表中除本技能外的方案信息基于公开常识整理，具体版本、授权与用法请以各项目官方说明为准。
5. 该技能的典型应用场景与实际体验情况
场景一：前端工程师给现有组件“补打磨”
角色是前端工程师，痛点是项目功能已完成，但按钮、输入框、卡片点下去毫无反馈，产品评审时被评价“感觉不精致”。使用方式是直接把组件代码贴给技能，要求“按交互设计规范补上 hover、tap、focus 三种状态反馈”。实际体验是：技能不会只给一句“加个 transition”，而是同时给出时长区间、缓动函数和弹簧参数，并提醒只动画 transform 与 opacity。注意点是默认参数未必匹配你的品牌调性，弹簧的 stiffness / damping 需要在真机上微调。
场景二：产品/设计同学设计加载体验
痛点是接口慢的时候页面白屏或布局跳动，用户以为“卡死了”。使用方式是描述数据形态，让技能给出骨架屏方案（技能中的示例用 animate-pulse 配合与真实内容一致的尺寸占位），以及确定性进度条的进度映射方式。实际体验是：技能会强调“加载时保持布局”，这正是白屏抖动问题的根因。注意点是骨架屏的尺寸必须与真实内容对齐，否则加载完成后仍会跳一下。
场景三：移动端手势与页面过渡
痛点是移动端列表项“滑不动”、页面切换生硬。使用方式是要求实现“水平拖拽超过 100px 触发消除”的滑动手势，以及页面进入 opacity: 0 → 1、y: 20 → 0 的过渡。实际体验是：技能给出的阈值判断和 AnimatePresence mode="wait" 的退出等待逻辑可直接套用，减少了自己试参数的时间。注意点是手势与滚动容易冲突，需要在真机上验证触摸行为。
场景四：B 端后台的统一动效标准
痛点是多个开发者各写各的动画，有的 150ms、有的 800ms，观感混乱。使用方式是让技能输出一套“时间尺度 + 缓动变量”的约定，落到 CSS 变量中团队共用。实际体验是：把主观争论转成参数讨论后，评审效率明显提升。注意点是规范落地需要配套的代码评审检查项，否则容易被绕过。
6. 该技能能为用户带来的价值
- 效率提升：常见交互模式（骨架屏、开关、页面过渡、涟漪、滑动手势）都有可直接参考的实现模板，减少从零查文档、试参数的时间；一次对话往往就能拿到“参数决策 + 代码 + 注意事项”三件套。
- 降低门槛：不擅长动效的开发者也能产出符合行业常识的交互，因为技能把“何时用多长时长、用哪条缓动曲线”这类隐性经验显性化了。
- 减少返工与争论：时间指南与缓动函数让“动画太快/太慢”变成可对齐的数值讨论，设计与开发之间的沟通成本下降。
- 质量兜底：性能（60fps 属性选择）、可访问性（
prefers-reduced-motion）、健壮性（清理监听器、动画可中断）三项检查内建在建议中，降低上线后才发现掉帧或无障碍问题的概率。 - 长期价值：团队可以基于同一套原则与参数沉淀自己的动效规范，形成可复用的设计资产；对个人而言，反复使用会逐步建立起“有目的的运动”的判断力，而不是依赖直觉堆动画。
7. 常见问题 FAQ
Q1：这个技能怎么安装？需要付费吗？
在支持技能机制的 AI 编程环境中，通过技能市场搜索技能英文名 interaction-design 或技能 ID 13166 定位并启用即可，也可在技能清单中登记。安装前提、具体命令、是否收费及支持的客户端版本，技能详情中未提供，请以官方说明为准。安装后建议用“给按钮加微交互”这类小需求验证是否生效。
Q2：它和 Framer Motion、GSAP 这类动画库是什么关系？ 不是替代关系。动画库提供 API，这个技能提供“怎么用、用多久、用哪条曲线、要注意什么”的设计判断与实现模板。技能示例本身就大量使用 Framer Motion，两者是配合使用的。
Q3：不用 React 能用吗？
可以。技能中除了 Framer Motion 示例，也提供了纯 CSS 的关键帧动画（fadeIn、pulse、spin）与 transition 过渡写法，并强调“渐进增强，在没有 JS 动画的情况下也能工作”。具体框架适配以你的项目实际为准。
Q4：加了动画会不会拖慢页面？
技能明确要求优先使用 transform 和 opacity 来保证 60fps，避免动画 width、height、top、left，并提醒谨慎使用 will-change、在卸载时清理动画监听器。是否真的流畅仍取决于具体实现与设备，建议在目标机型上实测。
Q5：适合谁用？我该选它还是选某个动画库？ 适合前端工程师、UI/UX 设计师、产品经理和独立开发者，尤其是“功能已完成但交互粗糙”的项目阶段。选择逻辑是：缺设计判断与实现模板，用这个技能；缺底层动画能力，再引入对应动画库；两者并不冲突。