有一個英語成語叫做一畫勝千言（A picture is worth a thousand words），不知道大家有沒有聽過？它是指的是一張靜態(tài)的圖片就可表達(dá)一個復(fù)雜的概念或者與一個主題相關(guān)的圖片有時比起詳細(xì)的解釋，能夠更有效的描述有關(guān)主題。- “一畫勝千言”維基百科

　　如果我們要用一句話來說明圖標(biāo)的作用，沒有比這個成語更適合的詞了。本篇文章，我們就來聊聊關(guān)于圖標(biāo)的一些事情。

一個圖標(biāo)的生命周期（工作流程）

　　關(guān)于圖標(biāo)的生命周期，在我個人所經(jīng)歷的開發(fā)項(xiàng)目中，有以下兩種：

　　第一種方式：圖標(biāo)庫(選擇階段) -> 圖標(biāo)使用（開發(fā)階段）

　　第二種方式：圖標(biāo)設(shè)計（設(shè)計階段） -> 圖標(biāo)導(dǎo)出（溝通階段） -> 圖標(biāo)使用（開發(fā)階段）

　　一般來說，小公司或者獨(dú)立開發(fā)者會采用第一種工作流程。而大型組織或公司因?yàn)閾碛懈晟频膱F(tuán)隊(duì)和資源，一般會采取第二種方式，能夠獲得更多自主權(quán)和建立企業(yè) VI（Visual Identity，企業(yè)視覺識別）的能力。

　　但無論哪種方式，都包括兩個角色：設(shè)計師和 Web 開發(fā)。只是在第一種工作方式中，設(shè)計師是不可見的。

圖標(biāo)的設(shè)計和使用

　　設(shè)計階段通常是由不了解 Web 開發(fā)的設(shè)計師們來完成的，他們會根據(jù)產(chǎn)品的需要，繪出滿足需求的圖標(biāo)，然后交給 Web 開發(fā)人員使用。

　?。═houghtWorks 官網(wǎng)“Contact with us”圖標(biāo)）

　　為什么要先介紹圖標(biāo)的使用，而一筆跳過導(dǎo)出過程呢？原因很簡單，因?yàn)槲覀冃枰戎婪?wù)的對象是誰，才知道如何正確的為它服務(wù)。

常見的三種圖標(biāo)的使用方式

　　1. 使用圖片

　　直接將設(shè)計師畫好的圖標(biāo)，以 PNG 格式的圖片一個個分離導(dǎo)出，這是最直觀的圖標(biāo)打包方式。

　?。‵latIcon 圖標(biāo)）

　　它的優(yōu)點(diǎn)是：

• 能夠使用彩色的圖標(biāo)
• 能夠支持大部分瀏覽器

　　缺點(diǎn)是：

• 圖標(biāo)大小是固定的（不能根據(jù)場景自由縮放）
• Retina 屏幕需要兩倍圖

　　開發(fā)人員拿到這樣的圖標(biāo)，通常需要先將其合成為一張圖片，以方便制作雪碧圖，這個過程可以由開發(fā)人員自己完成，也可以由設(shè)計師來做（設(shè)計師可以根據(jù)源文件中心導(dǎo)出一張包含所有圖標(biāo)的 PNG 文件制作）。

　　制作雪碧圖的工具有很多，我比較常用的在線雪碧圖工具是：Sprite Cow，或者是 NodeJS 平臺下的構(gòu)建工具插件，如：webpack-spritesmith。

2. 直接使用 svg

　　使用 SVG（可縮放矢量圖形），W3C 標(biāo)準(zhǔn)是最被看好的 Web 端圖形解決方案。它能提供如裁剪路徑、Alpha 通道、濾鏡效果等復(fù)雜渲染能力，具備傳統(tǒng)圖片沒有的矢量功能，還可以被記事本等閱讀器、搜索引擎訪問。

　　設(shè)計師可以輕松的在設(shè)計繪圖軟件（AI，PS）的幫助下導(dǎo)出 SVG 格式的圖標(biāo)/圖片。

　　但目前，國內(nèi) svg 還沒有被非常廣泛的使用，原因在于兼容性不足，不能夠很好的兼容舊的 IE 版本和一些 Android 原生瀏覽器。

　?。–an I use svg?）

　　上圖為百度對 2017 年前三個月的瀏覽器使用進(jìn)行的統(tǒng)計，目前國內(nèi)還有超過 20% 的用戶仍在使用 IE8，9 甚至是 IE7。

3. IconFont

　　IconFont 是目前最為流行的圖標(biāo)解決方案，顧名思義，它就是字體文件，你可以用任何一個字體編輯工具打開它，如果你打開某一個查看，就會發(fā)現(xiàn)它就是一些路徑，這些路徑可以用 AI，PS，Sketch 等軟件來繪制。

　　IconFont 的優(yōu)點(diǎn)在于能夠用 CSS 控制樣式，無限縮放而不失真，支持 IE7+，兼顧屏幕閱讀器，不過缺點(diǎn)是不能支持彩色圖標(biāo)（擁有多種顏色的圖標(biāo)）。獲得 IconFont 的方式也很簡單，設(shè)計師將圖標(biāo)通過 AI/PS 轉(zhuǎn)成 SVG 文件，然后由開發(fā)人員通過工具（在線或者本地）轉(zhuǎn)換為 IconFont，比如：國外的 icomoon.io，國內(nèi)的 iconfont.cn，開源構(gòu)建工具插件有 gulp-iconfont等等。

產(chǎn)生適合 Web 開發(fā)的圖標(biāo)

　　“產(chǎn)生適合 Web 開發(fā)的圖標(biāo)”是我們本篇文章要關(guān)注的重點(diǎn)。

1. 使用圖片的方式

　　如果開發(fā)人員直接使用圖片，則相對簡單，設(shè)計師只需要針對普通屏幕和 Retina 屏幕準(zhǔn)備兩套圖（單倍圖和兩倍圖）。

　　以國內(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》更詳細(xì)的講解了關(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)采。

　　博客和視頻中談到了多個點(diǎn)導(dǎo)出 SVG 需要注意的地方，由于篇幅限制，這里簡單描述三個 tips：

（1）選擇適合繪畫的畫板

　　你有在網(wǎng)頁上嵌入過 SVG 嗎，給它指定一個高度和寬度，然后發(fā)現(xiàn)它其實(shí)比你指定的尺寸要?。块_發(fā)人員常常會遇到這樣的問題。

　　一般來說，這是因?yàn)?SVG 視窗中有一定大小的白色空白空間。視窗是按照樣式表的指定尺寸顯示的，但是它里面有額外的空白——在圖形周圍——使得你的圖片看起來好像“縮水”了，因?yàn)檫@塊空白在視窗里面是占空間的。為了避免這種情況，你需要確保你的畫板是剛剛好能容納里面的圖像的，不要大太多。

　　畫板的尺寸就是導(dǎo)出的 SVG 視窗的尺寸，所有畫板上的空白最終都會變成視窗中的白色空白。

　　對于沒有 AI 工具的開發(fā)，可以在下面的 SVGO 優(yōu)化選項(xiàng)中選擇“Prefer viewBox to width/height”。

（2）選擇合適的導(dǎo)出選項(xiàng)

　　上圖展示的選項(xiàng)是推薦的生成適合 Web 使用的 SVG。如果你不想使用 Web 字體，可以選擇把文本轉(zhuǎn)換成輪廓。

　　如果 SVG 中包含大量的文字，這個選項(xiàng) output fewer tspan elements 可以在很大程度上降低 svg 的大小。

（3）優(yōu)化 SVG

　　通常是建議在把 SVG 從圖形編輯器中導(dǎo)出后，再用單獨(dú)的優(yōu)化工具來進(jìn)行優(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 來展示圖標(biāo)，那么對于導(dǎo)出的 SVG 有一些特殊要求。我在本文的前面一小節(jié)，已經(jīng)介紹了幾款 IconFont 的轉(zhuǎn)換工具，每一款工具都有詳細(xì)的文檔來說明 SVG 繪制的規(guī)則，盡管不盡相同，但有一些基本原則是一致的：

1. 將文字轉(zhuǎn)換為路徑
2. 不可以使用圖片（字體只是路徑）
3. 修剪畫板（trimming to art boundaries）（前面已經(jīng)介紹過）
4. 將描邊轉(zhuǎn)化為閉合圖形
5. 簡化無用的節(jié)點(diǎn)
6. ……

　　更多關(guān)于 IconFont 的繪畫規(guī)則，請參考：Iconfont.cn 文檔，Icomoon 文檔，gulp-iconfont 文檔，fontello 文檔。

及時和頻繁的溝通

　　Sara Soueidan 說過一句話：“設(shè)計師和開發(fā)者應(yīng)該成為好朋友”。

　　我們今天的話題正好涉及到這兩個角色，也許你會覺得它們倆似乎有點(diǎn)“八竿子打不著”，但其實(shí)不是。請看下面這張圖，敏捷的開發(fā)過程中不同角色共享職責(zé)，那么設(shè)計師和開發(fā)也不例外。

　?。艚蓍_發(fā)中不同角色共享職責(zé)）

　　在 ThoughtWorks 工作，你會發(fā)現(xiàn)不少設(shè)計師懂 HTML，CSS，甚至如何用 Chrome 查看元素，同時有不少開發(fā)對設(shè)計也頗有研究和興趣。而我們的設(shè)計師和開發(fā)人員會坐在同一張桌子上一起完成工作，以保證及時和頻繁的需求溝通和合作。

　　至于“設(shè)計師和開發(fā)者應(yīng)該成為好朋友”，作為一名 Dev，我就跟好多設(shè)計師都是朋友（至少我是這么認(rèn)為的）。

　　而為了更好的做到溝通順暢和職責(zé)共享，還出現(xiàn)了一種新（相對較新）的角色 UI Dev，如下圖。不過，關(guān)于這個角色的定義眾說紛紜，我們就不在這里細(xì)聊了。

（UI Developer (參考自 Stack Overflow 答案)）

結(jié)尾

　　在本篇文章中，我們談了圖標(biāo)的三種使用方式：圖片、SVG、IconFont，而它們也只是圖標(biāo)這個話題的冰山一角。雖然篇幅很短，但尤其重要的是，保證團(tuán)隊(duì)中設(shè)計師和開發(fā)人員便捷的協(xié)作工作，一起找到滿足團(tuán)隊(duì)需求的解決方案，才是保證圖標(biāo)質(zhì)量的關(guān)鍵。