“2017年3月28日陽光明媚的午后，在 Qunar 維亞大廈陽光房會(huì)議室內(nèi)，去哪兒網(wǎng)首次就在 Iconfont 上的應(yīng)用和藝龍進(jìn)行了深入交流，并重點(diǎn)介紹了去哪兒網(wǎng)移動(dòng)架構(gòu)團(tuán)隊(duì)打造的新型 Iconfont 平臺(tái)—— YIcon?！?/p>

　　本文嘉賓是去哪兒網(wǎng)前端高級(jí)總監(jiān)杜瑤，以下為正文：

　　問：從本次與藝龍的交流中我們了解到在去哪兒有一套關(guān)于圖標(biāo)、字體管理的平臺(tái)，它有效地提高了去哪兒前端在開發(fā)中的的工作效率，它叫 YIcon，你能和我們說說它到底是什么嗎？另外，它與 Iconfont 有什么關(guān)系呢？

　　杜瑤：YIcon 是一個(gè)開源的集圖標(biāo)上傳、審核、展示、字體生成、字體圖標(biāo)項(xiàng)目管理于一身的綜合性平臺(tái)。

　　Iconfont 是大家所熟知的一個(gè)概念，通常把自定義字體以及所有使用自定義字體來實(shí)現(xiàn)圖標(biāo)的相關(guān)技術(shù)，都概括性的統(tǒng)稱為 Iconfont。就字面意思來看的話，如果將它拆成 Icon 和 Font 兩部分，也非常容易理解了，即圖標(biāo)和字體。

　　YIcon 實(shí)質(zhì)上是一個(gè)讓 Iconfont 變得更易使用的一個(gè)平臺(tái)，YIcon 所做的一切都是為了給 Iconfont 服務(wù)的。

　　問：我知道阿里有一個(gè)公開的 Iconfont 平臺(tái)，你覺得它與去哪兒網(wǎng)的 YIcon 最大的區(qū)別是什么？

　　杜瑤：從作用和意義上來講，這兩者之間并沒有本質(zhì)區(qū)別，都是提供字體圖標(biāo)管理的平臺(tái)。但從平臺(tái)設(shè)計(jì)和定位上，YIcon 有很多不一樣的考慮：

　　YIcon 并沒有像阿里的 Iconfont 平臺(tái)那樣，提供一個(gè)公開可訪問地址供所有人去上傳和管理圖標(biāo)。YIcon 更像是 Gitlab 應(yīng)用程序，允許任何個(gè)人或者公司去獲取這個(gè)程序并進(jìn)行安裝部署，搭建一個(gè)私有 Iconfont 平臺(tái)。

　　問：這一點(diǎn)我不太明白，直接對(duì)外公開，使用者直接訪問不是更方便么？

　　杜瑤：是啊，雖然直接部署在外網(wǎng)讓所有人都可以直接操作使用有一定的便捷性，而且可能更容易推廣，但是我們并沒有這樣做其實(shí)是經(jīng)過多方面考慮的。

　　首先，我們?cè)谑褂么祟惼脚_(tái)時(shí)，通常會(huì)有一個(gè)擔(dān)憂，就是要將自己的圖標(biāo)托管在不受控的第三方平臺(tái)上，如果有一天平臺(tái)出現(xiàn)問題時(shí)我們也必須承擔(dān)這樣的不確定性帶來的風(fēng)險(xiǎn)。

　　我知道有非常多的公司都對(duì) Iconfont 有需求，但這種不確定性風(fēng)險(xiǎn)肯定也在他們的考慮之內(nèi)，所以我在想我們能不能為大家提供一種更好的選擇。比如像 Gitlab 那樣，大家都可以自行搭建自己的 Iconfont 平臺(tái)，那么這個(gè)可能的風(fēng)險(xiǎn)就不存在了。同時(shí)這樣的平臺(tái)也能更加符合自己公司的需求，更落地，更重要的是可控！

　　因此，YIcon 就定位成了可部署的應(yīng)用。為了方便接入，YIcon 還提供了多種類型的登錄接口，這可以讓 YIcon 輕松的與各公司的用戶系統(tǒng)對(duì)接，或進(jìn)行二次開發(fā)。

　　問：YIcon 平臺(tái)有哪些特點(diǎn)和優(yōu)勢？

　　杜瑤：我把最突出的特點(diǎn)概況為幾點(diǎn)：

　　字體編碼固定；

　　字體編碼可回收；

　　不可用編碼白名單功能；

　　搜索功能的多樣性，可通過編碼/標(biāo)簽/名稱等維度搜索圖標(biāo)；

　　圖標(biāo)上傳審核機(jī)制；

　　圖標(biāo)項(xiàng)目版本管理；

　　用戶權(quán)限管理。

　　除此之外，如：開源、可部署、為不同的用戶系統(tǒng)提供登錄接口、提供二次開發(fā)的能力等等，也很有意思。

　　問：我相信大家一定對(duì)您談到的亮點(diǎn)很感興趣。您能不能再具體給我們講講？讓即使還沒有用過 YIcon 的伙伴也能先一睹為快。

　　杜瑤：那我先說說編碼固定這個(gè)特征吧！YIcon 使用了 Unicode BMP 中的私用區(qū)（ Private Use Area ），即碼值范圍為 0xE000-0xF8FF 的區(qū)段，共計(jì) 6400 個(gè)碼位。所謂私用區(qū)，指的是保留給大家放自定義字符的區(qū)域，可以簡寫為 PUA。

　　YIcon 之所以采用編碼固定的方式，是基于簡單可依賴的策略來制定的。這么做的好處在于：一個(gè)圖標(biāo)對(duì)應(yīng)的編碼永遠(yuǎn)都是相同的，不會(huì)因?yàn)轫?xiàng)目的變動(dòng)或者成員的修改而導(dǎo)致某個(gè)圖標(biāo)的編碼發(fā)生改變，通過這種策略避免圖標(biāo)與編碼出現(xiàn)不匹配的情況，而不是通過人；由于 YIcon 是私有的（每個(gè)個(gè)人或者公司都可以通過 YIcon 安裝部署一個(gè)私有平臺(tái)），所以很難出現(xiàn)圖標(biāo)超上限的情況，我很難想象，一個(gè)公司或者企業(yè)會(huì)需要使用超過 6400 個(gè)不同的圖標(biāo)（ Qunar 使用這個(gè)平臺(tái)3年多了，圖標(biāo)維持在 1600 個(gè)左右）。

　　雖然 YIcon 有嚴(yán)格的圖標(biāo)審核流程，但仍然無法完全避免圖標(biāo)上傳出錯(cuò)或者圖標(biāo)過時(shí)的問題。舉個(gè)例子，設(shè)計(jì)師上傳了一個(gè)“酒店”的圖標(biāo)，管理員也審核通過了，過了幾天，該設(shè)計(jì)師覺得這個(gè)圖標(biāo)其中的一處線條太細(xì)了，修改了一遍，此時(shí)他可以直接替換原有的“酒店”圖標(biāo)，而不需要上傳一個(gè)“相似”的“新酒店”圖標(biāo)，這種編碼回收的策略，可以盡可能的減少編碼的浪費(fèi)。

　　再說說圖標(biāo)項(xiàng)目版本管理吧！在 YIcon 中，圖標(biāo)項(xiàng)目每次變動(dòng)之后再下載時(shí)，就會(huì)生成一個(gè)新的版本，你可以追溯和查看這個(gè)項(xiàng)目產(chǎn)生的所有版本，每一個(gè)圖標(biāo)的新增或移除操作都會(huì)被清晰記錄下來，這也算是一個(gè)比較貼心的設(shè)計(jì)吧！

　　問：了解的越多越覺得這個(gè)平臺(tái)真的很強(qiáng)大，所以能夠大大提升工作效率這個(gè)說法一點(diǎn)也不假！不過話說回來，我相信大家更關(guān)心的是目前 YIcon 的應(yīng)用效果怎么樣？

　　杜瑤：YIcon 在去哪兒網(wǎng)的誕生和廣泛應(yīng)用，是又一次解放多端生產(chǎn)力的有效率嘗試。

　　截至目前，去哪兒網(wǎng)不論是 PC，Touch，Native，Hybrid， RN 的項(xiàng)目都已默認(rèn)使用 Iconfont，而不再使用圖片作為圖標(biāo)。甚至設(shè)計(jì)師也不再需要重復(fù)設(shè)計(jì)或者拷貝了，因?yàn)樗麄兛梢园惭b這份字體直接使用。

　　YIcon 已經(jīng)開源一段時(shí)間了，目前已有不少公司在應(yīng)用該平臺(tái)。已實(shí)現(xiàn)基本覆蓋國內(nèi)在線旅游行業(yè)，如：去哪兒，攜程，就旅行，當(dāng)然還有正計(jì)劃使用的藝龍等公司。

　　YIcon 并不止步于旅游行業(yè)，目前互聯(lián)網(wǎng)金融行業(yè)的積木盒子，BBAE 等、零售便利店行業(yè)的便利蜂等也均已引入該平臺(tái)，除此之外，還有一些如：在線醫(yī)療，在線教育公司也在投入使用。

　　問：平臺(tái)能有現(xiàn)在這樣的影響力，這更讓我好奇是什么原因讓你們想做這樣一個(gè)平臺(tái)呢？

　　杜瑤：前端工程師總是在不斷的摸索中前行、進(jìn)步，這當(dāng)然也包括去哪兒網(wǎng)的前端工程師。

　　很早之前，我們前端就有童鞋在項(xiàng)目中使用 Iconfont 字體圖標(biāo)來代替圖片。那時(shí)候，大家通常會(huì)選用 Font Awesome、 IcoMoon 或者 Bootstrap 之類的知名庫，再后來有了國產(chǎn)良心產(chǎn)品：阿里巴巴矢量圖標(biāo)庫。

　　那時(shí)去哪兒網(wǎng)在使用 Iconfont 這件事上還屬于非常粗放的階段，沒有硬性的要求也沒有使用的標(biāo)準(zhǔn)，比較隨意。這讓我萌生了在去哪兒網(wǎng)也做一個(gè)類似阿里巴巴的矢量圖標(biāo)庫的想法。

　　依稀記得是2014年，恰逢應(yīng)屆生培訓(xùn)（每個(gè)應(yīng)屆生正式入職前有3個(gè)月的脫產(chǎn)培訓(xùn)，包括技術(shù)，開發(fā)流程，企業(yè)文化等各個(gè)方面），每期培訓(xùn)結(jié)束前會(huì)安排應(yīng)屆生做真實(shí)的項(xiàng)目（類似學(xué)校的畢業(yè)設(shè)計(jì)）。就是那個(gè)時(shí)候我的想法成為了應(yīng)屆生項(xiàng)目的課題之一，這就是 YIcon 的起源，其實(shí)當(dāng)時(shí)的我并沒有想到 YIcon 今天能被如此廣泛的應(yīng)用。

　　問：你覺得這個(gè)平臺(tái)最神奇的地方是什么？

　　杜瑤：不能說是神奇吧，但讓我覺得驚喜的地方還是有的，主要體現(xiàn)在規(guī)模化效應(yīng)和事業(yè)部快速落地這兩點(diǎn)上。

　　前面提到 YIcon 的前身其實(shí)是一個(gè)比較粗糙的前端應(yīng)屆生項(xiàng)目，并非一個(gè)正式立項(xiàng)的產(chǎn)品，整個(gè)開發(fā)周期大概在2周左右。然而即便是這樣，在其剛上線沒多久，就有不少事業(yè)部業(yè)務(wù)線紛紛響應(yīng)，并在極短的時(shí)間內(nèi)，就形成了較大的應(yīng)用規(guī)模。這個(gè)情況顯然超出了我的預(yù)期，因?yàn)闃O少有應(yīng)屆生項(xiàng)目能在這么短的時(shí)間內(nèi)就被如此廣泛的應(yīng)用。

　　規(guī)?；偸菚?huì)帶來更多的需求和反饋。當(dāng)然，這個(gè)項(xiàng)目也不例外，在線上運(yùn)行了沒多久之后，很多不穩(wěn)定性的因素就暴露出來了，這也包括一些設(shè)計(jì)上的缺陷。后續(xù)在這個(gè)基礎(chǔ)上修修補(bǔ)補(bǔ)，大概跑了1年多，基本上就到了舉步維艱的階段了。不推倒重來，這就是一個(gè)定時(shí)炸彈，說不定什么時(shí)候就給你一個(gè)“驚喜”。

　　2015年底-2016年初的時(shí)候，經(jīng)過反復(fù)思量，我決定從頭再來！于是把需求重新 Review 了一遍，不僅結(jié)合各業(yè)務(wù)線的使用反饋還植入了更多新鮮的特性。團(tuán)隊(duì)這才開始重新打造，并將這個(gè)項(xiàng)目正式命名為 YIcon。

　　2.5個(gè)開發(fā)，歷時(shí)約一個(gè)半月，YIcon 終于煥然一新的出現(xiàn)在了大家的面前。界面、交互、各功能都發(fā)生了非常大的變化。此時(shí)的 YIcon 已經(jīng)是基于可安裝部署的方式在做了，內(nèi)部運(yùn)行了一段時(shí)間后，我們便在了 Github 上將其開源了。

　　問：剛剛我們聊了很多關(guān)于 YIcon 的特點(diǎn)和優(yōu)勢，也讓我們更加深入地了解了平臺(tái)的強(qiáng)大功能，不過我相信再完美的平臺(tái)也會(huì)有需要不斷優(yōu)化的地方這一定也是讓 YIcon 繼續(xù)完善的動(dòng)力。今天有幸能采訪您，我也想替廣大的新老用戶問問，該平臺(tái)已上線運(yùn)營了這么長時(shí)間，作為 YIcon 項(xiàng)目負(fù)責(zé)人的您有沒有可以提醒使用者注意的地方呢？

　　杜瑤：其實(shí)目前 YIcon 平臺(tái)已進(jìn)入成熟階段，在使用過程中也是越來越穩(wěn)定，不過有些使用細(xì)節(jié)還是可以提醒一下的：

　　不要浪費(fèi)編碼，上傳無意義的圖標(biāo)；

　　建一個(gè)通用圖標(biāo)庫，避免不同的圖標(biāo)庫里有太多雷同的圖標(biāo)；

　　讓業(yè)務(wù)線的 UI 負(fù)責(zé)人或者對(duì)設(shè)計(jì)有話語權(quán)的人作為圖標(biāo)庫的管理員，因?yàn)樗ㄋ┵x有圖標(biāo)審核的權(quán)限。

　　除此之外，我們后續(xù)仍然會(huì)廣泛的接受大家所提交的 Issues 或 PR。這段時(shí)間以來，陸陸續(xù)續(xù)有不少公司的小伙伴給 YIcon 帶來了一些非常有意思的建議和需求，我相信 YIcon 會(huì)變得越來越好。

　　問：今天咱們的采訪其實(shí)也接近尾聲了，相信這篇采訪稿推送后，會(huì)有更多的人對(duì) YIcon 感興趣，所以最后再跟我們說說怎么接入吧？

　　杜瑤：為了方便大家使用和安裝部署，我們提供了一個(gè) YIcon 文檔：以供大家查閱。

相關(guān)電子資料下載