可部署矢量字體圖標管理平臺YIcon分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　字體編碼固定；

　　字體編碼可回收；

　　不可用編碼白名單功能；

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

　　圖標上傳審核機制；

　　圖標項目版本管理；

　　用戶權限管理。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　　規(guī)模化總是會帶來更多的需求和反饋。當然，這個項目也不例外，在線上運行了沒多久之后，很多不穩(wěn)定性的因素就暴露出來了，這也包括一些設計上的缺陷。后續(xù)在這個基礎上修修補補，大概跑了1年多，基本上就到了舉步維艱的階段了。不推倒重來，這就是一個定時炸彈，說不定什么時候就給你一個“驚喜”。

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

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

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

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

　　不要浪費編碼，上傳無意義的圖標；

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

　　讓業(yè)務線的 UI 負責人或者對設計有話語權的人作為圖標庫的管理員，因為他（她）賦有圖標審核的權限。

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

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

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