IconFont-1PX不对齐引发的...

HeNgrY

2017-04-20

原创文章

2608

9

12

经验分类:经验/观点/原创文章

大约一年前,写了一篇关于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


全部评论:9

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消