Axure 9.0基礎教程：學好這篇互動知識，你也可以做出高保真
一、互動概述
互動是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毫秒。
- 其他：在彈出視窗中顯示文字描述。