全栈工程师?
嗯.....目前并不是!

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

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

上一篇文件在此:iView Axure原型組件經驗分享及1.0文件下載

原型預覽

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

(如果地址崩了就評論一下,我再更新一個)

字體圖標的使用經驗分享

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

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

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

STEP1:獲取矢量圖標

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

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

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

至此,圖標字體已經得到。

STEP2:取出所有圖標

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

然而這種工具很難尋找,目前只在Mac平台找到一個Glyphs可以複製出所有的圖標:

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

以後每次使用圖標,都可以在此處直接複製。

STEP3:設置WebFont

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

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

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

粘貼的時候注意開始和末尾的大括號,Axure的輸入框已經預設了開頭和末尾。

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

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

文件下載

點此下載

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

 

本文由 @包子產品狗 原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖作者提供

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《iView Axure組件更新1.1版本:如何在Axure中使用字體圖標?》
文章链接:https://www.pmbear.com/iview-axure%e7%b5%84%e4%bb%b6%e6%9b%b4%e6%96%b01-1%e7%89%88%e6%9c%ac%ef%bc%9a%e5%a6%82%e4%bd%95%e5%9c%a8axure%e4%b8%ad%e4%bd%bf%e7%94%a8%e5%ad%97%e9%ab%94%e5%9c%96%e6%a8%99%ef%bc%9f/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们