前端不止：請告訴我，你要什么樣的圖標
有一個英語成語叫做一畫勝千言(A picture is worth a thousand words)，不知道大家有沒有聽過?它是指的是一張靜態的圖片就可表達一個復雜的概念或者與一個主題相關的圖片有時比起詳細的解釋，能夠更有效的描述有關主題。
如果我們要用一句話來說明圖標的作用，沒有比這個成語更適合的詞了。本篇文章，我們就來聊聊關于圖標的一些事情。
一個圖標的生命周期(工作流程)
關于圖標的生命周期，在我個人所經歷的開發項目中，有以下兩種：
第一種方式：圖標庫(選擇階段) -> 圖標使用(開發階段)
第二種方式：圖標設計(設計階段) -> 圖標導出(溝通階段) -> 圖標使用(開發階段)
一般來說，小公司或者獨立開發者會采用第一種工作流程。而大型組織或公司因為擁有更完善的團隊和資源，一般會采取第二種方式，能夠獲得更多自主權和建立企業VI(Visual Identity，企業視覺識別)的能力。
但無論哪種方式，都包括兩個角色：設計師和Web開發。只是在第一種工作方式中，設計師是不可見的。
圖標的設計和使用
設計階段通常是由不了解Web開發的設計師們來完成的，他們會根據產品的需要，繪出滿足需求的圖標，然后交給Web開發人員使用。
(ThoughtWorks官網“Contact with us”圖標)
為什么要先介紹圖標的使用，而一筆跳過導出過程呢?原因很簡單，因為我們需要先知道服務的對象是誰，才知道如何正確的為它服務。
常見的三種圖標的使用方式
1. 使用圖片
直接將設計師畫好的圖標，以PNG格式的圖片一個個分離導出，這是最直觀的圖標打包方式。
(FlatIcon圖標)
它的優點是：
- 能夠使用彩色的圖標
- 能夠支持大部分瀏覽器
缺點是：
- 圖標大小是固定的(不能根據場景自由縮放)
- Retina屏幕需要兩倍圖
開發人員拿到這樣的圖標，通常需要先將其合成為一張圖片，以方便制作雪碧圖，這個過程可以由開發人員自己完成，也可以由設計師來做(設計師可以根據源文件中心導出一張包含所有圖標的PNG文件制作)。
制作雪碧圖的工具有很多，我比較常用的在線雪碧圖工具是：Sprite Cow，或者是NodeJS平臺下的構建工具插件，如：webpack-spritesmith。
2. 直接使用svg
使用SVG(可縮放矢量圖形)，W3C標準是最被看好的Web端圖形解決方案。它能提供如裁剪路徑、Alpha通道、濾鏡效果等復雜渲染能力，具備傳統圖片沒有的矢量功能，還可以被記事本等閱讀器、搜索引擎訪問。
設計師可以輕松的在設計繪圖軟件(AI，PS)的幫助下導出SVG格式的圖標/圖片。
但目前，國內svg還沒有被非常廣泛的使用，原因在于兼容性不足，不能夠很好的兼容舊的IE版本和一些Android原生瀏覽器。
(Can I use svg?)
上圖為百度對2017年前三個月的瀏覽器使用進行的統計，目前國內還有超過20%的用戶仍在使用IE8，9甚至是IE7。
3. IconFont
IconFont是目前最為流行的圖標解決方案，顧名思義，它就是字體文件，你可以用任何一個字體編輯工具打開它，如果你打開某一個查看，就會發現它就是一些路徑，這些路徑可以用AI，PS，Sketch等軟件來繪制。
IconFont的優點在于能夠用CSS控制樣式，無限縮放而不失真，支持IE7+，兼顧屏幕閱讀器，不過缺點是不能支持彩色圖標(擁有多種顏色的圖標)。獲得IconFont的方式也很簡單，設計師將圖標通過AI/PS轉成SVG文件，然后由開發人員通過工具(在線或者本地)轉換為IconFont，比如：國外的icomoon.io，國內的iconfont.cn，開源構建工具插件有gulp-iconfont等等。
產生適合Web開發的圖標
“產生適合Web開發的圖標”是我們本篇文章要關注的重點。
1. 使用圖片的方式
如果開發人員直接使用圖片，則相對簡單，設計師只需要針對普通屏幕和Retina屏幕準備兩套圖(單倍圖和兩倍圖)。
以國內某著名的中文小說閱讀網站為例，會針對不同的設備使用不同倍數的logo圖片，以保證在如Retina屏幕下的清晰度。
- .logo-wrap .logo a {
- display: block;
- width: 219px;
- height: 52px;
- background: url(/qd/images/logo.dbed5.png) no-repeat;
- }
- @media not all, not all, (-webkit-min-device-pixel-ratio: 1.3), not all, (min-resolution: 1.3dppx) {
- .logo-wrap .logo a {
- background: url(/qd/images/logo3x.fd980.png) no-repeat;
- background-repeat: no-repeat;background-size: 217px;
- }
- }
- )
2. 使用SVG
關于轉換成SVG，這里就要引薦一下Sara Soueidan在Generate London 2015 Conference上的演講《Sara Soueidan: SVG for Web Designers (and Developers)》(YouTube視頻需要翻墻)，如果不方便，Sara Soueidan有一篇博客《Tips for Creating and Exporting Better SVGs for the Web》更詳細的講解了關于SVG導出的內容，當然，還有一篇國內的翻譯文章《創建和導出SVG的技巧》，最后再推薦一篇Adobe工程師michael chaize寫的關于AI導出SVG的文章《Export SVG for the web with Illustrator CC》。
在上述資料中，我覺得看視頻更直觀，順便領略一下這位優秀的阿拉伯女性前端開發工程師(兼自由作家和演講人)的風采。
博客和視頻中談到了多個點導出SVG需要注意的地方，由于篇幅限制，這里簡單描述三個tips：
(1) 選擇適合繪畫的畫板
你有在網頁上嵌入過SVG嗎，給它指定一個高度和寬度，然后發現它其實比你指定的尺寸要小?開發人員常常會遇到這樣的問題。
一般來說，這是因為SVG視窗中有一定大小的白色空白空間。視窗是按照樣式表的指定尺寸顯示的，但是它里面有額外的空白——在圖形周圍——使得你的圖片看起來好像“縮水”了，因為這塊空白在視窗里面是占空間的。為了避免這種情況，你需要確保你的畫板是剛剛好能容納里面的圖像的，不要大太多。
畫板的尺寸就是導出的SVG視窗的尺寸，所有畫板上的空白最終都會變成視窗中的白色空白。
對于沒有AI工具的開發，可以在下面的SVGO優化選項中選擇“Prefer viewBox to width/height”。
(2) 選擇合適的導出選項
上圖展示的選項是推薦的生成適合Web使用的SVG。如果你不想使用Web字體，可以選擇把文本轉換成輪廓。
如果SVG中包含大量的文字，這個選項output fewer tspan elements可以在很大程度上降低svg的大小。
(3) 優化SVG
通常是建議在把SVG從圖形編輯器中導出后，再用單獨的優化工具來進行優化。比如：刪除無用Comments和Metadata，簡化代碼，簡化單個路徑等。推薦的第三方工具：NodeJS工具svgomg，AI插件SVG-NOW，Sketch插件Svgo-compressor等，請參考Sara Soueidan的文章《Useful SVGO[ptimization] Tools》。
3. IconFont
前面提到IconFont一般是由SVG通過工具轉換而來，而如果開發最終需要使用IconFont來展示圖標，那么對于導出的SVG有一些特殊要求。我在本文的前面一小節，已經介紹了幾款IconFont的轉換工具，每一款工具都有詳細的文檔來說明SVG繪制的規則，盡管不盡相同，但有一些基本原則是一致的：
- 將文字轉換為路徑
- 不可以使用圖片(字體只是路徑)
- 修剪畫板(trimming to art boundaries)(前面已經介紹過)
- 將描邊轉化為閉合圖形
- 簡化無用的節點
- ......
更多關于IconFont的繪畫規則，請參考：Iconfont.cn文檔，Icomoon文檔，gulp-iconfont文檔，fontello文檔。
及時和頻繁的溝通
Sara Soueidan說過一句話：“設計師和開發者應該成為好朋友”。
我們今天的話題正好涉及到這兩個角色，也許你會覺得它們倆似乎有點“八竿子打不著”，但其實不是。請看下面這張圖，敏捷的開發過程中不同角色共享職責，那么設計師和開發也不例外。
(敏捷開發中不同角色共享職責)
在ThoughtWorks工作，你會發現不少設計師懂HTML，CSS，甚至如何用Chrome查看元素，同時有不少開發對設計也頗有研究和興趣。而我們的設計師和開發人員會坐在同一張桌子上一起完成工作，以保證及時和頻繁的需求溝通和合作。
至于“設計師和開發者應該成為好朋友”，作為一名Dev，我就跟好多設計師都是朋友(至少我是這么認為的)。
而為了更好的做到溝通順暢和職責共享，還出現了一種新(相對較新)的角色UI Dev，如下圖。不過，關于這個角色的定義眾說紛紜，我們就不在這里細聊了。
(UI Developer - 參考自Stack Overflow答案)
結尾
在本篇文章中，我們談了圖標的三種使用方式：圖片、SVG、IconFont，而它們也只是圖標這個話題的冰山一角。雖然篇幅很短，但尤其重要的是，保證團隊中設計師和開發人員便捷的協作工作，一起找到滿足團隊需求的解決方案，才是保證圖標質量的關鍵。
【本文是51CTO專欄作者“ThoughtWorks”的原創稿件，微信公眾號：思特沃克，轉載請聯系原作者】
