上一篇給大家講解了交互定義、交互事件、交互用例和交互動作等有關(guān)交互的一些基礎(chǔ)理論知識。下面我們通過一些實際的應(yīng)用案例，幫助大家加深對交互的理解。

一、導(dǎo)航菜單樣式

我們以簡書的導(dǎo)航為例，說明其中涉及的交互樣式和交互事件的設(shè)置。

01 觀察交互效果

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

• 鼠標(biāo)懸停在導(dǎo)航上方時，填充色變?yōu)榛疑?/li>
• 鼠標(biāo)點擊導(dǎo)航時，文字變?yōu)榧t色，打開新頁面。

02 繪制線框圖

首先從元件庫拖動三個文本標(biāo)簽至設(shè)計區(qū)域，設(shè)置文本居中，編輯三個文本標(biāo)簽內(nèi)容分別為：發(fā)現(xiàn)、關(guān)注和消息。三個文本標(biāo)簽水平方向等距離分布。

03 設(shè)置交互事件

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

鼠標(biāo)懸停樣式
交互分析
誰：發(fā)現(xiàn)、關(guān)注、消息。
在什么時候：鼠標(biāo)單擊時。
做了什么事：打開鏈接，在當(dāng)前頁加載了新頁面。

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

鼠標(biāo)懸停.png

• 誰：發(fā)現(xiàn)、關(guān)注、消息。
• 在什么時候：選中時。
• 做了什么事：導(dǎo)航文字顏色變?yōu)榧t色。

交互設(shè)置
選中文本導(dǎo)航，點擊新建交互，事件列表中選擇樣式交互“選中”，在彈出窗口中設(shè)置文字顏色為紅色。

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

選中樣式.png

• 誰：發(fā)現(xiàn)、關(guān)注、消息
• 在什么時候：鼠標(biāo)單擊時
• 做了什么事：打開鏈接，在當(dāng)前頁加載了新頁面

交互設(shè)置
選中文本標(biāo)簽，點擊新建交互，事件列表中選擇元件事件“鼠標(biāo)單擊時”，選擇目標(biāo)元件，添加動作打開鏈接，選擇打開的頁面，打開方式選擇“在頁面中打開”。

鼠標(biāo)單擊.png

二、顯示/隱藏對話框

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

01 觀察交互效果

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

02 繪制線框圖

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

03 交互設(shè)置

我們需要為刪除、確認(rèn)、取消這三個按鈕分別設(shè)置鼠標(biāo)單擊事件。
刪除按鈕-鼠標(biāo)單擊事件

• 誰：刪除按鈕。
• 在什么時候：鼠標(biāo)單擊時。
• 做了什么事：顯示刪除確認(rèn)對話窗口。

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

顯示刪除確認(rèn)對話框.png

• 誰：確認(rèn)按鈕。
• 在什么時候：鼠標(biāo)單擊時。
• 做了什么事：隱藏“刪除確認(rèn)”對話窗口。

交互設(shè)置
選中確認(rèn)按鈕，點擊新建交互，選擇“鼠標(biāo)單擊事件”，選擇確認(rèn)按鈕為目標(biāo)元件，選擇顯示/隱藏動作，設(shè)置隱藏。

隱藏刪除確認(rèn)對話框.png

三、頁面載入

我們還是以簡書的導(dǎo)航為例。

01觀察交互效果

頁面默認(rèn)選中推薦，顯示推薦的文章列表。

02線框圖

線框圖的繪制以及選中樣式的設(shè)置在上文“導(dǎo)航菜單樣式”已說明，這里不做重復(fù)說明。

03交互設(shè)置

交互分析

• 誰：簡書首頁
• 在什么時候：頁面加載時
• 做了什么事：選中推薦導(dǎo)航

交互設(shè)置
點擊頁面空白處，不選中任何元件，點擊新建交互，選擇頁面加載時事件，動作中選擇選中，找到目標(biāo)元件“推薦”導(dǎo)航。

頁面載入時.png

如果你對Axure或原型設(shè)計有興趣，希望系統(tǒng)性地學(xué)習(xí)Axure知識，掌握更多Axure使用技巧；或者希望通過臨摹交互案例，進一步提升高保交互設(shè)計能力。請點擊下方關(guān)注按鈕，查看更多連載作品。
點擊獲取案例作品源文件