有一個英文單詞叫做a is worth a words（ words），不知道大家有沒有聽說過呢？ 這意味著一張靜態(tài)圖片可以表達(dá)一個復(fù)雜的概念，或者一張與主題相關(guān)的圖片有時可以比詳細(xì)解釋更有效地描述主題。 - “一張圖片勝過一千個單詞”維基百科

如果要用一句話來解釋圖標(biāo)的作用，沒有比這個詞更合適的詞了。 在這篇文章中，讓我們談?wù)勱P(guān)于圖標(biāo)的一些事情。

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

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

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

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

一般來說，小公司或者獨(dú)立開發(fā)者會采用第一種工作流程。 小型組織或公司通常采用第二種方法，因?yàn)樗麄儞碛懈鼜?qiáng)大的團(tuán)隊(duì)和資源，以獲得更多的自主權(quán)并提高企業(yè)VI（企業(yè)視覺識別）的能力。

但無論哪種方式，都涉及兩個角色：設(shè)計(jì)師和網(wǎng)絡(luò)開發(fā)人員。 只是在第一種工作方式中，設(shè)計(jì)師是不可見的。

圖標(biāo)的設(shè)計(jì)與使用

設(shè)計(jì)階段一般由不懂網(wǎng)頁開發(fā)的設(shè)計(jì)師完成。 他們會根據(jù)產(chǎn)品的需求，畫出符合產(chǎn)品需求的圖標(biāo)，然后交給網(wǎng)頁開發(fā)人員使用。

（官網(wǎng)“”圖標(biāo)）

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

三個圖標(biāo)的常用使用方法

1.使用圖片

將設(shè)計(jì)師單獨(dú)繪制的圖標(biāo)以PNG格式直接導(dǎo)入，是最直觀的圖標(biāo)封裝形式。

（圖標(biāo)）

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

弱點(diǎn)是：

開發(fā)者收到這樣的圖標(biāo)后，通常需要將其合成為圖片，方便制作精靈圖。 這個過程可以由開發(fā)者自己完成，也可以由設(shè)計(jì)者來完成（設(shè)計(jì)者可以按照源文件中心導(dǎo)入一個包含所有圖標(biāo)的PNG文件來制作）。

有很多制作精靈貼圖的工具。 我比較常用的在線精靈圖工具有：牛，或者平臺下的創(chuàng)建工具插件，比如：-。

2.直接使用svg

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

設(shè)計(jì)師可以借助設(shè)計(jì)繪圖軟件（AI、PS）輕松導(dǎo)入SVG格式的圖標(biāo)/圖片。

但是目前國外的svg還沒有被廣泛使用。 原因是兼容性不夠，不能很好的兼容舊版IE和一些原生瀏覽器。

（我可以使用 vg 嗎？）

上圖是百度對2017年前三個月瀏覽器使用情況的統(tǒng)計(jì)，目前國外超過20%的用戶還在使用IE8、9甚至IE7。

3.

是目前最流行的圖標(biāo)解決方案。 顧名思義，它是一個字體文件。 您可以使用任何字體編輯工具打開它。 如果你打開某一個查看，你會發(fā)現(xiàn)是一些路徑。 這個路徑可以用在AI、PS、等軟件中進(jìn)行素描。

優(yōu)點(diǎn)是可以用CSS控制樣式，無限縮放不失真，支持IE7+，有屏幕閱讀器，缺點(diǎn)是不能支持彩色圖標(biāo)（有多種顏色的圖標(biāo)）。 得到的表格也很簡單。 設(shè)計(jì)師通過AI/PS將圖標(biāo)轉(zhuǎn)成SVG文件，然后開發(fā)者通過工具（在線或本地）轉(zhuǎn)成SVG文件，例如：美國的.io，國外的.cn，開源創(chuàng)建工具 插件有 gulp - 等等。

形成一個適合web開發(fā)的圖標(biāo)

“制作適合Web開發(fā)的圖標(biāo)”是我們這篇文章的重點(diǎn)。

1.使用圖片

如果開發(fā)者直接使用圖片，就比較簡單了。 設(shè)計(jì)師只需要為普通屏和屏幕設(shè)計(jì)兩組畫面（單畫面和雙畫面）。

以國外某知名英文小說閱讀網(wǎng)站為例，其會針對不同設(shè)備使用不同倍數(shù)的logo圖片，以保證此類屏幕下的清晰度。

.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)于向SVG的轉(zhuǎn)換，這里有Sara在2015年的報(bào)告《Sara: (and)》（視頻需要翻墻）。 如果不方便，Sara有一篇博客“Web”，里面對SVG導(dǎo)入有更詳細(xì)的解釋其實(shí)還有一篇國外翻譯的文章“ of and SVG”，最后推薦一篇作者寫的“”關(guān)于 AI 導(dǎo)入 SVG 的 Adob??e 工程師。

以上資料sketch導(dǎo)出svg圖標(biāo)，我覺得還是看視頻比較直觀，順便感受一下這位優(yōu)秀的阿拉伯男性后端開發(fā)工程師（也是自由畫家和演講者）的風(fēng)采。

博客和視頻都提到了導(dǎo)入SVG需要注意的點(diǎn)。 限于篇幅，這里給出三個提示：

您是否曾經(jīng)在網(wǎng)頁中嵌入 SVG，給定高度和厚度，卻發(fā)現(xiàn)它比您指定的要小？ 開發(fā)人員經(jīng)常會遇到這樣的問題。

通常sketch導(dǎo)出svg圖標(biāo)，這是由于 SVG 視口中有一定大小的紅色空白區(qū)域所致。 窗口根據(jù)樣式表的指定規(guī)范顯示，并且它上面有額外的空間 - 圖形周圍 - 這使您的圖像看起來“縮小”了，因?yàn)檫@個空間占用了窗口上的空間。 為防止出現(xiàn)這些情況，您需要確保您的畫板足夠大以容納圖像，而不是太大。

畫板的規(guī)格就是導(dǎo)入的SVG窗口的規(guī)格，畫板上的所有空白最終都會變成窗口中的紅色空白。

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

建議使用上面顯示的選項(xiàng)來生成適合 Web 使用的 SVG。 如果您不想使用網(wǎng)絡(luò)字體，可以選擇將文本轉(zhuǎn)換為輪廓。

如果 SVG 包含大量文本，這個選項(xiàng) 可以大大減小 svg 的大小。

一般建議從圖形編輯器導(dǎo)入SVG后使用單獨(dú)的優(yōu)化工具進(jìn)行優(yōu)化。 如：刪除無用and、簡化代碼、簡化單一路徑等。推薦第三方工具：工具、AI插件SVG-NOW、插件Svgo-等，請參考Sara的文章《SVGO》 []工具”。

3.

后者一般是SVG通過工具轉(zhuǎn)換而來，如果開發(fā)需要用來顯示圖標(biāo)，對于導(dǎo)入的SVG有一些特殊要求。 在本文的后半部分，我已經(jīng)介紹了幾種轉(zhuǎn)換工具。 每個工具都有詳細(xì)的文檔來解釋SVG繪圖的規(guī)則。 雖然不盡相同，但有一些基本原則是一致的：

將文本轉(zhuǎn)換為路徑

不允許圖像（字體只是路徑）

修剪畫板（toart）（前面介紹過）

將蒙版轉(zhuǎn)換為閉合形狀

簡化無用節(jié)點(diǎn)

……

更多書法規(guī)則請參考：.cn文檔、文檔、gulp-文檔、文檔。

及時頻繁的溝通

Sara 曾說過：“設(shè)計(jì)師和開發(fā)人員應(yīng)該是好同學(xué)?！?/p>

我們明天的話題，就涉及到這兩個人物。 看起來你會覺得他們兩個明顯“不和”，但又好像又不是。 請看下圖，敏捷開發(fā)過程中不同的角色分工負(fù)責(zé)，設(shè)計(jì)師和開發(fā)人員也不例外。

（敏捷開發(fā)中不同角色分工負(fù)責(zé)）

在工作中，你會發(fā)現(xiàn)很多設(shè)計(jì)師都了解 HTML、CSS，甚至了解如何使用視圖元素。 同時，很多開發(fā)者也對設(shè)計(jì)頗有研究和興趣。 并且我們的設(shè)計(jì)人員和開發(fā)人員會坐在同一個椅子上，共同完成工作，保證及時和頻繁的需求溝通與合作。

至于“設(shè)計(jì)師和開發(fā)者應(yīng)該是好同學(xué)”，作為一名Dev，我和很多設(shè)計(jì)師是同學(xué)（至少我是這么認(rèn)為的）。

為了更好的順暢溝通和分擔(dān)責(zé)任，出現(xiàn)了一個新的（比較新的）角色UIDev，如右圖所示。 不過對于這個角色的定義眾說紛紜，這里就不多說了。

（UI 引用自 Stack 答案）

結(jié)尾

在本文中，我們討論了三種使用圖標(biāo)的方式：圖像、SVG，它們只是圖標(biāo)主題的冰山一角。 其實(shí)空間很短，但保證團(tuán)隊(duì)中的設(shè)計(jì)人員和開發(fā)人員能夠方便地協(xié)作，共同找到滿足團(tuán)隊(duì)需求的解決方案尤為重要，這是保證圖標(biāo)質(zhì)量的關(guān)鍵。

如有侵權(quán)請聯(lián)系刪除！