可部署矢量字體圖標管理平臺YIcon分析
“2017年3月28日陽光明媚的午后，在 Qunar 維亞大廈陽光房會議室內，去哪兒網首次就在 Iconfont 上的應用和藝龍進行了深入交流，并重點介紹了去哪兒網移動架構團隊打造的新型 Iconfont 平臺—— YIcon。”
本文嘉賓是去哪兒網前端高級總監杜瑤，以下為正文：
問：從本次與藝龍的交流中我們了解到在去哪兒有一套關于圖標、字體管理的平臺，它有效地提高了去哪兒前端在開發中的的工作效率，它叫 YIcon，你能和我們說說它到底是什么嗎？另外，它與 Iconfont 有什么關系呢？
杜瑤：YIcon 是一個開源的集圖標上傳、審核、展示、字體生成、字體圖標項目管理于一身的綜合性平臺。
Iconfont 是大家所熟知的一個概念，通常把自定義字體以及所有使用自定義字體來實現圖標的相關技術，都概括性的統稱為 Iconfont。就字面意思來看的話，如果將它拆成 Icon 和 Font 兩部分，也非常容易理解了，即圖標和字體。
YIcon 實質上是一個讓 Iconfont 變得更易使用的一個平臺，YIcon 所做的一切都是為了給 Iconfont 服務的。
問：我知道阿里有一個公開的 Iconfont 平臺，你覺得它與去哪兒網的 YIcon 最大的區別是什么？
杜瑤：從作用和意義上來講，這兩者之間并沒有本質區別，都是提供字體圖標管理的平臺。但從平臺設計和定位上，YIcon 有很多不一樣的考慮：
YIcon 并沒有像阿里的 Iconfont 平臺那樣，提供一個公開可訪問地址供所有人去上傳和管理圖標。YIcon 更像是 Gitlab 應用程序，允許任何個人或者公司去獲取這個程序并進行安裝部署，搭建一個私有 Iconfont 平臺。
問：這一點我不太明白，直接對外公開，使用者直接訪問不是更方便么？
杜瑤：是啊，雖然直接部署在外網讓所有人都可以直接操作使用有一定的便捷性，而且可能更容易推廣，但是我們并沒有這樣做其實是經過多方面考慮的。
首先，我們在使用此類平臺時，通常會有一個擔憂，就是要將自己的圖標托管在不受控的第三方平臺上，如果有一天平臺出現問題時我們也必須承擔這樣的不確定性帶來的風險。
我知道有非常多的公司都對 Iconfont 有需求，但這種不確定性風險肯定也在他們的考慮之內，所以我在想我們能不能為大家提供一種更好的選擇。比如像 Gitlab 那樣，大家都可以自行搭建自己的 Iconfont 平臺，那么這個可能的風險就不存在了。同時這樣的平臺也能更加符合自己公司的需求，更落地，更重要的是可控！
因此，YIcon 就定位成了可部署的應用。為了方便接入，YIcon 還提供了多種類型的登錄接口，這可以讓 YIcon 輕松的與各公司的用戶系統對接，或進行二次開發。
問：YIcon 平臺有哪些特點和優勢？
杜瑤：我把最突出的特點概況為幾點：
字體編碼固定；
字體編碼可回收；
不可用編碼白名單功能；
搜索功能的多樣性，可通過編碼/標簽/名稱等維度搜索圖標；
圖標上傳審核機制；
圖標項目版本管理；
用戶權限管理。
除此之外，如：開源、可部署、為不同的用戶系統提供登錄接口、提供二次開發的能力等等，也很有意思。
問：我相信大家一定對您談到的亮點很感興趣。您能不能再具體給我們講講？讓即使還沒有用過 YIcon 的伙伴也能先一睹為快。
杜瑤：那我先說說編碼固定這個特征吧！YIcon 使用了 Unicode BMP 中的私用區（ Private Use Area ），即碼值范圍為 0xE000-0xF8FF 的區段，共計 6400 個碼位。所謂私用區，指的是保留給大家放自定義字符的區域，可以簡寫為 PUA。
YIcon 之所以采用編碼固定的方式，是基于簡單可依賴的策略來制定的。這么做的好處在于：一個圖標對應的編碼永遠都是相同的，不會因為項目的變動或者成員的修改而導致某個圖標的編碼發生改變，通過這種策略避免圖標與編碼出現不匹配的情況，而不是通過人；由于 YIcon 是私有的（每個個人或者公司都可以通過 YIcon 安裝部署一個私有平臺），所以很難出現圖標超上限的情況，我很難想象，一個公司或者企業會需要使用超過 6400 個不同的圖標（ Qunar 使用這個平臺3年多了，圖標維持在 1600 個左右）。
雖然 YIcon 有嚴格的圖標審核流程，但仍然無法完全避免圖標上傳出錯或者圖標過時的問題。舉個例子，設計師上傳了一個“酒店”的圖標，管理員也審核通過了，過了幾天，該設計師覺得這個圖標其中的一處線條太細了，修改了一遍，此時他可以直接替換原有的“酒店”圖標，而不需要上傳一個“相似”的“新酒店”圖標，這種編碼回收的策略，可以盡可能的減少編碼的浪費。
再說說圖標項目版本管理吧！在 YIcon 中，圖標項目每次變動之后再下載時，就會生成一個新的版本，你可以追溯和查看這個項目產生的所有版本，每一個圖標的新增或移除操作都會被清晰記錄下來，這也算是一個比較貼心的設計吧！
問：了解的越多越覺得這個平臺真的很強大，所以能夠大大提升工作效率這個說法一點也不假！不過話說回來，我相信大家更關心的是目前 YIcon 的應用效果怎么樣？
杜瑤：YIcon 在去哪兒網的誕生和廣泛應用，是又一次解放多端生產力的有效率嘗試。
截至目前，去哪兒網不論是 PC，Touch，Native，Hybrid， RN 的項目都已默認使用 Iconfont，而不再使用圖片作為圖標。甚至設計師也不再需要重復設計或者拷貝了，因為他們可以安裝這份字體直接使用。
YIcon 已經開源一段時間了，目前已有不少公司在應用該平臺。已實現基本覆蓋國內在線旅游行業，如：去哪兒，攜程，就旅行，當然還有正計劃使用的藝龍等公司。
YIcon 并不止步于旅游行業，目前互聯網金融行業的積木盒子，BBAE 等、零售便利店行業的便利蜂等也均已引入該平臺，除此之外，還有一些如：在線醫療，在線教育公司也在投入使用。
問：平臺能有現在這樣的影響力，這更讓我好奇是什么原因讓你們想做這樣一個平臺呢？
杜瑤：前端工程師總是在不斷的摸索中前行、進步，這當然也包括去哪兒網的前端工程師。
很早之前，我們前端就有童鞋在項目中使用 Iconfont 字體圖標來代替圖片。那時候，大家通常會選用 Font Awesome、 IcoMoon 或者 Bootstrap 之類的知名庫，再后來有了國產良心產品：阿里巴巴矢量圖標庫。
那時去哪兒網在使用 Iconfont 這件事上還屬于非常粗放的階段，沒有硬性的要求也沒有使用的標準，比較隨意。這讓我萌生了在去哪兒網也做一個類似阿里巴巴的矢量圖標庫的想法。
依稀記得是2014年，恰逢應屆生培訓（每個應屆生正式入職前有3個月的脫產培訓，包括技術，開發流程，企業文化等各個方面），每期培訓結束前會安排應屆生做真實的項目（類似學校的畢業設計）。就是那個時候我的想法成為了應屆生項目的課題之一，這就是 YIcon 的起源，其實當時的我并沒有想到 YIcon 今天能被如此廣泛的應用。
問：你覺得這個平臺最神奇的地方是什么？
杜瑤：不能說是神奇吧，但讓我覺得驚喜的地方還是有的，主要體現在規模化效應和事業部快速落地這兩點上。
前面提到 YIcon 的前身其實是一個比較粗糙的前端應屆生項目，并非一個正式立項的產品，整個開發周期大概在2周左右。然而即便是這樣，在其剛上線沒多久，就有不少事業部業務線紛紛響應，并在極短的時間內，就形成了較大的應用規模。這個情況顯然超出了我的預期，因為極少有應屆生項目能在這么短的時間內就被如此廣泛的應用。
規模化總是會帶來更多的需求和反饋。當然，這個項目也不例外，在線上運行了沒多久之后，很多不穩定性的因素就暴露出來了，這也包括一些設計上的缺陷。后續在這個基礎上修修補補，大概跑了1年多，基本上就到了舉步維艱的階段了。不推倒重來，這就是一個定時炸彈，說不定什么時候就給你一個“驚喜”。
2015年底-2016年初的時候，經過反復思量，我決定從頭再來！于是把需求重新 Review 了一遍，不僅結合各業務線的使用反饋還植入了更多新鮮的特性。團隊這才開始重新打造，并將這個項目正式命名為 YIcon。
2.5個開發，歷時約一個半月，YIcon 終于煥然一新的出現在了大家的面前。界面、交互、各功能都發生了非常大的變化。此時的 YIcon 已經是基于可安裝部署的方式在做了，內部運行了一段時間后，我們便在了 Github 上將其開源了。
問：剛剛我們聊了很多關于 YIcon 的特點和優勢，也讓我們更加深入地了解了平臺的強大功能，不過我相信再完美的平臺也會有需要不斷優化的地方這一定也是讓 YIcon 繼續完善的動力。今天有幸能采訪您，我也想替廣大的新老用戶問問，該平臺已上線運營了這么長時間，作為 YIcon 項目負責人的您有沒有可以提醒使用者注意的地方呢？
杜瑤：其實目前 YIcon 平臺已進入成熟階段，在使用過程中也是越來越穩定，不過有些使用細節還是可以提醒一下的：
不要浪費編碼，上傳無意義的圖標；
建一個通用圖標庫，避免不同的圖標庫里有太多雷同的圖標；
讓業務線的 UI 負責人或者對設計有話語權的人作為圖標庫的管理員，因為他（她）賦有圖標審核的權限。
除此之外，我們后續仍然會廣泛的接受大家所提交的 Issues 或 PR。這段時間以來，陸陸續續有不少公司的小伙伴給 YIcon 帶來了一些非常有意思的建議和需求，我相信 YIcon 會變得越來越好。
問：今天咱們的采訪其實也接近尾聲了，相信這篇采訪稿推送后，會有更多的人對 YIcon 感興趣，所以最后再跟我們說說怎么接入吧？
杜瑤：為了方便大家使用和安裝部署，我們提供了一個 YIcon 文檔：以供大家查閱。
非常好我支持^.^
(0) 0%
不好我反對
(0) 0%