- 相關(guān)推薦
AxureRP動態(tài)面板交互設(shè)計實例教程
主要是對AxureRP 動態(tài)面板交互設(shè)計實例教程的介紹，有需要的朋友可以參考一下。就跟隨百分網(wǎng)小編一起去了解下吧，想了解更多相關(guān)信息請持續(xù)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
網(wǎng)站開發(fā)技術(shù)越來越豐富了，不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術(shù)，能夠讓網(wǎng)站界面更豐富，展現(xiàn)更優(yōu)質(zhì)的人機交互。Axure RP能夠進行交互設(shè)計，且可以立即將結(jié)果呈現(xiàn)于原型上，而不是只有文字?jǐn)⑹觥Ｇ覍W(xué)習(xí)Axure RP的交互設(shè)計，并不需要學(xué)習(xí)HTML或Java Script語法，通過直觀設(shè)計就可以完成多樣的交互界面設(shè)計。在Axure RP設(shè)計出來的原型中，最簡單的交互設(shè)計是網(wǎng)頁鏈接，真正發(fā)揮Axure RP在交互設(shè)計上的驚人特色，并不是只有超鏈接這么簡單的交互，下面通過介紹動態(tài)面板的操作與控制，來學(xué)習(xí)更豐富更友善的交互界面設(shè)計。
動態(tài)面板是專門用來設(shè)計動態(tài)原型功能的組件，每個動態(tài)面板可以包含一個或多個狀態(tài)，每個狀態(tài)本身是一個頁面，通過控制狀態(tài)的顯示順序或隱藏/顯示動態(tài)面板來達成交互界面的效果，像其它組件一樣，動態(tài)面板可以直接通過拖拽的方式從組件選擇面板加入到畫布中。
動態(tài)面板：本身可以包含很多個狀態(tài)，而每個狀態(tài)都是一個小網(wǎng)頁。被放置在最上層的狀態(tài)就是該面板的界面，即默認(rèn)展示效果。
狀態(tài)：每個狀態(tài)都是一個小網(wǎng)頁，而這個小網(wǎng)頁的邊界與大小，與所屬的動態(tài)面板大小相同。不同的狀態(tài)可以重疊在同一個動態(tài)面板里頭，只有放在最上層的狀態(tài)，才會呈現(xiàn)于原型的默認(rèn)畫面中。以Axure RP所設(shè)計出來的多樣交互界面，大多由各種觸發(fā)事件來控制動態(tài)面板顯示或消失，或控制哪個狀態(tài)在最上層來仿真出實際的交互界面。
在動態(tài)面板上鼠標(biāo)左鍵雙擊，會開啟動態(tài)面板狀態(tài)管理對話框。在這個對話窗口中，可以新增狀態(tài)、更改狀態(tài)名稱、調(diào)整狀態(tài)排序、刪除狀態(tài)與編輯狀態(tài)。在動態(tài)面板狀態(tài)管理對話框中選擇一個狀態(tài)，然后按下編輯狀態(tài)鈕或者直接雙擊改狀態(tài)，會開啟這個狀態(tài)的線框圖以供設(shè)計�；蛘呖梢赃x擇編輯所有狀態(tài)鈕，一口氣把所有的狀態(tài)頁面通通開啟。打開后就可以像設(shè)計其它線框圖一樣的設(shè)計狀態(tài)頁面， 每個狀態(tài)頁面的側(cè)邊藍色虛線外框就表示其所屬的動態(tài)面板的邊界。
動態(tài)面板可以預(yù)設(shè)為隱藏，做法是在動態(tài)面板上按鼠標(biāo)右鍵，并選擇編輯動態(tài)面板->設(shè)為隱藏，這樣就可以隱藏面板的內(nèi)容，而且動態(tài)面板也會從藍色變成黃色。已經(jīng)預(yù)設(shè)隱藏的動態(tài)面板，可以選擇編輯動態(tài)面板->設(shè)為可見來顯示。
在交互事件屬性對話框中有5種交互方式是專門用來控制動態(tài)面板的，分別是:
•Set Panel state(s) to State(s)：設(shè)置動態(tài)面板的狀態(tài)轉(zhuǎn)換
•Show Panel(s)：顯示動態(tài)面板
•Hide Panel(s)：隱藏動態(tài)面板
•Toggle Visibility for Panel(s)：切換動態(tài)面板可見屬性
•Move Panel(s)：移動動態(tài)面板，可根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動
下面以最常見的Tab標(biāo)簽切換效果來演示動態(tài)面板的交互效果。新增一個動態(tài)面板，設(shè)置兩個狀態(tài)，分別在兩個狀態(tài)中設(shè)計成如下小頁面：
設(shè)置狀態(tài)1在狀態(tài)2的前面，狀態(tài)1的頁面顯示產(chǎn)品的信息，狀態(tài)2的頁面顯示活動的信息，產(chǎn)品、活動等的抬頭是用矩形組件設(shè)計的，在相應(yīng)的頁面設(shè)置單擊事件，如在狀態(tài)1的產(chǎn)品處設(shè)置單擊事件選擇為“設(shè)置動態(tài)面板的狀態(tài)轉(zhuǎn)換”，并在動態(tài)面板狀態(tài)管理中設(shè)置轉(zhuǎn)換效果為轉(zhuǎn)換至狀態(tài)1;在狀態(tài)2的產(chǎn)品處設(shè)置單擊事件選擇為“設(shè)置動態(tài)面板的狀態(tài)轉(zhuǎn)換”，并在動態(tài)面板狀態(tài)管理中設(shè)置轉(zhuǎn)換效果為轉(zhuǎn)換至狀態(tài)2.狀態(tài)1和狀態(tài)2的小頁面設(shè)計的不一樣，這樣切換的時候也會看出狀態(tài)切換的效果。需要注意的是，上述的單擊事件的設(shè)置在每個狀態(tài)的小頁面中都需要做相同的設(shè)置，可以直接復(fù)制粘貼。
全部設(shè)置好之后，生成原型即可查看效果。
該例子只用到了矩形組件和動態(tài)面板組件，比較簡單，如果需要比較美觀，可以在動態(tài)面板的各個狀態(tài)小頁面上的設(shè)計上下功夫，比如改變矩形的顯示樣式為圓角矩形，改變顏色等，但主要功能是一樣的。
【AxureRP動態(tài)面板交互設(shè)計實例教程】相關(guān)文章：
AxureRP教程–動態(tài)面板高級應(yīng)用08-13
Axure交互實例教程07-19
Axure常用交互實例教程03-24
Axure動態(tài)面板功能詳解06-02
Axure彈出動態(tài)面板使用方法07-01
Axure交互實例教程的日歷控件選擇日期04-06
Axure交互實例教程：日歷控件選擇日期03-04