恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
IconFont-1PX不对齐引发的'血案'
0.0°
2018-07-02 原创文章 经验/观点 举报 5437 17 17 14

大约一年前,写了一篇关于iconfont 如何设计、使用、维护的文章(传送门)。而今天特意再拿iconfont 来写一篇文章,主要是项目实际执行过程中,使用icomoon 生成iconfont 使用时,以MD的设计规范来设计,SVG完全以24x24的模式来生成导出,会产生偏移的问题。



前因

目前项目进入前端组件规范化的过程,而在制作按钮时,发现了图标与文案存在1px不对齐问题,如下图:Image title

正常应如左侧,对齐;现在应用时却是右侧的情况,icon 往上偏移了。



起初,由于对MD规范的盲目依赖,认为设计端的SVG输出都是正确的,于是乎都以为是前端/开发的代码处理问题,没有对iconfont 进行正确的读写,而开发端也确实用了比较粗暴的方式让效果看似没问题了,但却同时引发了更多的问题。其他iconfont 资源在应用时都不得不进行一些特殊的处理,增加了开发成本。

Image title




在一系列的尝试之后,不得不换个角度来看问题,先排除技术端的可能性,把问题回归到设计端,尝试发现问题。




分析


首先,找到了Google官方在用的Material Design icon的开源iconfont,把其中的SVG放到icomoon 中看看它的图形结构实际应用是不是一致的,如图:

Image title


结果很惊讶,发现官方貌似不是一个做法啊,难道问题出在这里?但随后又发现每一个图形的宽度结构其实都不一样,只有一个共同点,高度统一。但高度统一这一点我们也是遵循规则的啊,而宽度不同会导致上下偏移,逻辑上说不通啊。且现阶段已经有200多的图标,实验的成本太高!结论:此路不通,继续换思路。



假设SVG不是根源问题,那只能把问题转移到生成iconfont 的工具icomoon 上了。而icomoon生成iconfont 是非常简单的,导出时有一些基础的设定,这个在以往确实没有深入去看每一个选项到底代表了什么,都是直接用默认值,死马当活马医的心态下,发现了确实会影响iconfont 对齐问题的选项,如下图:

Image title



Baseline Height - 这个,其实就是在字体设计中的一个对齐基线的设定



再翻出icomoon 的功能说明,其中就有对于这个选项的说明(传送门)

Image title



从图中很明显看出了默认的6.25 是怎么来的,而改变这个数值就会影响icon 在实际应用时的垂直位置。此时简直柳暗花明又一村,基于我们SVG制作的方法,直接把6.25 改为0,测试一下是否对齐了。

Image title


马上让前端测试之后,可见偏移问题已消失,会心一笑 ;p





问题

好吧,其实开心得太早!



在开心满满以为解决问题了,于是乎也把其他2个iconfont 资源也以同样的方法更新,然后让WEB、Android、iOS各平台更新资源。而现实是残酷的,再一次告诉了我不严谨验证的后果,偏移问题仅是其中1个资源解决了,其他2个还是一样!悲剧~到底问题在哪里?明明设置都是一样的啊!


此时,幸运的是,Mobile开发小组长提供了一个便于验证对齐问题的小工具(传送门),把不同iconfont 资源进行同时的对比,正常资源如下:

Image title



而依然存在偏移问题的资源,非常明显,如下图:

Image title



但是从icomoon 导出的设置都一样,且SVG的设计规范也是一致的,到底是什么问题?疯掉~



好吧,冷静,再次针对不同资源的差异化进行分析,突然想到是否有可能是字体范围的渲染机制问题。于是,检查正常资源的库时,发现当时在设计"百度贴吧"的社交icon 时,由于其LOGO的图形特殊性,为了保证线条饱满和符合我们的设计规范,所以整个图形都是铺满整个画布的,如下图:

Image title


抱着怀疑的态度,我把"百度贴吧"的icon 复制到另外的资源中,然后,如图:

Image title



看到这一幕简直要哭了有木有,几经波折啊!小心翼翼让APP开发的同学先更新资源测试一下是否真的解决问题了,回馈是:OK!





好吧,问题到此为止,完美解决。起初只是因为1px 的对齐问题,后面引发了一系列的开发填坑的事情。由此作为设计师不得不反思自身啊,任何工具和方法的使用,没研究透彻就投入项目,发生问题也容易盲目自信,忽略了其真正的原因,共勉!

Image title


更新:2018-07-02

收藏

17人已收藏

HeNgrY

博学之,审问之,慎思之,明辨之,笃行之

  • 47

    作品

  • 1811

    粉丝

  • 130

    关注

  • Sketch58-智能布局功能的一些总结
  • 关于老板说“出几个方案看看”的思考
  • 聊聊小团队设计管理的那点事
  • 关于Sketch我知道的那些事

    猜你喜欢

      2018-07-02 原创文章 经验/观点 举报 5437 17 17 14

      IconFont-1PX不对齐引发的'血案'

      0.0°

      你确定要举报IconFont-1PX不对齐引发的'血案'

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月20日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      17
      17
      14

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录