今天簡單分享一下在Axure RP 8 中如何使用 Font Awesome 圖標(biāo)庫完成設(shè)計。

在做交互設(shè)計的時候，作為產(chǎn)品設(shè)計師我們常常需要用一些標(biāo)準(zhǔn)的圖標(biāo)庫，通過導(dǎo)入現(xiàn)成的圖標(biāo)可以極大地提高我們的設(shè)計效率。常用的圖標(biāo)庫，一般提供SVG，PNG圖片，設(shè)計師下載以后可以直接用到交互設(shè)計文件中，開發(fā)同學(xué)將圖片文件放在圖標(biāo)文件夾中供頁面代碼使用，例如：

• 免費 Esayicon
• 付費 IconFinder

但這種古老的方式，對于前端開發(fā)人員來說并不方便。所以新一代的圖標(biāo)庫，他們提供給設(shè)計師矢量圖片( SVG格式或字體格式），設(shè)計師在設(shè)計稿中記錄該圖標(biāo)的名稱，并告知前端開發(fā)人員。在開發(fā)過程中，前端同學(xué)通過調(diào)用圖標(biāo)庫提供的CSS樣式，并填上對應(yīng)圖標(biāo)的名稱，便可以快速在Web上呈現(xiàn)出各種精美的矢量圖標(biāo)，例如：

• Icomon， 可提供自定義的字體庫圖標(biāo)供設(shè)計師使用
• 阿里圖標(biāo)庫 ，可提供SVG，PNG圖片供設(shè)計師使用
• Font Awesome，可提供標(biāo)準(zhǔn)的字體庫圖標(biāo)供設(shè)計師使用

今天我們重點講述，如果規(guī)范使用Font Awesome圖標(biāo)庫完成交互設(shè)計，并讓前端同學(xué)快樂地跟我們合作。

1、初識 Font Awesome

Font Awesome為您提供可縮放的矢量圖標(biāo)，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。官方網(wǎng)頁為： http://fontawesome.io

對于英文不是太好的同學(xué)可以訪問由“極風(fēng)游科技”提供的 中文頁面：?http://fontawesome.dashgame.com

選擇頁面頂部的“圖標(biāo)”按鈕，可以看到所有圖標(biāo)的分類：

選擇”手勢“，網(wǎng)頁自動跳轉(zhuǎn)出到所有”手勢“圖標(biāo)部分，點擊圖標(biāo)最后的”復(fù)制“按鈕，可以復(fù)制到該圖標(biāo)的名稱，如下紅框所示”hand-o-right”，這里非常重要，這個名稱對于設(shè)計師之后導(dǎo)入圖標(biāo)到Axure 或者 前端同學(xué)都非常有用。

2. 產(chǎn)品設(shè)計師如何使用Font Awesome

2.1 下載字體庫

由于Font Awesome圖標(biāo)庫是基于字體來使用的，所以我們首先需要在官方主頁的最上面點擊”立即下載”（目前最新版為 V4.7.0）, 然后解壓壓縮包，點擊 “TrueType 字體文件”，完成字體的安裝：

2.2 在Axure 中使用 Font Awesome

網(wǎng)上很多網(wǎng)友推薦加載Font Awesome的元件庫，以此快速完成圖標(biāo)的使用。但是筆者認(rèn)為由于Font Awesome經(jīng)常更新，而對應(yīng)的Axure 元件庫很難快速更新，所以建議大家自己在官網(wǎng)上通過圖標(biāo)的分類，快速選擇自己心儀的圖標(biāo)，獲取名字以后，在圖標(biāo)庫中搜索定位圖標(biāo)，然后復(fù)制粘貼到Axure中使用即可。

但是由于之前的頁面只允許我們復(fù)制圖標(biāo)的名字，沒法直接復(fù)制 圖標(biāo)，所以我們沒法在Axure中將圖標(biāo)使用。所以我們需要去到”字體庫的圖標(biāo)備忘單頁面“ ( http://fontawesome.io/cheatsheet/ ) ，按名字搜索圖標(biāo)。例如：我們之前選擇向右的手勢為 “hand-o-right”, 然后我們在CheatSheet頁面搜索（Ctrl+F）到該圖標(biāo)，如下所示：

然后我們復(fù)制紅框中的手勢圖標(biāo)貼入Axure中，但是我們發(fā)現(xiàn)圖標(biāo)沒有出現(xiàn)，而是一個方框：

原因是字體默認(rèn)為Arial,我們切換為 Font Awesome,以后圖標(biāo)正常顯示：

但是需要注意我們一定更要在該圖標(biāo)的說明里面?zhèn)渥D標(biāo)的名字，這樣便于前端同學(xué)開發(fā)時快速完成代碼的編寫，如下圖所示：

2.3 設(shè)計發(fā)布

但我們完成設(shè)計以后，需要將線框圖發(fā)布成HTML文件，這時候如果將文件放到一個沒有安裝過Font Awesome 字體的電腦上，字體圖標(biāo)可能無法顯示，所以我們需要在發(fā)布的時候做一些手腳。

首先我們點擊頁面右上角的 發(fā)布-生成HTML文件…

為了確保以后用來查看線框圖的電腦在斷網(wǎng)的情況下同樣可以正常查看，我們需要采用離線字體的方式完成HTML文件的生成。如下圖所示，添加Web字體時，我們選擇@font-face，并在具體參數(shù)處填寫：

font-family: FontAwesome;

src:url(‘fontawesome-webfont.ttf’) format(‘truetype’);

然后將TrueType字體庫放入HTML文件所在的文件夾里面，如下圖所示：

然后我們將整個文件夾拷給前端同學(xué)他們就可看到了，如下圖所示：

2.4 備份CheatSheet

為了確保我們無法訪問Font Awesome官網(wǎng)時也可以快速復(fù)制圖標(biāo)貼入Axure中，我們可以將 Font Awesome 的CheatSheet 備份為PDF文件。在Chrome瀏覽器中，輸入 http://fontawesome.io/cheatsheet/ ，然后鼠標(biāo)右鍵選擇 打印，如下圖所示：

注意： 如上圖紅框所示，請將目標(biāo)打印機選擇為”另存為PDF“，只有這樣生成的PDF文件中的 圖標(biāo)才是可以復(fù)制的。

3. 前端攻城獅如何使用Font Awesome

Font Awesome圖標(biāo)使用在幾乎任何地方，只需要使用CSS前綴?fa?，再加上圖標(biāo)名稱（前端同學(xué)可以查看設(shè)計同學(xué)線框圖中的注釋）。 Font Awesome是為使用內(nèi)聯(lián)元素而設(shè)計的。我們通常更喜歡使用?<i>?，因為它更簡潔。 但實際上使用?<span>?才能更加語義化。如下所示：

<iclass=”fa fa-hand-o-right”></i>fa-hand-o-right

由于藕不是前端攻城獅，所以不敢班門弄斧了，具體可以去網(wǎng)站上看看用法，如下所示：

好啦，到目前為止，大家應(yīng)該很清楚Font Awesome應(yīng)該如何使用了吧，快去試試吧。

本文由 @邏輯畫瘋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。