絕!50個Axure畫原型技巧,產品經理速學速用

4 評論 6010 瀏覽 106 收藏 29 分鐘

為什么別人的原型畫起來又快又高級,效率極高;而我們畫起原型來,又慢又比較簡單,效率極差,問題的根源在哪?這篇文章,作者總結了Axure的50個小技巧,相信你看完學習上,你也能畫得又快又好。

一、偏好配置,把能配置的都配置上

Mac 使用快捷鍵 「Cmd + ,」,Win 使用「F9」,調出「偏好配置」彈窗。

1、啟用自動備份

可以在調出的「偏好配置」彈窗中選擇「備份」;

也可以點擊「文件 」,選擇「自動備份設置」。

勾選啟用備份,備份間隔 5 分鐘。

如果系統崩潰后,再次進入時,系統一般會提示恢復最近備份的文件。

也可以通過「文件→從“備份中恢復”」找回最新的版本。

2、畫布配置

把「單快捷鍵、畫布負空間」都勾上,如果喜歡暗黑風格,也可以選擇「黑暗模式」。

3、網格配置

把「網格對齊」勾上,間距設置成 10 即可。

元件將會按照網格進行吸附,可以快速對齊。

如果想在「畫布」中展示出網格,可以使用快捷鍵「Ctrl+’」

或者在畫布的空白區域,鼠標右鍵,勾上「顯示網格」,將會把網格顯示出來。

不過展示出網格并不好看,可以不展示網格,只要能自動網格對齊就行了。

4、輔助線配置

使用輔助線快速對齊,將「輔助線對齊」勾上。

在畫布空白區域「鼠標右鍵」,設置標尺。

然后把「顯示標尺」「顯示全局輔助線」、「顯示頁面輔助線」都勾上,就可以從畫布左邊、上邊,拖出輔助線,幫助我們快速對齊。

5、元件對齊配置

把「元件對齊」「邊緣對齊」勾上,垂直和水平設置成 10 即可。

這樣在拖拽元件時將會展示出對齊輔助線與元件之間的間距數字,幫助元件快速對齊。

按住 Alt 鍵(Wins)/Option 鍵(Mac),鼠標放在元件上可展示出元件之間的距離。

二、復制粘貼很厲害

使用 Ctrl+C、Ctrl+V,快速復制內容。

6、復制粘貼圖片

可以將圖片直接復制粘貼進 Axure;Axure 中的組件可以選中后,可以復制粘貼成圖片到微信去發送。

7、復制粘貼樣式

選擇元件后,Ctrl+C,然后選中要粘貼樣式的元件。

快捷鍵 Alt+Ctrl+V(Mac 則是 Option +Cmd+V),即可復制樣式。

也可以通過「右鍵—粘貼選項—粘貼樣式」。

8、復制粘貼表格

在 Excel 中寫的內容 Ctrl+ C 后,進入到 Axure 中,「鼠標右鍵 – 粘貼選項 — 粘貼為表格」,即可按照表格進行粘貼。

當我們在畫后臺表格頁面時,想快速填充內容時,可以采用這種方式。

Axure 表格不支持合并單元格。

9、快速復制元件

除了 Ctrl+C、Ctrl+V 復制粘貼元件

還可以選中元件后,按住 Ctrl + 鼠標拖動(Mac 按住 Option 拖拽),即可拖出一個相同的組件。

還有「Ctrl+D」,直接復制出來。

10、快速復制頁面

在 Axure 的頁面里,選擇要復制的頁面后,可以使用 Ctrl+C、Ctrl+V 復制粘貼出頁面。

也直接「Ctrl + D」,即可快速復制出相同的頁面。

如果想復制整個文件夾下的全部頁面,選中文件夾后,「鼠標右鍵-重復-分支」,可復制出文件夾下的全部頁面。

11、復制粘貼交互事件

選中交互事件后,Ctrl+C、Ctrl+V,即可實現復制。

三、快捷鍵 ——提效利器

12、單快捷鍵

單快捷鍵是Axure 9 的特色,在「偏好配置 – 畫布」里,勾上「啟用單快捷鍵」,即可實現單快捷鍵的使用。

常用的有:

  • 按一下「O」, 快速畫圓形。
  • 按一下「T 」,快速拉出文本。
  • 按一下「L」, 快速拉出線段。
  • 按下「O」后,直接使用鼠標左鍵,即可拖出圓形;在按一下「O」,即可取消;
  • 對于「T」「L」都是一樣的操作。
  • 按一下「E」,快速畫連接線,元件中將會出現連接點,可以直接用鼠標畫連接線,再按下「E」,即可取消。
  • 按一下「>」 ,可快速預覽原型。

13、必會的快捷鍵

Axure 中的快捷鍵和其他工具,如 word、PPT 等,都有很多通用的,像 Ctrl+C、Ctrl+V、Ctrl+X 等等。

而且快捷鍵很多,我們不需要記住那么多,因為一些快捷鍵還不如用鼠標點擊的快。

以下是以下常用的,能提高效率的快捷鍵:

  • Ctrl+S ,保存
  • Ctrl+A,全選
  • Ctrl+Z,撤銷
  • Ctrl+Y,重做(比如撤銷多了,在使用 Ctrl+Y 恢復過來)
  • Ctrl + G,合并成組,選中多個元件后,可以合并成組
  • Shift + Ctrl + G,取消成組
  • 按空格鍵,鼠標左鍵拖動畫布
  • Ctrl + -,縮小畫布
  • Ctrl + +,放大畫布
  • 按住 Ctrl,移動方向鍵,可以一次移動 10px;如果開啟網格對齊,則會先對齊最近的網格,然后才開始 10px 移動。
  • Ctrl + B,加粗字體,但并不支持全部字體。
  • Ctrl + T,修改字體
  • Ctrl + Alt + -,縮小字號,MAC 對應 Cmd + option + –
  • Ctrl + Alt + +,放大字號,MAC 對應 Cmd + option + +
  • Ctrl + Shift + X,添加交互
  • 快速新建頁面文件夾與頁面:
  • 除了點擊右上方的新建頁面、新建文件夾,還有對應的快捷鍵:
  • Shift + Ctrl+Enter 可以快速新建文件夾
  • Ctrl + Enter 可以快速新建頁面
  • 快速移動層級關系:只要按一下「Tab」鍵,將會自動移入文件夾層級下,相當方便。
  • 按「Shift + Enter」則可以移出層級。

以上 Ctrl 對應 Mac 的 Command 鍵。

三、能提效的功能

14、自適應文本大小

在使用文字時,可能會出現元件尺寸大。

想按照文字進行調整的情況,選中元件,在「樣式」里,有 2 個小按鈕,點擊即可自適應文本高度、寬度。

15、同比例放大/縮小尺寸

有 2 種方式:

第1種:鼠標放在元件邊緣的編輯點上,按住 Shift+鼠標左鍵拖,可以鎖定長寬比來放大縮小元件。

都2種:手動調節尺寸,將鎖勾上,即可鎖定長寬比。

16、多種類型的文本框

拖拽「文本框」元件后,在「交互」面板里可選擇 11 種文本框類型,不同的類型可以達到不同的效果。

如:

  • 密碼格式:輸入的內容會被隱藏
  • 數字格式:只能輸入數字
  • 文件格式:可以選擇文件
  • 日期格式:可以直接選擇日期
  • ……

樣式將會使用瀏覽器的對應樣式。

17、文本框里的預置文字

在表單填寫時,經常會在輸入框中填寫提示內容。

Axure 的文本框可以直接在右側“提示文字”框輸入文字,預置文字將會顯示出來,在輸入內容時將會隱藏。

(可以在「隱藏提示」中設置是輸入內容就隱藏,還是有了光標就隱藏)。

同時可以填寫文本框內可以輸入的最大長度。

18、替換、查找文字

Axure 也支持替換、查找文字,直接「 Ctrl+F」,輸入文字進行查找;

當元件內容過多時,可使用「查找」,快速定位到具體元件。

替換的操作和其他工具一樣,MAC 快捷鍵是「 Cmd+R」,Windows 是「Ctrl+H」,直接替換即可。

19、不常移動的元件進行鎖定

鎖定不常移動的元件,比如背景頁。鎖定的元件位置會固定住,這樣就可以避免選中后誤移。

可以使用「Ctrl+K」快捷鍵進行鎖定,「Shift+Ctrl+K 」解除鎖定。

20、裁剪/切割圖片

畫原型時有時候會使用到截圖,需要對截圖進行處理??梢赃x中圖片后,對圖片進行裁剪、切割。

通過「右鍵-裁剪/切割圖片」;

也可以通過單快捷鍵「S」:快速分割,「C」:快速裁剪。

21、旋轉元件

按住 Ctrl,將鼠標放在元件的邊緣,鼠標變成旋轉樣式,即可旋轉。

也可以在「樣式」中調整旋轉角度。

22、引用頁面

引用頁面,元件引用頁面后元件文案將會線上成頁面的名稱,點擊元件可快速跳轉到引用的頁面。

這個在畫原型時的具體應用場景我沒有找到。

23、拖動頁面名稱

鼠標選擇頁面名稱,直接拖入畫布里,會出現頁面名稱的按鈕框。

可以用來做流程圖,點擊頁面名稱框,會直接跳轉到對應頁面。

24、頁面快照

拖動頁面快照到畫布里,雙擊彈出要引用頁面選擇框,選擇引用的頁面后,會出現頁面預覽。

點擊可進入對應頁面,可用于頁面概覽圖制作。

25、導出原型為圖片

除了能通過復制粘貼的方式復制圖片,也可以直接將整個頁面導出成圖片,「點擊文件 – 導出為圖片」,即可導出 PNG 格式的圖片。

26、頁面布局可以調整

在Axure中的每個模塊都是可以通過拖拽進行調整的,你可以自定義你習慣的布局。

可以通過「視圖 – 重置視圖」,恢復成默認布局。

27、自定義工具欄

在「視圖 – 工具欄」中,你可以設置工具欄的功能內容。

按照你使用的習慣來,把經常用的都放出來。

28、礙眼的遮罩顏色

在 Axure 中當轉換成母版、動態面板時,都會有一層顏色遮罩,在預覽原型時不會展示出來顏色,但是在畫原型時會有。

如果你覺得遮罩干擾你畫原型,可以通過「視圖 – 遮罩-勾選/取消勾選對應內容」,在畫原型則不會再有遮罩顏色。

取消遮罩后,效果如下(隱藏的遮罩還是保留,不然找不到了)。

29、不同的連接線

在使用連接線時,Axure 中有 4 種連接線樣式可以使用,選中連接線后,在「樣式」面板里,可以選擇直線、折線等樣式。

30、快速調整表格行高行寬

當使用表格元件時,選中需要修改的表格,然后直接修改寬度與高度,即可批量修改選中表格的尺寸。

如果想修改個別表格,按照 Ctrl 鍵,再選中即可。接著修改寬度與高度,就可直接修改選中表格的尺寸。

31、畫泳道圖

Axure 中自帶了流程圖元件,但是沒有提供泳道圖的樣式。

可以使用「表格」元件,調整一下表格數量、尺寸即可。

32、快速重命名多個頁面

當需要對多個頁面重命名時,比如批量對頁面名稱添加編號。

可以先選中一個頁面重命名,然后在重命名狀態下,使用「鍵盤上下鍵」,進到下個頁面時還是重命名狀態,就可以直接重命名了。

33、合并多個 Axure 文件

當需要將多個 Axure 文件合并到一個文件中時,點擊「文件→從 RP 文件導入→選擇文件→導入」。

選擇文件后,選擇需要導入的頁面與內容,按照頁面操作一直進行即可。

34、重復的元件可以轉化成母版

對于多個重復的元件,每次修改一個地方,其它也挨個修改,很麻煩,這個時候我們可以使用「母版」。

選中元件后,「右鍵 – 選擇轉換成母版」,轉換成母版后,修改母版內容,則整個 Axure 中使用到母版的都會一起調整。

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

使用到母版元件時,直接在母版區拖進畫布使用。

使用母版元件時,元件里所有的樣式和交互都是一樣的。

可以「點擊鼠標右鍵——脫離母版」,然后對這個元件單獨操作。

35、母版可以調整賦值

對于母版中放在不同頁面里,可以需要單獨調整某些字段;

比如我們把「左側導航+頂部菜單+面包屑 」整體轉成母版,需要修改頁面的面包屑。

我們可以選中母版,在「樣式」,找到「重寫」,選取對應的字段填寫新的文字即可修改。

36、元件過多時選中的方法

1)多個元件重疊時,想選中下層元件,選中上層元件,然后等 1 秒左右,在點擊一次,就會選中下一層元件

2)在概要中通過搜索找到,元件過多的時候可以通過搜索,這是命名的重要性就出現了。

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

四、一些動態效果

37、鼠標懸浮顯示提示內容

添加元件提示后,鼠標懸浮時將會展示出提示內容,可以用使用元件提示來達到鼠標懸浮顯示全部內容的效果。

選中元件后,可以「右鍵-工具提示」填寫內容。

也可以在「交互」面板里填寫。

38、選項組命名——實現單選效果

將多個可選中的元件設置成相同的選項組后,每次只能選中一個元件,其它元件自動取消選中。

39、快速返回上一頁

如果你在畫原型時,涉及到頁面間的跳轉,想直接返回上一頁。

進入「交互」面板,點擊“打開鏈接”,選擇下方的“返回上一頁”就可以了。

40、滾動查看

將元件轉換成動態面板,然后選中動態面板,「鼠標右鍵→滾動條→選擇滾動方式」即可。

也可以在樣式面板中,直接選中滾動方式即可。

41、位置固定到瀏覽器

比如:將彈窗在屏幕中間顯示、導航固定在頂部。都可以通過固定到瀏覽器實現。

首先將固定的內容轉換成動態面板,然后在「樣式」中選擇固定到瀏覽器,選擇對應的位置即可。

42、使用動態面板達到合并成組的效果

在進行分組時,除了可以使用 Ctrl+G,也可以將元件轉化成動態面板,同樣可以達到合并成組的效果。43、實現灰底突出彈窗

有 2 種方式:

第1種:加個灰底樣式元件,與彈窗一起顯示。

多個元件會影響效率,不推薦。

第2種:使用「燈箱效果」,在設置顯示時,更多選項選擇「燈箱效果」。

背景色選擇黑色,不透明度設置成 50%。

在設置顯示時,推薦勾選“置于頂層”。

注:當使用燈箱效果時,點擊灰底區域,彈窗將會自動消失。

44、實現非模態的效果

比如彈出氣泡彈窗后,想實現點擊彈窗外的區域關閉彈窗的效果。

可以使用「顯示/隱藏」,選擇「燈箱效果」,背景顏色選擇透明。

45、顯示時勾上置于頂層

在做顯示/隱藏動效時,當需要顯示時,可以將「置于頂層」勾上,這樣可以避免要顯示的內容被遮擋。

五、還能這樣導出與查看原型

46、導出原型為 word

你可以試下「Ctrl+Shift+D」,或者是點擊「發布-生成 word 說明書」。

將會把 Axure 原型導出為一個 word 文檔,文檔里包含內容,排版樣式等內容都可以配置。

常規的包含原型圖片、功能說明等內容。

原型圖片會按照每個畫布生成圖片,功能說明則是在「說明」面板里填寫的內容。

導出Word的主要的使用場景是在將需求描述寫到「說明」里,然后直接生成 Word 格式的需求文檔。47、快速導出 Excel

使用 「Ctrl+Shift+M」,或者是「發布 – 更多生成器和配置文件」,選擇 CSV,點擊生成

選擇保存文件地址后,創建 CSV 報告,即可將頁面和頁面中的說明導出成 Excel。

這個導出 Excel,對于我來說最大的用處是導出頁面名稱,然后使用頁面名稱去劃分功能點,最終用于研發評估功能的工時。

48、查看原型看帶交互的元件

瀏覽器查看原型時,或者是別人看我們帶有交互動效的原型時,可以告訴對方,勾上顯示熱點,讓對方知道哪里可以觸發動效。

49、查看原型時調整寬度

瀏覽器查看原型時,原型的寬度是默認的,如果你想看整個頁面的原型,可選擇不同的原型尺寸。

50、查看原型時快速切換頁面

瀏覽器查看原型時,可以使用<,>這兩個快捷鍵,在多個頁面之間來回移動。

本文由人人都是產品經理作者【王大鹿】,微信公眾號:【產品大鹿】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 更多產品落地干貨,都在公眾號:產品大鹿

    來自中國 回復
  2. ??

    來自北京 回復
  3. 總結的很精細

    來自江蘇 回復
  4. 17,文本框屬性 我咋沒找到。。。 Windows系統,Axure9

    來自北京 回復