用 AI 写界面时，“这里加一点高级感”往往是最难执行的一句话。
按钮要不要回弹？卡片从哪里展开？抽屉出现后，背景还能不能操作？这些细节如果没说清楚，生成结果就容易偏离预期。
我做了一个交互动效学习网站 Motion Lab，想把“看效果、理解原理、描述需求”放到一起。这篇先分享一个我整理需求的方法。
把一句形容词，拆成五个问题
向 AI 描述交互时，可以依次写清：
- 触发：点击、悬停、拖动，还是滚动进入视口？
- 对象：具体哪个元素发生变化？
- 变化：位置、大小、透明度、阴影分别怎么变？
- 节奏：持续多久，用什么缓动，是否允许打断？
- 结束与退出：完成后是什么状态，怎样返回，键盘能否操作？
下面三段是可以按项目调整的需求示例，时间和幅度都是建议起点，不是通用标准。
示例一：按钮反馈
为主要操作按钮添加按压反馈：按下时缩小到 0.97，松开时在约 180ms 内回到原尺寸。悬停显示轻微阴影，键盘聚焦有清晰轮廓。加载时阻止重复提交；在减少动态效果偏好下取消缩放过渡。保留现有业务逻辑。
这里的重点是把“有手感”拆成按下、松开、加载、聚焦四种状态。按钮看起来动了，还需要核对是否真的避免了重复操作。
示例二：卡片展开
点击卡片后，在居中的详情层展示内容。展开过程保持标题和封面的视觉连续，过渡约 300ms。支持关闭按钮与 Escape 退出，关闭后把焦点返回原卡片。移动端避免内容超出屏幕；减少动态效果时使用简单切换。请先说明实现方案，再写代码。
“展开”还涉及焦点、滚动和返回路径。验收时应连续打开关闭几次，并尝试键盘操作。
示例三：侧边抽屉
点击筛选按钮，从右侧打开筛选抽屉，同时显示遮罩。桌面端宽约 360px，小屏时按视口调整。支持点击遮罩与 Escape 关闭；打开后管理键盘焦点并限制背景滚动，关闭后恢复。动画约 240ms，避免快速连续点击导致状态错乱。
做这类交互时，最好同时描述“打开”和“关闭”，再测试连续点击、窄屏及长内容。
Motion Lab 可以怎么用
我把交互主题整理成了站内可操作的演示：点击卡片后居中放大并自动演示，可以查看拆解、学习摘要和 AI 提示词，再根据自己的技术栈修改需求。
网站支持搜索、分类筛选和中英文切换。适合正在用 AI 做界面、需要寻找交互表达方式的开发者和设计师。
体验地址：Motion Lab
站内演示是独立学习示意，用于理解主题与交互原理；资料摘要按标注依据整理，不代表对未核对原作的完整复现或完整内容核验。
这个项目还在完善。欢迎反馈：你用 AI 做界面时，最难说清楚的是哪一种交互？也欢迎直接指出演示里不顺手的地方。
本文由 AI 辅助整理，示例提示词供按项目调整使用。
