《Axure RP 9網(wǎng)站與App產(chǎn)品交互設(shè)計(jì)實(shí)踐》課件 6.Axure動態(tài)面板

回顧：交互三要素事件：交互的觸發(fā)器，我們可以理解為“當(dāng)……”。如，當(dāng)鼠標(biāo)單擊某個(gè)按鈕，當(dāng)文本框獲得焦點(diǎn)，等。動作：對事件的響應(yīng)，即：交互觸發(fā)后，發(fā)生了什么？如，顯示元件、隱藏元件，打開鏈接頁面，等。用例：動作發(fā)生的條件。如，只有注冊表單信息不為空，才打開注冊成功頁面。回顧：交互三要素事件動作用例1動作1動作2用例2動作

Axure動態(tài)面板技術(shù)型文科人才系列課程主講人：文學(xué)與傳媒學(xué)院新媒體產(chǎn)品設(shè)計(jì)與項(xiàng)目管理案例引入第六章Axure動態(tài)面板目標(biāo)（1）知識目標(biāo)：了解動態(tài)面板元件及狀態(tài)的概念；理解動態(tài)面板元件及其狀態(tài)的關(guān)系

。（2）能力目標(biāo)：熟練掌握創(chuàng)建動態(tài)面板的方法；熟練掌握動態(tài)面板的常用事件和動作；（重點(diǎn)。中階思維和能力）熟練掌握動態(tài)面板制作各種復(fù)雜的交互效果。（難點(diǎn)。高階思維和能力）（3）素養(yǎng)目標(biāo)：培養(yǎng)學(xué)生提出問題、分析問題、解決問題的能力；（高階思維和能力）培養(yǎng)學(xué)生養(yǎng)成知識總結(jié)習(xí)慣；培養(yǎng)學(xué)生表達(dá)演示素養(yǎng)。第六章Axure動態(tài)面板6.1AxureRP動態(tài)面板元件及狀態(tài)6.2動態(tài)面板的事件和動作6.3利用動態(tài)面板實(shí)現(xiàn)圖片自動輪播高階思維和能力擴(kuò)展：（1）分別添加左、右箭頭（icon元件庫中），當(dāng)點(diǎn)擊向左箭頭圖標(biāo)時(shí)，圖片向右滑動切換上一幅圖；當(dāng)點(diǎn)擊向右箭頭圖標(biāo)時(shí)，圖片向左滑動切換下一幅圖。（2）在動態(tài)面板上，鼠標(biāo)左滑動時(shí)，圖片向左滑動切換下一幅圖；鼠標(biāo)左滑動時(shí)，圖片向右滑動切換上一幅圖。第六章Axure動態(tài)面板6.1AxureRP動態(tài)面板元件及狀態(tài)動態(tài)面板有多個(gè)狀態(tài)每個(gè)狀態(tài)本身是一個(gè)頁面任何時(shí)候一個(gè)動態(tài)面板只能顯示一種狀態(tài)第一個(gè)狀態(tài)為默認(rèn)狀態(tài)通過設(shè)置面板狀態(tài)來控制狀態(tài)的顯示順序或隱藏/達(dá)成交互的效果動態(tài)面板添加動態(tài)面板1.直接通過拖拽的方式從元件面板加入到畫布中2.將頁面中的元件或元件組轉(zhuǎn)換成動態(tài)面板演示：在動態(tài)面板狀態(tài)1中添加圖片元件，或?qū)D片轉(zhuǎn)換成動態(tài)面板動態(tài)面板狀態(tài)管理（1）雙擊頁面中的動態(tài)面板元件。進(jìn)入到動態(tài)面板的第1個(gè)狀態(tài)，在狀態(tài)頂部菜單中執(zhí)行【管理面板狀態(tài)】命令。（2）在【概要】面板中,雙擊動態(tài)面板元件或者也右擊它,從彈出的快捷菜單中執(zhí)行【管理面板狀態(tài)】命令?？梢蕴砑?、刪除、上移、下移、復(fù)制狀態(tài),或編輯狀態(tài)內(nèi)容等。演示：復(fù)制4個(gè)狀態(tài)，分別添加不同的圖片6.2動態(tài)面板的事件和動作動態(tài)面板的事件【載入時(shí)】剛在網(wǎng)頁中加載動態(tài)面板【狀態(tài)改變時(shí)】指從一個(gè)狀態(tài)切換到另一個(gè)狀態(tài)?！就蟿訒r(shí)】【拖動開始時(shí)】、【拖動結(jié)束時(shí)】如使用鼠標(biāo)拖動動態(tài)面板完成諸如拼圖的游戲等操作?！鞠蜃笸蟿咏Y(jié)束時(shí)】、【向右拖動結(jié)束時(shí)】、【向上拖動結(jié)束時(shí)】和【向下拖動結(jié)束時(shí)】如滑屏動作6.2動態(tài)面板的事件和動作動態(tài)面板的動作1.選擇狀態(tài)可以選擇動態(tài)面板中的某個(gè)狀態(tài)【下一項(xiàng)】顯示下一個(gè)狀態(tài)，還可以指定是否向后循環(huán)以及循環(huán)的間隔時(shí)間等。【上一項(xiàng)】顯示上一個(gè)狀態(tài)，還可以指定是否向前循環(huán)以及循環(huán)的間隔時(shí)間等?！就Ｖ寡h(huán)】停止動態(tài)面板的狀態(tài)循環(huán)。【值】將狀態(tài)名或狀態(tài)序列號作為指定的顯示狀態(tài)。2.進(jìn)入和退出動畫可以設(shè)置由一個(gè)狀態(tài)進(jìn)入另一個(gè)狀態(tài)時(shí)的動畫過渡效果。第六章Axure動態(tài)面板事件用例動作動態(tài)面板“載入時(shí)”

圖片動態(tài)面板狀態(tài)改變?yōu)椤盃顟B(tài)2”，動畫：向左滑動動態(tài)面板“狀態(tài)改變時(shí)”圖片動態(tài)面板狀態(tài)改變?yōu)椤跋乱豁?xiàng)”，“向后循環(huán)”，設(shè)置動畫：向左滑動；重復(fù)間隔時(shí)間。6.3動態(tài)面板實(shí)現(xiàn)滑動圖片輪播第六章Axure動態(tài)面板6.3動態(tài)面板實(shí)現(xiàn)滑動圖片輪播

演示在圖片下方，添加圓點(diǎn)動態(tài)面板；圖片下方小圓點(diǎn)隨著圖片變化同步變化；（狀態(tài)變化和時(shí)間間隔需要一致）事件用例動作單擊圓點(diǎn)熱區(qū)時(shí)

圖片動態(tài)面板狀態(tài)隨之改變第六章Axure動態(tài)面板高階思維和能力擴(kuò)展：（1）分別添加左、右箭頭（icon元件庫中），當(dāng)點(diǎn)擊向左箭頭圖標(biāo)時(shí)，圖片向右滑動切換上一幅圖；當(dāng)點(diǎn)擊向右箭頭圖標(biāo)時(shí)，圖片向左滑動切換下一幅圖。（2）在動態(tài)面板上，鼠標(biāo)左滑動結(jié)束時(shí)，面板向左滑動切換下一幅圖；鼠標(biāo)右滑動結(jié)束時(shí)，面板向右滑動切換上一幅圖。事件用例動作圖片動態(tài)面板“左滑動結(jié)束時(shí)”

圖片動態(tài)面板狀態(tài)變?yōu)椤毕乱豁?xiàng)”圖片動態(tài)面板“右滑動結(jié)束時(shí)”圖片動態(tài)面板狀態(tài)變?yōu)椤鄙弦豁?xiàng)”小結(jié)動態(tài)面板支持在同一個(gè)區(qū)域內(nèi)放置多個(gè)狀態(tài)的內(nèi)容，選擇顯示其中一個(gè)狀態(tài)