中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

今天簡單分享一下在Axure RP 8 中如何使用 Font Awesome 圖標庫完成設計。

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

• 免費 Esayicon
• 付費 IconFinder

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

• Icomon， 可提供自定義的字體庫圖標供設計師使用
• 阿里圖標庫 ，可提供SVG，PNG圖片供設計師使用
• Font Awesome，可提供標準的字體庫圖標供設計師使用

今天我們重點講述，如果規范使用Font Awesome圖標庫完成交互設計，并讓前端同學快樂地跟我們合作。

1、初識 Font Awesome

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

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

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

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

2. 產品設計師如何使用Font Awesome

2.1 下載字體庫

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

2.2 在Axure 中使用 Font Awesome

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

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

然后我們復制紅框中的手勢圖標貼入Axure中，但是我們發現圖標沒有出現，而是一個方框：

原因是字體默認為Arial,我們切換為 Font Awesome,以后圖標正常顯示：

但是需要注意我們一定更要在該圖標的說明里面備注圖標的名字，這樣便于前端同學開發時快速完成代碼的編寫，如下圖所示：

2.3 設計發布

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

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

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

font-family: FontAwesome;

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

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

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

2.4 備份CheatSheet

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

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

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

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

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

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

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

本文由 @邏輯畫瘋 原創發布于人人都是產品經理。未經許可，禁止轉載。