我們講解了一些關(guān)于交互的基本理論知識，比如交互定義、交互事件、交互用例、交互動作。下面是一些實際應(yīng)用案例，幫助你加深對交互的理解。
一、導航菜單樣式我們以簡書導航為例，來說明所涉及的交互風格和交互事件的設(shè)置。
01觀察交互效果。
通過觀察，我們可以看到簡書的導航有以下兩種交互效果:
鼠標懸停在導航上方時，填充色變?yōu)榛疑髽它c擊導航時，文字變?yōu)榧t色，打開新頁面02畫線圖
首先，從目錄中拖動三個文本標簽到設(shè)計區(qū)域，設(shè)置文本中心，編輯三個文本標簽的內(nèi)容:發(fā)現(xiàn)、注意和消息。三個文本標簽在水平方向上等距離分布。
03設(shè)置互動事件
誰什么時候做了什么？這是上一篇文章中流行的交互定義。我們總結(jié)了主體、事件和動作是交互的三個基本結(jié)構(gòu)。那么這個案例的交互中這三個基本結(jié)構(gòu)是什么呢？我們來拆解分析一下。通過觀察，我們很容易看出有三種交互:鼠標懸停、選擇和鼠標點擊。
鼠標懸停樣式
交互分析
誰:發(fā)現(xiàn)、關(guān)注、新聞
當:鼠標點擊時。
你做了什么？打開鏈接并在當前頁面加載新頁面。
設(shè)置:選擇文本導航，點擊新建交互，在事件列表中選擇樣式交互“鼠標經(jīng)過”，將彈出窗口的填充顏色設(shè)置為灰色。
鼠標懸停樣式
選定的樣式
交互分析
誰:發(fā)現(xiàn)、關(guān)注、新聞
何時:選中時。
你做了什么？導航文本顏色變?yōu)榧t色。交互設(shè)置:選擇文本導航，點擊新建交互，在事件列表中選擇樣式交互“檢查”，在彈出窗口中設(shè)置文本顏色為紅色。
為了保證同一時間只選擇一個導航，我們需要提前將三個導航菜單設(shè)置為一組。選擇三個導航菜單，右鍵選擇設(shè)置選項組，命名為navigation。
選定的樣式
鼠標點擊事件
交互分析
誰:發(fā)現(xiàn)、關(guān)注、新聞
當:鼠標點擊時。
你做了什么:打開鏈接，在當前頁面加載新頁面交互設(shè)置:選擇文本標簽，點擊新建交互，在事件列表中選擇組件事件“鼠標點擊時”，選擇目標組件，添加打開鏈接的動作，選擇打開的頁面，選擇“在頁面中打開”作為打開方式。
鼠標點擊
二、顯示/隱藏對話框點擊一個組件，切換另一個組件或一組組件的可加性，這在Axure中也很容易實現(xiàn)。我們以表單中常見的刪除確認框為例。
01觀察交互效果。
點擊“刪除”按鈕時，頁面彈出對話框，提示：確認刪除該條信息？（彈框下方一般有確認和刪除兩個按鈕）點擊“確認”按鈕，對話框關(guān)閉，信息刪除；點擊“取消”按鈕，對話框關(guān)閉，信息保留02畫線圖
從目錄中拖動一個按鈕到設(shè)計區(qū)，將按鈕文本編輯為“刪除”；將一個矩形元素拖動到設(shè)計區(qū)域，調(diào)整其大小，將一個文本標簽和兩個按鈕拖動到設(shè)計區(qū)域，編輯文本內(nèi)容(確認刪除此消息)和按鈕文本(確認/取消)。調(diào)整這些組件的位置，選擇矩形、文本和兩個按鈕，然后單擊工具欄中的組合按鈕，將這些組件設(shè)置為一個組合并隱藏該組合。
03互動設(shè)置
我們需要為三個按鈕設(shè)置鼠標點擊事件:刪除、確認和取消。
刪除按鈕-鼠標點擊事件
誰:刪除按鈕。
當:鼠標點擊時。
你做了什么:顯示刪除確認對話框窗口。
設(shè)置:選擇刪除按鈕，點擊新建交互，選擇“鼠標點擊事件”，選擇刪除按鈕作為目標元素，選擇顯示/隱藏動作，設(shè)置顯示。
顯示刪除確認對話框。
確認按鈕-鼠標點擊事件
誰:確認按鈕。
當:鼠標點擊時。
你做了什么:隱藏“刪除確認”對話框。設(shè)置:選擇確認按鈕，點擊新建交互，選擇“鼠標點擊事件”，選擇確認按鈕作為目標元素，選擇顯示/隱藏動作，設(shè)置隱藏。
隱藏確認對話框
刪除按鈕的交互設(shè)置與確認按鈕基本相同(此處不考慮表單數(shù)據(jù)的刪除)，只是目標組件不同。
三、頁面載入我們以簡書導航為例。
觀察效果:頁面默認選擇推薦，顯示推薦文章列表。
線框圖表:線框圖表的繪制和所選樣式的設(shè)置在上面的“導航菜單樣式”中已有說明，這里不再贅述。
交互式設(shè)置
交互分析
誰:簡介的第一頁
何時:頁面加載時。
你做了什么:選擇推薦的導航。
設(shè)置:在不選擇任何組件的情況下，點擊頁面的白色部分空，點擊新建交互，在頁面加載時選擇事件，在動作中選擇，找到目標組件“推薦”導航。
聯(lián)系客服
