您的位置: 首页 > 艺术设计 > 设计理论 > 页面构建的审图与细节
怎样做符合用户预期的设计 回到列表 "少即是多"—UI设计的三大趋势
 页面构建的审图与细节

作者: 时间: 2012-04-24 文档类型:转载 来自:

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

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

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

设计师的意图:

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

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

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

在这个??榈闹谱髦?,还发生了一个小插曲。如下图:

设计师的意图:

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

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

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

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

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

再举另外一个例子,我们有这样一个???。

设计师的意图:

头像与名称顶端对齐,微群等级图标与微群名称底部对齐。

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

因为微群等级图标的尺寸是16×16,高于文字本身的高度,为了在各浏览器下都保证这个对齐效果,我采用了这样一种思路。

按视觉稿百分百还原,做出来左图的效果,虽然css代码看起来有点儿麻烦。但是如果怎么简单怎么写,做出来的页面效果,却没有这样做的实际效果好。

事例三:页面构建细节上多处理一点点,用户体验提升一点点

还有这样一个??椋?/p>

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

通常遇到这样子的???,我们会这么划分结构

由于用户头像只有30px正方的大小,所以算来用户名称只能显示2—3个汉字,其实很难让用户直观的区分出这个人究竟是谁。如果通过传统的思路来做,产品和设计估计都不会满意。那么,页面构建的过程中,我们就要想办法扩大用户名称的显示区域。

于是,我采用下面这个切图思路,在不改变HTML结构的情况下,只通过改变css,达到了扩大用户名称显示区域的目的。

给用户头像名称??槎ǹ?,然后利用margin的负数值,让vs向左偏移。盖住部分头像1的区域。最终效果,可以显示4个汉字。

重构组的实习生同学,由于没有项目经验,导师讲什么就是什么,于是一听到导师说“对像素”,就真的去专注于此,万一设计稿本身有些问题,也不会判断一下,结果把自己搞的挺为难。有时候,拍屏静态页面的呈现效果与设计稿去对像素,其实没相差几个像素,但静态页面看着就不跟设计稿感觉不一样。这时候总是需要不断的修改、截屏、对像素、再修改…这样的重复劳动,在快节奏的开发中不但浪费时间,更有可能由于不得要点,在数据的装载后越发“不是那么回事儿”了?;共蝗缇蚕滦睦?,先去细细的审图,和设计师充分的沟通,有取有舍,聪明判断,然后再去做具体开发,出来的页面不需要这么焦头烂额的打补丁对像素,也许能更好得达到设计师设计的初衷呢。

本文链接://www.apc0f.cn/design/doc/2012/8764.asp 

出处:
责任编辑:bluehearts

作者文章 更多作者文章
OPPO首届手机主题设计大赛
想用限免推送1.1上线appstore
专访菲尔造型艺术设计叶浩天
腾讯保安华丽转职工程师
晋江市撤县设市20周年活动标志征集
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大?!熬?#8226;自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
国外创意名片设计欣赏
情感化界面
线下项目工作流程(归纳篇)
线下项目工作流程(分析篇)
简约而不简单-Practise平面设计
培养用户的使用习惯
优秀名片设计
专题头图的秘密武器
别让UED忽悠你(2):多少钱一斤
别让UED忽悠你(1):天生的矛盾
分享按钮

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2
  • 2016全国创新社会治理典型案例颁奖典礼暨经验交流会 2018-12-08
  • 无需密码就能扣钱,“小额免密免签”功能何以默认开启? 2018-12-08
  • 俄罗斯总统普京会见世界主要通讯社及媒体组织负责人 2018-11-17
  • 一语惊坛(6月4日):美丽中国,人人都是建设者,个个都是受益者。 2018-11-17
  • 人民网驻台湾记者报道集 2018-10-08
  • 安徽去年扶贫开发成效考核全国第三 较上年度提高3个位次 2018-10-08
  • 重磅!国家肿瘤、心血管病等诊疗情况发布 2018-08-20
  • [微笑]再说具体点,个人收入从500涨到1000,满足感很大,从1000涨到3000,满足感更大,从3000涨到5000,满足感就开始下降了,再继续涨,超出了个 2018-08-13
  • 兰州文创城中线桥项目有序推进 全长约4.2km直通安宁区 2018-08-13
  • 山西新闻网特约摄影师名单&山西视觉志 2018-08-12
  • 今起生效!游戏成瘾被世卫组织列入精神疾病 将被纳入各国医疗体系 2018-08-12
  • 詹皇通知骑士队 准备与其续约 2018-08-12
  • 法制日报:别让世界杯激情冲淡守法意识 2018-08-11
  • 育儿十大坎 新手妈妈快快get起来 2018-08-11
  • 黄山市今天将有一次大到暴雨 20日起梅雨到来 2018-08-11
  • 376| 122| 284| 745| 844| 345| 733| 589| 127| 499|