作为专业的页面构建工程师，除了在专业手艺上有很高的要求以外，还需要具有必然的对设计图的审稿能力。审图，并非是意味着追求跟PSD一模一样，甚至破耗年夜量侍旧素屏跟PSD去“对像素”。在我的理解中，审图是经由过程对UI设计稿的剖析，充实理解UI设计师的意图，再连系UE的交互状况，年夜中做到真正的“还原设计稿”。

　　事例一：有取有舍，方是贯通

　　好比，在这样一张设计稿中

　　设计师的意图：

　　这个话题列表的行高19px，每个单条话题下面是有4px边距的。而话题问题与其自身的描述文字之间没有间距。

　　页面构建工程师的剖析过程：

　　因为该模块对行高的重置，已经“商定”好了，文本规范的行高是18px。经由过程沟通，设计师认可将本段落的行高由19px改为18px。但这仅限于问题与描述文字之间的行距。而问题与问题之间4像素下边距，年夜构图上说了然单条话题之间的段落关系，不能一味的用18px行高解决。因为经由过程我们对设计稿的理解，设计师用这4像素，拉年夜了问题之间的间距，年夜视觉上形成了段落感。所以对于重构来讲，这4像素万万不能忽略，否则年夜视觉呈现的角度，设计师就不能容忍了。所以，有取有舍，方是贯通。

　　在这个模块的建造中，还发生了一个小插曲。如下图：

　　设计师的意图：

　　这是11号的细明体，因为是点缀，又是提醒性图片，所以小于前面问题的宋体12号字。

　　页面构建工程师的剖析过程：

　　开初，重构组的同窗在谈判设计稿时，都提议把它们做成活文字，就是宋体12号。彩色圆角块用CSS3写，扩展性特好。因为这个模块是运营团队负责，在未来也更能够知足随时改换文字的需求。万一往后再来个“惊爆”、“头条”啥的呢?每张图都年夜头切、年夜头拼么?

　　可是，站在理解视觉设计的角度，这种小tag讲究的就是美丽。如不美观做成文本文字，虽然面临未来的需求变换时，会有必然水平上的成本，可是与正文区别太小，就凸起不了小tag的感受，也显得没有那么美丽了。所以在各类纠结权衡下，我最终选择把它们做成了图片。

　　事例二：麻烦的CSS写法能换来更好的视觉效不美观

　　再行动吐矣闽例子，我们有这样一个模块。

　　设计师的意图：

　　头像与名称顶端对齐，微群品级停笔与微群名称底部对齐。

　　页面构建工程师的剖析过程：

　　因为微群品级停笔的尺寸是16×16，高于文字自己的高度，为了在各浏览器下都保证这个对齐效不美观，我采用了这样一种思绪。

　　按视觉稿百分百还原，做出来左图的效不美观，虽然css代码看起滥暌剐点儿麻烦。可是如不美观怎么简单怎么写，做出来的页面效不美观，却没有这样做的现实效不美观好。

　　事例三：页面构建细节上多措置一点点，用户体验晋升一点点

　　还有这样一个模块：

　　页面构建工程师的剖析过程：

　　凡是碰着这样子的模块，我们会这么划分结构

　　因为用户头像只有30px正方的巨细，所以算滥暌姑户名称只能显示2—3个汉字，其实很难让用户直不美观的区扶持这小我事实是谁。如不美观经由过程传统的思绪来做，产物和设计估量都不会对劲。那么，页面构建的过程中，我们就要设法子扩年夜用户名称的显示区域。

　　于是，我采用下面这个切图思绪，在不改变HTML结构的情形下，只经由过程改变css，达到了扩年夜用户名称显示区域的目的。

　　给用户头像名称模块定宽，然后操作margin的负数值，让vs向左偏移。盖住部门头像1的区域。最终效不美观，可以显示4个汉字。

　　重构组的实习生同窗，因为没有项目经验，导师讲什么就是什么，于是一听到导师说“对像素”，就真的去专注于此，万一设计稿自己有些问题，也不会判定一下，结不美观把自己搞的挺为难。有时辰，拍屏静态页面的呈现效不美观与设计稿去对像素，其实没相差几个像素，但静态页面看着就不跟设计稿感受纷歧样。这时辰老是需要不竭的改削、截屏、对像素、再改削…这样的一再劳动，在快节奏的开发中不单华侈时刻，更有可能因为不得要点，在数据的装载后加倍“不是那么回事儿”了。还不如静下心来，先去细细的审图，和设计师充实的沟通，有取有舍，聪明判定，然后再去做具体开发，出来的页面不需要这么焦头烂额的打补丁对像素，也许能更好得达到设计师设计的初衷呢。

　　(微博UDC原创博文，接待转载并注明出处，接待订阅 )