Axure從基礎到進階的幾個方法(附組件庫下載)

15 評論 40206 瀏覽 270 收藏 8 分鐘

產品經理用Axure制作高保真原型 or 低保真原型,很多前輩大神都有各自的見解,這個不在咱們今天話題范圍內,畢竟菜鳥一枚,能夠利用休息時間和下班時間哼哧哼哧學習,去提升自己,這很重要。

今天咱們來說說快速掌握Axure的幾個方法。

基礎篇

元件的使用

從添加元件到畫布——修改元件名稱——設置顏色/透明——邊框線型/顏色——設置形狀或圖片圓角

QQ圖片20160818120119

文本框的使用

  1. 設置文本框的類型,常用text、密碼、文件;
  2. 設置提示文字
  3. 設置隱藏的觸發條件, 輸入/獲取焦點時隱藏(預覽才可看到實際效果)
  4. 設置最大長度,賬號/密碼輸入框比較常用
  5. 隱藏邊框, 矩形+文本框時一般會隱藏文本框的邊框

QQ圖片20160818122927

元件的默認選中/禁用

元件的屬性可以對一些元件的默認狀態進行設置,可以設置為默認選中/禁用, 常見的比如未輸入賬號密碼可以默認登錄按鈕為禁用的灰色。操作步驟①添加一個矩形②交互樣式設置選擇禁用③設置禁用樣式下的字體顏色/填充顏色。

QQ圖片20160818124715

交互樣式設置

在網頁/APP的需求設計中,經常會用到一些很簡單的交互樣式,比如鼠標懸停/鼠標按下/選中/禁用,上面我介紹了禁用的操作步驟, ?其他的懸停/按下的設置步驟和禁用類似,這里就不一一介紹了,容我偷個懶~

添加用例(簡單)

  1. 鼠標單擊時打開鏈接
  2. 鼠標單擊時顯示/隱藏
  3. 鼠標單擊時選中/取消選中
  4. 鼠標單擊時移動
  5. 鼠標單擊時獲取焦點

以鼠標單擊時打開鏈接為例,元件屬性里選擇鼠標單擊時——打開鏈接——當前窗口/新窗口——選擇鏈接到某個頁面

QQ圖片20160818143221

2-5的設置方式主要是左側添加對應的動作,如下圖所示,里面部分設計到一些復雜的用法,會在下文中單獨介紹。

3

進階篇

擅用母版

母版的使用應該分三個階段:① 什么時候用母版 @ 怎么去使用母版 @ 如何更好的優化母版。

如果是Axure初學者,在摸索所有功能怎么玩,然后嘗試自己去做一個APP/Web的原型的時候,可能覺得一個界面一個界面的慢慢做,其實還不錯,要用母版干啥? ? No no no ,當需要對原型進行修改時,牽一發而動全身的痛想必每個產品dog都經歷過。我的定義是當組合元件在多個頁面顯示或者在一個頁面多次顯示,我就會把其轉化為母版。

怎么去用母版呢?

  1. 添加母版,左側可以直接添加母版,然后進行編輯;選中元件直接右鍵轉換為母版
  2. 使用母版,如下圖所示

QQ圖片20160818154250

母版的命名可以根據自己的需求來,建議有一定的規律,否則母版太多就會忘;母版支持預覽,鼠標懸停就可以預覽母版的大概樣式;單擊母版挪到工作區,就表示使用這個母版 , ?注意:母版只能在左側雙擊后進行編輯,使用后是不支持編輯的,不過脫離母版后可編輯。

總而言之,母版其實能很大的方便我們完成原型,使用頻率很高,后期修改非??旖?,后面說的優化母版,實際是在使用的過程中去發掘更好的使用方法,既不用頻繁的使用“脫離母版”,又能達到我們的目的,這個我還在修煉,待我出師再來聊聊~

元件庫

形成自己的元件庫很重要啊喂,教你幾招輕輕松松搞定!

  1. 先偷點懶唄,去Axure中文官網逛逛,看看別人分享的元件庫是啥樣的,覺得挺有用的可以copy過來
  2. 自己要有意識的去主動添加元件,我制作了一個組合元件,但是可能以后會用到,我會優化一下,然后添加到我的元件庫 ,下圖就是我的元件庫,大家可以看下

QQ圖片20160818162646

我按照自己的使用習慣,對元件進行了分類 ? ,其中比較常用的應該是內容/彈窗/圖標 ,在使用過程中也會擴充~ ?預覽地址文末會附上~

進階我決定單獨開個文章來寫,篇幅太多了,這一時半會也也不玩呀~

小技巧

  • FontAwesome字體的使用,能夠靈活的改變圖標的顏色(實際是通過修改字體顏色,把圖標定義為文字),附上鏈接:http://www.aharts.cn/rp/130956.html
  • 圖標網站iconfont ?http://www.iconfont.cn/collections?personal=1? ,海量圖標而且支持在線編輯顏色,自從使用這個之后,感覺我的世界從灰暗變成了光明。
  • 其他小技巧暫時保密~ 保持學習,保持專注。

總結

元件庫預覽地址:http://5awi9u.axshare.com/#g=1? ,

元件庫下載地址:

鏈接:http://pan.baidu.com/s/1eShYiki 密碼:12qp

官方地址:鏈接: http://pan.baidu.com/s/1o8rlr2i 密碼: tnkh

個人慢慢積累的,去下載的兄弟姐妹是否順手關注下公眾號呢, 后期還會更新的~

 

作者:酒肉和尚,武漢產品新人一枚,大家多交流溝通。微信號(wt8876),微信公眾號(ChanpinYidu)

本文由 @酒肉和尚 原創發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 您好,文件已損壞,能評論發個新鏈接嗎? 感謝~

    來自河北 回復
  2. 版主,你好,文件下載損壞,可否單獨發送一份,1165889793@qq.com,十分感謝

    來自浙江 回復
  3. 版主,你好,文件下載損壞,可否單獨發送一份,1657443693@qq.com,十分感謝

    來自廣東 回復
  4. 版主,你好,文件下載損壞,可否單獨發送一份,772607830@qq.com,十分感謝

    來自北京 回復
  5. 版主,下載文件損壞,可否單發一份,謝謝 458561385@qq.com

    來自廣東 回復
  6. 版主,下載文件損壞,可否單發一份,謝謝100743550@qq.com

    來自浙江 回復
  7. 版主,你好,元件庫可否發我一份,很感興趣!23498714@qq.com

    回復
  8. 求大神打包 文件損壞啊啊啊啊 ??

    來自上海 回復
  9. 樓主求元件庫,1990559268@qq.com

    來自湖北 回復
  10. 你好,我想問下阿里巴巴圖標庫那個怎么在線編輯顏色呢?

    來自本機地址 回復
    1. 點擊下載預覽,就可以切換顏色了啊

      來自湖北 回復
  11. 求一份呀樓主,478650851@qq.com,萬分感謝~~~ ??

    來自本機地址 回復
  12. 樓主單獨求一份 ??

    來自本機地址 回復
    1. 啊 文件損壞, 那我打個壓縮包吧~

      來自本機地址 回復
  13. 元件庫很有用啊,不過兩個下載后,都提示文件損毀呢

    來自本機地址 回復