设计师与开发分角色协作、同一组件在多页复用、状态/异常多的表单与流程、多端(Web/移动)共享实现、交接后返工反复出现时。
交付验收实验台:交付完整度决定开发能否一次过
勾选你交给开发的内容,看开发实现的「提交订单」物件怎么随完整度走样或还原、验收清单逐项亮起;缺哪一项,就会在那个状态被打回。
场景:开发要实现订单页的「提交订单」按钮。勾选你交付的内容,看开发实现物件怎么随完整度走样或还原、验收清单逐项亮起。
- 提交订单
default · #ccc 硬编码 · ?px(猜) - loading ?
loading · 缺 - error ?
error · 缺 - disabled ?
disabled · 缺
资源:?缺(无处可取)
- ✓默认态可还原已交
- ✗规格可查(间距/字号/响应式)未交
- ✗颜色/间距引用 token未交
- ✗状态齐全(hover/focus/disabled/loading)未交
- ✗异常/空态有说明未交
- ✗资源与链接可定位未交
✗ 打回 · 缺 5 项。截图之外的 规格标注、token 引用、组件状态、异常/空态说明、资源与链接 没交——间距靠数像素;实现会在这些状态走样、返工且不可追踪。下一步:逐项补齐后再交,或在交付前显式标出已知缺失并约定补齐时间。
面板里测到的结论怎么用
刚才物件走样又还原、验收清单逐项亮起,对应的就是规格可查、token 同源、状态齐全、边界说明、资源可定位和验收清单这六件事。
- 规格可查间距、字号、响应式断点在交付里有明确值,开发不用数像素。
- token 同源颜色、间距引用 token(如 color.action),设计与代码同名,换主题只改 token。
- 状态齐全hover / focus / disabled / loading 都写入交付,避免非默认态靠猜。
- 边界说明错误、空结果、长文案、权限不足等异常路径有文案和恢复动作。
- 资源可定位切图、图标和可查看的设计链接(含权限)能被开发取到。
- 验收清单交付物即共同契约;开发逐项勾、设计在真实页面复核,差异记成具体规格而非"还原度"。
什么时候专门做正式交付
设计要交给别人实现、组件状态多、或多端多页面复用时做;自做自实现或纯探索期原型不必上整套。
交付管的是"把设计可实现的规格交给开发",不管需求优先级和信息架构;一次性落地页或自己实现的探索原型,写清关键规格即可,不必强凑全套清单。
从设计稿到可验收交付:最短路径
不要只甩一张图。先补可实现规格,再让每个状态可查,最后给一份能逐项勾的验收清单。
- 标注规格把间距、字号、响应式断点写进设计文件的可查属性,不让开发数像素。
- 引用 token颜色、圆角、间距都绑定到 token;设计与代码同名同源,主题改动只改 token。
- 列全状态为每个组件补 hover / focus / disabled / loading,并在交付里可查看,不只是默认态。
- 写异常与空态错误文案、重试动作、空结果、长文案截断都写清,标出恢复路径。
- 导资源 + 给链接切图、图标导出命名清楚;Figma/设计链接权限足够、关键 Frame 可定位、变更可追溯。
- 附验收清单把以上各项写成开发可勾的清单;缺失项在实现前显式暴露,差异用具体规格记录,不用"还原度"一句话掩盖。
同一颗提交按钮:正例与反例
目标都是让开发把「提交订单」做对。差异只在交付物里有没有规格、token、状态和边界。
「提交订单」交付含间距/字号标注、引用 color.action、hover/focus/disabled/loading 四状态、失败重试文案和切图链接。开发按验收清单逐项勾,一次过,差异只剩像素级微调。
差异:交付物即验收契约,实现不靠猜。只发一张默认态截图。loading 时开发自己画 spinner、出错时没有文案、间距靠数像素、颜色用吸管吸了一个会变的值;上线后状态走样,返工不可追踪。
差异:只补一处——把状态/token/边界写进交付,猜的环节就消失。快速自测
开发反馈“提交订单按钮 loading 时不知道显示什么”。交付里最可能缺了哪一项?
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。