一、交互概述

交互是Axure的顯著特征

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

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

交互的定義

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

二、事件

Axure的事件可以分為自動觸發(fā)的事件和手動觸發(fā)的事件。

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

頁面交互

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

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

頁面交互說明

Axure 9.0頁面交互事件

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

元件交互

鼠標(biāo)單擊跳轉(zhuǎn)就是最基本的元件交互事件，可以用于鼠標(biāo)點擊時，也可以用于移動設(shè)備上的手指點擊時。我們以簡書的主導(dǎo)航（發(fā)現(xiàn)/關(guān)注/消息）跳轉(zhuǎn)為例，說明元件的交互過程。

1. 點擊關(guān)注，頁面程序判斷“關(guān)注”是否有鼠標(biāo)單擊事件。
2. 假設(shè)有鼠標(biāo)單擊事件，首先檢查事件中是否有邏輯條件，如果有邏輯條件，則按照條件執(zhí)行對應(yīng)動作；如果沒有條件，則直接執(zhí)行動作。
3. 點擊“關(guān)注"后，自動跳轉(zhuǎn)到關(guān)注頁面，交互執(zhí)行完畢。

元件交互說明

Axure 9.0元件交互事件

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

Axure 9.0元件交互樣式

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

三、用例

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

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

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

用例說明

添加用例

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

編輯用例

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

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

3. 配置動作：動作選擇完畢后，我們還需要為動作進行一些規(guī)則或?qū)傩缘呐渲?。比如，我們添加的動作是打開鏈接，在動作配置中，需要添加鏈接頁面并選擇頁面打開的方式（當(dāng)前窗口、新窗口/新標(biāo)簽、彈出窗口和父級窗口），最后點擊完成，動作配置完畢，整個用例添加完畢。

編輯用例

四、動作

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

鏈接動作

• 打開鏈接：跳轉(zhuǎn)到一個全新的頁面，鏈接打開的方式又可以細(xì)分為：當(dāng)前窗口、新窗口/新標(biāo)簽、彈出窗口、父級窗口。
• 關(guān)閉窗口：關(guān)閉當(dāng)前頁面或彈窗。
• 框架中打開鏈接：在內(nèi)部框架中打開新頁面。
• 滾動到元件：當(dāng)頁面的高度或?qū)挾瘸鰹g覽器的顯示范圍時，可以用到這個功能。此動作，顯示頁面為當(dāng)前頁，并非跳轉(zhuǎn)到新頁面。在添加這個動作時，我們首先需要設(shè)定一個參照元件，設(shè)定了參照元件后，執(zhí)行動作時，頁面會自動滾動到選定的參考元件位置。

元件動作

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

中繼器動作

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

其他動作

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