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

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

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

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

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

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

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

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

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

　　問：這一點我不太明白，直接對外公開，使用者直接訪問不是更方便么？

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

　　首先，我們在使用此類平臺時，通常會有一個擔(dān)憂，就是要將自己的圖標(biāo)托管在不受控的第三方平臺上，如果有一天平臺出現(xiàn)問題時我們也必須承擔(dān)這樣的不確定性帶來的風(fēng)險。

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

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

　　問：YIcon 平臺有哪些特點和優(yōu)勢？

　　杜瑤：我把最突出的特點概況為幾點：

　　字體編碼固定；

　　字體編碼可回收；

　　不可用編碼白名單功能；

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

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

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

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

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

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

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

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

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

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

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

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

　　截至目前，去哪兒網(wǎng)不論是 PC，Touch，Native，Hybrid， RN 的項目都已默認使用 Iconfont，而不再使用圖片作為圖標(biāo)。甚至設(shè)計師也不再需要重復(fù)設(shè)計或者拷貝了，因為他們可以安裝這份字體直接使用。

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

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

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

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

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

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

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

　　問：你覺得這個平臺最神奇的地方是什么？

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

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

　　規(guī)?；偸菚砀嗟男枨蠛头答?。當(dāng)然，這個項目也不例外，在線上運行了沒多久之后，很多不穩(wěn)定性的因素就暴露出來了，這也包括一些設(shè)計上的缺陷。后續(xù)在這個基礎(chǔ)上修修補補，大概跑了1年多，基本上就到了舉步維艱的階段了。不推倒重來，這就是一個定時炸彈，說不定什么時候就給你一個“驚喜”。

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

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

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

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

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

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

　　讓業(yè)務(wù)線的 UI 負責(zé)人或者對設(shè)計有話語權(quán)的人作為圖標(biāo)庫的管理員，因為他（她）賦有圖標(biāo)審核的權(quán)限。

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

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

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

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