重构工程师不应该满足 100% 还原设计稿 更应该去追求 101% 还原度

Question

100%还原设计稿，还原误差不超 1 像素 是重构工程师入行的最基本要求，而在实际工作中，这 100%是远远不够的。

记得曾经带我的师傅说过一句话：重构工程师不应该满足 100%还原设计稿，更应该去追求 101%还原度。

101%还原是重构工程师在还原设计稿的过程中，发挥自身的主观能动性，对设计稿进行修正或向产品、视觉、交互提出合理的建议，让最终还原出来的视觉设计稿更接近设计本意。

101%的还原可以归为两类，一类是 对视觉稿的主动修正 ，不包括具有信息传达的内容；另一类是 对视觉稿深入思考并提出合理建议 ，包括但不限于具有信息传达的内容。

对视觉稿的主动修正

视觉设计师有时候会比较忙，设计稿中可能会出现像素之间的误差而造成不对齐的情况，如下面的设计稿：

（Retina 2X 图）

很明显，视觉设计师原意是想让右则的按钮垂直居中对齐的，我们在还原的时候可以去微调边距让之对齐，得到下面的重构稿：

（重构稿 1X 图）

可以看到，还原出来的设计稿虽然和原设计稿并没有 100%吻合，但是出来的效果确实更符合垂直居中对齐的准则，更接近设计的本意，而且节省了沟通的成本。

有些同学许会问，在没有周知视觉设计师的情况下私下改动设计稿貌似有点不太尊重视觉设计师的工作吧?

**对视觉稿的主动修正有一个很重要的原则，就是在没有信发生息传达的情况下修正，所作的修正不能违背设计本意。**拿刚才的例子来说，如果我个人不喜欢按钮的边角是方角的，就私下把方角还原成圆角，如下图：

那就产生了还原稿与设计原稿之间的信息传达内容了，因为方角和圆角是两个不一样的设计风格，圆角按钮明显不是视觉设计师的设计本意，如果圆角按钮在视觉设计师完全不知情的情况下上了线，那就是真正的不尊重视觉设计师的工作了。

当然视觉设计师都希望自己输出的设计稿完美无缺，但一些客观因素（交接模块）或主观上的操作（工作太忙，拖动元素排版的时候手抖）难免会让设计稿存 在一些像素级的误差，对视觉稿的主动修正，是和视觉设计师协作的一种默契，如果每一项这样的修正都要让视觉设计师重新去调整再生成新的 PSD 文件的话，沟 通成本未免过高

对视觉稿深入思考并提出合理建议

我们先看一下下面的设计稿：

从视觉稿来看，视觉设计师把“关注本店”、“关注公众号”和“联系卖家”这三项的按钮所占的区域作了等分处理，按钮里面的文案和 icon 水平居中

等分的排版，虽然个体之间的内容不一样会出现内容与分隔线边距不相等的情况，但是在按钮所占展示区域比例相等的情况下，三个按钮整体看上去是非常整齐的，排版逻辑很清晰：

可以看出，让三个按钮在页面上的排版整体看起来是整齐的是设计师的设计本意，那么问题来了：

在还原设计稿中，我们通常会考虑到布局的扩展性，会考虑到不足三个按钮或者多于三个按钮的排版情况，如果按照等分的排版型去还原，按钮出现增减的话，就会出现下面的情况：

（等分四个按钮）

（等分：三个按钮）

（等分：两个按钮）

（等分：一个按钮）

可以看到，大于 3 个按钮的时候，文案的展示出现了问题，小于 3 个按钮的时候按钮的大小和文案与分隔线的间距就略显夸张了，特别是只有一个按钮的情况，几种情况的排版在视觉上变化都很大，而且视觉稿里是没有相应的展示的，那么这里面包含了排版之间的信息传达。

在还原过程中，当发生信息传达的时候，任何疑问和建议都应该周知相关的负责人，这是 101%还原中的基本原则

把刚才上面的几种情况，写好 demo 向产品和视觉设计师展示，反馈并确认两个问题：

• 按钮在不同的场景中最多展示的个数和最少展示的个数
• 如果按钮展示个数有变，用等分自适应排版的话，以上情况的排版方式能否接受

然后得到的答复是：

产品：最多展示 3 个，最少展示 1 个，排版看还有没有更好的

视觉：按钮不用等分自适应，用定宽展示的

可以 get 到信息：等分自适应的排版在这里不适用：对视觉设计稿排版信息的理解与视觉设计师的原意有出入

与产品和视觉设计师对相应的信息进行确认后，于是给到了定宽的效果：

（定宽：三个按钮）

（定宽：两个按钮）

（定宽：一个按钮）

定宽排版与等分排版两个方式对比来看：

• 定宽排版的 3 个按钮与等分排版的效果一样
• 定宽排版的 2 个按钮比等分排版的效果差。
• 定宽排版的时候，按钮所占空间并没有等分展示区域，而文案离分隔线的间距又不相等，排版逻辑不清晰，显得很不整齐
• 定宽排版的 1 个按钮比等分排版的效果好。

等分排版的时候，虽然按钮在展示区域中是居中对齐了，但是考虑到上下文的对齐，按钮并没有和星星的对齐，相反，等宽排版的文案更接近与星星的左对齐，虽然并没有绝对对齐，只是展现出来的排版效果、与上下文的排版逻辑显得更严谨。

其实两种排版的文案都没有办法 100%保证与星星左对齐的，因为文案长度不一样，居中的位置就不一样：

（定宽、等分的居中文案）

综合以上，向产品和视觉设计师提出建议：按钮的文案与分隔线间距相等，并且第一个按钮的文案与星星左对齐。于是得到了最终的效果：

（优化后的）

（优化后的）

（优化后的）

这与原有的设计稿相比，扩展性更强，排版逻辑更严谨性、更趋向设计本意，建议是合理的。

优化的地方虽然不大，但我们需要对设计稿进行认真深入的分析，从产品层面、视觉层面、开发层面甚至交互层面去尽可能地解读设计稿，深入思考才能发现问题，提出合理的建议，101% 中的 1% 威力就会慢慢的程现出来。

一个特殊的例子

由于项目快速迭代，视觉设计资源紧缺的原因，于是有了这张没有经过视觉流程的设计稿，是一位产品 GG 给到的，如果我们拿到设计稿，不加以思考的话，100%还原出来，那么

得到了第一稿：

其实认真思考一下，可优化的地方还是有的：

交互上

• 和 这两个其实只是文案中的一部分，并没有任何交互，设计稿上却做成了和文本形成强烈对比的看上去可点击的按钮，容易误导用户去点

视觉上

• 复制按钮的配色欠恰当，复制的操作并不会引起用户警告或错误的提示，而红色恰好有让人警惕的意味
• 输入框和复制按钮的高度不一样，显得不够整齐美观
• 内容和顶部的间距太小，内容视觉焦点欠佳

交互和视觉上都涉及到不同的信息传达，因此不能用对视觉稿进行主动修正，将以上信息和产品反馈

最终建议：

• “添加朋友” 和 “关注” 采用文本加色强调形式表现
• 复制按钮的颜色采取常用的给人友好感觉的绿色
• 调整复制按钮的调试使之与输入框的调试一样
• 调整内容与顶部的间距大小

得到了第二稿：

（第二稿）

第二稿中“您已收藏店铺，可在个人中心查看”的收藏反馈提示是产品新增的内容，一开始要求放在上图的位置，虽然第二稿在交互和视觉上得到了一定的优化，但还有优化的空间，特别是

产品上

• 文字左对齐可显页面排版整齐，但从内容的亲密性上看，最底部的已收藏文字反馈提示并不属于引导操作的内容

最终建议：

• 让反馈内容居中对齐
• 增加与操作内容的边距，让用户可以一目了然看到反馈内容的归属
• 调整文案强调色的色系，让其不至于过重而显得太突眼。

最终得到 101%的还原效果：

这个例子中，最终还原出来的效果也许没有视觉设计师那么专业，但至少还原稿上多了一份思考，多了一份心思，在这过程中也能让大家去探讨一些非自己职位上的知识，互相学习，互相提高。

从 100%到 101%的过程，其实就是一个主动思考，积极执行的过程，是一个追求极致的过程，是一个把事做好的过程。在还原设计稿的过程中，1%在 100%中占的比例不多，但是如果能把这 1%处理得好，还原出来的设计稿会更具级数。