您的地位: 首页 > 艺术设计 > 设计实际 > 页面构建的审图与细节
如何做符合用户预期的设计 回到列表 "少等于多"—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代码看起来有点儿费事。然则假设怎样简单怎样写,做出来的页面后果,却没有如许做的实际后果好。

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

还有如许一个模块:

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

平日碰到如许子的模块,我们会这么划分构造

由于用户头像只要30px正方的大年夜小,所以算来用户称号只能显示2—3个汉字,其实很难让用户直不雅的辨别出这小我毕竟是谁。假设经过过程传统的思路来做,产品和设计估计都不会满足。那么,页面构建的过程当中,我们就要想办法扩大年夜用户称号的显示区域。

因而,我采取下面这个切图思路,在不改变HTML构造的情况下,只经过过程改变css,达到了扩大年夜用户称号显示区域的目标。

给用户头像称号模块定宽,然后应用margin的正数值,让vs向左偏移。盖住部分头像1的区域。终究后果,可以显示4个汉字。

重构组的练习生同窗,由于没有项目经历,导师讲甚么就是甚么,因而一听到导师说“对像素”,就真的去专注于此,万一设计稿本身有些成绩,也不会断定一下,成果把本身弄的挺难堪。有时辰,拍屏静态页面的出现后果与设计稿去对像素,其实没相差几个像素,但静态页面看着就不跟设计稿感到不一样。这时候辰总是须要赓续的修改、截屏、对像素、再修改…如许的反复休息,在快节拍的开辟中不只浪费时间,更有能够由于不得要点,在数据的装载后更加“不是那么回事儿”了。还不如静下心来,先去细细的审图,和设计师充分的沟通,有取有舍,聪慧断定,然后再去做详细开辟,出来的页面不须要这么焦头烂额的打补丁对像素,或许能更好得达到设计师设计的初志呢。

本文链接:http://kostschema.com/design/doc/2012/8764.asp 

出处:
义务编辑:bluehearts

作者文章 更多作者文章
OPPO首届手机主题设计大年夜赛
想用限免推送1.1上线appstore
专访菲尔外型艺术设计叶浩天
腾讯保安华丽转职工程师
晋江市撤县设市20周年活动标记征集
热点搜刮:CSS Fireworks 设计比赛 网页制造 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大年夜福“敬•天然”设计大年夜赛开启
国际体验设计大年夜会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