《Axure RP 9網(wǎng)站與App產(chǎn)品交互設(shè)計(jì)實(shí)踐》課件 5.Axure交互基礎(chǔ)

Axure交互基礎(chǔ)技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理第五章AxureRP交互基礎(chǔ)5.1AxureRP交互的三要素5.2實(shí)現(xiàn)注冊(cè)信息驗(yàn)證交互功能第五章AxureRP交互基礎(chǔ)5.1AxureRP交互的三要素事件（events）：是一個(gè)交互的觸發(fā)器，例如，一個(gè)點(diǎn)擊，鼠標(biāo)懸停，鼠標(biāo)拖動(dòng)，一個(gè)拖放等。不同的部件擁有不同的響應(yīng)事件。用例（cases）：是響應(yīng)事件的路徑，它可以定義條件邏輯。動(dòng)作（actions）：對(duì)事件的響應(yīng)，也可以理解為事件的結(jié)果。事件：當(dāng)……，什么時(shí)候第五章AxureRP交互基礎(chǔ)Axure的事件有兩種：頁面事件：頁面加載時(shí)/頁面載入……頁面載入時(shí)OnPageLoad:當(dāng)頁面啟動(dòng)加載時(shí)窗口改變大小時(shí)OnWindowResize:當(dāng)瀏覽器窗口大小改變時(shí)窗口滾動(dòng)時(shí)OnWindowScroll:當(dāng)瀏覽器窗口滾動(dòng)時(shí)鼠標(biāo)單擊時(shí)OnClick:頁面中的任何部件被點(diǎn)擊時(shí)（不含空白處）鼠標(biāo)雙擊時(shí)OnDoubleClick:當(dāng)頁面中的任何部件被雙擊時(shí)（不含空白處）鼠標(biāo)右鍵單擊時(shí)OnContextMenu:當(dāng)頁面中的任何部件被鼠標(biāo)右鍵點(diǎn)擊時(shí)（不含空白處）鼠標(biāo)移動(dòng)時(shí)OnMouseMove:當(dāng)鼠標(biāo)在頁面任何位置移動(dòng)時(shí)按鍵按下時(shí)OnKeyDown:當(dāng)鍵盤上的按鍵按下時(shí)按鍵彈起時(shí)OnKeyUp:當(dāng)鍵盤上的按鍵釋放時(shí)自適應(yīng)視圖更改時(shí)OnAdaptiveViewChange:當(dāng)自適應(yīng)視圖更改時(shí)當(dāng)……什么時(shí)候第五章AxureRP交互基礎(chǔ)Axure的事件有兩種：元件事件鼠標(biāo)單擊時(shí)/鼠標(biāo)移入時(shí)……鼠標(biāo)點(diǎn)擊并保持超過2秒時(shí)OnLongClick:當(dāng)一個(gè)部件被點(diǎn)擊并且鼠標(biāo)按鍵保持超過2秒時(shí)按鍵按下時(shí)OnKeyDown:當(dāng)鍵盤上的鍵按下時(shí)按鍵彈起時(shí)OnKeyUp:當(dāng)鍵盤上的鍵彈起時(shí)移動(dòng)OnMove:當(dāng)面板移動(dòng)時(shí)顯示OnShow:當(dāng)面板通過交互動(dòng)作顯示時(shí)隱藏OnHide:當(dāng)面板通過交互動(dòng)作隱藏時(shí)獲取焦點(diǎn)OnFocus:當(dāng)一個(gè)表單獲取焦點(diǎn)時(shí)失去焦點(diǎn)時(shí)OnLostFocus:當(dāng)一個(gè)部件失去焦點(diǎn)時(shí)鼠標(biāo)單擊時(shí)OnClick:當(dāng)部件被點(diǎn)擊鼠標(biāo)移入時(shí)OnMouseEnter:當(dāng)光標(biāo)移入部件范圍鼠標(biāo)移出時(shí)OnMouseOut:當(dāng)光標(biāo)移出部件范圍鼠標(biāo)雙擊時(shí)OnDoubleClick:當(dāng)時(shí)鼠標(biāo)雙擊時(shí)鼠標(biāo)右鍵單擊時(shí)OnContextMenu:當(dāng)鼠標(biāo)右鍵點(diǎn)擊時(shí)鼠標(biāo)按鍵按下時(shí)OnMouseDown:當(dāng)鼠標(biāo)按下且沒有釋放時(shí)鼠標(biāo)按鍵釋放時(shí)OnMouseUp:當(dāng)一個(gè)部件被鼠標(biāo)點(diǎn)擊,這個(gè)事件由鼠標(biāo)按鍵釋放觸發(fā)鼠標(biāo)移動(dòng)時(shí)OnMouseMove:當(dāng)光標(biāo)在一個(gè)部件上移動(dòng)時(shí)鼠標(biāo)懸停超過2秒時(shí)OnMouseHover:當(dāng)光標(biāo)在一個(gè)部件上懸停超過2秒時(shí)動(dòng)作動(dòng)作1.鏈接：切換用戶UI鏈接動(dòng)作包括當(dāng)前窗口打開鏈接、新窗口/標(biāo)簽頁打開鏈接、彈出窗口打開鏈接、父窗口打開鏈接、關(guān)閉窗口、內(nèi)部框架打開鏈接以及滾動(dòng)到部件（錨點(diǎn)鏈接）。動(dòng)作2.元件：元件效果元件動(dòng)作是常用到的交互行為，它分為元件的顯示/隱藏行為、設(shè)置元件文本行為、設(shè)置元件圖像行為、設(shè)置元件選擇/選中行為、設(shè)置元件選定的列表項(xiàng)行為、設(shè)置元件啟用/禁用行為，設(shè)置元件移動(dòng)行為，設(shè)置元件置于頂層/底層行為、設(shè)置元件獲得焦點(diǎn)行為、設(shè)置元件展開/折疊樹節(jié)點(diǎn)行為，元件的交互行為越豐富，制作出的原型交互效果體驗(yàn)度越真實(shí)。動(dòng)作3.設(shè)置動(dòng)態(tài)面板動(dòng)態(tài)面板的動(dòng)作包括設(shè)置動(dòng)態(tài)面板的顯示、隱藏以及設(shè)置動(dòng)態(tài)面板的顯示效果，同時(shí)可以設(shè)置動(dòng)態(tài)面板的大小，通過動(dòng)態(tài)面板的使用，可以使原型的交互效果更真實(shí)，體驗(yàn)度更好動(dòng)作4.中繼器：動(dòng)態(tài)操作數(shù)據(jù)中繼器的動(dòng)作可以實(shí)現(xiàn)對(duì)數(shù)據(jù)的增加、刪除、修改、查詢等功能，模擬真實(shí)系統(tǒng)的數(shù)據(jù)庫操作，進(jìn)一步加強(qiáng)交互效果，給用戶最真實(shí)的系統(tǒng)使用體驗(yàn)。案例當(dāng)“用戶名”文本框獲取焦點(diǎn)時(shí)，顯示提示信息；當(dāng)“用戶名”文本框失去焦點(diǎn)時(shí)，隱藏提示信息；交互對(duì)象：用戶名文本框事件：當(dāng)用戶名文本框獲取焦點(diǎn)時(shí)動(dòng)作：顯示提示信息事件：當(dāng)用戶名文本框失去焦點(diǎn)時(shí)動(dòng)作：隱藏提示信息注意：提示信息初始狀態(tài)為隱藏。交互對(duì)象：密碼文本框事件：當(dāng)密碼文本框獲取焦點(diǎn)時(shí)動(dòng)作：顯示密碼提示信息用例1.新建、刪除條件和條件之間關(guān)系當(dāng)選擇“全部”的時(shí)候，多個(gè)條件是并集關(guān)系，當(dāng)設(shè)置的條件都滿足時(shí)，才執(zhí)行相關(guān)動(dòng)作。選擇“任意”的時(shí)候，當(dāng)多個(gè)條件有一個(gè)滿足時(shí)，就可以執(zhí)行相關(guān)動(dòng)作。2.條件設(shè)置條件設(shè)置部分可以理解為三個(gè)部分，用來比較圖的圈4和圈6的關(guān)系，圖圈5是運(yùn)算符，是比較方式。隨著圖的圈4選擇，圈6也是隨著變化。交互對(duì)象：密碼文本框事件：當(dāng)密碼文本框失去焦點(diǎn)時(shí)用例1：密碼文本框

元件文字長(zhǎng)度<6動(dòng)作1：隱藏密碼提示信息動(dòng)作2：密碼格式提示

設(shè)置文本

密碼格式不符合要求

用例2：密碼文本框

元件文字長(zhǎng)度>=6動(dòng)作：隱藏密碼提示信息動(dòng)作2：密碼格式提示

設(shè)置文本“”案例當(dāng)“密碼”文本框失去焦點(diǎn)時(shí)，判斷密碼是否大于6位，否則顯示提示信息：密碼設(shè)置不符合要求；案例:多個(gè)邏輯條件當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果用戶名、手機(jī)號(hào)、密碼文本框?yàn)榭眨瑒t提示“用戶名、密碼、手機(jī)號(hào)不符合要求”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果未選中“閱讀同意協(xié)議”，則提示“請(qǐng)閱讀并同意用戶協(xié)議”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果文本框不為空且同意協(xié)議，則打開鏈接“注冊(cè)成功”頁面。案例:多個(gè)邏輯條件5.2實(shí)現(xiàn)注冊(cè)信息驗(yàn)證交互功能案例描述：當(dāng)鼠標(biāo)懸停用戶名、手機(jī)號(hào)、密碼文本框或獲取焦點(diǎn)時(shí)，邊框顏色改變；當(dāng)“用戶名”文本框獲取焦點(diǎn)時(shí)，顯示提示信息，失去焦點(diǎn)時(shí)，隱藏提示信息；當(dāng)“密碼”文本框失去焦點(diǎn)時(shí)，判斷密碼是否大于6位，否則顯示提示信息；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果用戶名、手機(jī)號(hào)、密碼文本框?yàn)榭眨瑒t提示“不能為空”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果為選中“閱讀同意協(xié)議”，則提示“請(qǐng)閱讀并同意用戶協(xié)議”；當(dāng)鼠標(biāo)單擊“注冊(cè)”按鈕時(shí)，如果