Axure應用技巧:可復用控件庫制作實操

5 評論 9688 瀏覽 34 收藏 8 分鐘

本文作者將與我們分享:如何用Axure來制作自己的元件庫。

在現(xiàn)階段的互聯(lián)網(wǎng)產(chǎn)品的設計過程中,我們經(jīng)常會提到一個詞“敏捷迭代(開發(fā))”,簡而言之就是小步快跑策略。產(chǎn)品的敏捷開發(fā),落實到交互設計中就是要在較短的時間內(nèi)完成設計稿,這就牽涉到設計師的效率問題。

對于設計師效率的提升,有很多方面,如工作經(jīng)驗、素材積累,當然還有可(Yao)愛(Si)的加班了。在素材的積累方面,視覺設計師的素材主要是UI Kit,和前期版本的視覺稿;而對于交互設計師來說,則是可復用控件,主要包括控件、ICON、注釋元件三部分,它們統(tǒng)一的名稱叫Axure RP元件庫。

Axure元件庫

Axure RP中的元件庫可以載入他人制作的元件庫,也可以根據(jù)自己的需求,以及所負責的實際項目,制作出符合自己行業(yè)和產(chǎn)品特點的元件庫。載入他人的元件庫快捷、方便,且比較豐富。目前,Axure RP 8.0版本中,新增了默認的Icons元件庫,其數(shù)量充足、全面,而且還可以根據(jù)自己的需求方便的改變顏色,相較于圖片的ICON方便很多。但缺點也是顯而易見,他人的元件庫都具有普適性,或者和你的行業(yè)相差甚遠,即其包含的元件不太適合所在行業(yè);另外一點,你不清楚所載入的元件庫有沒有所需要的元件,以及所需元件的位置,這樣會花費較多的時間來尋找。

自己制作元件庫可以根據(jù)行業(yè)和產(chǎn)品特點篩選風格一致且適合自身產(chǎn)品行業(yè)特點的元件進行集合。同時,也能夠清楚的知道所需原件所在的位置,節(jié)省尋找的時間。

制作元件庫可以采用Font Awesome圖標字體格式制作并載入,但是其修改較為復雜。一方面,制作需要花費時間統(tǒng)一整理,統(tǒng)一載入。假如你需要增加、刪除、修改一些原件,就需要重新統(tǒng)一修改、重新載入,有點類似產(chǎn)品的大版本迭代。另一方面,其只能制作一些ICON,不能制作可復用的組件,如時間選擇器、圖標類型等,這樣就大大減少了可復用控件的使用范圍。

基于制作迅速便捷,后期修改維護方便的原則,建議大家采用元件庫中自帶的編輯工具進行制作。下面,就讓我們快來看一看如何用Axure來制作自己的元件庫。

Axure自制元件庫新建

1、在Axure的元件庫面板中,選擇菜單,點擊菜單下的創(chuàng)建元件庫,選擇自制元件庫的保存路徑并命名;

創(chuàng)建元件庫

2、雙擊頁面面板中的頁面新建第一個元件,可以將事先做好的ICON或者組件放到頁面的左上角,并為頁面修改好名稱;

新建控件頁面

同上建立多個控件頁面,每個頁面只保留一個元件或一個(類)組件。

3、對新建的控件頁面進行分組,點擊頁面面板的新建文件夾按鈕,為新建的文件夾進行分類命名,并將控件頁面分別拖到相應的文件夾下面。

控件頁面分組

接著,Ctrl+S保存,這樣就完成了自制元件庫雛形的建立。

4、回到任一個Axure頁面中,點擊元件庫面板中的刷新元件庫按鈕,就可以在元件庫面板中查看到自制元件庫。

其中,新建分組會作為不同類型的控件的分類顯示,分類與控件的顯示順序依據(jù)新建的控件頁面的順序進行展示。若要調(diào)整顯示順序,只需在自制元件庫中調(diào)整相應的順序,并保存在Axure中刷新即可。

顯示元件庫

新建的控件,可以包含相應的懸浮、點擊等效果,同時,控件中動態(tài)面板也可以得到保留。

Axure自制元件庫添加與修改

在Axure的頁面面板中,選中自制元件庫,點擊菜單下的的編輯元件庫按鈕,進入自制元件
庫的編輯頁面。

元件庫修改

元件庫可以進行修改、添加、刪除、調(diào)整順序等,其操作方式與Axure的操作一致。注意:如果要刪除某個控件需要刪除控件頁面,而不是刪除控件頁面中的元素。

Axure自制元件庫應用

Axure元件庫的應用相對來說比較簡單,與自帶的元件庫的應用方式一致,直接拖到相應的操作區(qū)域即可。

元件庫應用

這種制作元件庫的方法,有較多優(yōu)勢:

  1. 簡潔的可視化編輯方式,比較適合交互設計師使用;
  2. 元件庫中的控件能夠保留相應的元素特性,包括,動效、跳轉等,能夠復用到目標文檔中;
  3. 容錯性好,控件能夠在文檔中進行編輯,以適用不同的頁面場景;
  4. 元件庫的修改能夠隨時進行,不需要統(tǒng)一整理,能夠在項目中進行積累;
  5. 協(xié)作性好,能夠將元件庫傳遞給其他設計師,便于項目中的協(xié)作,保證頁面控件的一致性。

可復用控件不僅能夠在產(chǎn)品后期改版以及版本迭代過程中,減少相應ICON、組件等的制作時間,提高交互稿的制作效率,而且也是交互設計師的功底與經(jīng)驗的體現(xiàn)。

看完之后,是不是覺得制作自己的Axure元件庫很有必要而且簡單。那就趕快開始自己第一個元件庫的制作吧!

 

作者:弘毅道,微信公眾號:UIUX設計工作坊(UIUX-HUANG), 希望與同行者多多交流。

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

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享,試了一下,非常受用!
    有個問題:如果不小心手誤把自建的元件庫卸載了,是不是就永遠也回不來了,有沒有備份恢復卸載的方法?

    來自江蘇 回復
  2. mark一下。。很有必要

    來自北京 回復
  3. 一直都想自己建一個原型庫,不過一來太懶,二來感覺每次都想重做一次,想做得比上次還好,重復設計上癮患者 ?

    來自浙江 回復
    1. 原件庫可以有一定的容錯性,便于調(diào)整適應具體的場景;這種方式編輯的元件庫,可以隨時編輯,不斷的迭代進化。

      來自浙江 回復
    2. ?? 被你影響,已經(jīng)默默地去建自己的元件庫了

      來自浙江 回復