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