国产精品白浆一区二区亚洲,忘忧草社区在线播放日本韩国,日韩人妻精品无码一区二区三区

給大家講解了交互定義、交互事件、交互用例和交互動(dòng)作等有關(guān)交互的一些基礎(chǔ)理論知識(shí) 。下面我們通過一些實(shí)際的應(yīng)用案例，幫助大家加深對(duì)交互的理解。
一、導(dǎo)航菜單樣式我們以簡書的導(dǎo)航為例，說明其中涉及的交互樣式和交互事件的設(shè)置。
01 觀察交互效果
通過觀察，我們可以看到簡書的導(dǎo)航有以下兩個(gè)交互效果：

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

02 繪制線框圖
首先從元件庫拖動(dòng)三個(gè)文本標(biāo)簽至設(shè)計(jì)區(qū)域，設(shè)置文本居中，編輯三個(gè)文本標(biāo)簽內(nèi)容分別為：發(fā)現(xiàn)、關(guān)注和消息。三個(gè)文本標(biāo)簽水平方向等距離分布。
03 設(shè)置交互事件
誰在什么時(shí)候，做了什么事，這是上一篇中對(duì)于交互的通俗定義。我們總結(jié)歸納了主體、事件和動(dòng)作是構(gòu)成交互的3個(gè)基本結(jié)構(gòu)，那么在本案例的交互中，這3個(gè)基本結(jié)構(gòu)是怎樣的，我們來拆解分析。通過觀察，我們不難看出，這里面包含了：鼠標(biāo)懸停、選中、鼠標(biāo)單擊三個(gè)交互。
鼠標(biāo)懸停樣式
交互分析
誰：發(fā)現(xiàn)、關(guān)注、消息
在什么時(shí)候：鼠標(biāo)單擊時(shí)
做了什么事：打開鏈接，在當(dāng)前頁加載了新頁面
交互設(shè)置：選中文本導(dǎo)航，點(diǎn)擊新建交互，事件列表中選擇樣式交互“鼠標(biāo)懸?！保趶棾龃翱谠O(shè)置填充色為灰色。

鼠標(biāo)懸停樣式
選中樣式
交互分析
誰：發(fā)現(xiàn)、關(guān)注、消息
在什么時(shí)候：選中時(shí)
做了什么事：導(dǎo)航文字顏色變?yōu)榧t色交互設(shè)置：選中文本導(dǎo)航，點(diǎn)擊新建交互，事件列表中選擇樣式交互“選中”，在彈出窗口中設(shè)置文字顏色為紅色。

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

選中樣式
鼠標(biāo)單擊事件
交互分析
誰：發(fā)現(xiàn)、關(guān)注、消息
在什么時(shí)候：鼠標(biāo)單擊時(shí)
做了什么事：打開鏈接，在當(dāng)前頁加載了新頁面交互設(shè)置：選中文本標(biāo)簽，點(diǎn)擊新建交互，事件列表中選擇元件事件“鼠標(biāo)單擊時(shí)”，選擇目標(biāo)元件，添加動(dòng)作打開鏈接，選擇打開的頁面，打開方式選擇“在頁面中打開” 。

鼠標(biāo)單擊
二、顯示/隱藏對(duì)話框單擊元件切換另外一個(gè)或一組元件的可加性，在Axure 中也是很容易實(shí)現(xiàn)的，我們以表單中常見的刪除確認(rèn)彈框?yàn)槔?。
01 觀察交互效果

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

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