Axure中使用Iconfont-阿里巴巴向量圖示庫

來源:酷知科普網 2.03W

Axure RP8中自帶了不少圖示,但實際設計原型時還是會有不合適或找不到的圖示。Iconfont-阿里向量圖示庫 內容豐富,不比外國的知名網站少,而且內容更符合國人使用需求,最重要的是免費+速度快。網上只有使用國外的介紹,試了一些太慢太卡,內容太少並且不適用於“Iconfont阿里向量圖示庫”應用於Axure中,所以自己研究了一下後,整理出來,費話不多說,下面進入正題。

操作方法

(01) 選好自己需要的圖示,加入到新專案中。可以使用搜索功能搜尋。點選“購物車”圖示,加入到自己的購物車中。

Axure中使用Iconfont-阿里巴巴向量圖示庫
Axure中使用Iconfont-阿里巴巴向量圖示庫 第2張

(02)進購物車把選好的圖示加入到專案中進行下一步。

Axure中使用Iconfont-阿里巴巴向量圖示庫 第3張

(03)把圖示新增至專案中,專案可以新建或已存在的專案,或參與協作的團隊專案。

Axure中使用Iconfont-阿里巴巴向量圖示庫 第4張
Axure中使用Iconfont-阿里巴巴向量圖示庫 第5張

(04)從我的專案中進入生成字型檔案的操作。點“下載至本地”儲存到電腦中,預設“”檔案,開啟後,把“”檔案解壓出來,放到系統目錄的字型目錄中,複製到“C:WindowsFonts”進行安裝或高版本作業系統 右鍵字型檔案 選 “安裝”。

Axure中使用Iconfont-阿里巴巴向量圖示庫 第6張

(05)開啟Word,選擇 “插入” “符號”“其它符號”(低版本word 叫“特殊符號”)

Axure中使用Iconfont-阿里巴巴向量圖示庫 第7張

(06)字型中選擇 專案庫中設定的生成字型名稱,就會列出字型中所有的圖示,雙擊所有的字型圖示,插入到文件中。然後選中要使用的圖示,複製到Axure中進行貼上。

Axure中使用Iconfont-阿里巴巴向量圖示庫 第8張
Axure中使用Iconfont-阿里巴巴向量圖示庫 第9張

(07)Axure RP8 如果已經開啟,要先關閉,要讓她先讀取到本地已經有的字型,然後 “貼上”圖示就能正常顯示在你需要的地方了。再調整一下字型顏色大小,就完美了。

Axure中使用Iconfont-阿里巴巴向量圖示庫 第10張

(08)Iconfont阿里向量圖示庫  可以下載AI(eps)檔案到本地,可以自己用AI修改後,重新上傳到自己專案中用於生成字型檔案。Iconfont不僅可以用在Axure,更強大的是可以在網站前端開發中直接使用,使用方法參考官方的介紹或下載的文字檔案包中的檔案,很簡單,很強大。

特別提示

已經正常顯示的字型圖示,如果字型不存在了,就不能正常顯示了,需要字型安裝才能正常,因此,Axure儲存的檔案,需要在其它電腦上顯示,需要將使用的字型一併安裝到目標機器中。釋出成網頁也只能在已經安裝了對應字型的機器上正常顯示。作演示的話,可以匯出成圖片或用本機展示就沒問題了。

專案中的圖示更新後,重新下載安裝字型,重開Axure軟體可以使用新增的圖示了。

熱門標籤