首页 > 网页教程 > 设计分享 > 视觉设计:页面构建的审图与细节

视觉设计:页面构建的审图与细节

时间:2012-04-20    来源:微博UDC

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

事例一:有取有舍,方是领悟

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

设计师的意图:

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

页面构建工程师的分析过程:

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

在这个模块的制作中,还发生了一个小插曲。如下图:

设计师的意图:

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

页面构建工程师的分析过程:

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

但是,站在理解视觉设计的角度,这种小tag讲究的就是精致。如果做成文本文字,虽然面临将来的需求变更时,会有一定程度上的成本,但是与正文区别太小,就突出不了小tag的感觉,也显得没有那么精致了。所以在各种纠结权衡下,我最终选择把它们做成了图片。

相关推荐
腾讯CDC:泛泛而谈界面中的斑马纹设计
简单而又不单调的网页视觉设计技巧
如何杜绝网页设计中视噪对用户的影响
如何让手绘应用于视觉设计中而增强亲和力和感染力
网页视觉设计如何针对用户有效表达信息
网站页面设计中光的特效设计引导用户视觉焦点
网页PS设计教程:手把手教你制作漂亮的商业模板
网页PS设计教程:手把手教你制作WordPress新闻博客模板
网页设计教程:5个原则助你设计一个成功的购买按钮
案例分析社交型网站首页设计的优秀设计原则
从网站可用性的角度深入分析苹果和微软官网设计的优劣
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计之材质绘制的色彩理论
网站设计之10个儿童网站分析及设计特点总结
网页配色经验分享:叠柔配色技巧及图解分析
工具型网站设计及典型案例分析
深入探讨图片格式与网页设计的那点事儿
分享:网页核心内容对视觉表现的影响
响应式网页设计正成为移动互联网大势所趋
20个超棒的photoshop网页设计教程分享
浅谈界面设计中的结构设计
网站营销活动页面制作过程图文分享
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
深入分析网页栅格系统的规范制作
分享:360安全桌面主题设计过程及思路总结
网页设计教程分享—能影响观众的网站首页设计10个要点
网页Banner设计的风格、排版以及配色经验分享
国外精彩网页界面设计案例赏析
中文网页设计排版之破格的好例子
30个国外立体动感的视差滚动效果网站欣赏
网页设计教程:关于网页设计的那些事儿
网页设计中使用不对称设计创建不平衡中的平衡
最新Web设计8个趋势:视差滚动 响应式设计等
淘宝店铺广告文案排版快速设计经验分享

分类导航

教程推荐

热门特效

热门教程