一次关于IconFont的调研

上周在虎哥的直播上承诺放出调研IconFont的经过,周末就坚持者写完这个吧。

调研原因

用户在APP Store下载需要的APP,APP包体积是一个用户比较敏感的数据,过大的APP会对产品的推广产生不良的影响,比如:占用过大的手机存储空间。下载消耗较多网络流量(即便是wifi,后续也可能因为升级过程较为缓慢,导致用户长时间不升级,造成市面上的软件版本碎片化严重)。所以减少APP体积会带来很多正面影响。

掌链现状

我们以掌上链家APP7.7.0举例分析: 现在在Itunes Store下载的IPA体积大约在91.1M,即便公司在iOS9之后新增了APP Slicing功能,在我自己的iPhone 6 Plus下载的APP安装包依然达到了81.7M. 安装包瘦身主要包含资源瘦身和代码段瘦身,这篇文章主要调研资源瘦身。

资源的主要部分就是图片,请看下面数据

我们把iPA解压之后里面的Assert.car资源包的体积大约在34.1M 。 使用软件导出内部的资源文件发现3X系列的图片大小约为18.1M2X系列的图片大小约为19.4M,两份加起来大于34.1M是因为软件导出的图片部分没有后缀名默认两份都会存在。所以可以看出我们的图片还是有很大的优化空间的。

相关数据请看以下图片






IconFont

首先要介绍下矢量图
鉴于矢量图占用尺寸小,放大不失真,我们完全可用一套图来替换iOS传统的2x和3x系列图片,不仅仅是iOS,Android平台也不用切多份图了。

优点

  1. 减小体积,字体文件比图片要小
  2. 图标保真缩放,解决2x/3x乃至将来的nx图问题
  3. 方便更改颜色大小,图片复用

不足

  1. 适用于纯色icon
  2. 需要维护字体库

字体管理

既然设计到字体,我们就要制作字体,制作字体有两种办法,一种是自己手动去做比如使用FontForge工具,另外一种是托管到阿里的iconfont平台,我们的UE做字体设计完全没有意义,可以托管给平台。 托管给平台的好处:

  1. 大大的降低了接入难度
  2. 更方便项目管理。和RD对接更方便

而且iconFont可以和fontForge双重使用,FontForge工具可以再压缩这个字体文件。榨干最后一点剩余空间。

DEMO

iconfont平台建立一个项目,随便去购买几个图标(免费的即可),

06
,解压后的文件夹有一个字体文件,双击安装。 mac和windows都有对应的工具管理字体
07

近20张icon只占用了10k的资源空间,占用空间极小
08

具体的代码我们这里不再赘述,后面的demo具体展示, 不过我们要讲一讲使用的方案

  1. UILabel作为Icon
  2. UIButton的titleLabel作为Icon
  3. 根据字体生成UIImage

鉴于将我们本来的icon当作字体使用,会让我们在项目中添加的控件方式有所变化,而且不容易控制颜色和图标大小。所以我这里推荐第三种方案。

更详细的方案是我们建立字体组件。将这一块功能单独管理,便于后期迭代和维护,而且屏蔽底层使用直接暴露出对应的图片接口可以让上层无感使用。

后期如何接入

首期工作

这里建议拿掌链下手:原因有一下几点

  1. 掌链面向实际用户,做出来的效果更明显
  2. 掌链的APP安装包也最大,也最有瘦身的价值
  3. 掌链在经过组件化之后资源管理方式较为整齐,后期处理可以分次,灰度过度。 首期可能要麻烦UI同学,整理之前图标的对应的SVG格式,创建对应的字体库文件。工作量可能较大(约千张icon)。组件负责同学建立对应组件。 推荐的模式是可以在IconFont建立项目组,UI为owner,RD为member,方便协作和通知。

后期维护

待稳定后,后续迭代更加简单,只需UI同学更新对应的图标,建立新字体,然后组件管理者可以更新。 对APP安装和UI与RD业务迭代效率都有很大提高。

CODE

文件夹见DEMO

参考

UI参考

http://www.iconfont.cn https://icomoon.io http://fontello.com http://fontawesome.io/icons/

RD参考

Android:https://github.com/mikepenz/Android-Iconics

iOS: https://github.com/PrideChung/FontAwesomeKit

使用IconFont减小iOS应用体积


华丽的分割线


沟通结果

经过沟通发现掌上链家并不太适合这样的方式,原因如下

  1. 之前的icon很多是用ps做的 如果改用iconfont很多图层效果无法实现

  2. 即便新的icon用Sketch制作矢量图,但是icon在掌链中能制作矢量图的占比较小,且对设计的人力要求过大。

  3. 位图(png,jpg)等才是占用资源大户。
    后期考虑的方案

  4. 压缩大图 推荐使用PPDUCK(收费) imageOption,[]tinyPng](https://www.baidu.com/link?url=KkC7lFY89TwZELeYuV93DGrVaUInl3IYeq69FIHm0vp6mG8NrKBif_ewcW-9aZKC&wd=&eqid=cf83ff7b00071ce80000000358d65ecf)

  5. 删除重复资源(上海链家合并期间部分资源重复,但是由于工期太短没有剔除)

  6. 替换旧icon ,且可以统一UI风格

尝试

我尝试使用了上面推荐的三个压缩软件进行压缩,对比如下

  1. imageOption可以使图片减少30%左右,但是压缩巨慢,压缩2500张图片耗费12H以上并且,CPU一直维持在70%左右,但是图片是无损压缩,可以放心使用
  2. PPDuck压缩2500张图片需要花费5分钟不到,效果达到了惊人的70%,但是缺点也很明显,收费😂😂😂,不过我已经买了会员,有需要统一处理大批量的同学可以私信我,无偿帮忙,一般这种需求不会经常出现,在某次做包体积优化的时候才会出现一次。
  3. tinyPng,TinyPng的压缩也很厉害,缺点是需要上传图片到网站,再下载回来,也很耗时,且很麻烦,不过github有开源的工具TinyPng4MAC,可以使用。但是2500张经常会让程序Crash

总结

之所以写这篇文章,是想记录一下经过,并且向看这个文章的小伙伴们树立一个我自己的观点。无论技术有多优秀,我们最终是要落实到业务的,所以不要为了技术而技术,做事情要有始有终。很多人也会经常有困惑说我整天忙于业务,不知道如何提升,我这里想说的是所有人一开始就是做业务的,那些技术大牛更是,只有自己意识到自己的开发中涉及到的不足,私下补上自己的基本功,并且深入下去才能提高,一味的找理由说自己业务忙没时间学习都是借口(当然996这样无限制体力劳动的公司可以走人了)。

最后代码部分真的很简单 我就写了几行代码,最后放在GitHub上面供参考了;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,464评论 25 707
  • 本文会不定期更新,推荐watch下项目。如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以...
    天之界线2010阅读 18,183评论 19 153
  • 我曾不止一次地问自己,我来自哪里,将去往何处,路上又将有谁作伴! 坐在空无一人的教室里,我抬头看了看墙上的挂钟,...
    玄武之地阅读 181评论 0 0
  • //移除该视图上的说有响应者[self.view endEditing:YES]; textField的协议(De...
    张家杰仔阅读 139评论 0 0
  • 本周的主题是各种飞机:planes(美式英语airplane / 英式英语aeroplane 的简略写法,就像bi...
    April2018阅读 853评论 0 0