设计标准与像素级误差

来源:西风坊 作者:犷野西风 时间:2009-04-20 点击:
欢迎加入酷秀网Web设计师QQ群 10895718 Tag:设计   标准   误差  

从gr上读到的这篇《将设计执行到底—记Qzone项目组视觉设计标注的前前后后》,很赞成其中对于所谓“像素误差”的描述-

看自己设计好上线的网站,偶尔会发觉像素行间出现了弹性空间,总在不经意间蹦出一定的差距。有些页面很难发现,比如活动类页面,这类页面多呈不规则造型, 在设计上也更加灵活多变。但在portal类的页面设计上,像导航、登录框、行距等,几个像素的误差可能就会影响到用户的感受。这时,像素误差问题就很直 观了。

但与对接下来的有些设计规范却很是疑惑!:

892_006

892_005

如果没有猜错这样的标注应该是视觉设计定出来的,诚如下面的评论一般,是极不现实的。比如两个区块见的间距是以这两张图片见的21px来区分的?还有比上图中的“赚礼品”到底边框是42px,在写css的时候又该怎么定义呢?(不知道有没有漏掉标注)按上述要求怕是要出效果哦后拿着“尺子”慢慢量啦,不知大家对这个42px的像素是怎么做的。

实际上,前端在实现页面文本的时候并不是想ps里拖组件那么实现的,举两个最简单的例子:

1、12px的中文宋体字显示有多高?11px,可如果加上可能的下划线呢?13px-下面空1px后再加1px的线宽,这也是12px字号用12px行高会被截断的原因。不知道制定上图标准的设计师有没有考虑过这条下划线的问题。

01

2、12px的中文宋体字有多宽?答案是11px+1px的空白间距。所以n个文字的文本的段落宽带应该是取 12*n-1,这个数值是设计师在定宽度是得一个参考标准,否则如52px这样的宽带就会浪费5px的文本空间,同时所谓的像素误差也产生了。

个人觉得,设计标准在指定的时候一定要考虑到前端的实现。其实很多时候,我们并不需要这样的像素标准,好的标准下这些应该是自然而成的。比如去年大家讨论得很火热的栅格(网格)系统,就是在横向上处理区块间像素误差的一个很好的办法。当我们有了基于这样的栅格(网格)系统后,我们就不需要去考虑怎么实现区块间这些间距了。还有这篇《垂直栅格与渐进式行距(上)》也很有参考价值。字体×1.5倍行高的单位,段落的18px的margin也是计算所得而不是ps里拖着觉得好看而已。

当然,绝不是否认这样的设计标注,只是,在设计师在拖组件的时候也考虑下写代码时的实现方式!


收藏本文到 Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网