2056阅读
2回复

页面构建的审图与细节(原创理论)学习分享 [复制链接]

只看楼主倒序阅读使用道具楼主 梦舞飞扬 发表于: 2013-05-27

作者：微博UDC

原文：
作为专业的页面构建工程师，除了在专业技能上有很高的要求以外，还需要具有一定的对设计图的审稿能力。审图，并非是意味着追求跟PSD一模一样，甚至耗费大量时间截屏跟PSD去“对像素”。在我的理解中，审图是通过对UI设计稿的分析，充分理解UI设计师的意图，再结合UE的交互状态，从中做到真正的“还原设计稿”。

事例一：有取有舍，方是领悟

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

图片:01.jpg

设计师的意图：

这个话题列表的行高19px，每个单条话题下面是有4px边距的。而话题标题与其自身的描述文字之间没有间距。
页面构建工程师的分析过程：
由于该模块对行高的重置，已经“约定”好了，文本规范的行高是18px。通过沟通，设计师认可将本段落的行高由19px改为18px。但这仅限于标题与描述文字之间的行距。而标题与标题之间4像素下边距，从构图上说明了单条话题之间的段落关系，不能一味的用18px行高解决。因为通过我们对设计稿的理解，设计师用这4像素，拉大了标题之间的间距，从视觉上形成了段落感。所以对于重构来讲，这4像素万万不能忽略，不然从视觉呈现的角度，设计师就不能容忍了。所以，有取有舍，方是领悟。
在这个模块的制作中，还发生了一个小插曲。如下图：

图片:02.jpg

设计师的意图：
这是11号的细明体，因为是点缀，又是提示性图片，所以小于前面标题的宋体12号字。
页面构建工程师的分析过程：
起初，重构组的同学在讨论设计稿时，都提议把它们做成活文字，就是宋体12号。彩色圆角块用CSS3写，扩展性特好。因为这个模块是运营团队负责，在未来也更能够满足随时更换文字的需求。万一以后再来个“惊爆”、“头条”啥的呢？每张图都重新切、重新拼么？
但是，站在理解视觉设计的角度，这种小tag讲究的就是精致。如果做成文本文字，虽然面临将来的需求变更时，会有一定程度上的成本，但是与正文区别太小，就突出不了小tag的感觉，也显得没有那么精致了。所以在各种纠结权衡下，我最终选择把它们做成了图片。

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

再举另外一个例子，我们有这样一个模块。

图片:03.jpg

本部分内容设定了隐藏，需要回复后才能看到

（申明：此教程来源于网络，转载请注明作者，如需商业用途请与作者联系。请支持原创！）