上周在虎哥的直播上承諾放出調(diào)研IconFont的經(jīng)過(guò)短荐,周末就堅(jiān)持者寫(xiě)完這個(gè)吧倚舀。
調(diào)研原因
用戶在APP Store下載需要的APP,APP包體積是一個(gè)用戶比較敏感的數(shù)據(jù)搓侄,過(guò)大的APP會(huì)對(duì)產(chǎn)品的推廣產(chǎn)生不良的影響瞄桨,比如:占用過(guò)大的手機(jī)存儲(chǔ)空間。下載消耗較多網(wǎng)絡(luò)流量(即便是wifi讶踪,后續(xù)也可能因?yàn)樯?jí)過(guò)程較為緩慢,導(dǎo)致用戶長(zhǎng)時(shí)間不升級(jí)泊交,造成市面上的軟件版本碎片化嚴(yán)重)乳讥。所以減少APP體積會(huì)帶來(lái)很多正面影響柱查。
掌鏈現(xiàn)狀
我們以
掌上鏈家APP7.7.0
舉例分析: 現(xiàn)在在Itunes Store下載的IPA體積大約在91.1M
,即便?
公司在iOS9之后新增了APP Slicing
功能云石,在我自己的iPhone 6 Plus下載的APP安裝包依然達(dá)到了81.7M
. 安裝包瘦身主要包含資源瘦身和代碼段瘦身唉工,這篇文章主要調(diào)研資源瘦身。
資源的主要部分就是圖片汹忠,請(qǐng)看下面數(shù)據(jù)
我們把iPA解壓之后里面的Assert.car
資源包的體積大約在34.1M
淋硝。 使用軟件導(dǎo)出內(nèi)部的資源文件發(fā)現(xiàn)3X系列的圖片
大小約為18.1M
,2X系列的圖片
大小約為19.4M
宽菜,兩份加起來(lái)大于34.1M是因?yàn)檐浖?dǎo)出的圖片部分沒(méi)有后綴名默認(rèn)兩份都會(huì)存在谣膳。所以可以看出我們的圖片還是有很大的優(yōu)化空間的。
相關(guān)數(shù)據(jù)請(qǐng)看以下圖片
IconFont
首先要介紹下矢量圖铅乡。
鑒于矢量圖占用尺寸小继谚,放大不失真,我們完全可用一套圖來(lái)替換iOS傳統(tǒng)的2x和3x系列圖片阵幸,不僅僅是iOS花履,Android平臺(tái)也不用切多份圖了。
優(yōu)點(diǎn)
- 減小體積挚赊,字體文件比圖片要小
- 圖標(biāo)保真縮放诡壁,解決2x/3x乃至將來(lái)的nx圖問(wèn)題
- 方便更改顏色大小,圖片復(fù)用
不足
- 適用于純色icon
- 需要維護(hù)字體庫(kù)
字體管理
既然設(shè)計(jì)到字體荠割,我們就要制作字體欢峰,制作字體有兩種辦法,一種是自己手動(dòng)去做比如使用FontForge工具涨共,另外一種是托管到阿里的iconfont平臺(tái)纽帖,我們的UE做字體設(shè)計(jì)完全沒(méi)有意義,可以托管給平臺(tái)举反。 托管給平臺(tái)的好處:
- 大大的降低了接入難度
- 更方便項(xiàng)目管理懊直。和RD對(duì)接更方便
而且iconFont可以和fontForge雙重使用,F(xiàn)ontForge工具可以再壓縮這個(gè)字體文件火鼻。榨干最后一點(diǎn)剩余空間室囊。
DEMO
在iconfont平臺(tái)建立一個(gè)項(xiàng)目,隨便去購(gòu)買(mǎi)幾個(gè)圖標(biāo)(免費(fèi)的即可)魁索,
近20張icon只占用了10k的資源空間尝偎,占用空間極小
具體的代碼我們這里不再贅述,后面的demo具體展示, 不過(guò)我們要講一講使用的方案
- UILabel作為Icon
- UIButton的titleLabel作為Icon
- 根據(jù)字體生成UIImage
鑒于將我們本來(lái)的icon當(dāng)作字體使用致扯,會(huì)讓我們?cè)陧?xiàng)目中添加的控件方式有所變化肤寝,而且不容易控制顏色和圖標(biāo)大小。所以我這里推薦第三種方案抖僵。
更詳細(xì)的方案是我們建立字體組件鲤看。將這一塊功能單獨(dú)管理,便于后期迭代和維護(hù)耍群,而且屏蔽底層使用直接暴露出對(duì)應(yīng)的圖片接口可以讓上層無(wú)感使用义桂。
后期如何接入
首期工作
這里建議拿掌鏈下手:原因有一下幾點(diǎn)
- 掌鏈面向?qū)嶋H用戶,做出來(lái)的效果更明顯
- 掌鏈的APP安裝包也最大蹈垢,也最有瘦身的價(jià)值
- 掌鏈在經(jīng)過(guò)組件化之后資源管理方式較為整齊慷吊,后期處理可以分次,灰度過(guò)度耘婚。 首期可能要麻煩UI同學(xué)罢浇,整理之前圖標(biāo)的對(duì)應(yīng)的SVG格式,創(chuàng)建對(duì)應(yīng)的字體庫(kù)文件沐祷。工作量可能較大(約千張icon)嚷闭。組件負(fù)責(zé)同學(xué)建立對(duì)應(yīng)組件。 推薦的模式是可以在IconFont建立項(xiàng)目組赖临,UI為owner胞锰,RD為member,方便協(xié)作和通知兢榨。
后期維護(hù)
待穩(wěn)定后嗅榕,后續(xù)迭代更加簡(jiǎn)單,只需UI同學(xué)更新對(duì)應(yīng)的圖標(biāo)吵聪,建立新字體凌那,然后組件管理者可以更新。 對(duì)APP安裝和UI與RD業(yè)務(wù)迭代效率都有很大提高吟逝。
CODE
文件夾見(jiàn)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
華麗的分割線
溝通結(jié)果
經(jīng)過(guò)溝通發(fā)現(xiàn)掌上鏈家并不太適合這樣的方式帽蝶,原因如下
之前的icon很多是用ps做的 如果改用iconfont很多圖層效果無(wú)法實(shí)現(xiàn)
即便新的icon用Sketch制作矢量圖,但是icon在掌鏈中能制作矢量圖的占比較小块攒,且對(duì)設(shè)計(jì)的人力要求過(guò)大励稳。
位圖(png,jpg)等才是占用資源大戶囱井。
后期考慮的方案壓縮大圖 推薦使用PPDUCK(收費(fèi)) imageOption驹尼,[]tinyPng](https://www.baidu.com/link?url=KkC7lFY89TwZELeYuV93DGrVaUInl3IYeq69FIHm0vp6mG8NrKBif_ewcW-9aZKC&wd=&eqid=cf83ff7b00071ce80000000358d65ecf)
刪除重復(fù)資源(上海鏈家合并期間部分資源重復(fù),但是由于工期太短沒(méi)有剔除)
替換舊icon ,且可以統(tǒng)一UI風(fēng)格
嘗試
我嘗試使用了上面推薦的三個(gè)壓縮軟件進(jìn)行壓縮庞呕,對(duì)比如下
- imageOption可以使圖片減少30%左右新翎,但是壓縮巨慢,壓縮2500張圖片耗費(fèi)12H以上并且,CPU一直維持在70%左右料祠,但是圖片是無(wú)損壓縮骆捧,可以放心使用
- PPDuck壓縮2500張圖片需要花費(fèi)5分鐘不到澎羞,效果達(dá)到了驚人的70%髓绽,但是缺點(diǎn)也很明顯,收費(fèi)??????,不過(guò)我已經(jīng)買(mǎi)了會(huì)員妆绞,有需要統(tǒng)一處理大批量的同學(xué)可以私信我,無(wú)償幫忙顺呕,一般這種需求不會(huì)經(jīng)常出現(xiàn),在某次做包體積優(yōu)化的時(shí)候才會(huì)出現(xiàn)一次括饶。
- tinyPng株茶,TinyPng的壓縮也很厲害,缺點(diǎn)是需要上傳圖片到網(wǎng)站图焰,再下載回來(lái)启盛,也很耗時(shí),且很麻煩技羔,不過(guò)github有開(kāi)源的工具TinyPng4MAC,可以使用僵闯。但是2500張經(jīng)常會(huì)讓程序Crash
總結(jié)
之所以寫(xiě)這篇文章,是想記錄一下經(jīng)過(guò)藤滥,并且向看這個(gè)文章的小伙伴們樹(shù)立一個(gè)我自己的觀點(diǎn)鳖粟。無(wú)論技術(shù)有多優(yōu)秀,我們最終是要落實(shí)到業(yè)務(wù)的拙绊,所以不要為了技術(shù)而技術(shù)向图,做事情要有始有終。很多人也會(huì)經(jīng)常有困惑說(shuō)我整天忙于業(yè)務(wù)标沪,不知道如何提升榄攀,我這里想說(shuō)的是所有人一開(kāi)始就是做業(yè)務(wù)的,那些技術(shù)大牛更是金句,只有自己意識(shí)到自己的開(kāi)發(fā)中涉及到的不足檩赢,私下補(bǔ)上自己的基本功,并且深入下去才能提高趴梢,一味的找理由說(shuō)自己業(yè)務(wù)忙沒(méi)時(shí)間學(xué)習(xí)都是借口(當(dāng)然996這樣無(wú)限制體力勞動(dòng)的公司可以走人了)漠畜。
最后代碼部分真的很簡(jiǎn)單 我就寫(xiě)了幾行代碼,最后放在GitHub上面供參考了坞靶;