快速原型設計工具Axure RP高級交互設計教程（一）：動態面板控件的使用

Axure RP是一套專門為網站或應用程序所設計的快速原型設計工具， 可以讓應用網站策劃人員或網站功能界面設計師更加快速方便的建立Web AP和Website的線框圖、流程圖、原型和規格，現已成為設計Web AP的重要工具。

免費下載Axure RP  優惠購買Axure RP

本文主要介紹Axure RP動態面板控件及其使用方法、如何通過交互動作引發動態面板的交互、動態面板使用案例等內容。

1、動態面板控件

動態面板控件可以讓你的原型實現高級的動態交互功能。

動態面板包含有多個狀態（states），每個狀態可包含一系列控件。任何時候都只有一個狀態是可見的，或這整個動態面板可以被隱藏。

結合交互動作，可以讓動態面板的狀態進行隱藏、顯示和改變。像其它控件一樣，你可以在控件面板中拖拉動態面板控件，將動態面板控件添加到線框圖中。

2. 編輯動態面板的狀態

在線框圖中，雙擊動態面板可以打開一個“Dynamic Panel State Manager”對話框，在對話框中你可以創建、重命名、重新排序、刪除和編輯動態面板的狀態。

第一個狀態是動態面板的默認狀態。在對話框中選中一個狀態，然后點擊“Edit State”按鈕，就可以打開一個狀態線框圖進行狀態設計。狀態設計和線框圖設計是一樣的，狀態線框圖中的藍色虛線外框表示動態面板的范圍邊界。

3. 隱藏動態面板

只要選擇動態面板，右鍵菜單選擇“Edit Dynamic Panel->Set Hidden”即設置動態面板在默認時隱藏。這將會隱藏面板內容，動態面板的遮罩會由藍色變為黃色。

4. 交互動作和動態面板

交互動作可以引發動態面板的交互。在“Interaction Case Properties”對話框中包含了以下可以引發動態面板交互的動作：

•  Set Panel state(s) to State(s)

• Show Panel(s)

• Hide Panel(s)

• Toggle Visibility for Panel(s)

• Move Panel(s)

選擇其中一個動作就可以和動態面板進行交互，并且可以在對話框下部的“Actions descriptions”選擇一個要鏈接的狀態。

在控件注釋和交互面板中，可以在Label輸入框中對動態面板進行標識，以后就可以引用這個動態面板。如果沒有為動態面板指定 label，動態面板會被標識為“Unlabeled”。

5、動態面板使用案例

Tab頁簽

動態面板可用于創建一個Tab頁簽控件。如Tab頁簽控件有3個tab，則該tab控件被包含在擁有3個狀態的動態面板中，每個狀態代表一個tab。對每個tab都有一個交互動作，當點擊某個tab時，就會切換到動態面板的對應狀態。

彈出菜單 

動態面板可以用于在原型中自定義彈出菜單，或根據鼠標移動動態的顯示和隱藏菜單，但需要結合OnMouseEnter事件和動作來實現。

頁面動態初始化 

動態面板和OnPageLoad事件結合，可實現根據變量值進行頁面初始化。

想要獲得Axure RP更多資源、正版授權的伙伴，請了解

12月，慶圣誕、迎元旦，上“慧都網”小程序簽到兌商城通用抵價券>>>   軟件商城專屬優惠價，領優惠券再享折上折>>>