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

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

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

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

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

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

一般來說，小公司或者獨立開發(fā)者會采用第一種工作流程。而大型組織或公司因為擁有更完善的團隊和資源，一般會采取第二種方式，能夠獲得更多自主權(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ā)人員使用。

(ThoughtWorks官網(wǎng)“Contact with us”圖標(biāo))

為什么要先介紹圖標(biāo)的使用，而一筆跳過導(dǎo)出過程呢?原因很簡單，因為我們需要先知道服務(wù)的對象是誰，才知道如何正確的為它服務(wù)。

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

1. 使用圖片

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

(FlatIcon圖標(biāo))

它的優(yōu)點是：

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

缺點是：

• 圖標(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原生瀏覽器。

(Can I use svg?)

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

3. IconFont

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

IconFont的優(yōu)點在于能夠用CSS控制樣式，無限縮放而不失真，支持IE7+，兼顧屏幕閱讀器，不過缺點是不能支持彩色圖標(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)建工具插件有g(shù)ulp-iconfont等等。

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

“產(chǎn)生適合Web開發(fā)的圖標(biāo)”是我們本篇文章要關(guā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視頻需要翻墻)，如果不方便，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來展示圖標(biāo)，那么對于導(dǎo)出的SVG有一些特殊要求。我在本文的前面一小節(jié)，已經(jīng)介紹了幾款I(lǐng)conFont的轉(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é)尾

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

【本文是51CTO專欄作者“ThoughtWorks”的原創(chuàng)稿件，微信公眾號：思特沃克，轉(zhuǎn)載請聯(lián)系原作者】

戳這里，看該作者更多好文