没有验收标准的交付,只是把争论推迟到提测
「设计已经给过了」和「开发按设计做完了」之间,往往差一整轮像素扯皮、漏状态和移动端断点。设计交付验收标准(acceptance criteria)把 Figma 链接升级为可勾选的完成定义:哪些帧是源真相、哪些 token 已对齐代码、哪些交互必须可点、哪些场景明确不做。可上线在探索→设计→开发→上线里要求:设计封板有版本号,工程预发有对照清单,视觉走查有签字人。无论是 Weaverine 一类品牌站,还是带后台的营销+应用混合体,缺少标准的交接都会把成本从设计阶段转移到提测与上线前夜。下文给出双方共用的验收维度与写法模板。
封板范围:页面清单与「非本迭代」
验收第一行写清:本迭代交付的 URL/路由列表、语言版本、登录与否、CMS 可编辑区块。单独一列「明确不做」:动效二期、暗色主题、某种浏览器、某条边缘业务流程。范围漂移最常发生在「顺手改一下全局导航」。探索阶段就应用业务结果绑定页面优先级;设计封板会议输出带日期的页面清单 PDF 或表格,并钉在项目频道置顶。没有范围表,任何验收争论都无法裁判。
源真相:文件、版本与命名
指定唯一源文件(或 library)与版本标签,如 `brand-site@1.4-freeze`。禁止「我发你的那版」靠聊天记录考古。组件命名与工程侧约定对齐(Button/Primary 而非「蓝色大按钮」)。删除或归档废弃帧,避免开发打开旧 Page。交付说明写:谁有编辑权、如何提变更(新 branch / 新 version,而不是在 freeze 上直接改)。远程协作时用只读链接给客户,可编辑权仅限设计负责人。
组件与 Token:可映射到代码
验收不只看视觉像,而看 token 与组件是否可映射:颜色/字号/间距/圆角/阴影是否来自同一套 design tokens;变体(size/state/tone)是否穷尽本迭代用到的组合。若工程已用 shadcn 或内部库,标注「复用 / 扩展 / 新建」三种决策,避免平行宇宙组件。图标与插画导出规格(SVG 规则、栅格 2x)写入清单。设计系统交接文应与本文清单交叉引用,防止营销页与产品 UI 两套间距。
状态完整性:空、错、载、权限
每个关键流程至少交付:默认、加载、空数据、校验错误、服务器错误、成功、无权限/未登录。表单还要有禁用与提交中。缺状态是提测爆炸的主因。用表格勾选「已设计 / 已开发 / 已测」,而不是默认「开发自己看着办」。对 B2B 线索表与 Web3 钱包连接,错误文案需产品与法务可读,不能只画红色边框。可点击原型优先覆盖主路径;静态帧必须标注交互注释。
响应式与断点验收
写明设计的断点集合与「以谁为准」:若工程用 tailwind 默认断点,设计必须按同一套出帧,而不是随意 1280/1440。移动端验收包括导航折叠、表格横向策略、触控热区、键盘顶起时的表单位置。大屏不要只拉长居中容器。图片与视频在小屏的裁剪安全区要标注。预发用真机与浏览器设备模式双测;清单上记录最低支持机型与浏览器版本,和合同范围一致。
无障碍与内容真实数据
对比度、焦点顺序、替代文本策略、跳过导航、表单 label 是否在设计注释中出现。用真实长度文案(中英)压测,而不是「标题标题」占位——中文折行与英文长度会改变层级。案例与数据模块预留 CMS 字段长度上限,避免上线后运营塞入破坏版式的段落。Taiji Zen 类沉浸页还要约定动效减弱(prefers-reduced-motion)时的降级静态帧。无障碍基线应写进验收,而不是「有空再补」。
标注、红线与工程疑问单
自动标注不能替代关键间距与对齐的人工红线。复杂层叠(sticky 头、叠层弹层、滚动联动)必须有文字说明与 z-index 意图。建立「工程疑问单」:24–48 小时内设计答复,逾期默认开发按注释实现并记录假设。变更走小型变更单:影响页面、是否改 token、是否需回归视觉走查。禁止在群聊用表情包当验收通过。
预发对照与签字仪式
预发环境并排打开 freeze 帧与实现:按页面清单走主路径与错误路径。缺陷分 P0(阻塞上线)/P1(上线后 48h)/P2(下迭代)。视觉走查由设计负责人签字;产品确认文案与流程;工程确认性能与接口。可上线常用预发部署链接做客户评审,避免截图失真。签字后的改动默认进变更单。若你希望把设计验收嵌进固定交付节奏,可在探索工作坊就写入完成定义与周会检查项,减少提测夜的争论。
可执行清单
- 1已输出带日期的页面/路由清单与「明确不做」列
- 2源文件版本标签固定,废弃帧已归档
- 3关键流程的空/错/载/权限状态均有设计并可勾选
- 4断点与工程框架一致,真机预发已抽检
- 5预发视觉走查完成并有设计/产品/工程三方记录
核心要点
- 验收标准是完成定义,不是事后找茬的审美辩论
- 状态与断点完整性比「首页很像设计稿」更能预测上线质量
- 变更必须版本化;freeze 上直接改等于取消验收
常见问题
- 没有完整设计系统能否写验收标准?
- 可以。本迭代先冻结用到的颜色/字号/组件变体子集,标注「临时 token」,并约定下迭代回收进系统。验收针对已交付页面,而不是要求一次建成完整体系。
- 客户坚持「再调一点」怎么办?
- 指向已签字的 freeze 与变更单:微调进 P2 或签补充范围。区分缺陷(未达验收)与喜好变更(新需求)。周报同步开放变更数量,防止无界返工。
- 设计与开发对「还原度」争议如何裁决?
- 预先约定容差:间距 2–4px、色值以 token 为准、字体以最终 Web 字体渲染为准。对品牌关键区(首屏、定价、导航)提高标准;对长列表等允许工程优化。争议升级到项目负责人对照验收表,而不是群里投票。