由于该模块对行高的重置,已经“约定”好了,文本规范的行高是18px。通过沟通,设计师认可将本段落的行高由19px改为18px。但这仅限于标题与描述文字之间的行距。而标题与标题之间4像素下边距,从构图上说明了单条话题之间的段落关系,不能一味的用18px行高解决。因为通过我们对设计稿的理解,设计师用这4像素,拉大了标题之间的间距,从视觉上形成了段落感。所以对于重构来讲,这4像素万万不能忽略,不然从视觉呈现的角度,设计师就不能容忍了。所以,有取有舍,方是领悟。 在这个模块的制作中,还发生了一个小插曲。如下图:
设计师的意图: 这是11号的细明体,因为是点缀,又是提示性图片,所以小于前面标题的宋体12号字。 页面构建工程师的分析过程: 起初,重构组的同学在讨论设计稿时,都提议把它们做成活文字,就是宋体12号。彩色圆角块用CSS3写,扩展性特好。因为这个模块是运营团队负责,在未来也更能够满足随时更换文字的需求。万一以后再来个“惊爆”、“头条”啥的呢?每张图都重新切、重新拼么? 但是,站在理解视觉设计的角度,这种小tag讲究的就是精致。如果做成文本文字,虽然面临将来的需求变更时,会有一定程度上的成本,但是与正文区别太小,就突出不了小tag的感觉,也显得没有那么精致了。所以在各种纠结权衡下,我最终选择把它们做成了图片。 事例二:麻烦的CSS写法能换来更好的视觉效果再举另外一个例子,我们有这样一个模块。
设计师的意图: 头像与名称顶端对齐,微群等级图标与微群名称底部对齐。
|