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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Show Panel(s)

• Hide Panel(s)

• Toggle Visibility for Panel(s)

• Move Panel(s)

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

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

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

Tab頁簽

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

彈出菜單 

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

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

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

想要獲得Axure RP更多資源、正版授權(quán)的伙伴，請咨詢【慧都客服】了解

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