Axure 9.0基礎教程：3個案例，告訴你什麼是互動
上一篇給大家講解了互動定義、互動事件、互動用例和互動動作等有關互動的一些基礎理論知識。下面我們通過一些實際的應用案例，幫助大家加深對互動的理解。
一、導航選單樣式
我們以簡書的導航為例，說明其中涉及的互動樣式和互動事件的設定。
01 觀察互動效果
通過觀察，我們可以看到簡書的導航有以下兩個互動效果：
- 滑鼠懸停在導航上方時，填充色變為灰色
- 滑鼠點選導航時，文字變為紅色，開啟新頁面
02 繪製線框圖
首先從元件庫拖動三個文字標籤至設計區域，設定文字居中，編輯三個文字標籤內容分別為：發現、關注和訊息。三個文字標籤水平方向等距離分佈。
03 設定互動事件
誰在什麼時候，做了什麼事，這是上一篇中對於互動的通俗定義。我們總結歸納了主體、事件和動作是構成互動的3個基本結構，那麼在本案例的互動中，這3個基本結構是怎樣的，我們來拆解分析。通過觀察，我們不難看出，這裡麵包含了：滑鼠懸停、選中、滑鼠單擊三個互動。
滑鼠懸停樣式
互動分析
誰：發現、關注、訊息
在什麼時候：滑鼠單擊時
做了什麼事：開啟連結，在當前頁載入了新頁面
互動設定：選中文字導航，點選新建互動，事件列表中選擇樣式互動“滑鼠懸停”，在彈出視窗設定填充色為灰色。
滑鼠懸停.png
選中樣式
互動分析
誰：發現、關注、訊息
在什麼時候：選中時
做了什麼事：導航文字顏色變為紅色
互動設定：選中文字導航，點選新建互動，事件列表中選擇樣式互動“選中”，在彈出視窗中設定文字顏色為紅色。
為了保證在同一時間只有一個導航被選中，我們需要事先將三個導航選單設定為一個組。選中三個導航選單，右鍵點選選擇設定選項組，命名為導航。
選中樣式.png
滑鼠單擊事件
互動分析
誰：發現、關注、訊息
在什麼時候：滑鼠單擊時
做了什麼事：開啟連結，在當前頁載入了新頁面
互動設定：選中文字標籤，點選新建互動，事件列表中選擇元件事件“滑鼠單擊時”，選擇目標元件，新增動作開啟連結，選擇開啟的頁面，開啟方式選擇“在頁面中開啟”。
滑鼠單擊.png
二、顯示/隱藏對話方塊
單擊元件切換另外一個或一組元件的可加性，在Axure 中也是很容易實現的，我們以表單中常見的刪除確認彈框為例。
01 觀察互動效果
- 點選“刪除”按鈕時，頁面彈出對話方塊，提示：確認刪除該條資訊？（彈框下方一般有確認和刪除兩個按鈕）
- 點選“確認”按鈕，對話方塊關閉，資訊刪除；點選“取消”按鈕，對話方塊關閉，資訊保留
02 繪製線框圖
從元件庫中拖動一個按鈕至設計區域，編輯按鈕文字為“刪除”；拖動一個矩形元件至設計區域，調整好尺寸，拖動一個文字標籤和兩個按鈕至設計區域，編輯文字內容（確認刪除該條資訊）和按鈕文字（確認/取消）。調整好這些元件的位置，選中矩形、文字、和兩個按鈕，點選工具欄的組合按鈕，將這些元件設定為一個組合，將組合隱藏。
03 互動設定
我們需要為刪除、確認、取消這三個按鈕分別設定滑鼠單擊事件。
刪除按鈕-滑鼠單擊事件
誰：刪除按鈕。
在什麼時候：滑鼠單擊時。
做了什麼事：顯示刪除確認對話視窗。
互動設定：選中刪除按鈕，點選新建互動，選擇“滑鼠單擊事件”，選擇刪除按鈕為目標元件，選擇顯示/隱藏動作，設定顯示。
顯示刪除確認對話方塊.png
確認按鈕-滑鼠單擊事件
誰：確認按鈕。
在什麼時候：滑鼠單擊時。
做了什麼事：隱藏“刪除確認”對話視窗。
互動設定：選中確認按鈕，點選新建互動，選擇“滑鼠單擊事件”，選擇確認按鈕為目標元件，選擇顯示/隱藏動作，設定隱藏。
隱藏刪除確認對話方塊.png
刪除按鈕的互動設定基本與確認按鈕一致（這裡不考慮表單資料的刪除），只是目標元件不同。
三、頁面載入
我們還是以簡書的導航為例。
觀察互動效果：頁面預設選中推薦，顯示推薦的文章列表。
線框圖：線框圖的繪製以及選中樣式的設定在上文“導航選單樣式”已說明，這裡不做重複說明。
互動設定
互動分析
誰：簡書首頁
在什麼時候：頁面載入時
做了什麼事：選中推薦導航
互動設定：點選頁面空白處，不選中任何元件，點選新建互動，選擇頁面載入時事件，動作中選擇選中，找到目標元件“推薦”導航。
頁面載入時.png
如果你對Axure或原型設計有興趣，希望系統性地學習Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹互動案例，進一步提升高保互動設計能力。 請點選下方關注按鈕，檢視更多連載作品 。
ofollow,noindex">點選獲取案例作品原始檔