原型設(shè)計(jì)工具Axure RP參考（十三）：動(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ī)格。

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

---

 動(dòng)態(tài)面板是一個(gè)容器，用于將其他小部件保存在稱為“狀態(tài)”的集合中。動(dòng)態(tài)面板可以具有一個(gè)或多個(gè)狀態(tài)，并且一次只能顯示其中一種狀態(tài)。可以使用“設(shè)置面板狀態(tài)”操作來動(dòng)態(tài)設(shè)置可見狀態(tài)，這使動(dòng)態(tài)面板非常適合創(chuàng)建輪播和幻燈片顯示。

動(dòng)態(tài)面板是唯一的，因?yàn)樗鼈兪俏ㄒ豢梢栽赪eb瀏覽器中拖動(dòng)或滑動(dòng)的窗口小部件類型。 它們也是唯一可以固定在瀏覽器窗口中固定位置的窗口小部件類型，使其成為始終可見的導(dǎo)航標(biāo)題和側(cè)邊欄的理想選擇。（此為動(dòng)態(tài)小部件的上部分，點(diǎn)擊此處查看下部分）

創(chuàng)建動(dòng)態(tài)面板

從庫窗格中拖動(dòng)

默認(rèn)窗口小部件庫中有一個(gè)空的動(dòng)態(tài)面板窗口小部件。 從“庫”窗格拖到畫布上的動(dòng)態(tài)面板將以一個(gè)可以添加小部件的空狀態(tài)開始。

注意：該動(dòng)態(tài)面板的尺寸默認(rèn)情況下是固定的，因此，如果要自動(dòng)調(diào)整其大小以適合其包含的小部件，請確保在其上啟用“適合內(nèi)容”。

使用現(xiàn)有小部件創(chuàng)建

您可以使用畫布上已有的小部件創(chuàng)建新的動(dòng)態(tài)面板。 選擇一個(gè)或多個(gè)窗口小部件，單擊鼠標(biāo)右鍵，然后在上下文菜單中選擇“創(chuàng)建動(dòng)態(tài)面板”。 這將創(chuàng)建一個(gè)新的適合內(nèi)容的動(dòng)態(tài)面板，其單個(gè)狀態(tài)包含所選小部件。

動(dòng)態(tài)面板蒙版

動(dòng)態(tài)面板默認(rèn)情況下覆蓋有藍(lán)色蒙版，以使它們更容易在畫布上發(fā)現(xiàn)。 您可以在應(yīng)用程序菜單的“視圖”→“蒙版”中切換蒙版。

注意：Web瀏覽器中未應(yīng)用窗口小部件掩碼，包括動(dòng)態(tài)面板掩碼。

管理狀態(tài)

在畫布上

雙擊畫布上的動(dòng)態(tài)面板以進(jìn)入狀態(tài)編輯模式，該狀態(tài)由藍(lán)綠色邊框和畫布周圍的工具欄指示。

在此模式下，您可以在動(dòng)態(tài)面板的狀態(tài)下添加，刪除和編輯窗口小部件。 您還可以通過單擊畫布右上方的“隔離”來切換動(dòng)態(tài)面板外部小部件的可見性。

要編輯動(dòng)態(tài)面板狀態(tài)本身，請單擊畫布頂部的當(dāng)前狀態(tài)名稱。 在顯示的下拉菜單中，您可以執(zhí)行以下操作：

• 單擊州名以在畫布上查看其小部件
• 單擊州名稱右側(cè)的Duplicate State圖標(biāo)，以復(fù)制該州名稱
• 單擊州名稱右側(cè)的Delete State圖標(biāo)將其刪除
• 單擊下拉列表底部的添加狀態(tài)以創(chuàng)建新狀態(tài)
• 上下拖動(dòng)狀態(tài)名稱以對其進(jìn)行重新排序（最上面的狀態(tài)是默認(rèn)情況下可見的狀態(tài)）

在大綱窗格中

在“概述”窗格中選擇一個(gè)動(dòng)態(tài)面板狀態(tài)或其包含的小部件之一，以打開狀態(tài)以在畫布上進(jìn)行編輯。要快速將現(xiàn)有窗口小部件移入或移出動(dòng)態(tài)面板狀態(tài)，請將其拖動(dòng)到“輪廓”窗格中。

要將新狀態(tài)添加到動(dòng)態(tài)面板，請將鼠標(biāo)懸停在其名稱上，然后單擊右側(cè)的“添加狀態(tài)”圖標(biāo)。同樣，您可以通過將鼠標(biāo)懸停在名稱上并單擊右側(cè)的“復(fù)制狀態(tài)”圖標(biāo)來復(fù)制狀態(tài)。選擇一個(gè)狀態(tài)，然后按DELETE將其刪除，或者右鍵單擊并在上下文菜單中選擇“刪除”。

要重新排列動(dòng)態(tài)面板的狀態(tài)，請上下拖動(dòng)它們或右鍵單擊它們，然后使用上下文菜單中的選項(xiàng)。最高狀態(tài)是默認(rèn)情況下可見的狀態(tài)。

提示：如果動(dòng)態(tài)面板妨礙您與畫布上的其他小部件進(jìn)行交互，則可以通過在“輪廓”窗格中單擊其名稱右側(cè)的“從視圖隱藏”圖標(biāo)來暫時(shí)將其隱藏。這將在畫布上隱藏面板，但在Web瀏覽器中仍將可見。要再次顯示面板，請?jiān)俅螁螕粼搱D標(biāo)。

第一個(gè)脫離

Break Away First State選項(xiàng)允許您刪除動(dòng)態(tài)面板的第一個(gè)狀態(tài)，并將其包含的所有小部件放置在面板外部的畫布上。要訪問此選項(xiàng)，請?jiān)趧?dòng)態(tài)面板上單擊鼠標(biāo)右鍵，然后在上下文菜單中選擇“第一個(gè)脫離”。

注意：如果動(dòng)態(tài)面板只有一個(gè)狀態(tài)，則中斷該狀態(tài)也會(huì)刪除該面板。

本文是動(dòng)態(tài)面板小部件的上部分，后面會(huì)持續(xù)更新下部分，希望持續(xù)關(guān)注本教程。

推薦閱讀：

原型設(shè)計(jì)工具Axure RP入門教程

原型設(shè)計(jì)工具Axure RP新手教程

關(guān)注慧聚IT微信公眾號???，了解產(chǎn)品的最新動(dòng)態(tài)及最新資訊。