一次關(guān)于IconFont的調(diào)研

上周在虎哥的直播上承諾放出調(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.1M2X系列的圖片大小約為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)

  1. 減小體積挚赊,字體文件比圖片要小
  2. 圖標(biāo)保真縮放诡壁,解決2x/3x乃至將來(lái)的nx圖問(wèn)題
  3. 方便更改顏色大小,圖片復(fù)用

不足

  1. 適用于純色icon
  2. 需要維護(hù)字體庫(kù)

字體管理

既然設(shè)計(jì)到字體荠割,我們就要制作字體欢峰,制作字體有兩種辦法,一種是自己手動(dòng)去做比如使用FontForge工具涨共,另外一種是托管到阿里的iconfont平臺(tái)纽帖,我們的UE做字體設(shè)計(jì)完全沒(méi)有意義,可以托管給平臺(tái)举反。 托管給平臺(tái)的好處:

  1. 大大的降低了接入難度
  2. 更方便項(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)的即可)魁索,

06
,解壓后的文件夾有一個(gè)字體文件融撞,雙擊安裝。 mac和windows都有對(duì)應(yīng)的工具管理字體
07
粗蔚。
近20張icon只占用了10k的資源空間尝偎,占用空間極小
08

具體的代碼我們這里不再贅述,后面的demo具體展示, 不過(guò)我們要講一講使用的方案

  1. UILabel作為Icon
  2. UIButton的titleLabel作為Icon
  3. 根據(jù)字體生成UIImage

鑒于將我們本來(lái)的icon當(dāng)作字體使用致扯,會(huì)讓我們?cè)陧?xiàng)目中添加的控件方式有所變化肤寝,而且不容易控制顏色和圖標(biāo)大小。所以我這里推薦第三種方案抖僵。

更詳細(xì)的方案是我們建立字體組件鲤看。將這一塊功能單獨(dú)管理,便于后期迭代和維護(hù)耍群,而且屏蔽底層使用直接暴露出對(duì)應(yīng)的圖片接口可以讓上層無(wú)感使用义桂。

后期如何接入

首期工作

這里建議拿掌鏈下手:原因有一下幾點(diǎn)

  1. 掌鏈面向?qū)嶋H用戶,做出來(lái)的效果更明顯
  2. 掌鏈的APP安裝包也最大蹈垢,也最有瘦身的價(jià)值
  3. 掌鏈在經(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

使用IconFont減小iOS應(yīng)用體積


華麗的分割線


溝通結(jié)果

經(jīng)過(guò)溝通發(fā)現(xiàn)掌上鏈家并不太適合這樣的方式帽蝶,原因如下

  1. 之前的icon很多是用ps做的 如果改用iconfont很多圖層效果無(wú)法實(shí)現(xiàn)

  2. 即便新的icon用Sketch制作矢量圖,但是icon在掌鏈中能制作矢量圖的占比較小块攒,且對(duì)設(shè)計(jì)的人力要求過(guò)大励稳。

  3. 位圖(png,jpg)等才是占用資源大戶囱井。
    后期考慮的方案

  4. 壓縮大圖 推薦使用PPDUCK(收費(fèi)) imageOption驹尼,[]tinyPng](https://www.baidu.com/link?url=KkC7lFY89TwZELeYuV93DGrVaUInl3IYeq69FIHm0vp6mG8NrKBif_ewcW-9aZKC&wd=&eqid=cf83ff7b00071ce80000000358d65ecf)

  5. 刪除重復(fù)資源(上海鏈家合并期間部分資源重復(fù),但是由于工期太短沒(méi)有剔除)

  6. 替換舊icon ,且可以統(tǒng)一UI風(fēng)格

嘗試

我嘗試使用了上面推薦的三個(gè)壓縮軟件進(jìn)行壓縮庞呕,對(duì)比如下

  1. imageOption可以使圖片減少30%左右新翎,但是壓縮巨慢,壓縮2500張圖片耗費(fèi)12H以上并且,CPU一直維持在70%左右料祠,但是圖片是無(wú)損壓縮骆捧,可以放心使用
  2. 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)一次括饶。
  3. 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上面供參考了坞靶;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末憔狞,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子彰阴,更是在濱河造成了極大的恐慌瘾敢,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,718評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異簇抵,居然都是意外死亡庆杜,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)碟摆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)晃财,“玉大人,你說(shuō)我怎么就攤上這事典蜕《鲜ⅲ” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 158,207評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵愉舔,是天一觀的道長(zhǎng)钢猛。 經(jīng)常有香客問(wèn)我,道長(zhǎng)轩缤,這世上最難降的妖魔是什么命迈? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,755評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮火的,結(jié)果婚禮上壶愤,老公的妹妹穿的比我還像新娘。我一直安慰自己卫玖,他們只是感情好公你,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,862評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著假瞬,像睡著了一般陕靠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上脱茉,一...
    開(kāi)封第一講書(shū)人閱讀 50,050評(píng)論 1 291
  • 那天剪芥,我揣著相機(jī)與錄音,去河邊找鬼琴许。 笑死税肪,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的榜田。 我是一名探鬼主播益兄,決...
    沈念sama閱讀 39,136評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼箭券!你這毒婦竟也來(lái)了净捅?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,882評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤辩块,失蹤者是張志新(化名)和其女友劉穎蛔六,沒(méi)想到半個(gè)月后荆永,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,330評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡国章,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,651評(píng)論 2 327
  • 正文 我和宋清朗相戀三年具钥,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片液兽。...
    茶點(diǎn)故事閱讀 38,789評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡骂删,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抵碟,到底是詐尸還是另有隱情桃漾,我是刑警寧澤坏匪,帶...
    沈念sama閱讀 34,477評(píng)論 4 333
  • 正文 年R本政府宣布拟逮,位于F島的核電站,受9級(jí)特大地震影響适滓,放射性物質(zhì)發(fā)生泄漏敦迄。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,135評(píng)論 3 317
  • 文/蒙蒙 一凭迹、第九天 我趴在偏房一處隱蔽的房頂上張望罚屋。 院中可真熱鬧,春花似錦嗅绸、人聲如沸脾猛。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,864評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)猛拴。三九已至,卻和暖如春蚀狰,著一層夾襖步出監(jiān)牢的瞬間愉昆,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,099評(píng)論 1 267
  • 我被黑心中介騙來(lái)泰國(guó)打工麻蹋, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留跛溉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,598評(píng)論 2 362
  • 正文 我出身青樓扮授,卻偏偏與公主長(zhǎng)得像芳室,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子刹勃,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,697評(píng)論 2 351

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,858評(píng)論 25 707
  • 本文會(huì)不定期更新堪侯,推薦watch下項(xiàng)目。如果喜歡請(qǐng)star深夯,如果覺(jué)得有紕漏請(qǐng)?zhí)峤籭ssue抖格,如果你有更好的點(diǎn)子可以...
    天之界線2010閱讀 18,200評(píng)論 19 153
  • 我曾不止一次地問(wèn)自己诺苹,我來(lái)自哪里,將去往何處雹拄,路上又將有誰(shuí)作伴收奔! 坐在空無(wú)一人的教室里,我抬頭看了看墻上的掛鐘滓玖,...
    玄武之地閱讀 181評(píng)論 0 0
  • //移除該視圖上的說(shuō)有響應(yīng)者[self.view endEditing:YES]; textField的協(xié)議(De...
    張家杰仔閱讀 139評(píng)論 0 0
  • 本周的主題是各種飛機(jī):planes(美式英語(yǔ)airplane / 英式英語(yǔ)aeroplane 的簡(jiǎn)略寫(xiě)法坪哄,就像bi...
    April2018閱讀 858評(píng)論 0 0