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

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

免費下載Axure RP  優(yōu)惠購買Axure RP

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

1、動態(tài)面板控件

動態(tài)面板控件可以讓你的原型實現(xiàn)高級的動態(tài)交互功能。

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

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

2. 編輯動態(tài)面板的狀態(tài)

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

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

3. 隱藏動態(tài)面板

只要選擇動態(tài)面板，右鍵菜單選擇“Edit Dynamic Panel->Set Hidden”即設(shè)置動態(tài)面板在默認(rèn)時隱藏。這將會隱藏面板內(nèi)容，動態(tài)面板的遮罩會由藍(lán)色變?yōu)辄S色。

4. 交互動作和動態(tài)面板

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

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

• Show Panel(s)

• Hide Panel(s)

• Toggle Visibility for Panel(s)

• Move Panel(s)

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

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

5、動態(tài)面板使用案例

Tab頁簽

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

彈出菜單 

動態(tài)面板可以用于在原型中自定義彈出菜單，或根據(jù)鼠標(biāo)移動動態(tài)的顯示和隱藏菜單，但需要結(jié)合OnMouseEnter事件和動作來實現(xiàn)。

頁面動態(tài)初始化 

動態(tài)面板和OnPageLoad事件結(jié)合，可實現(xiàn)根據(jù)變量值進行頁面初始化。

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

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