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

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

元件文字長度<6動作1：隱藏密碼提示信息動作2：密碼格式提示

設(shè)置文本

密碼格式不符合要求

用例2：密碼文本框

元件文字長度>=6動作：隱藏密碼提示信息動作2：密碼格式提示

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