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