從零開始學Axure原型設計（高級篇）
從零開始學Axure（高級篇）
如果你熟悉了Axure的部件庫，那么你可以得心應手地畫出心目中產品的線框圖；如果你會用Axure的母版、動態面板功能，那么你應該能夠畫出一些簡單網站的原型圖；但只有你精通了Axure的條件邏輯、變量、函數等高級交互，才能將心中的產品形態恣意地通過這款軟件表現出來。
下面小喵就給大家仔細梳理一下Axure的高級交互內容，以及如何運用Axure這款軟件自帶的界面規范文檔來提高交付的原型在開發和設計階段的精準度。
雖然標題用的是高級篇，其實是相對于入門篇和進階篇而言的，沒有大家想象的那么『高級』和復雜。
條件生成器
條件邏輯
if (condition 1) {
當 condition 1 為 true 時執行的動作};
else if (condition 2) {
當 condition 2 為 true 時執行的動作};
else {
當 condition 1 和 condition 2 都不為 true 時執行的動作}; 在Javascript語言中的if-then-else語句是最常見的條件邏輯。
And和Or是條件運算符，用于連接兩個或兩個以上的句子。
新增條件
在用例編輯器頂部有『新增條件』的選項，點擊后進入條件生成器。
當我們進入條件生成器對話框時，首先看到的是滿足以下『全部』或『任意』一個條件，在描述框中我們可以看到，如果選擇『全部』則是『And』，如果選擇『任意』則是『Or』。
條件生成器的多個條件控制
條件生成器允許用戶創建條件表達式，將你需要滿足的條件通過填空的形式告訴Axure，如下圖：
條件生成器和可創建的表達式
其中， 值的類型 包括：
| 值的類型 | 描述 |
|---|---|
| 值（Value） | 文本或數字的值或變量 |
| 變量值（Value of Variable） | 存儲在變量中的當前值 |
| 變量值長度(Length of Variable Value) | 一個變量的值的字符數 |
| 部件文字(Text on Widget) | 每個部件上面可編輯的文字，不包含: 動態面板、圖片熱區、垂直線、水平線、內部框架、下拉列表、列表框。 |
| 焦點部件上的文字(Text on Focused Widget) | 光標焦點所在部件上的文字 |
| 部件值長度(Length of Widget Value) | 表單中文本的字符數，僅包含單行和多行文本框、下拉列表和列表框。 |
| 選中項文字(Selected Option of) | 下拉列表或列表選擇框被選中項的文字。 |
| 選中狀態值(Is selected of) | 檢測復選框或單選按鈕是否選中, 或者一個部件是否是選中狀態。 |
| 動態面板狀態(State of panel) | 動態面板的當前狀態。 |
| 部件可見性(Visibility of widget) | 無論一個部件當前狀態是可見還是隱藏。 |
| 按下的鍵 (Key pressed) | 鍵盤上按下的鍵或組合。 |
| 鼠標拖拽(Drag cursor) | 拖拽過程中光標的位置。 |
| 部件范圍(Area of widget) | 部件之間是否接觸（拖拽使用）。 |
| 自適應視圖(Adaptive view) | 自適應視圖當前的視圖。 |
這些值的類型不用可以記住，用的時候參照就好了，用多了就記住了。
條件案例實戰——用戶登陸框
-
Step 1
以簡書的登陸框為例，截圖登陸框，并拖入『單行文本框』覆蓋掉原有的兩個文本輸入框，分別命名為『用戶名輸入框』和『密碼輸入框』，將『密碼輸入框』的屬性設置為密碼，這樣輸入密碼時會自動變成不顯示的狀態；拖入圖片熱區，完全覆蓋掉原有的登陸按鈕，并命名為『登陸按鈕』。
密碼輸入框的屬性設置為密碼
-Step 2
假設用戶名為zongxiaomiao，密碼為123456。點擊『登陸按鈕』部件，建立兩個條件用例：
因為我們需要同時滿足用戶名和密碼都正確才能登陸，所以連接兩個條件的是and而不是or，也就是滿足全部條件而不是任意條件。
如果文本輸入框里的文字同時滿足了兩個條件，我們就打開簡書的主頁，在鏈接——打開鏈接中輸入外部鏈接地址為：www.jianshu.com。
如果同時滿足兩個條件則進入簡書主頁
-
Step 3
如果兩個條件中有一個條件不滿足，則在登陸框上顯示如下字樣：
登陸失敗提示字樣
我們將這個圖片置于設計區域，將其設置為隱藏狀態（右鍵——設為隱藏），并命名為『登陸失敗提示』。
同時新增用例2，設置else if true時觸發的動作時顯示（我們默認加載頁面時會隱藏它）提示登陸失敗的字樣，并且加入淡入淡出的動畫，動畫時間為500毫秒，這樣加載時不會太生硬。
將新增動作設置為『顯示』，配置為顯示登錄失敗提示的圖片
在文末可以下載案例和觀看演示。
變量
Axure中的變量
- 局部變量：顧名思義，局部變量即在局部的動作中生效。
- 全局變量：在整個原型中都有效。當一個數據從頁面A傳遞到頁面B時就需要全局變量。
因此，局部變量可以有相同名稱，而全局變量不能重復名稱。默認情況下有一個叫『OnLoadVariable』的變量。變量名的命名規則是字母或數字，少于25字符，不包含空格。
變量實戰案例：全局變量在頁面間的動態面板交互
做出這個頁面的 一張圖揭示你散發出的核心氣質心理測試 的頁面間跳轉的效果，可以運用『全局變量』+『動態面板』來實現。大家可以先去網站做一下這個心理測試，然后構思一下如何用全局變量和動態面板在兩個頁面之間完成這個交互。
-
Step 1
在Axure中創建兩個頁面Home和Page 1，在Home頁面中導入測試所需的圖片，并拖入下拉列表框，在下拉列表框中設置『第一張』到『第九張』的選項。注意，要想默認選項為空，則新建一個選項，輸入空格鍵即可。
-
Step 2
選中下拉列表框，點擊『當選項改變時』新建用例1，新增條件為當選中項值的選項為『第一張』時（也就是用戶在下拉列表中選擇了第一張這個選項）。
新建用例，添加條件判斷
然后退出條件設置對話框，在用力編輯器中選擇『設置變量值』，在配置動作一覽中新增變量『MyChoice』，并將MyChoice這個變量的值設為『第一張』
設置全局變量，并設置跳轉頁面
以此類推，新增9個用例，分別對應9個選項，如下圖所示：
設置選項對應的變量值
-
Step 3
在Page 1頁面中創建動態面板，拖入多行文本框，將每個選項對應的測試結果輸入其中。
設置動態面板狀態內容
-
Step 4
在頁面交互欄新增用例『頁面載入時』，設置動態面板狀態，在狀態下拉列表框中選擇狀態『Value』，并點擊『名稱或狀態』旁的函數fx，選擇我們之前設置好的全局變量『MyChoice』即可。
全局變量對應的動態面板的狀態設置
打開預覽，即可看到效果。
案例下載和演示見文末。
函數
理解了變量和條件邏輯，再來學習函數就不難了。Axure中的函數類型非常多，一共有10類，并且每一類下面還有很多細分，總結如下圖：
除了條件邏輯、變量和函數之外，Axure還有一個特別強大的部件叫做『中繼器』。但是中繼器這個部件的使用頻率并不是很高，在這里就不詳細展開了。
簡單來說，中繼器扮演的是一個『數據庫』的角色，但這不是一個真正存在的數據庫，你可以對中繼器數據集中的數據按條件進行 增加、刪除、修改、排序和過濾 等操作。中繼器用來顯示重復的文本、圖片和鏈接。
中繼器由項和數據集組成。在數據集中可以填充我們預先準備的數據，這些數據可以是文字也可以是圖片（右鍵數據輸入框可導入圖片）。
因為中繼器是部件，所以也需要通過添加用例交互來控制動作。同時，通過變量、函數來控制其展示的數據。
Axure從入門到精通需要大量的實戰練習。軟件本身是不斷變化的，掌握其根本的原理，融會貫通，多思考和練習就能讓這款軟件為你發揮最大的功效。
案例下載：
轉載請注明作者名和原文鏈接。