评论(0)

QQ空间设计中像素差解决方法及心得

2009-04-21 10:36 腾讯ISD 二米拉 A+

将设计执行到底—记Qzone项目组视觉设计标注的前
图5 (点击查看大图)

将设计执行到底—记Qzone项目组视觉设计标注的前
图6 (点击查看大图)

  执行

  刚开始执行的时候觉得花的时间较多,不能充分的享受设计完成后的愉悦,而要面对增设标注这项“浩大”的工程,枯燥的放大,拉取标尺,移动水平线,填写数据,还是难免觉得麻烦。也会不经意的疑惑,这样真的能更利于制作和减小像素差吗?

  反馈

  很快的收到了页面重构同事的反馈:

  标注作为参考,约定,相比设计原型,更为精细;

  能更快捷地了解设计稿的意图,减少了沟通成本;

  能节省更多重复的测量工作;

  增强了下游环节包括开发线对还原视觉稿的意识。

  反馈中也有很多改进建议,比如:更注重文本行间数值的标注,更多的关注间距、元素宽高、颜色值、边框宽度、字体大小、文本段落行等的标注。这些建议,还需要我们在后续实际工作中来不断优化了。

  一些收获

  第一:视觉设计师,会更加注意行高与间距,在视觉上能够最精准还原到所设计的样式以保证体验顺畅,强调设计还原与网页的品质;更容易关注到视觉层次的设计,容易形成统一的视觉规范和品牌;

  第二:重构工程师,会更加可控和高效,方便重构工程师在最短时间内做出页面及模板;也提高还原设计稿的意识,降低还原的难度;

  第三:引导开发线的同事对细节的重视;

  第四:将最完美的界面体验呈现在用户面前;

  随着互联网产品变化的速度越来越快,我们面对的设计工作也越来越复杂,这需要我们找到更多、更好的方法来提高效率,提升品质。

  “标注”,也许就是一次卓有成效的尝试。

 网友观点

网友A:从文本的顶部,或者select下拉框的顶部开始计算到上边框的距离,并进行像素级标注,这是极不现实的。应该是标注者并没有亲手实现过一个网页,并且将该网页在多版本浏览器里进行严格的像素级测试。

网友B:标注的方式很好,但是如果设计师不了解前端开发的工作原理,也就是所谓的盒模型,比如在哪里需要用一个容器(div、ul、form等),容器和容器之间的关系,容器在哪用margin或padding。那样反而会让前端开发工程师(重构工程师)感到头痛。

网友C:“今日热点”和”活动快递”的标题上标的几个40px,太不现实了,标注是给团队工作效果的提高,如果一个无效的标注,极可能是反效果,所以,标注者,最大限度,得了解一个页面的输出的各细节,才能,更好地进行标注。

网友D:细节方面,有时候重构比设计稿还精确。例如:栏目之间上下左右1px的对齐。

网友E:网页视觉设计跟前端开发工程师(重构工程师)分工明确确实能提高工作效率(前提是网页视觉设计师必须了解网页重构的基本原理 这点通过培训完全可以实现) 两者有机结合发挥各自的长处就能做出既美观又有好的用户体验的作品 这恰恰是中小型公司视觉设计上的瓶颈 那儿的设计师一般身兼前端开发

 

  相关阅读

  QQ登录Banner之清明概念创意设计过程

  QQ影音正式版官网Banner诞生过程

  内部爆料!09年QQ登录Banner诞生过程

  门户网站改版案例:腾讯网首页诞生过程

点击学习更多创意设计教程

打开客户端,无广告困扰,阅读更专注

热门新闻

推荐内容