Qzone项目组视觉设计与标注

像素误差

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

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

解决方法

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

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

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

效果如下:

执行

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

反馈

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

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

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

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

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

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

一些收获

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

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

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

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

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

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

时间: 2024-08-01 20:43:49

Qzone项目组视觉设计与标注的相关文章

QQ空间项目组视觉设计的启发

像素误差 看自己设计好上线的网站,偶尔会发觉像素行间出现了弹性空间,总在不经意间蹦出一定的差距.有些页面很难发现,比如活动类页面,这类页面多呈不规则造型,在设计上也更加灵活多变.但在portal类的页面设计上,像导航.登录框.行距等,几个像素的误差可能就会影响到用户的感受.这时,像素误差问题就很直观了. 面对不断成长的用户,Qzone的平台.活动等不断的推陈出新,新的视觉观感.新的操作方式.新的体验等等都在追求尽善尽美.但由于时间进度和对界面的不同理解,以及上线前开发联调等原因,导致线上的页面和

设计理论:网页像素误差的解决方法

像素误差 看自己设计好上线的网站,偶尔会发觉像素行间出现了弹性空间,总在不经意间蹦出一定的差距.有些页面很难发现,比如活动类页面,这类页面多呈不规则造型,在设计上也更加灵活多变.但在portal类的页面设计上,像导航.登录框.行距等,几个像素的误差可能就会影响到用户的感受.这时,像素误差问题就很直观了. 面对不断成长的用户,Qzone的平台.活动等不断的推陈出新,新的视觉观感.新的操作方式.新的体验等等都在追求尽善尽美.但由于时间进度和对界面的不同理解,以及上线前开发联调等原因,导致线上的页面和

手机QQ浏览器HD项目组的那些折腾事儿

--QQ浏览器HD (iPad)的产品经理沃克 周六的夜晚,办公室里依然灯火通明,我们项目组的很多同事还在加班赶版本.这应该是项目组第N+1次周末加班了. 当我回到家的时候,已经很夜深人静了.坐下来,打开iPad,体验今晚刚Build出来的新版, 我猛然回想起来QQ浏览器HD(iPad)从1.0版本开发至今差不多一年了,回想一下,就记得我和我的伙伴们为了这个产品的一直在不断折腾. 标签栏的折腾事儿: 从1.0版开始QQ浏览器HD的我们的多标签设计,就受到用户欢迎.但是如何让标签管理更贴心,整个项

设计稿标注首屏线的确定始末

这是内部的一个邮件记录,分享出来听下业内同行的声音. 事情是这样的.. == 先是 A 推荐了白鸦的推到内部群: "设计师们一定要养成一个习惯:无论是原型设计还是视觉设计,一定要标注一下首屏线,明确首屏需要.可以显示到哪里." == 然后,B 觉得这点子不错,根据内部统计系统中的操作系统.浏览器分布和屏幕分辨率等数据,结合浏览器状态栏.任务栏等高度进行分析: 得出两条首屏线,分别为 580 和 710,对应不同的分辨率. == C 再从实际用户的角度出发,在某应用布点进行用户数据的收集

Qzone大应用改版案例分析:视觉的优化

文章描述:QQ游戏:Qzone大应用改版小结. Qzone大应用是QQ游戏在Qzone上的一个集合,里面包含了我们团队所研发的各种棋牌休闲游戏的Web版,现在已经发布了19款,包含欢乐斗地主,英雄杀,QQ桌球,QQ跳棋,象棋,对对碰等-,随着游戏的增加,老版本的扩展性,视觉表现,功能模块上都面临着问题,便有了这次的整体改版- 改版的原因 1.视觉的陈旧 背景过于厚重和复杂,不利于用户的注意力放在应用图标上:"在线好友"与"公告"板块的设置也不是很科学,占去了过多的空

设计师养成习惯:一定要标注首屏线

文章描述:设计师们一定要养成一个习惯:无论是原型设计还是视觉设计,一定要标注一下首屏线,明确首屏需要.可以显示到哪里. 这是内部的一个邮件记录,分享出来听下业内同行的声音. 事情是这样的.. == 先是 A 推荐了白鸦的推到内部群: "设计师们一定要养成一个习惯:无论是原型设计还是视觉设计,一定要标注一下首屏线,明确首屏需要.可以显示到哪里." == 然后,B 觉得这点子不错,根据内部统计系统中的操作系统.浏览器分布和屏幕分辨率等数据,结合浏览器状态栏.任务栏等高度进行分析: 得出两条

Qzone龙年春节彩蛋“会喷火的龙”制作揭秘

一.背景 今年春节Qzone做的春节活动是让用户许三个新年愿望(发表空间说说的方式),然后自己去拉好友来"赞"自己发的愿望,当每一个愿望积累"赞"的次数超过5次的时候就可以点亮龙身体的三分之一,当3个愿望都积累到的时候就可以全部点亮一条完整的龙, 最终在Qzone个人中心的Feeds里面可以带上这条龙: 当时我第一眼看见这条龙的设计稿脑中就浮现各种想法:"如果这条龙可以动起来将会是什么样子?如果它还会喷火?如果它可以把前面的名字烧红?如果它可以把黄钻的条点

百度地图 定位 标注-IOS 百度地图 标注删除不了?求求大神啊 拜托了

问题描述 IOS 百度地图 标注删除不了?求求大神啊 拜托了 if (!_perList) { _perList=[[PersonalViewController alloc]init]; [self becomeFirstResponder]; CGFloat y=CGRectGetMaxY(_toolBar.frame); CGRect popFrame=CGRectMake(10, y, self.view.frame.size.width-20, self.view.frame.size

百度地图 js 通过IP定位城市后,已知一个坐标集合,根据每个坐标添加标注点,求大神help me

问题描述 百度地图 js 通过IP定位城市后,已知一个坐标集合,根据每个坐标添加标注点,求大神help me var myCity = new BMap.LocalCity(); // 以当前IP定位到城市 myCity.get(myFun); // 根据IP对当前城市进行定位 function myFun(result){ var center = result.center; // 城市坐标中心点 var point = new BMap.Point(center.lng,center.la