设计还原五步曲-视觉篇

在这个快速发展、迭代、更新的时代，互联网产品的用户体验重视度越来越高，而其中的产品设计还原也成为了重要的一环。在紧张而有限的时间内，效率与方法得到了考验，设计师们如何与前端工程师们密切配合，提升设计还原度，成了设计师的主要工作之一。本人根据自己过往的几次实战项目经验，整理并与大家交流一番。

一、设计规范

设计规范对于设计师的重要性不言而喻，那么对于前端工程师又能直接吸收多少呢？经沟通以及之前的设计验收来看，我们内部的工程师在标准色、标准字、布局间距、按钮样式方面基本没什么大问题，然而列表、输入框、标签选项、弹窗等(以上每个类别展现形式不止一种)还原就不是那么完美了。其实，这不能怪前端工程师们，规范的内容确实过多，短暂时间内不可能完全消化，有时设计师自己也会有出错。那么可见，一个视觉设计规范远远不够的。

至于设计规范的具体内容，网上发布的有很多，大家请自行搜索查看。

提供一个规范集合，涵盖众多应用。

此步骤作用：让前端工程师对项目的前端样式有个整体了解，快速查找部分基础样式(如标准色、标准字、按钮等)。

二、设计输出

关于设计输出，我们常见是源文件、效果图、切图，之前常见的人工标注减少了(因为现在插件工具marketch、pxcook等都能让工程师们很方便看到标注)。 

不过我们还是有标注，因为很多数据是后台传输到前端，有图片、有文字，每个内容都需要给运营设置一个上传标准(如图所示)。

除了额外的一些标注，我们还需要写一些重要部分设计说明，例如模块区分、局部特殊设计(该内容根据自身产品而确定)。

此外，如果是APP一级页面，可以考虑预加载图，我们常见的一些应用天猫、ins、Facebook等都有，所以需要输出预加载图的源文件。

此步骤作用：让前端工程师快速查找所需文件，源文件用于标注查询尺寸，效果图用于查看整体效果，切图用于页面搭建，重点内容标注能让界面减少误差，而预加载图能让界面用户体验更佳。

三、设计宣讲

如果产品设计的内容比较容易理解，那么，这一步可以省略。否则，需要设计师们约个会议室，与前端工程师们讲解一下规范和输出的内容，确保当场能解决问题。设计师做好会议记录(记录问题及解决方案，以及达成的共识)，并且在会议结束后以邮件形式发送前端们，抄送产品和运营，确保会议内容的传达到位。值得注意的是，该宣讲主要是解决问题，提升效率，提高质量，而不是划清某种责任界限，因为可能存在为了更好的解决某个问题，增加设计师们的些许工作量。

此步骤作用：让设计师与前端工程师相关问题达成一致，提升工作效率。

四、开发沟通

 前端工程师们安排好自己的任务，往往会有个开发排期表，从开始到结束，以及中间的相关时间细节。设计师们根据排期表，时刻关注进度，需要每隔一段时间咨询一下“XX项目有碰到什么问题吗？需要我帮什么吗？”但与此同时，建议千万不要这么问的过于频繁，对比自己设计时被催尽快完成的画面，你就会控制频次，也会注意一些用语表达。同理，这个过程的沟通也是以解决实际问题和提升效率为目的。

此步骤作用：主要是设计师主动推进项目发展，减少前端开发过程中的不够完美之处，同时也是为了加快工作效率。

五、测试验收

经过了前面的四步，设计师们还是不能高枕无忧。为确保产品上线前的最后一步，设计师们仍要参与测试验收环节。测试环节一般有两个大步骤，第一是产品功能测试，让功能从头到尾走一遍，直到第一步完成，设计师们才参与第二大步骤：交互与视觉验收。

不同的机型(iPhone、小米、华为、vivo、三星、oppo等)，不同的版本的系统(iOS、安卓各自不同版本)，不同状态的数据(字符的长短、内容的有无等)都需要设计师们过一遍，一有问题及时提交，前端工程师们会根据问题进行修复，直到验收通过，应用完成打包，等待上线。

此步骤作用：确保项目的交互与视觉能达到上线要求，并坚守最后一关，直至上线成功。

结语

那么，做到以上五步是否设计还原就能达到100%？答案是基本做不到，几乎不存在100%还原的情况，除非是很简单的一些页面。至于要还原到多少，90%？95%？99%？……每个设计师心中都有一个标准，项目时间不等人，有限的时间内做到最好，我们希望是做到99.9999%。

如今设计还原已成为设计师日常考核之一，需要大家重视，也相信大家会在工作中总结出更好的相关流程和经验，从而提升产品设计的还原度。