一、交互概述
交互是Axure的顯著特征
有了Axure這一神器，產品、設計、運營等非開發崗位的同學，不用寫一行代碼，只需要通過幾步簡單的配置，就能夠實現前端工程師們平日里通過大量代碼實現的交互和功能。Axure生成的Html文件之所以能夠被稱作為原型，而不僅僅是一個線框圖或者是草圖，就是因為其強大的交互基因，決定了它不是一款普通意義的界面設計工具。
交互是Axure中重要的構建模塊，用來將靜態的線框圖轉換為可交互的動態HTML文件。在Axure中，通過一個簡潔的、帶有指導提示的界面指令和邏輯指引就可以創建完整的交互，生成HTML原型時，Axure都會將這些交互轉換為瀏覽器可識別的編碼（JavaScript、HTML、CSS）。但是我們需要清楚的是，這些編碼并不是產品級別的，不能作為真正的產品使用。它只是實現了前端的視覺交互，但背后需要的后臺數據及相關服務，是無法提供給Axure使用的，這也是Axure最大的局限。
交互的定義
什么是交互？簡單通俗的講，就是誰在什么時候做了什么樣的事情。這個主體誰其實就是對應原型的元件和頁面；什么時候，狹義的理解是時間，在這里我們可以延伸理解為時機，對應原型中的事件；做了什么樣的事情，這是一個動態變化的過程，在原型中對應著動作。根據交互的定義，我們可以看出交互是由元件、事件、動作這3個最基本的元素構成。
二、事件
Axure的事件可以分為自動觸發的事件和手動觸發的事件。
- 頁面事件：是可以自動觸發的，比如當瀏覽器加載頁面時，滾動頁面時。
- 元件事件：頁面中元件的交互效果，都是人為手動觸發，比如單擊某個按鈕。
01 頁面交互
舉例講解
以頁面載入時事件為例，向大家簡單講解頁面事件的交互。
- 瀏覽器獲取到一個加載頁面的請求，可以是首次打開頁面，也可以是從其他頁面跳轉過來。
- 頁面首先檢查是否有頁面加載時交互，頁面加載時事件是附加在頁面上的。
- 如果存在“頁面加載時”事件，瀏覽器首先會執行頁面加載時的交互。
- 如果頁面加載時包含交互條件，瀏覽器會根據邏輯條件，執行對應的動作；如果頁面加載時不包含條件，那么瀏覽器將直接執行動作。
-
被請求加載的頁面渲染完畢，頁面載入時的交互執行完成。
頁面交互說明.png
Axure 9.0頁面交互事件
- 頁面載入時：當頁面啟動加載時。
- 窗口尺寸改變時：當瀏覽器窗口大小改變時。
- 窗口向上滾動時：當瀏覽器窗口向上滾動時。
- 窗口向下滾動時：當瀏覽器窗口向下滾動時。
- 頁面單擊時：頁面任意位置被鼠標點擊時。
- 頁面雙擊時：頁面中任意位置被鼠標雙擊時。
- 頁面鼠標右擊時：頁面中任意位置被鼠標雙擊時。
- 頁面鼠標移動時：當鼠標在頁面任意位置移動時。
- 頁面按鍵按下時：當鍵盤上的按鍵被按下時。
- 頁面按鍵松開時：當鍵盤的按鍵釋放時。
- 自適應視圖改變時：當自適應視圖更改時。
02 元件交互
舉例講解
鼠標單擊跳轉就是最基本的元件交互事件，可以用于鼠標點擊時，也可以用于移動設備上的手指點擊時。我們以簡書的主導航（發現/關注/消息）跳轉為例，說明元件的交互過程。
- 點擊關注，頁面程序判斷“關注”是否有鼠標單擊事件。
- 假設有鼠標單擊事件，首先檢查事件中是否有邏輯條件，如果有邏輯條件，則按照條件執行對應動作；如果沒有條件，則直接執行動作。
-
點擊“關注"后，自動跳轉到關注頁面，交互執行完畢。
元件交互說明.png
Axure 9.0元件交互事件
- 單擊時：當元件被點擊時。
- 雙擊時：元件被鼠標雙擊時。
- 右擊時：當元件被鼠標右鍵單擊時。
- 按下時：當鼠標按下左鍵沒有被釋放時。
- 松開時：當元件被鼠標點擊，這個事件由鼠標按鍵釋放觸發。
- 鼠標移動時：當光標在一個元件上移動時。
- 鼠標移入時：當光標移入元件范圍時。
- 鼠標移出時：當光標移出元件范圍時。
- 鼠標停放時：當光標在元件上方懸停時。
- 鼠標長按時：當鼠標按下超過2秒沒有被釋放時。
- 按鍵按下時：鍵盤上的按鍵被按下時。
- 按鍵松開時：當鍵盤上的按鍵彈起時。
- 移動時：當元件移動時，在頁面中的坐標位發生了變化。
- 旋轉時：當元件旋轉時。
- 尺寸改變時：當元件寬度或高度發生改變時。
- 顯示時：當元件通過交互動作顯示時。
- 隱藏時：當元件通過交互動作隱藏時。
- 獲取焦點時：當一個輸入項獲取焦點時。
- 失去焦點時：當一個輸入項失去焦點時。
- 選中改變時：適用于下拉框，當下拉框被選中的項發生了改變時，通常作為事件的一個邏輯條件。
- 選中時：當復選框或單選按鈕被選中時。
- 取消選中時：當復選框或單選按鈕取消選中時。
- 載入時：當元件從一個頁面的加載中載入時。
- 文字改變時：當單行文本框或多行文本框中的文字發生改變時。
- 狀態改變時：當動態面板被設置了“設置面板狀態”動作時。
- 拖動開始時：當一個拖動動作開始時。
- 拖動時：當一個動態面板正在被拖動時。
- 拖動結束時：當一個拖動動作結束時。
- 向左拖動結束時：當一個面板向左拖動結束時。
- 向右拖動結束時：當一個面板向右拖動結束時。
- 向上拖動結束時：當一個面板向上拖動結束時。
- 向下拖動結束時：當一個面板向下拖動結束時。
- 滾動時：當一個有滾動的面板上下滾動時。
- 向上滾動時：當一個有滾動的面板，向上滾動時。
- 向下滾動時：當一個有滾動的面板，向下滾動時。
Axure 9.0元件交互樣式
- 鼠標懸停：當鼠標懸停在元件上時，元件的顯示樣式。
- 鼠標按下：當鼠標按下元件時，元件的顯示樣式。
- 選中：元件被選中時的顯示樣式。
- 禁用：元件被停止使用時的顯示樣式。
- 獲取焦點：當光標聚焦在元件（如文本框）上的顯示樣式。
三、用例
01 舉例講解
用例是用戶與應用網站或應用程序之間操作流程的抽象表達，每個用例可以封裝成一個獨立的路徑。每個事件下可以有多個用例，當有多個用例存在時，需要為用例設置一些邏輯條件，執行不同的動作。下面我們以登錄為例，講解說明什么是用例。
- 在登陸界面，用戶輸入賬號、密碼，點擊“登陸”按鈕。
- 假設用戶賬號輸入錯誤，點擊登錄按鈕時，頁面提示“賬號不存在，請重新輸入”。
-
假設用戶密碼錯誤，點擊登錄按鈕時，頁面提示“密碼錯誤，請重新輸入”。
通過這個交互案例，我們可以看出不同的條件下（賬號錯誤或密碼錯誤），點擊“登錄”按鈕時，提示信息是不一樣的。為了滿足這兩個不同的條件，我們就需要為“登錄”按鈕添加兩個不同的用例。
用例說明.png
02 添加用例
在設計區域選中元件，在右側交互面板中點擊新建交互，我們會看到該元件可用的事件列表，點擊其中的一個事件，點擊右側的用例圖標或者直接選擇想要添加的動作。
03 編輯用例
- 用例說明：點擊事件名稱右側的用例圖標，在事件名稱下方可以編輯用例的名稱，并添加用例的邏輯條件。事件的第一個用例，默認沒有名稱，需要我們手動添加名稱。
- 插入動作：鼠標點擊動作名稱，開始添加動作，支持添加多個動作。當我們準備插入第二個動作時，點擊用例下方的圓形十字架，開始插入更多動作。
-
配置動作：動作選擇完畢后，我們還需要為動作進行一些規則或屬性的配置。比如，我們添加的動作是打開鏈接，在動作配置中，需要添加鏈接頁面并選擇頁面打開的方式（當前窗口、新窗口/新標簽、彈出窗口和父級窗口），最后點擊完成，動作配置完畢，整個用例添加完畢。
用例編輯.png
四、動作
動作是交互事件中最重要的部分，交互效果的外在表象是通過動作反應出來的。因此，了解每個動作的用法與含義，對學習交互來說是十分必要的。下面我們來看一下，Axure 9.0為我們提供了哪些動作，以及這些動作的含義是什么。
01 鏈接動作
- 打開鏈接：跳轉到一個全新的頁面，鏈接打開的方式又可以細分為：當前窗口、新窗口/新標簽、彈出窗口、父級窗口。
- 關閉窗口：關閉當前頁面或彈窗。
- 框架中打開鏈接：在內部框架中打開新頁面。
- 滾動到元件：當頁面的高度或寬度超出瀏覽器的顯示范圍時，可以用到這個功能。此動作，顯示頁面為當前頁，并非跳轉到新頁面。在添加這個動作時，我們首先需要設定一個參照元件，設定了參照元件后，執行動作時，頁面會自動滾動到選定的參考元件位置。
02 元件動作
- 顯示/隱藏：顯示或隱藏某一個元件。
- 設置面板狀態：設置動態面板的顯示狀態，可以是明確的一個狀態或者按變量指向的某一個狀態；可以是按照某種規則顯示的狀態，比如自動切換上一個或下一個狀態，支持循環切換；也可以直接停止狀態的切換。
- 設置文本：可以設置文本的顯示內容，顯示格式可以為富文本。
- 設置圖片：設置顯示的圖片，可以只本地導入的圖片，也可以是根據變量確定顯示的圖片。
- 設置選中：設置元件的選中狀態：選中/不選中/切換。
- 設置列表選中項：設置下拉列表與列表框的選中項。
- 啟用/禁用：設置元件為可用的/不可用的。
- 移動：移動元件到指定坐標位置。
- 旋轉：元件圍繞特定的中心點，進行順時針或逆時針旋轉一定的角度。
- 設置尺寸：改變元件的寬度、高度。
- 置于頂層/底層：將元件置于頁面元件的頂層/底層。
- 設置不透明：設置元件的不透明度，通常為一個百分比數據。
- 獲取焦點：設置光標聚焦在表單元件上（如文本框）。
- 展開/收起樹節點：展開樹元件的節點/收起樹元件的節點。
03 中繼器動作
- 新增排序：根據查詢結果對數據集中的項進行排序。
- 移除排序：移除所有排序。
- 添加篩選：根據查詢條件篩選數據集中的項。
- 移除篩選：移除所有篩選。
- 設置當前顯示頁面：使用分頁時，顯示指定的頁面。
- 設置每頁項目數量：使用分頁時，設置每頁顯示中繼器項的數目。
- 添加行：添加一行數據到數據集。
- 標記行：選擇數據集中的數據行。
- 取消標記：取消選擇的數據行。
- 更新行：編輯數據集中選擇的行。
- 刪除行：刪除選中的行。
04 其他動作
- 設置自適應視圖：根據瀏覽器窗口的大小，自動調整元件的尺寸。
- 設置變量值：設置一個或多個變量作為元件的值，例如文本的內容可以設置為一個全局變量。
- 等待：延遲一段時間后，執行后面的動作，1秒=1000毫秒。
- 其他：在彈出窗口中顯示文字描述。
如果你對Axure或原型設計有興趣，希望系統性地學習Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹交互案例，進一步提升高保交互設計能力。請點擊下方關注按鈕，查看更多連載作品。
點擊獲取案例作品源文件
