編輯導讀：圖示是我們在製作產品原型的時候使用的比較多的一類素材，在日常繪製原型的時候一般是以插入的形式新增到Axure中。本文作者結合自身經驗，介紹了四種Axure中引入圖示的方法，希望對大家能有所幫助。
在日常繪製原型的時候，經常會需要插入相應的圖示（icon）到Axure中，但是看似好像很簡單的事情也給蠻多小夥伴造成了困擾。
現在很多開發團隊都會用一些比較常見的前端框架來搭建後臺管理系統，例如常見的Element-UI，Ant-design，iView還有Layui等。
這些前端框架基本上都自己有一套內建的圖示庫，所以一些常用的編輯，刪除，設定，關閉等圖示基本上就會直接使用。但是產品要繪製原型的時候，想要把這些圖示插入到Axure中就有點麻煩了。
例如畫這樣一個簡單的element-UI的彈窗，在Axure中可以很簡單的做到解決一比一復原，唯一麻煩的點就是右上角的關閉按鈕。
如果稍微講究一點的朋友就會去網頁上截圖或者找到對應的圖片檔案然後放進來，稍微不講究的那就直接用一個佔位符表示了。
或者是直接用Axure自帶的內建Icons拖出一個不太協調的關閉按鈕。
這種辦法是最簡單也是最快速的，直接從內建的元件中拖拽出來，可以調整大小和顏色，而且清晰度等也很不錯。
但是缺點也很明顯，那就是內建的Icons內容太少了，很多圖示是上古時期的，壓根就和現在的主流圖示風格不搭。所以就連一個普通的關閉按鈕，都搭配不上，更不用談一些很有語義性的圖示了。
方法二：圖片貼上大法這種辦法是最快速也是最簡單的，例如剛剛我要畫一個Element-UI的關閉按鈕，但是我從Axure內建原件庫找不到，也不想花太多時間去找，那麼我直接從網頁上截圖一個白底的圖片就好了，然後貼上覆蓋在相應的位置即可。
截圖的優點是快速，簡單。缺點是圖片調整大小的時候不是那麼精準，同時圖片截圖之後是不能改顏色和粗細的。
這意味著如果我要一個藍底白字的圖示，那就得再去網頁上找，或者自己F12除錯相應的樣式，然後再截圖下來。一套操作下來，還是有點麻煩。
方法三：Fontawesome大法Fontawesome是一套絕佳的圖示字型庫和CSS框架，下圖是官網的一些介紹。對於不太懂技術的朋友，可以把它理解成是一套整合式的字型庫圖示，意味著每一個圖示其實是擁有字型一樣的屬性，例如字型大小，粗細，顏色等。
有很多Axure的培訓都會推薦使用Fontawesome的方式在Axure中插入圖示，例如Axure培訓大佬「小樓一夜聽春雨」就寫過類似的教程指導怎麼使用Fontawesome，AxureUX的大梨老師也寫了很詳細的教程來指導怎麼使用。
首先本機需要安裝相應的字型庫，然後從Fontawesome的官網或者AxureUX的專門頁，複製相應的內容，然後再貼上到Axure中，最後再選擇對應的字型即可。
這種方法可以適用於絕大多數場景，基本上算是一個比較可以接受的解決方案，但是直到我裝好字型畫好圖示，開啟預覽之後，我發現了一個很操蛋的事情：預覽狀態下，圖示沒有生效！！！
有朋友肯定會說，那肯定是你自己哪裡設定有問題了。
是的，剛開始我也是這樣想的，直到我花了半個多小時在網上找各種解決方案，我還是沒能解決這個問題的時候，我才意識到，這樣搞可能是個無底洞。
因為產品相關問題不像技術問題，會有很多論壇或者交流群，所以一些產品方面的技術手段出問題了，要定位問題其實很難。採用Fontawesome引入圖示的一些案例和討論，在網上都找不到很多，即使我千辛萬苦解決了這個問題，可能後面還會有其他問題，這並不是我的本意。
於是我就開始審視這件事的本質，我本來就是想畫一個大概的圖示來表示這個地方用了什麼樣的圖示，而我選擇用Fontawesome之後。一方面我要下載字型，其次我要在釋出的時候連結CSS地址防止別人的電腦上看原型的時候丟失字型，而且我找到的字型其實也並不是和前端框架百分百一樣的內容，最後我還在自己本地電腦上還預覽不成功，我丟，那我還用這玩意幹啥？
Fontawesome確實很強，但是也確實有點點麻煩，麻煩的並不是一開始裝字型和釋出的時候配置好CSS連結，而是這一頓操作之後我要讓其他協作的同事也裝這麼多東西，最後一旦某個人的電腦出了問題，又要花一堆時間去重新定位問題，找到解決方案。
所以，我決定直接拋棄Fontawesome，畢竟時間比較金貴，不能都荒廢在這上面了。
方法四：SVG大法這個方法是我最推薦的也是最認可的，雖然它也有弊端，但是勝在簡單，普適性而且還不會出錯。
SVG是什麼？定義是什麼，我直接從百科上摘下來：
❝ SVG是一種影象檔案格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的向量圖形。它是基於XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說應該是一種開放標準的向量圖形語言，可讓你設計激動人心的、高解析度的Web圖形頁面。使用者可以直接用程式碼來描繪影象，可以用任何文字處理工具開啟SVG影象，透過改變部分程式碼來使影象具有互動功能，並可以隨時插入到HTML中透過瀏覽器來觀看。
這些描述看不懂沒關係，但是隻需要看到這句話就可以了。
「可以用任何文字處理工具開啟SVG影象，透過改變部分程式碼來使影象具有互動功能……」
Axure肯定也是文字處理工具，而且還有一個很常用到SVG的文字處理工具就是：PPT。
做PPT的時候，找一些圖示，形狀等，都可以插入SVG。直接把SVG圖片下載到本地，然後拖拽進入PPT，最後再做兩次取消分組就可以了。
話題回到Axure中，Axure也可以使用這種辦法，而且Axure的SVG處理能力比PPT還更好，它支援你自己複製SVG的程式碼然後貼上到Axure中，就可以自動識別。
複製SVG程式碼之後，貼上在Axure中，然後右鍵將SVG圖片轉為形狀，然後就可以自由的編輯（調色，改大小等）。
恰巧的是，我們團隊中的專案的一些icon都是來源一個網站，而且這個網站也正好支援複製SVG程式碼的功能，它就是：阿里巴巴向量圖示庫。
選擇你想要的的圖示庫，然後點選下載，在彈窗頁面選擇「複製SVG」，然後再貼上到Axure中，最後再轉SVG成形狀，就可以自由編輯啦。
總結一下，SVG法很實用，也很方便。主要是iconfont目前的生態很好，有很多素材，而且完全是免費的，你想要的圖示基本上都可以找得到，完全滿足了我日常原型繪製的時候對圖示的要求。
而且方式也很簡單，將想要的原型庫加入到團隊專案中，在實際開發的時候，開發同學也可以直接使用此圖示，一舉兩得，十分高效。
截止到目前，還有一個唯一的瑕疵沒有解決，就是iconfont上沒有Element-UI的圖示，而我就是很強迫症非要找到它怎麼辦？
接下來請看強迫症患者的終極解決方案，只要你夠偏執，你總能找到辦法。
02 拓展：怎麼獲取Element-UI的圖示
我們開啟Element-UI的元件庫，然後找到Icon圖示這個選單，發現這裡有很多餓了麼原生的的Icon，我很想要把它們弄到Axure裡怎麼辦？
1. 乾貨來襲首先找公司的前端同學拿到Element-UI的字型包檔案，一般來說引入這些前端框架的時候都會把一些靜態資源下載下來放在本地的。如果自己有動手能力，也可以自己搭建框架，然後將字型包檔案拿出來。
然後搜尋「百度字型編輯器」，進入之後，選擇開啟剛剛拿到的字型包。
接著找到你想要的字型，然後選擇匯出，選擇下載SVG檔案即可。
最後將下載下來的SVG檔案拖拽進入到Axure中，再轉SVG為形狀格式，就可以自己上色，改大小了。
其他的框架的icon引入方式以此類推，只要找到本地的字型包，然後用百度字型編輯器開啟，再將字型包的內容匯出為SVG就可以了。
總結上面一共介紹了四種引入圖示的方式，我個人最推薦的方式是第四種，只要理解了背後的一些原理，基本上想引入什麼圖示都可以用不同的方式完成。
Fontawesome也是一種不錯的方式，但是對一些電腦的環境有很高的要求，同時也有很多不可控的因素。如果不怕折騰和麻煩，採用這種方式也是可以的，因為本質上icon其實就是一種特殊型別的字型，只要能把字型包的問題給解決了，也就可以解決不同機器的環境問題了。
鑑於本人才疏學淺，本文介紹的內容可能有所遺漏。如果大家還有什麼其他的引入方式，歡迎在留言區交流，本文到此結束。
#專欄作家#vitamin，微信公眾號：皮醬叨逼叨。人人都是產品經理專欄作家，公眾號運營小白，初中級B端產品一枚（一年開發經驗+三年產品經驗）。主導過線上教育類產品，目前是跨境電商供應鏈倉儲物流產品一枚，歡迎勾搭，一同學習。
本文原創釋出於人人都是產品經理，未經作者許可，禁止轉載
題圖來自unsplash，基於CC0協議