返回知识库

产品与设计 · 设计交付

设计交付Design Handoff

把设计稿连同规格、token、组件状态和边界说明一起交给开发,让实现不靠猜、规格可逐项核对。

交付验收实验台:交付完整度决定开发能否一次过

勾选你交给开发的内容,看开发实现的「提交订单」物件怎么随完整度走样或还原、验收清单逐项亮起;缺哪一项,就会在那个状态被打回。

场景:开发要实现订单页的「提交订单」按钮。勾选你交付的内容,看开发实现物件怎么随完整度走样或还原、验收清单逐项亮起。

交付物包裹(勾选你交给开发的内容)
开发实现 · 提交订单✗ 打回 · 缺 5 项
  • 提交订单default · #ccc 硬编码 · ?px(猜)
  • loading ?loading ·
  • error ?error ·
  • disabled ?disabled ·

资源:?缺(无处可取)

实现验收清单1 / 6 通过
  • 默认态可还原已交
  • 规格可查(间距/字号/响应式)未交
  • 颜色/间距引用 token未交
  • 状态齐全(hover/focus/disabled/loading)未交
  • 异常/空态有说明未交
  • 资源与链接可定位未交

✗ 打回 · 缺 5 项截图之外的 规格标注、token 引用、组件状态、异常/空态说明、资源与链接 没交——间距靠数像素;实现会在这些状态走样、返工且不可追踪。下一步:逐项补齐后再交,或在交付前显式标出已知缺失并约定补齐时间。

面板里测到的结论怎么用

刚才物件走样又还原、验收清单逐项亮起,对应的就是规格可查、token 同源、状态齐全、边界说明、资源可定位和验收清单这六件事。

  • 规格可查间距、字号、响应式断点在交付里有明确值,开发不用数像素。
  • token 同源颜色、间距引用 token(如 color.action),设计与代码同名,换主题只改 token。
  • 状态齐全hover / focus / disabled / loading 都写入交付,避免非默认态靠猜。
  • 边界说明错误、空结果、长文案、权限不足等异常路径有文案和恢复动作。
  • 资源可定位切图、图标和可查看的设计链接(含权限)能被开发取到。
  • 验收清单交付物即共同契约;开发逐项勾、设计在真实页面复核,差异记成具体规格而非"还原度"。

什么时候专门做正式交付

设计要交给别人实现、组件状态多、或多端多页面复用时做;自做自实现或纯探索期原型不必上整套。

适合

设计师与开发分角色协作、同一组件在多页复用、状态/异常多的表单与流程、多端(Web/移动)共享实现、交接后返工反复出现时。

不必当万能解

交付管的是"把设计可实现的规格交给开发",不管需求优先级和信息架构;一次性落地页或自己实现的探索原型,写清关键规格即可,不必强凑全套清单。

从设计稿到可验收交付:最短路径

不要只甩一张图。先补可实现规格,再让每个状态可查,最后给一份能逐项勾的验收清单。

  1. 标注规格把间距、字号、响应式断点写进设计文件的可查属性,不让开发数像素。
  2. 引用 token颜色、圆角、间距都绑定到 token;设计与代码同名同源,主题改动只改 token。
  3. 列全状态为每个组件补 hover / focus / disabled / loading,并在交付里可查看,不只是默认态。
  4. 写异常与空态错误文案、重试动作、空结果、长文案截断都写清,标出恢复路径。
  5. 导资源 + 给链接切图、图标导出命名清楚;Figma/设计链接权限足够、关键 Frame 可定位、变更可追溯。
  6. 附验收清单把以上各项写成开发可勾的清单;缺失项在实现前显式暴露,差异用具体规格记录,不用"还原度"一句话掩盖。

同一颗提交按钮:正例与反例

目标都是让开发把「提交订单」做对。差异只在交付物里有没有规格、token、状态和边界。

正例规格 + token + 状态 + 边界

「提交订单」交付含间距/字号标注、引用 color.action、hover/focus/disabled/loading 四状态、失败重试文案和切图链接。开发按验收清单逐项勾,一次过,差异只剩像素级微调。

差异:交付物即验收契约,实现不靠猜。
反例只交默认态截图

只发一张默认态截图。loading 时开发自己画 spinner、出错时没有文案、间距靠数像素、颜色用吸管吸了一个会变的值;上线后状态走样,返工不可追踪。

差异:只补一处——把状态/token/边界写进交付,猜的环节就消失。

快速自测

开发反馈“提交订单按钮 loading 时不知道显示什么”。交付里最可能缺了哪一项?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。