給大家講解了交互定義、交互事件、交互用例和交互動作等有關交互的一些基礎理論知識。下面我們通過一些實際的應用案例，幫助大家加深對交互的理解。

一、導航菜單樣式

我們以簡書的導航為例，說明其中涉及的交互樣式和交互事件的設置。

01 觀察交互效果

通過觀察，我們可以看到簡書的導航有以下兩個交互效果：

• 鼠標懸停在導航上方時，填充色變為灰色
• 鼠標點擊導航時，文字變為紅色，打開新頁面

02 繪製線框圖

首先從元件庫拖動三個文本標籤至設計區域，設置文本居中，編輯三個文本標籤內容分別為：發現、關注和消息。三個文本標籤水平方向等距離分布。

03 設置交互事件

誰在什麼時候，做了什麼事，這是上一篇中對於交互的通俗定義。我們總結歸納了主體、事件和動作是構成交互的3個基本結構，那麼在本案例的交互中，這3個基本結構是怎樣的，我們來拆解分析。通過觀察，我們不難看出，這裡面包含了：鼠標懸停、選中、鼠標單擊三個交互。

鼠標懸停樣式

交互分析

誰：發現、關注、消息

在什麼時候：鼠標單擊時

做了什麼事：打開鏈接，在當前頁加載了新頁面

交互設置：選中文本導航，點擊新建交互，事件列表中選擇樣式交互“鼠標懸停”，在彈出窗口設置填充色為灰色。

鼠標懸停樣式

選中樣式

交互分析

誰：發現、關注、消息

在什麼時候：選中時

做了什麼事：導航文字顏色變為紅色交互設置：選中文本導航，點擊新建交互，事件列表中選擇樣式交互“選中”，在彈出窗口中設置文字顏色為紅色。

為了保證在同一時間只有一個導航被選中，我們需要事先將三個導航菜單設置為一個組。選中三個導航菜單，右鍵點擊選擇設置選項組，命名為導航。

選中樣式

鼠標單擊事件

交互分析

誰：發現、關注、消息

在什麼時候：鼠標單擊時

做了什麼事：打開鏈接，在當前頁加載了新頁面交互設置：選中文本標籤，點擊新建交互，事件列表中選擇元件事件“鼠標單擊時”，選擇目標元件，添加動作打開鏈接，選擇打開的頁面，打開方式選擇“在頁面中打開”。

鼠標單擊

二、顯示/隱藏對話框

單擊元件切換另外一個或一組元件的可加性，在Axure 中也是很容易實現的，我們以表單中常見的刪除確認彈框為例。

01 觀察交互效果

• 點擊“刪除”按鈕時，頁面彈出對話框，提示：確認刪除該條信息？（彈框下方一般有確認和刪除兩個按鈕）
• 點擊“確認”按鈕，對話框關閉，信息刪除；點擊“取消”按鈕，對話框關閉，信息保留

02 繪製線框圖

從元件庫中拖動一個按鈕至設計區域，編輯按鈕文字為“刪除”；拖動一個矩形元件至設計區域，調整好尺寸，拖動一個文本標籤和兩個按鈕至設計區域，編輯文本內容（確認刪除該條信息）和按鈕文字（確認/取消）。調整好這些元件的位置，選中矩形、文本、和兩個按鈕，點擊工具欄的組合按鈕，將這些元件設置為一個組合，將組合隱藏。

03 交互設置

我們需要為刪除、確認、取消這三個按鈕分別設置鼠標單擊事件。

刪除按鈕-鼠標單擊事件

誰：刪除按鈕。

在什麼時候：鼠標單擊時。

做了什麼事：顯示刪除確認對話窗口。

交互設置：選中刪除按鈕，點擊新建交互，選擇“鼠標單擊事件”，選擇刪除按鈕為目標元件，選擇顯示/隱藏動作，設置顯示。

顯示刪除確認對話框

確認按鈕-鼠標單擊事件

誰：確認按鈕。

在什麼時候：鼠標單擊時。

做了什麼事：隱藏“刪除確認”對話窗口。交互設置：選中確認按鈕，點擊新建交互，選擇“鼠標單擊事件”，選擇確認按鈕為目標元件，選擇顯示/隱藏動作，設置隱藏。

隱藏刪除確認對話框

刪除按鈕的交互設置基本與確認按鈕一致（這裡不考慮表單數據的刪除），只是目標元件不同。

三、頁面載入

我們還是以簡書的導航為例。

觀察交互效果：頁面默認選中推薦，顯示推薦的文章列表。

線框圖：線框圖的繪製以及選中樣式的設置在上文“導航菜單樣式”已說明，這裡不做重複說明。

交互設置

交互分析

誰：簡書首頁

在什麼時候：頁面加載時

做了什麼事：選中推薦導航

交互設置：點擊頁面空白處，不選中任何元件，點擊新建交互，選擇頁面加載時事件，動作中選擇選中，找到目標元件“推薦”導航。