?上一次分享了iView的Axure組件庫的1.0版本，這段時間收到了大家的一些反饋，對里面的BUG進行了修正，所以現(xiàn)在更新一個V1.1版本。

上一篇文件在此：iView Axure原型組件經(jīng)驗分享及1.0文件下載

原型預覽

iView Axure的項目預覽地址：https://9ka81l.axshare.com/

（如果地址崩了就評論一下，我再更新一個）

字體圖標的使用經(jīng)驗分享

上一次分享后，很多朋友問到字體圖標是如何制作的，在此處分享給大家。

使用圖標字體的好處有很多：

• 只要有一個圖標庫，基本所有的常用圖標都有了，免去不停下載圖標的煩惱；
• 由于是字體，所以圖標的大小可以通過字體大小進行切換，顏色也是同理，可修改性比圖片更強；
• 字體圖標是矢量的，無論在哪種屏幕都能保證清晰的顯示。

STEP1：獲取矢量圖標

在Iconfont上會有大量的矢量圖標可以使用，選擇你想要的圖標，并將其添加到你的項目庫中，如下：

通過“下載至本地”可以下載包含ttf格式的字體包。

注意：如果你有多個字體包同時安裝到電腦中，可通過“更多操作”-“編輯項目”來更改字體名稱，以避免多個字體因為同名而無法同時安裝到系統(tǒng)中的情況。

至此，圖標字體已經(jīng)得到。

STEP2：取出所有圖標

要在Axure中使用圖標，不僅僅需要字體，還需要知道每一個圖標的Unicode編碼，才能在文本框中調(diào)用，通過字體編輯工具，可以將所有的圖標取出，放置到Axure中備用。

然而這種工具很難尋找，目前只在Mac平臺找到一個Glyphs可以復制出所有的圖標：

直接全選復制后，在Axure中新建一個label，在其中粘貼，切換字體為你在iconfont設置的字體名稱（默認為iconfont），即可顯示出所有的字體圖標。

以后每次使用圖標，都可以在此處直接復制。

STEP3：設置WebFont

當我們要把原型輸出給研發(fā)同事時，由于對方的電腦中肯定沒有安裝該字體，所以需要配置web font來讓對方無論在什么電腦上都能看到圖標。

在Axure中，依次進入Publish-Generate HTML Files-Web Font。點擊添加按鈕后，輸入字體名稱，如：Ionicon。

這時候需要填寫CSS或FontFace，這段代碼可以在iconfont的項目信息中獲取：

粘貼的時候注意開始和末尾的大括號，Axure的輸入框已經(jīng)預設了開頭和末尾。

這樣輸出的文件無論在什么情況下瀏覽都可以正常顯示字體圖標了。

如果覺得麻煩可以直接下載文件，使用組件庫中的圖標和配置。

文件下載

點此下載

如果下載地址失效，可前往Gitee下載：https://gitee.com/bosenger/iViewAxure

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

題圖作者提供