產品必會的30個Axure使用技巧

于 Axure原型工具，很少有產品經過系統學習，一般都是直接上手，邊摸索邊學習，這直接導致很多快捷操作被忽視。筆者在日常工作中總結出以下小技巧，希望對各位有幫助。

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

如果系統崩潰后，再次進入時，系統一般會提示恢復最近備份的文件。也可以通過文件→從“備份中恢復”找回最新的版本。

2. 必須會的快捷鍵

快捷鍵不需要刻意去記憶，經常使用就熟記于心

3. 日常技巧匯總

（1）重復的元件可以轉化成母版

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

使用到母版元件一樣的元件時，直接在母版區拖進畫布使用。

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

注意：

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

（2）避免使用多余的控件

一個元件可以實現的效果，不要使用多個元件。

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

（3）整合多個元件——組合，方便移動與調整尺寸

（4）隱藏的元件，設置交互顯示時，最好選中：置于頂層，避免被遮擋

（5）善用鎖定——不常移動的元件進行鎖定

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

注意：鎖定后的元件，不能進行選中要注意哦！

（6）選項組命名——實現單選效果

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

注意：

選項組的名稱必須唯一。尤其是在復制選項組后，一定要先修改選項組名稱！不然會出現：明明設置的選中效果，但是預覽時怎么樣都選不中，這時就要看看是不是選項組命名重復。
推薦一個選項組命名大法：亂敲鍵盤法（不推薦哈，建議規范化命名）。

（7）元件提示——鼠標懸浮時會顯示提示內容

步驟如下：

（8）文本框大法——共11種類型

拖拽文本框元件后，右側面板里可選擇不同的文本框類型，選擇不同的類型可以達到不同的效果。

如：密碼格式：輸入的內容會被隱藏

數字格式：只能輸入數字

文件格式：可以選擇文件

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

另外，文本框里的預置文字，可以直接在右側“提示文字”框輸入。

（9）一個元件上添加多個事件

同一個元件會出現多種 case，如點擊登錄按鈕后出現的多種情況。雖然可以通過添加條件判斷來做區分，但是一般比較費時。不那么嚴格的情況下，我們可以將多個事件添加同一個元件上，對事件進行命名來區分。

操作如下：

（10）動態面板——固定到瀏覽器的某個位置

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

步驟如下：

（11）輔助線——快速對齊元件

輔助線分為兩種：頁面輔助線和全局輔助線。頁面輔助線只會在當前頁面出現，全局輔助線在每個頁面都會出現。

注意：輔助線過多時：布局→柵格和輔助線→取消顯示輔助線（或者刪除輔助線）。

（12）預覽原型時，點擊站點導航處的小箭頭，可以看到所有帶交互的元件

（13）合并多個 axure 文件

步驟：點擊文件→從RP文件導入→選擇文件→導入。

（14）拖動頁面名稱

鼠標選擇左側畫板里的頁面名稱，直接拖入畫布里，會出現頁面名稱的按鈕框，可以用來做流程圖，點擊頁面名稱按鈕框，會直接跳轉到對應頁面。

（15）快速實現頁面流程圖——頁面快照

拖動頁面快照到畫布里，選擇對應的頁面，會出現頁面預覽，點擊可進入對應頁面。

（16）實現點擊時顯示，再次點擊時隱藏，用切換（Toggle）即可實現

（17）實現鼠標滾動查看的效果

通過動態面板實現：鼠標右鍵→滾動條→自動顯示滾動條

（18）及時命名、規范命名

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

（19）元件過多時選中的方法

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

2）選中上層元件，等1秒左右，在點擊一次，就會選中下一層元件

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

（20）按住 Ctrl，將鼠標放在元件的邊緣，移動鼠標，就可以旋轉部件

（21）鼠標放在元件邊緣，按住 shift+鼠標左鍵，可以鎖定長寬比來放大縮小元件

（22）建立回收站文件夾

用來存放淘汰的頁面。但是生成 html 文件時，不要選擇生成回收站內容。

（23）記錄修改內容

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

（24）找Icon必備網站：https://www.iconfont.cn/

搜索自己需要的Icon類型，點擊復制SVG，粘貼進Axure面板里，點擊鼠標右鍵，選擇“轉化成矢量圖”，就可以對Icon進行顏色的填充與修改了。

（25）靈感來源>>花瓣：https://huaban.com/

（26）原型尺寸大小（不唯一）

web 原型大小：1440×900/1200×900，app 原型尺寸：375×667

（27）建立自己的元件庫

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

總結

產品設計原型的目的是為了更好的傳達自己的想法。當自己的原型能夠滿足要求時，就不需要過度關注原型細致度。

本文由 @王帥帥原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

、交互概述

交互是Axure的顯著特征

有了Axure這一神器，產品、設計、運營等非開發崗位的同學，不用寫一行代碼，只需要通過幾步簡單的配置，就能夠實現前端工程師們平日里通過大量代碼實現的交互功能。Axure生成的Html文件之所以能夠被稱作為原型，而不僅僅是一個線框圖或者是草圖，就是因為其強大的交互基因，決定了它不是一款普通意義的界面設計工具。

交互是Axure中重要的構建模塊，用來將靜態的線框圖轉換為可交互的動態HTML文件。在Axure中，通過一個簡潔的、帶有指導提示的界面指令和邏輯指引就可以創建完整的交互，生成HTML原型時，Axure都會將這些交互轉換為瀏覽器可識別的編碼（JavaScript、HTML、CSS）。但是我們需要清楚的是，這些編碼并不是產品級別的，不能作為真正的產品使用。它只是實現了前端的視覺交互，但背后需要的后臺數據及相關服務，是無法提供給Axure使用的，這也是Axure最大的局限。

交互的定義

什么是交互？簡單通俗的講，就是誰在什么時候做了什么樣的事情。這個主體誰其實就是對應原型的元件和頁面；什么時候，狹義的理解是時間，在這里我們可以延伸理解為時機，對應原型中的事件；做了什么樣的事情，這是一個動態變化的過程，在原型中對應著動作。根據交互的定義，我們可以看出交互是由元件、事件、動作這3個最基本的元素構成。

二、事件

Axure的事件可以分為自動觸發的事件和手動觸發的事件。

頁面事件：是可以自動觸發的，比如當瀏覽器加載頁面時，滾動頁面時。
元件事件：頁面中元件的交互效果，由外在手動觸發，比如單擊某個按鈕。

頁面交互

以頁面載入時事件為例，向大家簡單講解頁面事件的交互。

瀏覽器獲取到一個加載頁面的請求，可以是首次打開頁面，也可以是從其他頁面跳轉過來。
頁面首先檢查是否有頁面加載時交互，頁面加載時事件是附加在頁面上的。
如果存在“頁面加載時”事件，瀏覽器首先會執行頁面加載時的交互。
如果頁面加載時包含交互條件，瀏覽器會根據邏輯條件，執行對應的動作；如果頁面加載時不包含條件，那么瀏覽器將直接執行動作。
被請求加載的頁面渲染完畢，頁面載入時的交互執行完成。

頁面交互說明

Axure 9.0頁面交互事件

頁面載入時：當頁面啟動加載時。
窗口尺寸改變時：當瀏覽器窗口大小改變時。
窗口向上滾動時：當瀏覽器窗口向上滾動時。
窗口向下滾動時：當瀏覽器窗口向下滾動時。
頁面單擊時：頁面任意位置被鼠標點擊時。
頁面雙擊時：頁面中任意位置被鼠標雙擊時。
頁面鼠標右擊時：頁面中任意位置被鼠標雙擊時。
頁面鼠標移動時：當鼠標在頁面任意位置移動時。
頁面按鍵按下時：當鍵盤上的按鍵被按下時。
頁面按鍵松開時：當鍵盤的按鍵釋放時。
自適應視圖改變時：當自適應視圖更改時。

元件交互

鼠標單擊跳轉就是最基本的元件交互事件，可以用于鼠標點擊時，也可以用于移動設備上的手指點擊時。我們以簡書的主導航（發現/關注/消息）跳轉為例，說明元件的交互過程。

點擊關注，頁面程序判斷“關注”是否有鼠標單擊事件。
假設有鼠標單擊事件，首先檢查事件中是否有邏輯條件，如果有邏輯條件，則按照條件執行對應動作；如果沒有條件，則直接執行動作。
點擊“關注"后，自動跳轉到關注頁面，交互執行完畢。

元件交互說明

Axure 9.0元件交互事件

單擊時：當元件被點擊時。
雙擊時：元件被鼠標雙擊時。
右擊時：當元件被鼠標右鍵單擊時。
按下時：當鼠標按下左鍵沒有被釋放時。
松開時：當元件被鼠標點擊，這個事件由鼠標按鍵釋放觸發。
鼠標移動時：當光標在一個元件上移動時。
鼠標移入時：當光標移入元件范圍時。
鼠標移出時：當光標移出元件范圍時。
鼠標停放時：當光標在元件上方懸停時。
鼠標長按時：當鼠標按下超過2秒沒有被釋放時。
按鍵按下時：鍵盤上的按鍵被按下時。
按鍵松開時：當鍵盤上的按鍵彈起時。
移動時：當元件移動時，在頁面中的坐標位發生了變化。
旋轉時：當元件旋轉時。
尺寸改變時：當元件寬度或高度發生改變時。
顯示時：當元件通過交互動作顯示時。
隱藏時：當元件通過交互動作隱藏時。
獲取焦點時：當一個輸入項獲取焦點時。
失去焦點時：當一個輸入項失去焦點時。
選中改變時：適用于下拉框，當下拉框被選中的項發生了改變時，通常作為事件的一個邏輯條件。
選中時：當復選框或單選按鈕被選中時。
取消選中時：當復選框或單選按鈕取消選中時。
載入時：當元件從一個頁面的加載中載入時。
文字改變時：當單行文本框或多行文本框中的文字發生改變時。
狀態改變時：當動態面板被設置了“設置面板狀態”動作時。
拖動開始時：當一個拖動動作開始時。
拖動時：當一個動態面板正在被拖動時。
拖動結束時：當一個拖動動作結束時。
向左拖動結束時：當一個面板向左拖動結束時。
向右拖動結束時：當一個面板向右拖動結束時。
向上拖動結束時：當一個面板向上拖動結束時。
向下拖動結束時：當一個面板向下拖動結束時。
滾動時：當一個有滾動的面板上下滾動時。
向上滾動時：當一個有滾動的面板，向上滾動時。
向下滾動時：當一個有滾動的面板，向下滾動時。

Axure 9.0元件交互樣式

鼠標懸停：當鼠標懸停在元件上時，元件的顯示樣式。
鼠標按下：當鼠標按下元件時，元件的顯示樣式。
選中：元件被選中時的顯示樣式。
禁用：元件被停止使用時的顯示樣式。
獲取焦點：當光標聚焦在元件（如文本框）上的顯示樣式。

三、用例

用例是用戶與應用網站或應用程序之間操作流程的抽象表達，每個用例可以封裝成一個獨立的路徑。每個事件下可以有多個用例，當有多個用例存在時，需要為用例設置一些邏輯條件，執行不同的動作。下面我們以登錄為例，講解說明什么是用例。

在登陸界面，用戶輸入賬號、密碼，點擊“登陸”按鈕。
假設用戶賬號輸入錯誤，點擊登錄按鈕時，頁面提示“賬號不存在，請重新輸入”。
假設用戶密碼錯誤，點擊登錄按鈕時，頁面提示“密碼錯誤，請重新輸入”。

通過這個交互案例，我們可以看出不同的條件下（賬號錯誤或密碼錯誤），點擊“登錄”按鈕時，提示信息是不一樣的。為了滿足這兩個不同的條件，我們就需要為“登錄”按鈕添加兩個不同的用例。

用例說明

添加用例

在設計區域選中元件，在右側交互面板中點擊新建交互，我們會看到該元件可用的事件列表，點擊其中的一個事件，點擊右側的用例圖標或者直接選擇想要添加的動作。

編輯用例

1. 用例說明：點擊事件名稱右側的用例圖標，在事件名稱下方可以編輯用例的名稱，并添加用例的邏輯條件。事件的第一個用例，默認沒有名稱，需要我們手動添加名稱。

2. 插入動作：鼠標點擊動作名稱，開始添加動作，支持添加多個動作。當我們準備插入第二個動作時，點擊用例下方的圓形十字架，開始插入更多動作。

3. 配置動作：動作選擇完畢后，我們還需要為動作進行一些規則或屬性的配置。比如，我們添加的動作是打開鏈接，在動作配置中，需要添加鏈接頁面并選擇頁面打開的方式（當前窗口、新窗口/新標簽、彈出窗口和父級窗口），最后點擊完成，動作配置完畢，整個用例添加完畢。

編輯用例

四、動作

動作是交互事件中最重要的部分，交互效果的外在表象是通過動作反應出來的。因此，了解每個動作的用法與含義，對學習交互來說是十分必要的。下面我們來看一下，Axure 9.0為我們提供了哪些動作，以及這些動作的含義是什么。

鏈接動作

打開鏈接：跳轉到一個全新的頁面，鏈接打開的方式又可以細分為：當前窗口、新窗口/新標簽、彈出窗口、父級窗口。
關閉窗口：關閉當前頁面或彈窗。
框架中打開鏈接：在內部框架中打開新頁面。
滾動到元件：當頁面的高度或寬度超出瀏覽器的顯示范圍時，可以用到這個功能。此動作，顯示頁面為當前頁，并非跳轉到新頁面。在添加這個動作時，我們首先需要設定一個參照元件，設定了參照元件后，執行動作時，頁面會自動滾動到選定的參考元件位置。

元件動作

顯示/隱藏：顯示或隱藏某一個元件。
設置面板狀態：設置動態面板的顯示狀態，可以是明確的一個狀態或者按變量指向的某一個狀態；可以是按照某種規則顯示的狀態，比如自動切換上一個或下一個狀態，支持循環切換；也可以直接停止狀態的切換。
設置文本：可以設置文本的顯示內容，顯示格式可以為富文本。
設置圖片：設置顯示的圖片，可以只本地導入的圖片，也可以是根據變量確定顯示的圖片。
設置選中：設置元件的選中狀態：選中/不選中/切換。
設置列表選中項：設置下拉列表與列表框的選中項。
啟用/禁用：設置元件為可用的/不可用的。
移動：移動元件到指定坐標位置。
旋轉：元件圍繞特定的中心點，進行順時針或逆時針旋轉一定的角度。
設置尺寸：改變元件的寬度、高度。
置于頂層/底層：將元件置于頁面元件的頂層/底層。
設置不透明：設置元件的不透明度，通常為一個百分比數據。
獲取焦點：設置光標聚焦在表單元件上（如文本框）。
展開/收起樹節點：展開樹元件的節點/收起樹元件的節點。

中繼器動作

新增排序：根據查詢結果對數據集中的項進行排序。
移除排序：移除所有排序。
添加篩選：根據查詢條件篩選數據集中的項。
移除篩選：移除所有篩選。
設置當前顯示頁面：使用分頁時，顯示指定的頁面。
設置每頁項目數量：使用分頁時，設置每頁顯示中繼器項的數目。
添加行：添加一行數據到數據集。
標記行：選擇數據集中的數據行。
取消標記：取消選擇的數據行。
更新行：編輯數據集中選擇的行。
刪除行：刪除選中的行。

其他動作

設置自適應視圖：根據瀏覽器窗口的大小，自動調整元件的尺寸。
設置變量值：設置一個或多個變量作為元件的值，例如文本的內容可以設置為一個全局變量。
等待：延遲一段時間后，執行后面的動作，1秒=1000毫秒。
其他：在彈出窗口中顯示文字描述。

文將介紹如何制作Axure高保真數據可視化原型，供大家參考和學習。

高保真數據可視化原型設計，稱得上是Axure高階水平。

數據可視化在原型設計中是一個重要的分支，但是對于Axure使用者具有一定要求。清晰的數據可視化原型可以減少與需求方和研發工程師等的溝通成本，且可具象。

Axure本身具有高級交互的能力，結合數據可視化的方式，以低成本的方式，達到預期的演示的效果，本文介紹如何制作Axure高保真數據可視化原型。

第1步：拖入內聯框架（Inline Frame）

在Axure操作界面中，拖入一個Inline Frame（中文：內聯框架）。

第2步：選擇帶有實例圖的HTML頁面

Axure本身可生成HTML頁面，本質上而言，只要帶有實例圖的為HTML文件，并可正常訪問即可。至于HTML是以何種方式制作生成，不做限制。

第3步：修改實例圖樣式，編輯HTML頁面代碼

點擊進入圖后，所示頁面如下圖。左側為折線圖效果對應的代碼，右側是折線圖的效果。可以在左側修改代碼，運行后可在右側查看修改后的效果（此處不做贅述）。

點擊頁面右下角的“Download”按鈕，下載折線圖的HTML頁面。

使用任意一種代碼編輯器（筆者喜歡用komodo），打開html頁面，修改html頁面代碼中自帶的api。如果發現運行后html報錯api過期時，需要自行創建api，將其進行替換。

第4步：創建一個新的文件夾

創建一個新的文件夾（本文命名其為：axure and excharts），文件夾的位置沒有要求。將下載的HTML頁面，放置在文件夾中。

第5步：使用Axure內聯框架鏈接文件夾中HTML頁面

雙擊拖入Axure操作界面的內聯框架（Inline Frame），選擇“link to an external url or file”（選擇一個外部的urd或文件），輸入HTML頁面所在的位置及名稱（如本文：D:\Desktop\axure and echarts\line-simple.html），如下圖所示：

第6步：Axure界面中操作生成html文件

點擊生成html頁面按鈕：

將生成html文件的目錄，更改為上文創建的文件夾。如下圖：

點擊確認后，“axure and echarts”文件夾中會存在axure生成的html頁面和html頁面。同時，會自動打開一個html頁面，可查看效果，如下圖：

這樣，我們就通過一個簡單的例子，在Axure中實現了數據可視化效果。

筆者在本文中分享的是實現的方法，但是實際應用過程中，通過一款數據可視化產品的視角去實操，會讓你有意想不到的效果，特別是在Axure顏色、布局、交互等能力的加持下。

作者：魚日，公眾號：issnail

本文由 @魚日原創發布于人人都是產品經理。未經許可，禁止轉載