用 Codex 做有分寸的 UI 微动效：从状态表到低动态测试的 6 步工作流

admin 设计创意 21小时前

24 0

AI 很容易把 UI 做成“到处都在弹、滑、飘”的样子。微动效真正的任务不是证明页面有技术含量，而是让用户看懂状态变化。下面以一个“保存项目”按钮为例，用 Codex 从状态表、可直接使用的提示词、CSS 实现到浏览器验证做完闭环。本文的交互与可访问性原则参考 OpenAI、MDN、W3C 与 Playwright 官方资料，代码是本站原创示例。

保存按钮从默认、悬停、按下到完成的四种可观察状态 — 先定义状态，再决定哪里需要运动；完成态不能只靠动效表达。

适用场景与准备

适合已有 React、Vue 或原生 HTML/CSS 项目，需要给按钮、菜单、卡片或轻量反馈增加交互动效的团队。准备一个现有组件、其样式文件、项目的设计规范/AGENTS.md，以及可启动的本地预览。先选一个高频、低风险的组件试点；不要让 Codex 一次改全站动画。

第一步：画出状态，不要先写“做得高级一点”

以“保存项目”为例，列出 idle、hover、focus-visible、pressed、saving、success、error 和 disabled。每个状态至少写明文案、颜色、是否可操作和给辅助技术的语义。成功与失败必须有可读文字；颜色与位移只是辅助。OpenAI 的前端设计建议强调依据项目已有约定和受众来设计，不要让模型给所有产品套同一种装饰性界面。

状态合同（示例）
idle: 保存项目；可点击
hover/focus-visible: 清楚提示可操作，但布局不移动
pressed: 短暂按压反馈
saving: 按钮禁用，文案“保存中…”
success: 文案“已保存”，同时保留文本状态提示
error: 文案“保存失败，请重试”，恢复操作

UI 微动效规格表包含事件、属性、时长和验证证据 — 示例时长是起点，不是所有项目的标准；要在真实设备上调整。

第二步：给运动一个可测量的规格

只在状态切换有信息价值时使用运动。例如 hover 用 150ms 的背景或阴影变化，press 用 90ms 的轻微缩放，success 用 220ms 的淡入；这些数值是本教程的试点参数，不是 WCAG 强制值。避免让位移改变布局，也不要让成功提示一闪而过。记录持续时间、缓动曲线、触发条件以及关闭运动后如何保持相同信息。

第三步：把边界和验收写进 Codex 提示词

先让 Codex 只读审计，再实施一个组件。下面的两轮提示词可直接复制，替换路径与命令即可。

第一轮（只读）：
读取 AGENTS.md、保存按钮组件、样式文件、设计 token 和现有测试。
列出已有交互状态、键盘行为、颜色与动画约定。
不要修改文件；只给出最小改动方案与潜在风险。

第二轮（实现）：
只修改保存按钮及直接相关的测试。实现 idle、hover、focus-visible、pressed、saving、success、error、disabled。
运动限于 transform 与 opacity 或已有 token，不改变布局；使用现有组件和样式体系，不引入新动画库。
尊重 prefers-reduced-motion: reduce，关闭非必要位移；成功/错误保留文字与可访问状态。
交付修改文件、状态矩阵、运行的测试命令、390/768/1440px 截图和未解决问题。
如果接口契约不明，先提问，不要伪造保存成功。

第四步：让代码同时有动效版与静止版

下面是最小 CSS 示意。focus-visible 必须仍清晰；prefers-reduced-motion 下移除非必要运动，而不是把反馈一起删掉。MDN 说明该媒体查询读取系统“减少动态效果”偏好；W3C 对由交互触发的非必要动画也建议允许关闭。实际项目应复用现有 token 和组件类名。

.save-button {
  transition: transform 90ms ease-out, background-color 150ms ease;
}
.save-button:hover { background: var(--action-hover); }
.save-button:active { transform: scale(.98); }
.save-button:focus-visible { outline: 3px solid var(--focus-ring); }
@media (prefers-reduced-motion: reduce) {
  .save-button { transition: none; }
  .save-button:active { transform: none; }
}

普通交互与减少动态效果偏好下保存按钮状态保持一致 — 静止版不移动，但状态文案、焦点和错误反馈都必须保留。

第五步：检查真实交互，不把截图通过当作动画通过

依次用鼠标、Tab/Enter/Space、慢速网络与保存失败模拟测试。检查同一个操作在普通模式和 reduced-motion 模式下都能完成；如提示包含异步状态，屏幕阅读器需要能获得文本更新。对动画有关的缺陷，录屏或人工观察实际过渡；Playwright 的截图断言默认会停用 CSS 动画与过渡，因此它适合查稳定终态，不适合证明动效过程本身正确。

import { test, expect } from "@playwright/test";

test("save button keeps its result with reduced motion", async ({ page }) => {
  await page.emulateMedia({ reducedMotion: "reduce" });
  await page.goto("http://localhost:3000/settings");
  await page.getByRole("button", { name: "保存项目" }).click();
  await expect(page.getByText("已保存")).toBeVisible();
  await expect(page).toHaveScreenshot("saved-reduced-motion.png");
});