当前位置: 首页 > 图文教程 > 网页制作 > 心得技巧 > 设计理论:网页像素误差的解决方法

心得技巧
设计杂谈:有吸引力的宣传单的制作
用户体验:如何设计美好的瞬间(1)
用户体验:如何设计美好的瞬间(2)
用户体验:如何设计美好的瞬间(3)
用户体验:如何设计美好的瞬间(4)
交互设计:支付宝即时到账交易确认付款页面的交互设计
交互设计:网站提供给用户的适时帮助设计
网页设计参考:国外不错的网站设计实例欣赏
用户体验:从传文件功能看本地化
“灰色”在Web交互设计中的8类应用
网页设计参考:2009年经典的网页设计作品
设计网页参考:创意的国外博客网站头部设计
为网页添加hCard微格式
Godaddy在降低购物车页面跳出率的改进
交互设计:简洁清晰,自然易懂的设计
网页前端设计:关注前端开发流程
设计理论:界面设计和视觉效果的统一性
交互设计实例:大网站改版
设计师未来三年的职业规划是什么样的
网页设计师引导客户的几个技巧

心得技巧 中的 设计理论:网页像素误差的解决方法


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-28   浏览: 65 ::
收藏到网摘: n/a

像素误差

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

面对不断成长的用户,Qzone的平台、活动等不断的推陈出新,新的视觉观感、新的操作方式、新的体验等等都在追求尽善尽美。但由于时间进度和对界面的不同理解,以及上线前开发联调等原因,导致线上的页面和设计稿对比,会出现几个像素的误差。这看似不起眼的像素误差,可能导致用户无法实现操作目标,增加用户的操作成本,让用户沮丧,让我们产品的体验大打折扣。如何让视觉设计师输出的设计稿能更加准确无误的展现在用户面前,是一个问题。

解决方法

怎么更好的解决像素差的问题呢?ISD Webteam众人一阵头脑风暴过后得出了结论

标注:

所谓“标注”,泛指标示距离的牌柱或特制的目标。对页面设计稿进行标注,可以大大降低像素误差,尤其适用于portal类产品。

目前在Qzone项目组进行标注的内容包括:页面行宽、间距、对齐等关键点的具体像素数值。为了易于识别,标注以图标“I”为标示,使用红色12号新宋体。

效果如下: