前端不止：請告訴我，你要什么樣的圖標
有一個英語成語叫做一畫勝千言（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 視頻需要FQ），如果不方便，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，而它們也只是圖標這個話題的冰山一角。雖然篇幅很短，但尤其重要的是，保證團隊中設計師和開發人員便捷的協作工作，一起找到滿足團隊需求的解決方案，才是保證圖標質量的關鍵。
