如何精准还原设计稿？_ui设计师培训

每个设计师都有「像素级还原」的设计追求，设计师可能都遇到产品上线前走查视觉与交互还原是必经环节问题，作图时连一像素的分割线都纠结好几次。在这里作者总结了工作几年还原设计稿的几点经验。我们经常会听到身边的设计师与开发哥的一些对话，关于对齐，大小，间距等设计还原问题经常会讨论很久。甚至有时会觉得，几个像素的间距是不是有必要这么纠结？

1.设计还原到底是什么

「还原」是指事物恢复到原来的状况或形状，互联网中的「设计还原」是说开发后实际界面和设计稿效果有偏差，进行设计校对。

2. 设计还原的现状

一直以来，设计验收都不太受重视，一是设计师习惯于把时间用在雕琢设计稿上，而忽略掉后期的设计验收。二是对自己和合作的程序员极其自信，认为对方能知道到自己所有的点，会完全按照设计稿来。不同的项目类型还原度也不同：用户产品>B端产品>后台。对于用户产品最好是能做到像素级还原。

3.设计还原的意义

在这个快速发展、迭代、更新的时代，互联网产品的用户体验重视度越来越高，而其中的产品设计还原也成为了工作流中重要的一环。我相信每一名UI设计师，心里应该都有一个前端能100%还原设计稿的梦想，毕竟那是我们艰苦奋斗的劳动成果。而视觉还原的高低与否，则直接取决于设计-开发-测试这些环节的协作质量，不仅仅影响上线产品的用户体验，还影响着作为产品设计最后一环的工作质量。

经过走访UI/UX设计师、前端工程师和测试工程师的还原设计图的工作场景。深究原因后，线上效果的失真率其实涉及到设计、前端开发、测试这三个环节，分析造成这种现象出现的原因大概有以下几点：

自由发挥，把界面UI设计当作画布任意挥洒，完全不考虑实现的难度；

标注图不全，没有详尽的对接文档和设计规范；

沟通不到位，评审时没有将设计思路和易错点交代清楚

没有考虑设计稿扩展性和前端代码的逻辑，反复修改，增加FE工作量。

时间紧任务重，没办法一张一张看标注图；

直男思维，想怎么写就怎么写，反正最后要上线，细不细致都一样；

不知道如何解决，内向不肯和UI沟通找到解决方案。

测试混乱，测功能时提UIbug；

测试页面还原时，提UIbug不细致，用“UI设计稿”概括一切问题。

了解开发依据哪些规则还原设计稿，前期的准备工作是重中之重，设定好每一个细节规则，后期落地还原时才会将页面的失真率降到最低。