设计交付：从马克鳗到蓝湖

还记做界面设计的头两年

当完成设计，交付开发时，我们还在用马克鳗非常笨拙的进行页面标注。

之后，再用Photoshop里非常难用的切片工具，把图片素材切出来发给前端工程师，工作流程相当碎片化。

如今在Sketch里，已经有很多工具把这个过程自动化起来。设计师可以直接用像Sketch Measure、Zeplin、蓝湖这样的工具把设计直接导出，甚至还可以自动总结出设计里面的颜色版和字体样式（如下图）生成前端开发所需要的样式代码，供前端工程师直接拷贝。

PS：Zeplin自动生成的颜色版、字体样式和CSS代码

这些交付工具可以极大地提高设计师的效率，把他们从标注设计参数的机械劳动里解放出来，把精力更加集中在“设计”上。

但在实际使用这些工具的时候，还是有很多事项需要注意：

NO.1

现在诸如Sketch Measure、Zeplin、蓝湖这些工具将会精确地标注出每一个设计细节，那么设计师导出规格之前一定要把设计清理得非常干净且整齐。如果你在一个设计图里的某个间距是24像素，而另外一个设计图里变成了26像素，阅读这个规格的人就不知道哪个是对的。

目前还没有一款智能的工具可以自动识别设计里间距、颜色等的不一致。

NO.2

这些工具很难追踪变化。如果你更改了设计然后重新导出，新的规格会直接覆盖旧的规格，阅读这个规格的人没有什么有效的工具可以对更改的地方一目了然。这样一来，一些“细微”的调整，别说是开发工程师看不出来，即便是同组的其他设计师，也很难察觉出细节的变化。进而导致协同时出现纰漏。

所以我们需要辅助一些“版本控制”的内容，把调整的地方一一列出来。

NO.3

这些工具仍然是基于静态设计的交付而产生的，如果你的项目涉及响应式设计(Responsive design)，这些工具暂时还无法帮上忙。但除了特定机型的单独设计外。几乎所有的页面设计，无论是手机端还是Pad端，都需要考虑到响应式布局（思考并向下游传达页面的适配规则）。

目前市面上的设计工具不是完美的。也都无法解决上述的三个问题。

随着设计工具的演变，一个重要的趋势是这些设计工具逐渐趋向一体化，比如Figma

当然，我们得感谢这些为设计师打造的设计工具，不断地把设计师从重复劳动中解放出来，让设计师得以把精力集中在设计创造、设计沟通和全局把控上。

但我们也要清楚，工具的局限在哪，才能让工具更恰当地帮助我们。