產(chǎn)品必會的30個Axure使用技巧

50 評論 36537 瀏覽 364 收藏 13 分鐘

對于 Axure原型工具,很少有產(chǎn)品經(jīng)過系統(tǒng)學(xué)習(xí),一般都是直接上手,邊摸索邊學(xué)習(xí),這直接導(dǎo)致很多快捷操作被忽視。筆者在日常工作中總結(jié)出以下小技巧,希望對各位有幫助。

1.?安裝Axure后要做的第一件事

產(chǎn)品必會的30個Axure使用技巧

如果系統(tǒng)崩潰后,再次進(jìn)入時,系統(tǒng)一般會提示恢復(fù)最近備份的文件。也可以通過文件→從“備份中恢復(fù)”找回最新的版本。

2.?必須會的快捷鍵

產(chǎn)品必會的30個Axure使用技巧

產(chǎn)品必會的30個Axure使用技巧

產(chǎn)品必會的30個Axure使用技巧

快捷鍵不需要刻意去記憶,經(jīng)常使用就熟記于心

3.?日常技巧匯總

(1)重復(fù)的元件可以轉(zhuǎn)化成母版

對于多次重復(fù)使用的元件,每次修改一個地方,其它也挨個修改,這個時候我們可以使用“母版”。

產(chǎn)品必會的30個Axure使用技巧

使用到母版元件一樣的元件時,直接在母版區(qū)拖進(jìn)畫布使用。

雙擊母版元件,就會進(jìn)入到母版編輯窗口,修改后的元件會同步到所有母版元件。

注意:

  • 使用母版元件時,元件里所有的樣式和交互都是一樣的。實(shí)際工作中,肯定存在不同交互,這時可以“點(diǎn)擊鼠標(biāo)右鍵——脫離母版”,然后對這個元件單獨(dú)操作。
  • 不要把元件過多的組合變成母板,元件組合越是越多,越可能需要在母版的元件上做修改。

(2)避免使用多余的控件

一個元件可以實(shí)現(xiàn)的效果,不要使用多個元件。

舉個例子:兩個看起來相同的“確認(rèn)”按鈕,實(shí)際上下圖①只有一個矩形元件,而②是由文本框+矩形組成。雖然只多余的一個元件,但是之后只要需要對該元件做修改,就一定會出現(xiàn)多余的操作,非常影響效率。

產(chǎn)品必會的30個Axure使用技巧

(3)整合多個元件——組合,方便移動與調(diào)整尺寸

產(chǎn)品必會的30個Axure使用技巧

(4)隱藏的元件,設(shè)置交互顯示時,最好選中:置于頂層,避免被遮擋

產(chǎn)品必會的30個Axure使用技巧

(5)善用鎖定——不常移動的元件進(jìn)行鎖定

鎖定不常移動的元件,比如背景頁,表頭。好處:避免誤移。

注意:鎖定后的元件,不能進(jìn)行選中要注意哦!

產(chǎn)品必會的30個Axure使用技巧

(6)選項(xiàng)組命名——實(shí)現(xiàn)單選效果

將多個可選中的元件設(shè)置成選項(xiàng)組后,每次只能選中一個元件,其它元件自動取消選中。

注意:

  • 選項(xiàng)組的名稱必須唯一。尤其是在復(fù)制選項(xiàng)組后,一定要先修改選項(xiàng)組名稱!不然會出現(xiàn):明明設(shè)置的選中效果,但是預(yù)覽時怎么樣都選不中,這時就要看看是不是選項(xiàng)組命名重復(fù)。
  • 推薦一個選項(xiàng)組命名大法:亂敲鍵盤法(不推薦哈,建議規(guī)范化命名)。

產(chǎn)品必會的30個Axure使用技巧

(7)元件提示——鼠標(biāo)懸浮時會顯示提示內(nèi)容

步驟如下:

產(chǎn)品必會的30個Axure使用技巧

(8)文本框大法——共11種類型

拖拽文本框元件后,右側(cè)面板里可選擇不同的文本框類型,選擇不同的類型可以達(dá)到不同的效果。

產(chǎn)品必會的30個Axure使用技巧

如:密碼格式:輸入的內(nèi)容會被隱藏

數(shù)字格式:只能輸入數(shù)字

文件格式:可以選擇文件

日期格式:可以直接選擇日期

產(chǎn)品必會的30個Axure使用技巧

另外,文本框里的預(yù)置文字,可以直接在右側(cè)“提示文字”框輸入。

產(chǎn)品必會的30個Axure使用技巧

(9)一個元件上添加多個事件

同一個元件會出現(xiàn)多種 case,如點(diǎn)擊登錄按鈕后出現(xiàn)的多種情況。雖然可以通過添加條件判斷來做區(qū)分,但是一般比較費(fèi)時。不那么嚴(yán)格的情況下,我們可以將多個事件添加同一個元件上,對事件進(jìn)行命名來區(qū)分。

操作如下:

產(chǎn)品必會的30個Axure使用技巧

(10)動態(tài)面板——固定到瀏覽器的某個位置

比如:將彈窗在屏幕中間顯示、導(dǎo)航固定在頂部。都可以通過固定到瀏覽器實(shí)現(xiàn)。

步驟如下:

產(chǎn)品必會的30個Axure使用技巧

(11)輔助線——快速對齊元件

輔助線分為兩種:頁面輔助線和全局輔助線。頁面輔助線只會在當(dāng)前頁面出現(xiàn),全局輔助線在每個頁面都會出現(xiàn)。

產(chǎn)品必會的30個Axure使用技巧

注意:輔助線過多時:布局→柵格和輔助線→取消顯示輔助線(或者刪除輔助線)。

(12)預(yù)覽原型時,點(diǎn)擊站點(diǎn)導(dǎo)航處的小箭頭,可以看到所有帶交互的元件

產(chǎn)品必會的30個Axure使用技巧

(13)合并多個 axure 文件

步驟:點(diǎn)擊文件→從RP文件導(dǎo)入→選擇文件→導(dǎo)入。

產(chǎn)品必會的30個Axure使用技巧

(14)拖動頁面名稱

鼠標(biāo)選擇左側(cè)畫板里的頁面名稱,直接拖入畫布里,會出現(xiàn)頁面名稱的按鈕框,可以用來做流程圖,點(diǎn)擊頁面名稱按鈕框,會直接跳轉(zhuǎn)到對應(yīng)頁面。

產(chǎn)品必會的30個Axure使用技巧

(15)快速實(shí)現(xiàn)頁面流程圖——頁面快照

拖動頁面快照到畫布里,選擇對應(yīng)的頁面,會出現(xiàn)頁面預(yù)覽,點(diǎn)擊可進(jìn)入對應(yīng)頁面。

產(chǎn)品必會的30個Axure使用技巧

(16)實(shí)現(xiàn)點(diǎn)擊時顯示,再次點(diǎn)擊時隱藏,用切換(Toggle)即可實(shí)現(xiàn)

產(chǎn)品必會的30個Axure使用技巧

(17)實(shí)現(xiàn)鼠標(biāo)滾動查看的效果

通過動態(tài)面板實(shí)現(xiàn):鼠標(biāo)右鍵→滾動條→自動顯示滾動條

產(chǎn)品必會的30個Axure使用技巧

(18)及時命名、規(guī)范命名

對要進(jìn)行交互事件的元件和動態(tài)面板要及時命名,在之后的修改里會降低很大成本。另外命名也要規(guī)范化,避免出現(xiàn)重復(fù)、遺漏、忘記等情況。頁面元件過多時,找到元件就是一件很費(fèi)時的事。自己可以整理出自己的命名法則。

(19)元件過多時選中的方法

1)透過上層元件選擇下層元件:多個元件重疊時,想選中下層元件,元件管理窗口直接找到,元件過多的時候可以通過搜索,這是命名的重要性就出現(xiàn)了。

2)選中上層元件,等1秒左右,在點(diǎn)擊一次,就會選中下一層元件

3) 使用“查找”功能:Ctrl+F,通過搜索元件里的文字來找到

(20)按住 Ctrl,將鼠標(biāo)放在元件的邊緣,移動鼠標(biāo),就可以旋轉(zhuǎn)部件

(21)鼠標(biāo)放在元件邊緣,按住 shift+鼠標(biāo)左鍵,可以鎖定長寬比來放大縮小元件

(22)建立回收站文件夾

用來存放淘汰的頁面。但是生成 html 文件時,不要選擇生成回收站內(nèi)容。

(23)記錄修改內(nèi)容

新建一個空白頁面,記錄 rp 文件的改動,如改動時間,版本、修改內(nèi)容、修改人等。

(24)找Icon必備網(wǎng)站:https://www.iconfont.cn/

搜索自己需要的Icon類型,點(diǎn)擊復(fù)制SVG,粘貼進(jìn)Axure面板里,點(diǎn)擊鼠標(biāo)右鍵,選擇“轉(zhuǎn)化成矢量圖”,就可以對Icon進(jìn)行顏色的填充與修改了。

產(chǎn)品必會的30個Axure使用技巧

產(chǎn)品必會的30個Axure使用技巧

(25)靈感來源>>花瓣:https://huaban.com/

(26)原型尺寸大?。ú晃ㄒ唬?/strong>

web 原型大小:1440×900/1200×900,app 原型尺寸:375×667

(27)建立自己的元件庫

前輩們已經(jīng)整理了很多,我們可以直接使用外部元件,然后根據(jù)需要建立自己的元件庫。關(guān)注公眾號xsxh__hahaha,后臺發(fā)送“元件”即可獲得多個元件庫。

總結(jié)

產(chǎn)品設(shè)計原型的目的是為了更好的傳達(dá)自己的想法。當(dāng)自己的原型能夠滿足要求時,就不需要過度關(guān)注原型細(xì)致度。

 

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 你好,為什么有些組件我拖出來會提示錯誤呀,,我是mac 用的是axure9

    來自江蘇 回復(fù)
    1. 這個沒遇到過不清楚,估計是組件損壞,可以看下axure組件放的文件夾,具體文件夾地址搜搜看,如果還不行就重新裝下試試~

      來自北京 回復(fù)
  2. 元件過期了,可以有新的嗎

    來自四川 回復(fù)
    1. 已更新了

      來自北京 回復(fù)
  3. 又寫了2篇axure使用技巧的文章,歡迎移步主頁查看

    來自北京 回復(fù)
    1. 干貨滿滿,實(shí)戰(zhàn)家!??!

      來自寧夏 回復(fù)
  4. 滿滿的干貨,點(diǎn)贊

    來自浙江 回復(fù)
  5. 來自北京 回復(fù)
  6. 桑心,還差一個小版本才有24點(diǎn)的【轉(zhuǎn)化成矢量圖】功能TOT

    來自廣西 回復(fù)
    1. 啥小版本?

      來自北京 回復(fù)
  7. 樓主有用過墨刀嗎?感覺他是國內(nèi)產(chǎn)品原型工具里面最貼近axure的,很符合國人的使用邏輯。

    回復(fù)
    1. 用過,看個人習(xí)慣,我還是習(xí)慣axure

      回復(fù)
    2. 也是 畢竟只是工具而已哈哈哈

      回復(fù)
  8. 母版自定義觸發(fā)事件超級好用

    回復(fù)
  9. 感謝感謝,受益匪淺!

    來自江蘇 回復(fù)
  10. 22是什么意思呢

    來自廣東 回復(fù)
    1. 沒啥用,就是多建個文件夾

      來自美國 回復(fù)
  11. 公眾號:產(chǎn)品大鹿 搜索不到啊,咋整

    來自廣東 回復(fù)
    1. 可以搜到啊

      來自美國 回復(fù)
    2. 確實(shí)搜不到 xsxh__hahaha

      來自寧夏 回復(fù)
    3. 名字改了,可以直接搜名稱:產(chǎn)品大鹿

      來自北京 回復(fù)
  12. 不錯。

    回復(fù)
  13. ??,干脆利索

    來自浙江 回復(fù)
  14. 好的 謝謝!

    來自廣東 回復(fù)
  15. xsxh__hahaha 這個名字搜索不到

    來自廣東 回復(fù)
    1. 公眾號:產(chǎn)品大鹿

      來自美國 回復(fù)
  16. 123456

    來自廣東 回復(fù)
  17. 非常實(shí)用的使用技巧,感謝總結(jié)分享~

    來自安徽 回復(fù)
  18. 很棒

    來自福建 回復(fù)
  19. 元件分享文件被刪除,可以重新分享下嗎?

    來自陜西 回復(fù)
    1. 你好,回復(fù)數(shù)字1,2,3,4,5,6,就能獲得了

      來自北京 回復(fù)
  20. 大部分都熟悉,然而還是學(xué)到了3點(diǎn)!!感謝作者拉!??!

    來自浙江 回復(fù)
  21. 有幾條之前未掌握的,干貨,贊

    來自廣東 回復(fù)
    1. 有幫助就好,感謝支持

      回復(fù)
  22. 感謝作者的分享,已收藏

    來自北京 回復(fù)
    1. 感謝支持

      回復(fù)
  23. 搜不到作者文末留的公眾號 ,您可以同時把公眾號名稱寫出來撒

    來自重慶 回復(fù)
    1. 公眾號:產(chǎn)品大鹿,您可以看看

      來自北京 回復(fù)
  24. 雖然做了3年需求和產(chǎn)品,但27條日常技巧匯總下,也有6條在作者這里收獲。真的受益匪淺,忒喜歡這種干貨。之后帶小弟可以丟這個鏈接傳送門讓他們打基礎(chǔ) ??

    來自廣東 回復(fù)
    1. 能有幫助就好,哈哈

      來自北京 回復(fù)
    2. 作者分享的元件賊多- -我正在下載

      來自江蘇 回復(fù)
    3. 感謝支持,周末我在添加一點(diǎn)新的元件

      來自北京 回復(fù)
  25. 為啥 9 的沒有文本類型

    來自上海 回復(fù)
    1. 有的 在交互里邊

      來自江蘇 回復(fù)
  26. 就喜歡這種干活貼,雖然都會用,哈哈,那也感謝作者整理 ??

    來自北京 回復(fù)
    1. 哈哈,感謝支持

      來自北京 回復(fù)
  27. 非常實(shí)用 且適合小白觀看

    來自北京 回復(fù)
    1. 對的,希望能幫助到他們

      回復(fù)
  28. 十分感謝,大部分已經(jīng)掌握

    來自廣東 回復(fù)
    1. 加油??

      回復(fù)