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