首页 > 教程 > 关键词  > 视觉设计最新资讯  > 正文

记Qzone项目组视觉设计标注的前前后后

2010-03-24 13:21 · 稿源:webteam.tencent.com

像素误差

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

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

解决方法

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

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

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

效果如下:

执行

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

反馈

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

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

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

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

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

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

一些收获

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

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

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

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

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

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

举报

  • 相关推荐
  • 水乡感质 设计探本!ASKO在水乡乌镇开启设计游学之旅

    7月25-27日,第三届ASKO非凡设计大奖在乌镇举办设计游学活动。活动以"水乡质感+设计探本"为主题,邀请设计师们走进木心美术馆、西栅染坊等场所,感受传统与现代交融的水乡美学。ASKO中国区总经理华安、《IDEAT理想家》出版人杨莹等嘉宾参与,共同探讨理想人居设计。活动期间还恰逢贝多芬《命运交响曲》音乐会,设计师们在艺术氛围中汲取灵感。ASKO作为北欧百年家电品牌,秉持极简设计与人文关怀理念,致力于推动美好生活方式。

  • 雷军又揽大将 前宝马i系列设计主管加盟小米:向李田原汇报

    前宝马i系列设计主管Kai Langer宣布加盟小米。 从履历看,他加入小米后的汇报对象应该是小米汽车首席设计师李田原,而有意思的是,李田原在宝马工作期间恰恰是他的下属。 资料显示,Kai Langer在宝马任职超20年,2013年起参与了初代宝马i3和i8的设计,也在宝马前瞻设计部门待过很久。

  • 豆包App视觉推理升级 支持图片思考

    豆包App近期升级视觉推理能力,支持在思维链中运用图像思考。用户上传图片提问时,豆包能主动分析图片内容,智能放大局部细节确保不遗漏关键信息。对于复杂图片,还能智能裁剪并调用搜图功能提供更准确结果。升级后的豆包可智能调用多种工具辅助分析图片,无论是日常识物、商品查询,还是工作学习中分析图表、专业图片,都能给出更精准实用的答案。据悉,豆包是国内首个实现这一能力的产品,用户可免费体验。

  • 虹软旗下PSAI新功能上线:2天极速交付电商视觉成品,AI商拍再进阶

    虹软科技旗下智能商拍平台PSAI推出"AI服务助手"新功能,通过"提需求-拿成品"的一站式交付模式,将传统电商视觉制作周期从15天压缩至2天,成本削减超80%。该功能基于自研ArcMuse大模型技术引擎,实现四大突破:1)精准换脸技术保持模特形象一致性;2)服装版型材质细节处理更真实;3)智能光影协调确保场景融合自然;4)全流程托管服务支持48小时急速交付。目前已服务500+KA品牌,累计生成超3000万张图片,典型案例显示使用后商家GMV最高提升200%。PSAI通过"AI生成+修复"组合技术,正在重构电商视觉生产关系,推动行业从工具创新向生产流程变革演进。

  • 视觉中国战投企业景致三维:启动深圳首家3D数字技术订单班

    视觉中国战略投资企业景致三维联合深圳携创高级技工学校,于2025年7月22日启动深圳首家"3D梦工场订单班"。该项目针对3D数字技术人才缺口,定向培养逆向工程师、动画师、渲染师等紧缺人才。课程引入亚马逊、京东等真实商业项目案例,学生将系统学习3ds Max、Maya等主流工具,并考取职业资格证书。学习期间企业提供奖学金和带薪实习,毕业生考核合格可直接入职景�

  • HUAWEI MateBook Fold 非凡大师斩获2025年iF设计奖:折叠屏电脑设计新标杆

    华为MateBook Fold非凡大师荣获2025年德国iF设计奖,该奖项被誉为工业设计界的"奥斯卡"。这款全球最大18英寸折叠屏笔记本以突破性铰链设计和7.3mm超薄机身(展开仅1.16kg)获得评委会认可,在技术创新与用户体验间取得卓越平衡。产品搭载3.3K专业大屏(1600nits峰值亮度/229PPI),配合鸿蒙操作系统带来沉浸式办公体验。水滴型铰链采用三段式转轴设计,确保屏幕平整耐用。此次获奖进一步巩固了华为在笔记本行业的创新引领地位。

  • 成都地铁官方回应“防走光”设计:后续会考虑普及其他站点

    ​近日,有网友在社交平台上分享了成都地铁的一项人性化设计细节:部分站点的步梯与扶梯之间安装了非透明的磨砂玻璃。这一发现迅速引发了公众的关注和讨论。记者实地走访后确认,成都地铁确实在部分站点采用了这样的磨砂玻璃设计。 针对这一设计,成都地铁官方给出了正式回应。官方表示,这一改变源于此前乘客的反馈意见。有乘客提出,在步梯上行走时,由于透�

  • 苹果发布首个iOS 26公测版 液态玻璃设计引发热议

    7月25日,苹果推送首个iOS26公测版,参与Beta计划的用户可通过官网申请升级。新系统引入"LiquidGlass"设计语言,通过动态光线折射与镜面高光效果,使界面元素随用户操作实时变化。该设计覆盖主屏和锁屏界面,支持图标外观个性化定制及3D锁屏壁纸效果。技术层面优化了光线追踪算法,在保持流畅性的同时降低功耗。测试反馈显示公测版稳定性显著提升,但苹果仍建议避免主力设备升级。值得注意的是,iPhone XS系列及XR将止步于iOS18,成为首批被淘汰的全面屏机型,而iPhone11系列及后续机型可获得升级支持。这一决策可能与新设计对GPU性能的要求有关。

  • 马斯克:特斯拉Optimus机器人将采用消费者从未见过的设计

    特斯拉的Optimus机器人已进入生产阶段,但未来交付给消费者的版本很可能与当前形态大不相同,消费者从未见过的设计,埃隆马斯克在最近的公司第二季度财报电话会议上对此做出了暗示。 近年来,特斯拉持续展示了Optimus机器人的迭代升级,最终推出了目前正在生产的V2版本。在2025年第一季度的公司全体会议上,马斯克曾向员工表示,特斯拉将力争在今年生产首批Optimus机器

  • TME产品设计周开幕 腾讯音乐首席执行官梁柱:共同创造用户喜爱的体验

    腾讯音乐娱乐集团(TME)近日盛大开启2025年产品设计周活动,主题为"设计无界·创意无限"。活动汇聚各界设计精英,TME首席执行官梁柱强调设计师需热爱产品并主动代言,产品经理与设计师要紧密协作,追求设计语言一致性,共同打造优质用户体验。活动期间还颁发了TME设计共创年度大奖和音乐科创特别奖。据悉,TME旗下Q Music Ideas设计开放平台已举办十余场设计大赛,与多个知名IP建立深度合作。活动邀请了故宫博物院单霁翔主任、洛可可设计集团贾伟等专家分享设计理念。TME表示将持续以用户为中心,优化产品体验,推出更具创新性的音乐产品和服务。

热文