編輯導(dǎo)讀：圖標(biāo)是我們在制作產(chǎn)品原型的時候使用的比較多的一類素材，在日常繪制原型的時候一般是以插入的形式添加到Axure中。本文作者結(jié)合自身經(jīng)驗(yàn)，介紹了四種Axure中引入圖標(biāo)的方法，希望對大家能有所幫助。

在日常繪制原型的時候，經(jīng)常會需要插入相應(yīng)的圖標(biāo)（icon）到Axure中，但是看似好像很簡單的事情也給蠻多小伙伴造成了困擾。

現(xiàn)在很多開發(fā)團(tuán)隊(duì)都會用一些比較常見的前端框架來搭建后臺管理系統(tǒng)，例如常見的Element-UI，Ant-design，iView還有Layui等。

這些前端框架基本上都自己有一套內(nèi)置的圖標(biāo)庫，所以一些常用的編輯，刪除，設(shè)置，關(guān)閉等圖標(biāo)基本上就會直接使用。但是產(chǎn)品要繪制原型的時候，想要把這些圖標(biāo)插入到Axure中就有點(diǎn)麻煩了。

例如畫這樣一個簡單的element-UI的彈窗，在Axure中可以很簡單的做到解決一比一復(fù)原，唯一麻煩的點(diǎn)就是右上角的關(guān)閉按鈕。

如果稍微講究一點(diǎn)的朋友就會去網(wǎng)頁上截圖或者找到對應(yīng)的圖片文件然后放進(jìn)來，稍微不講究的那就直接用一個占位符表示了。

或者是直接用Axure自帶的內(nèi)置Icons拖出一個不太協(xié)調(diào)的關(guān)閉按鈕。

01 Axure插入圖標(biāo)幾種辦法

方法一：直接使用內(nèi)置Icons

這種辦法是最簡單也是最快速的，直接從內(nèi)置的元件中拖拽出來，可以調(diào)整大小和顏色，而且清晰度等也很不錯。

但是缺點(diǎn)也很明顯，那就是內(nèi)置的Icons內(nèi)容太少了，很多圖標(biāo)是上古時期的，壓根就和現(xiàn)在的主流圖標(biāo)風(fēng)格不搭。所以就連一個普通的關(guān)閉按鈕，都搭配不上，更不用談一些很有語義性的圖標(biāo)了。

方法二：圖片粘貼大法

這種辦法是最快速也是最簡單的，例如剛剛我要畫一個Element-UI的關(guān)閉按鈕，但是我從Axure內(nèi)置原件庫找不到，也不想花太多時間去找，那么我直接從網(wǎng)頁上截圖一個白底的圖片就好了，然后粘貼覆蓋在相應(yīng)的位置即可。

截圖的優(yōu)點(diǎn)是快速，簡單。缺點(diǎn)是圖片調(diào)整大小的時候不是那么精準(zhǔn)，同時圖片截圖之后是不能改顏色和粗細(xì)的。

這意味著如果我要一個藍(lán)底白字的圖標(biāo)，那就得再去網(wǎng)頁上找，或者自己F12調(diào)試相應(yīng)的樣式，然后再截圖下來。一套操作下來，還是有點(diǎn)麻煩。

方法三：Fontawesome大法

Fontawesome是一套絕佳的圖標(biāo)字體庫和CSS框架，下圖是官網(wǎng)的一些介紹。對于不太懂技術(shù)的朋友，可以把它理解成是一套集成式的字體庫圖標(biāo)，意味著每一個圖標(biāo)其實(shí)是擁有字體一樣的屬性，例如字體大小，粗細(xì)，顏色等。

有很多Axure的培訓(xùn)都會推薦使用Fontawesome的方式在Axure中插入圖標(biāo)，例如Axure培訓(xùn)大佬「小樓一夜聽春雨」就寫過類似的教程指導(dǎo)怎么使用Fontawesome，AxureUX的大梨老師也寫了很詳細(xì)的教程來指導(dǎo)怎么使用。

首先本機(jī)需要安裝相應(yīng)的字體庫，然后從Fontawesome的官網(wǎng)或者AxureUX的專門頁，復(fù)制相應(yīng)的內(nèi)容，然后再粘貼到Axure中，最后再選擇對應(yīng)的字體即可。

這種方法可以適用于絕大多數(shù)場景，基本上算是一個比較可以接受的解決方案，但是直到我裝好字體畫好圖標(biāo)，打開預(yù)覽之后，我發(fā)現(xiàn)了一個很操蛋的事情：預(yù)覽狀態(tài)下，圖標(biāo)沒有生效?。?！

有朋友肯定會說，那肯定是你自己哪里設(shè)置有問題了。

是的，剛開始我也是這樣想的，直到我花了半個多小時在網(wǎng)上找各種解決方案，我還是沒能解決這個問題的時候，我才意識到，這樣搞可能是個無底洞。

因?yàn)楫a(chǎn)品相關(guān)問題不像技術(shù)問題，會有很多論壇或者交流群，所以一些產(chǎn)品方面的技術(shù)手段出問題了，要定位問題其實(shí)很難。采用Fontawesome引入圖標(biāo)的一些案例和討論，在網(wǎng)上都找不到很多，即使我千辛萬苦解決了這個問題，可能后面還會有其他問題，這并不是我的本意。

于是我就開始審視這件事的本質(zhì)，我本來就是想畫一個大概的圖標(biāo)來表示這個地方用了什么樣的圖標(biāo)，而我選擇用Fontawesome之后。一方面我要下載字體，其次我要在發(fā)布的時候鏈接CSS地址防止別人的電腦上看原型的時候丟失字體，而且我找到的字體其實(shí)也并不是和前端框架百分百一樣的內(nèi)容，最后我還在自己本地電腦上還預(yù)覽不成功，我丟，那我還用這玩意干啥？

Fontawesome確實(shí)很強(qiáng)，但是也確實(shí)有點(diǎn)點(diǎn)麻煩，麻煩的并不是一開始裝字體和發(fā)布的時候配置好CSS鏈接，而是這一頓操作之后我要讓其他協(xié)作的同事也裝這么多東西，最后一旦某個人的電腦出了問題，又要花一堆時間去重新定位問題，找到解決方案。

所以，我決定直接拋棄Fontawesome，畢竟時間比較金貴，不能都荒廢在這上面了。

方法四：SVG大法

這個方法是我最推薦的也是最認(rèn)可的，雖然它也有弊端，但是勝在簡單，普適性而且還不會出錯。

SVG是什么？定義是什么，我直接從百科上摘下來：

? SVG是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯(lián)盟進(jìn)行開發(fā)的。嚴(yán)格來說應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言，可讓你設(shè)計(jì)激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。

這些描述看不懂沒關(guān)系，但是只需要看到這句話就可以了。

「可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能……」

Axure肯定也是文字處理工具，而且還有一個很常用到SVG的文字處理工具就是：PPT。

做PPT的時候，找一些圖標(biāo)，形狀等，都可以插入SVG。直接把SVG圖片下載到本地，然后拖拽進(jìn)入PPT，最后再做兩次取消分組就可以了。

話題回到Axure中，Axure也可以使用這種辦法，而且Axure的SVG處理能力比PPT還更好，它支持你自己復(fù)制SVG的代碼然后粘貼到Axure中，就可以自動識別。

復(fù)制SVG代碼之后，粘貼在Axure中，然后右鍵將SVG圖片轉(zhuǎn)為形狀，然后就可以自由的編輯（調(diào)色，改大小等）。

恰巧的是，我們團(tuán)隊(duì)中的項(xiàng)目的一些icon都是來源一個網(wǎng)站，而且這個網(wǎng)站也正好支持復(fù)制SVG代碼的功能，它就是：阿里巴巴矢量圖標(biāo)庫。

選擇你想要的的圖標(biāo)庫，然后點(diǎn)擊下載，在彈窗頁面選擇「復(fù)制SVG」，然后再粘貼到Axure中，最后再轉(zhuǎn)SVG成形狀，就可以自由編輯啦。

總結(jié)一下，SVG法很實(shí)用，也很方便。主要是iconfont目前的生態(tài)很好，有很多素材，而且完全是免費(fèi)的，你想要的圖標(biāo)基本上都可以找得到，完全滿足了我日常原型繪制的時候?qū)D標(biāo)的要求。

而且方式也很簡單，將想要的原型庫加入到團(tuán)隊(duì)項(xiàng)目中，在實(shí)際開發(fā)的時候，開發(fā)同學(xué)也可以直接使用此圖標(biāo)，一舉兩得，十分高效。

截止到目前，還有一個唯一的瑕疵沒有解決，就是iconfont上沒有Element-UI的圖標(biāo)，而我就是很強(qiáng)迫癥非要找到它怎么辦？

接下來請看強(qiáng)迫癥患者的終極解決方案，只要你夠偏執(zhí)，你總能找到辦法。

02 拓展：怎么獲取Element-UI的圖標(biāo)

我們打開Element-UI的組件庫，然后找到Icon圖標(biāo)這個菜單，發(fā)現(xiàn)這里有很多餓了么原生的的Icon，我很想要把它們弄到Axure里怎么辦？

1. 干貨來襲

首先找公司的前端同學(xué)拿到Element-UI的字體包文件，一般來說引入這些前端框架的時候都會把一些靜態(tài)資源下載下來放在本地的。如果自己有動手能力，也可以自己搭建框架，然后將字體包文件拿出來。

然后搜索「百度字體編輯器」，進(jìn)入之后，選擇打開剛剛拿到的字體包。

接著找到你想要的字體，然后選擇導(dǎo)出，選擇下載SVG文件即可。

最后將下載下來的SVG文件拖拽進(jìn)入到Axure中，再轉(zhuǎn)SVG為形狀格式，就可以自己上色，改大小了。

其他的框架的icon引入方式以此類推，只要找到本地的字體包，然后用百度字體編輯器打開，再將字體包的內(nèi)容導(dǎo)出為SVG就可以了。

總結(jié)

上面一共介紹了四種引入圖標(biāo)的方式，我個人最推薦的方式是第四種，只要理解了背后的一些原理，基本上想引入什么圖標(biāo)都可以用不同的方式完成。

Fontawesome也是一種不錯的方式，但是對一些電腦的環(huán)境有很高的要求，同時也有很多不可控的因素。如果不怕折騰和麻煩，采用這種方式也是可以的，因?yàn)楸举|(zhì)上icon其實(shí)就是一種特殊類型的字體，只要能把字體包的問題給解決了，也就可以解決不同機(jī)器的環(huán)境問題了。

鑒于本人才疏學(xué)淺，本文介紹的內(nèi)容可能有所遺漏。如果大家還有什么其他的引入方式，歡迎在留言區(qū)交流，本文到此結(jié)束。

#專欄作家#

vitamin，微信公眾號：皮醬叨逼叨。人人都是產(chǎn)品經(jīng)理專欄作家，公眾號運(yùn)營小白，初中級B端產(chǎn)品一枚（一年開發(fā)經(jīng)驗(yàn)+三年產(chǎn)品經(jīng)驗(yàn)）。主導(dǎo)過在線教育類產(chǎn)品，目前是跨境電商供應(yīng)鏈倉儲物流產(chǎn)品一枚，歡迎勾搭，一同學(xué)習(xí)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自unsplash，基于CC0協(xié)議