iView Axure組件更新1.1版本:如何在Axure中使用字體圖標(biāo)?

0 評(píng)論 4228 瀏覽 20 收藏 5 分鐘

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

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

原型預(yù)覽

iView Axure的項(xiàng)目預(yù)覽地址:https://9ka81l.axshare.com/

(如果地址崩了就評(píng)論一下,我再更新一個(gè))

字體圖標(biāo)的使用經(jīng)驗(yàn)分享

上一次分享后,很多朋友問(wèn)到字體圖標(biāo)是如何制作的,在此處分享給大家。

使用圖標(biāo)字體的好處有很多:

  • 只要有一個(gè)圖標(biāo)庫(kù),基本所有的常用圖標(biāo)都有了,免去不停下載圖標(biāo)的煩惱;
  • 由于是字體,所以圖標(biāo)的大小可以通過(guò)字體大小進(jìn)行切換,顏色也是同理,可修改性比圖片更強(qiáng);
  • 字體圖標(biāo)是矢量的,無(wú)論在哪種屏幕都能保證清晰的顯示。

STEP1:獲取矢量圖標(biāo)

在Iconfont上會(huì)有大量的矢量圖標(biāo)可以使用,選擇你想要的圖標(biāo),并將其添加到你的項(xiàng)目庫(kù)中,如下:

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

注意:如果你有多個(gè)字體包同時(shí)安裝到電腦中,可通過(guò)“更多操作”-“編輯項(xiàng)目”來(lái)更改字體名稱(chēng),以避免多個(gè)字體因?yàn)橥鵁o(wú)法同時(shí)安裝到系統(tǒng)中的情況。

至此,圖標(biāo)字體已經(jīng)得到。

STEP2:取出所有圖標(biāo)

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

然而這種工具很難尋找,目前只在Mac平臺(tái)找到一個(gè)Glyphs可以復(fù)制出所有的圖標(biāo):

直接全選復(fù)制后,在Axure中新建一個(gè)label,在其中粘貼,切換字體為你在iconfont設(shè)置的字體名稱(chēng)(默認(rèn)為iconfont),即可顯示出所有的字體圖標(biāo)。

以后每次使用圖標(biāo),都可以在此處直接復(fù)制。

STEP3:設(shè)置WebFont

當(dāng)我們要把原型輸出給研發(fā)同事時(shí),由于對(duì)方的電腦中肯定沒(méi)有安裝該字體,所以需要配置web font來(lái)讓對(duì)方無(wú)論在什么電腦上都能看到圖標(biāo)。

在Axure中,依次進(jìn)入Publish-Generate HTML Files-Web Font。點(diǎn)擊添加按鈕后,輸入字體名稱(chēng),如:Ionicon。

這時(shí)候需要填寫(xiě)CSS或FontFace,這段代碼可以在iconfont的項(xiàng)目信息中獲?。?/p>

粘貼的時(shí)候注意開(kāi)始和末尾的大括號(hào),Axure的輸入框已經(jīng)預(yù)設(shè)了開(kāi)頭和末尾。

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

如果覺(jué)得麻煩可以直接下載文件,使用組件庫(kù)中的圖標(biāo)和配置。

文件下載

點(diǎn)此下載

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

 

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

題圖作者提供

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!