Axure教程:如何制作炫酷高效的元件庫?

9 評論 16042 瀏覽 53 收藏 7 分鐘

本文根據作者的經驗,梳理出如何制作出炫酷高效的元件庫,希望能給大家帶來一些幫助。

經常做高保真原型圖的童鞋們應該都有這種感覺:原型圖中的元件是高度重復的。比如搜索框,做好一個,在其他頁面上直接復制粘貼,然后改一下搜索關鍵字就可以了。雖然復制粘貼的速度是挺快的,但是相對于快速方便的元件庫來說,還是稍微弱了一些,特別是多個項目的時候。本文根據作者的經驗,梳理出如何制作出炫酷高效的元件庫,希望能給大家帶來一些幫助。

一、?如何為元件庫分類?

制作元件庫之前,首先我們要想清楚元件庫的分類標準,比如我們可以按照Web端、手機端兩個大類來創建元件庫,也可以把Web端細分為登錄頁、列表頁、詳情頁、編輯頁等頁面級元件庫,也可以按照按鈕類、輸入類、修飾類等分類方式來創建元件庫。

元件庫的分類沒有具體的標準,你感覺哪種分類更合理更易于你更新維護和使用,就可以按照哪種思路去創建多個元件庫。當然,如果你喜歡,也可以只創建一個元件庫,把所有你經常用的元件都創建在里面,不過數量多的時候,就會增加你查找的時間成本。

二、?如何創建元件庫?

  1. 打開Axure軟件,在元件庫面板中,點擊快捷菜單按鈕,選擇“創建元件庫”,如下圖所示:

2. 選擇了“創建元件庫”后,就會彈出一個界面,你需要選擇一下元件庫的保存路徑(不選擇的話,會存在默認路徑下),而后為你的元件庫起一個名字,在本示例中,我按照Web端、手機端兩個大類來創建元件庫,如下圖所示,點擊“保存”則系統將自動打開你所創建的元件庫。(若未打開,你就自己去雙擊打開吧~~~)

3. 在元件庫創建頁面中,操作跟平時沒什么本質區別,但是要記得,在這里,一個頁面就是一個元件,不要把所有元件都創建在一個頁面里。

三、?元件創建示例

如果本文到這里就結束了,實在對不起文章標題~~~哈哈,來吧,正式開啟炫酷之旅~~~

下面我以Web端使用頻率較高的搜索欄為例,來簡單講解一下如何做出美貌(至少比默認元件庫美貌。。。)的元件。

1.?元件效果

點擊前:

點擊后:

2.?所需元件

所需元件:兩個矩形、一個文本框。

為了方便大家理解,我把其中一個矩形命名為搜索框,文本框命名為輸入框,另外一個矩形命名為按鈕。

3.?實現步驟

按照圖片中的文字,對圖片上方的元件進行操作,即可得到圖片下方的元件。

然后將元件拼在一起,就可以得到帶有交互效果的搜索欄了。

按照以上思路,將你常用的元件,比如收藏、下拉列表等制作在元件庫中,保存該元件庫文件,即可。

元件庫是可以隨時添加的,建議大家工作閑暇時間,可以將使用頻率很高的元件添加到自己的元件庫中,方便以后隨用隨拖。

四、?如何使用元件庫

元件庫創建完成了,那么怎么用呢?

首先,我們需要將元件庫加載到Axure中,如下圖所示:

然后,在每次使用的時候,直接選擇該元件庫(如下圖所示),拖取你要用的元件,就可以了,如果顏色或者大小不合適,調整一下就好啦,至少省去了一大半的重復工作。

PS:大家如果看英文版的Axure比較吃力,記得一定要在安裝的時候進行漢化?。?!不要像我,沒有及時漢化,又懶得卸載了再安裝,就Axure和有道來回切換,被迫學會了里面所有的單詞~~~~

 

本文由 @那只貓的魚 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 我重裝了系統,安裝了一個英文版的,拿著手機搜單詞 ?

    來自陜西 回復
  2. 昨天也正好看了一篇元件庫教程,其實用好了這個還滿方便的,就是平時要多分類積累。哎,為什么文本框不能直接設置樣式呢~~

    來自廣東 回復
    1. 對的對的,我就是因為Axure自帶的文本框太丑,所有做了很多不同的文本框元件 ??

      來自河南 回復
  3. ??

    來自四川 回復
    1. ?? ?? ??

      來自河南 回復