關於阿里巴巴的矢量圖標與傳統的雪碧圖有什麼優勢？

---

瀉藥！

先廣告一下，阿里媽媽的字體圖標現在全面遷移到新平台了 Iconfont-阿里巴巴矢量圖標庫

相對於傳統的CSS Sprites 技術，有如下幾點優勢：

1.圖標矢量化

我們在最初推行 iconfont 的時候就是為了在Retina設備上也能「絲般柔滑」，這一點圖片需要另外製作兩倍圖，而且縮放後立馬就「有碼了」。在製作上，不單單是圖標設計為兩倍就完事了，需要在整個頁面設計的時候就要是兩倍尺寸的，這對於設計師來說，成本太大（雖然這是趨勢）。

2.讓樣式回歸CSS

具體而言，就是指使用iconfont後，因為圖標就是字體。我們可以用CSS來靈活控制圖標的大小、顏色、陰影等。傳統的 CSS Sprites 我們只能重新設計後再「切圖」，雖然現在有很多自動拼合工具，但是依然繁瑣。

進一步的，如果不用兼容IE6-7後，我們完全可以用CSS偽元素來生成圖標。也就是說假如圖標編碼改變了，不用再改動HTML中的編碼，只用修改 content 中的編碼，達到真正目的上的CSS來控制圖標。

例如：cube/src/iconfont-all.css at gh-pages · thx/cube · GitHub

&

標題前面有一個圖標&

.icon-size {
content: "3436";
}


3.圖標規範化

通過iconfont平台，我們可以高效快速的生產出規範的圖標。現在可以直接通過平台上傳SVG或ESP文件，就可以轉換成字體圖標了。

4.自動上傳到阿里雲CDN

通過平台生成的字體，自動存儲到阿里雲CDN，免費加速。

5.流量最小化

在移動設備，節約流量是我們前端把控用戶體驗關鍵而又容易忽視的一個環節。通常一個項目中，我們並不需要一套大而全圖標庫，也許我只是需要其中的一個關閉按鈕(^o^)/~。通過平台可以點選自己需要的圖標，重新生成一份字體，減少字體體積，節約流量的同時帶來更快的載入速度。

說下缺點：

1.色彩單一

如果圖標是五顏六色的，那麼iconfont不適合。最多只能用CSS3做一些簡單的漸變，或者你可以蛋疼的用多個圖標疊加到一起，例如這個：Forecast Font。

再或者你還可以做中間有許多細微鏤空的字體，形成視覺上的偽多彩：

放大後就露陷了：

以上示例，都是體力活，慎入啊！

2.不同平台顯示效果參差不齊

在Windows 版 Chrome 中，顯示有些微鋸齒，IE6-7 就別要求太高了。

3.需要專門維護

顯然，http://iconfont.cn就是來解決這個的，你值得嘗試。

4.無障礙問題

如果在製作字體時，使用的不恰當的字元編碼，那麼讀屏器會讀出一個沒有實際意義的字元，對於盲人用戶來說是一個干擾。所以推薦使用 Unicode 私人使用區（Private Use Area, PUA）：平面15 (F0000–FFFFF)、平面16 (100000–10FFFF)，這部分是沒有實際字元的，通常顯示為一個方框。這方面，平台已經在優化了，下個版本可以自己定義Unicode 編碼。

---

Web上的矢量圖標目前主要有兩種方式製作，一種是`@font-face`(詳細點擊：@font-face | 博客自由標籤),另一種是SVG。這和傳統的雪碧圖(Sprites)相比具有的優勢，我個人認為有：

1. 可以通地運用於font的CSS樣式來美化或修改圖標（比如，改變圖標顏色，給圖標加陰影，放大圖標）；

2. 無需考慮具體的位置(background-position)

3.適合運用到Retina下，因為只需要修改字型大小，而無需考慮是否會因為在Retina下會失真，而Sprites是無法做到的

有關於更詳細的優勢可以閱讀此文：為什麼要用和如何使用字體圖標

但`@font-face`製作的icon也有其不足之處，就是需要載入字體文件，而這些字體文件體積都不小，從性能角度出發，或許有所不足。

以上僅是個人愚見，如有不對，煩請指點。謝謝！

---

做原型設計時，我們往往感覺圖標素材不夠用，尤其是矢量圖標不夠。那麼，這麼好用的矢量圖標，要到哪裡去找呢？

推薦幾個國內外比較常用的矢量圖標的網站。關注我的微信公眾號【EG365可視化】，後台回復「8」，矢量圖標網址全get

1. 阿里巴巴矢量圖標庫

在國內來說，http://Iconfont.cn可以說是國內設計師們的一塊寶地。這是一個由阿里巴巴的UX部門推出的在線矢量圖標分享管理平台。Iconfont平台為用戶提供在線圖標搜索、圖標分撿下載、在線儲存、矢量格式轉換、個人圖標庫管理及項目圖標管理等基礎功能。在該網站上，下載矢量圖標是不需要登錄的。

2. Easyicon

Easyicon作為圖標分享平台，在數量上可以說是國內屈指可數的，總計50萬個左右，而且數量仍然在不斷增長，在這裡還可以找到彩色的矢量圖。這個矢量圖標分享平台目前還沒有限制用戶必須登錄才能下載。

3. 懶人圖庫

懶人圖庫一直專註於提供網頁素材下載，其內容涵蓋網頁素材，矢量素材，JS廣告代碼，小圖片，網頁背景，導航菜單，PNG圖標等，讓任何一個網頁設計師都能輕鬆找到自己想要的素材！

下邊會介紹幾個國外的網站，這些網站也都提供大量的免費矢量圖標素材。

4. Freepik

Freepik是國外擁有相對較高人氣的圖片素材網站之一，每個月都會收到來自世界各地的230多個國家的超過2000萬訪問。著力於為用戶提供高質量的圖形設計，插圖和圖形資源。

5. Flaticon

Flaticon提供給用戶，高質量的圖形設計：完全可編輯的矢量由我們的設計團隊，為用戶提供豐富的內容。

這個平台上圖標的明顯不同就是，可編輯。即使是免費用戶，也提供了相應的編輯圖標的方法。如果你想成為付費用戶，也還是比較划算的，因為他們升級專業版的價格也比較低廉。

6. Vecteezy

Vecteezy號稱是世界上最大的矢量圖形社區。在這裡，你可以和來自世界各地的其他藝術家探索創作，或是為你的下一個項目找到完美的免費素材。這裡的大多數文件都是可以免費下載的，根據許可證，可以免費使用在項目中。

7. Vector 4 free

http://vector4free.com是一個網站致力於免費矢量圖形：Adobe Illustrator AI、EPS、PDF、SVG、Corel Draw CDR文件免費下載，你都可以在這裡找到。為了方便工作的需要，每一個免費的圖標都被分類並打上了標籤。

8. Mockplus

你也許會感到很奇怪，為什麼Mockplus會出現在這裡？我來告訴你吧，如果你已經升級到了Mockplus，那麼，你會在它的圖標庫中發現2600多個矢量圖標以及400多個平面圖標。你需要做的，只是點擊圖標庫，搜索一下。在線離線，網路穩定與否，完全不受影響。

關注我的微信公眾號【EG365可視化】，後台回復「8」，矢量圖標網址全get

http://weixin.qq.com/r/0kQSCsPEL55QrYdp9xHA (二維碼自動識別)

---

很多朋友都很佩服阿里巴巴的設計師們，是怎麼找到哪些製作圖片圖標的素材的，這裡小編就說一下，他們有自己的專屬矢量圖標庫，我們也可以使用哦，設計師將圖標上傳到Iconfont平台，用戶可以自定義下載多種格式的icon，平台也可將圖標轉換為字體，便於前端工程師自由調整與調用

阿里巴巴矢量圖標庫功能特色

1、圖標素材多，總數超過百萬。

2、圖標素材都非常精緻、漂亮，基本全部都是極具設計天賦的設計師精心製作而成的

3、所有素材全部可免費下載，你只需登錄微博賬號即可。

4、獨特的圖標DIY功能，可以在線對圖標大小、顏色等等進行修改。

5、賬號功能豐富，可收藏你喜歡的圖標以及上傳你的圖標作品等等。

---

推薦閱讀：