AxureRP動態面板交互設計實例教程

主要是對AxureRP 動態面板交互設計實例教程的介紹，有需要的朋友可以參考一下。就跟隨本站小編一起去了解下吧，想了解更多相關信息請持續關注我們應屆畢業生考試網!

網站開發技術越來越豐富了，不管是AJAX或JavaScript，甚至是Flash、Silverlight、JavaFX，這些都被歸類為RIA(Rich Internet Application)的技術，能夠讓網站界面更豐富，展現更優質的人機交互。Axure RP能夠進行交互設計，且可以立即將結果呈現於原型上，而不是隻有文字敍述。且學習Axure RP的交互設計，並不需要學習HTML或Java Script語法，通過直觀設計就可以完成多樣的交互界面設計。在Axure RP設計出來的原型中，最簡單的交互設計是網頁鏈接，真正發揮Axure RP在交互設計上的驚人特色，並不是只有超鏈接這麼簡單的交互，下面通過介紹動態面板的操作與控制，來學習更豐富更友善的交互界面設計。

動態面板是專門用來設計動態原型功能的組件，每個動態面板可以包含一個或多個狀態，每個狀態本身是一個頁面，通過控制狀態的顯示順序或隱藏/顯示動態面板來達成交互界面的效果，像其它組件一樣，動態面板可以直接通過拖拽的方式從組件選擇面板加入到畫布中。

動態面板：本身可以包含很多個狀態，而每個狀態都是一個小網頁。被放置在最上層的狀態就是該面板的界面，即默認展示效果。

狀態：每個狀態都是一個小網頁，而這個小網頁的邊界與大小，與所屬的動態面板大小相同。不同的狀態可以重疊在同一個動態面板裏頭，只有放在最上層的狀態，才會呈現於原型的默認畫面中。以Axure RP所設計出來的多樣交互界面，大多由各種觸發事件來控制動態面板顯示或消失，或控制哪個狀態在最上層來仿真出實際的交互界面。

在動態面板上鼠標左鍵雙擊，會開啟動態面板狀態管理對話框。在這個對話窗口中，可以新增狀態、更改狀態名稱、調整狀態排序、刪除狀態與編輯狀態。在動態面板狀態管理對話框中選擇一個狀態，然後按下編輯狀態鈕或者直接雙擊改狀態，會開啟這個狀態的線框圖以供設計。或者可以選擇編輯所有狀態鈕，一口氣把所有的狀態頁面通通開啟。打開後就可以像設計其它線框圖一樣的設計狀態頁面，每個狀態頁面的側邊藍色虛線外框就表示其所屬的動態面板的邊界。

動態面板可以預設為隱藏，做法是在動態面板上按鼠標右鍵，並選擇編輯動態面板->設為隱藏，這樣就可以隱藏面板的內容，而且動態面板也會從藍色變成黃色。已經預設隱藏的`動態面板，可以選擇編輯動態面板->設為可見來顯示。

在交互事件屬性對話框中有5種交互方式是專門用來控制動態面板的，分別是:

•Set Panel state(s) to State(s)：設置動態面板的狀態轉換

•Show Panel(s)：顯示動態面板

•Hide Panel(s)：隱藏動態面板

•Toggle Visibility for Panel(s)：切換動態面板可見屬性

•Move Panel(s)：移動動態面板，可根據絕對座標或相對座標來移動

下面以最常見的Tab標籤切換效果來演示動態面板的交互效果。新增一個動態面板，設置兩個狀態，分別在兩個狀態中設計成如下小頁面：

設置狀態1在狀態2的前面，狀態1的頁面顯示產品的信息，狀態2的頁面顯示活動的信息，產品、活動等的抬頭是用矩形組件設計的，在相應的頁面設置單擊事件，如在狀態1的產品處設置單擊事件選擇為“設置動態面板的狀態轉換”，並在動態面板狀態管理中設置轉換效果為轉換至狀態1;在狀態2的產品處設置單擊事件選擇為“設置動態面板的狀態轉換”，並在動態面板狀態管理中設置轉換效果為轉換至狀態2.狀態1和狀態2的小頁面設計的不一樣，這樣切換的時候也會看出狀態切換的效果。需要注意的是，上述的單擊事件的設置在每個狀態的小頁面中都需要做相同的設置，可以直接複製粘貼。

全部設置好之後，生成原型即可查看效果。

該例子只用到了矩形組件和動態面板組件，比較簡單，如果需要比較美觀，可以在動態面板的各個狀態小頁面上的設計上下功夫，比如改變矩形的顯示樣式為圓角矩形，改變顏色等，但主要功能是一樣的。