设计交付：怎样把稿子交给开发才真的能落地。
我把设计交给工程时用的八个步骤，让产品按你画的样子上线。顺序、流程、错误状态、设计系统，以及那段让下一个项目更顺的关系。
本页内容
设计看起来对了，并不等于做完了。它做完，是在工程师不用猜就能把它造出来的时候，而这两点之间的距离是有价格的。在 Zeplin 2024 年对 DesignOps 从业者的调研中，66% 的受访者说他们有四分之一到一半的时间消耗在设计交付的低效上。Zeplin 把它折算为每周 10 到 20 小时，花在不产生业务价值的事情上。交付不是走个形式。它是钱和势头漏出去的地方。
我在 Branders 和 Zain Cash 交付过面向两百多万人的产品，我追过的几乎每一个走样，起点都在交付，而不在设计。解决它先是一种心态，然后才是方法。交付是一份交付物，不是一次导出。你的职责是把工程师需要的一切，按他们需要的顺序交到手上，让唯一的意外都是好意外。下面是我用的八项清单，按最关键的几个动作分组。
要点
- 把交付当作准备好的交付物，而不是文件导出。当它被当成事后动作时，三分之二的团队会损失 25% 到 50% 的时间（Zeplin，2024）。
- 按流程给页面排序和命名，让文件读起来像一个故事，而不是一场搜索。
- 说明页面之间怎么连接，并且把错误态和空状态也设计出来，不要只画顺利路径。
- 把设计系统作为命名令牌交出去，并在开始设计之前就和工程对齐。
- 在开发过程中保持随时能找到你。干净的交付是你赢得下一个项目的方式。
为什么交付决定了你的设计能不能活下来？
因为文件是你能控制的最后一处，也是你的设计开始退化的第一处。在同一份调研中，53% 的受访者因为设计交付的低效而碰到功能推后上线，73% 的受访者说设计团队士气下降。糟糕的交付不只花掉工时，它还在悄悄改写你的作品。
把工程师当成你文件最重要的用户。文件难读，产品就难造，上线出来的会像你作品的一份草稿。你留下的每一处模糊，都会由别人替你做决定，通常是在赶工期，通常不是你会选的那个。交付是你的最后一次编辑。
怎样组织文件，工程师才读得懂？
按流程排页面，起清楚的名字，按模块分组，让任何人打开文件都能像读故事一样读下去。一秒钟就找到下一屏的工程师会保持在状态里。需要翻找的那个会开始自己发明，而发明正是你的设计跑偏的地方。
命名是沟通，不是收拾房间。“页面 12 副本 最终 v3”什么都没告诉工程师。“结算，购物车为空”则准确告诉他们要造什么、什么时候出现。花那十分钟。它会在墙那边给你换回好几小时。
怎样说明页面之间的连接？
给出流程，而不只是画面。静态页面告诉工程师要造什么，却从不说明它怎么运转：哪一次点击通向哪里，返回键做什么，成功和取消分别发生什么。当他们能看见屏与屏之间的路径，逻辑就不再靠猜，开发也会变快。
这是多数文件跳过的一层，也是开发中途问题最多的一层。你现在画的每一根箭头，都是一条你以后不必再回答的消息，而那时候往往错的东西已经上线了。
为什么要先设计错误态和空状态？
因为它们是产品的一部分，是真实用户最先撞到的东西，也是赶工的文件最先砍掉的东西。你不设计 404、空收件箱、支付失败，工程师就会设计，而且不会匹配你在顺利路径上投入的用心。用画演示稿一样的注意力去画不顺利的那条路。
空状态和错误态是信任的输赢之处。一个空白页面读起来像坏了。一个用心的空状态读起来像一个早就料到你会来的产品。掌声给的是顺利路径，但决定人们会不会回来的是边缘情况。
你交出去的设计系统里该有什么？
交出规则，不只是页面：颜色、字阶、间距、图标、组件，写成命名令牌，而不是让工程师拿吸管去一个矩形上取的数值。系统把上百个小决定收敛成几个。它是一个稳住的产品和一个一屏一屏逐渐跑偏的产品之间的区别。
这是我最在意的工作。为 Bysooq 我做了 Souqra 设计系统，整个市场平台都由它渲染；为 Mercato 我做的系统让一个快速变动的品类在每一屏上保持一致。这两次交付的都不是一堆页面的文件夹，而是一门有文档的语言，工程师不用来找我就能扩展，而这正是系统存在的全部意义。
令牌是你的设计如何越过你画过的那些屏幕去扩展。工程一旦需要一个你从没画过的布局，有文档的系统会替他们回答。没有文档的系统把他们推去猜，一年后产品就成了一堆勉强接近的拼接。
怎样和工程师协作，而不是把活扔过墙？
在开始设计之前对齐，不是在之后。尽早了解他们的约束和技术栈，尤其是你没有工程背景的时候。花五分钟问清楚什么便宜、什么昂贵，就能避免你画出一个漂亮的交互要做一个月，而另一个略有不同的方案一天就能做完，体感还一样。
然后在开发期间保持随时能找到你。交付是一场对话，不是一次丢包。回答问题，看预发布链接，在小误读固化进上线版本之前把它们抓住。现在快速回一句的成本，只是之后修补成本的零头。
最后，把这段关系当成手艺的一部分。你干净交付过的工程师，就是会推荐你、会帮你做副业项目、会让你下一个设计成真的人。干净的交付不只是对作品的尊重。它是设计师赢得信任、把下一个项目带进来的方式。
八步交付清单
- 按流程给页面排序，让文件读起来像一个故事。
- 给每个页面起清楚的名字，并按模块分组。
- 说明页面之间怎么连接：哪一次点击通向哪里，返回键做什么，成功和取消分别发生什么。
- 用对待顺利路径同样的用心，设计错误态和空状态。
- 把设计系统作为命名令牌交出去：颜色、字阶、间距、图标和组件。
- 在开始设计之前，就约束和技术栈和工程对齐。
- 开发期间保持随时能找到你：回答问题，审看预发布链接。
- 把和工程师的关系当成手艺的一部分。
交付是你的最后一次编辑
设计的生死在你的文件和实现之间的缝隙里，而那道缝隙归你去合上。排序并命名页面，画出流程，把不顺利的路径也画了，把系统写成令牌文档，尽早对齐，留在对话里。这些都不光鲜。但它们全部加起来，就是一个按你画的样子上线的产品和一个像草稿一样上线的产品之间的差别。
做完这八件事，下一个项目会更轻松，因为你干净交付过的团队就是会再点名要你的团队。想看这套思路在真实产品里的样子，读下面 Zain Cash 改版是怎么被它塑造的，或者告诉我你在做什么。
常见问题
什么是设计交付？
它是设计师把造出这份设计所需的一切交给工程的那一刻：排好序的页面、流程、状态，以及有文档的设计系统。好的交付是一份准备好的交付物，不只是一个导出的文件。
一次设计交付该包含什么？
按流程排序的页面、页面之间的连接、错误态和空状态，以及作为命名令牌的设计系统，覆盖颜色、字体、间距和组件，再加上和开发者关于约束的一次简短对齐。
我该怎样把设计交给开发？
整理并命名文件，画出页面之间的流程，设计不顺利的路径，把系统写成文档，在开始设计前和开发者对齐，并在开发过程中保持能随时回答问题。
参考来源
- Zeplin 2024 年对 DesignOps 从业者的调研 blog.zeplin.io
