原型設計工具Axure RP入門教程（八）：在下一頁教程中設置動態面板狀態

---

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

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

---

在本教程中，您將學習如何使用全局變量基于原型上一頁的選擇來設置動態面板的狀態。

小部件和頁面設置

第1頁–選擇表格

• 畫一個新的RP文件，然后在畫布上打開Page 1。
• 將一個下拉列表小部件和一個按鈕小部件從庫窗格拖到畫布上。
• 將按鈕的文本設置為下一頁。
• 雙擊下拉列表以編輯其選項。
• 在出現的對話框中，單擊添加三次以創建三個新選項。 成為一個紅色，一個黃色和一個藍色。

第2頁–動態面板

• 在項目中添加一個新頁面，并在畫布上打開它。
• 將三個矩形小部件拖到畫布上。給一個紅色填充顏色，給一個黃色填充顏色，給一個藍色填充顏色。
• 右鍵單擊紅色矩形，然后在上下文菜單中選擇創建動態面板。
• 在大綱窗格中，將動態面板的第一個狀態重命名為紅色。

注意：動態面板狀態名稱必須與第1頁上的下拉列表小部件中的選項匹配。

• 給動態面板兩個新狀態。一個命名黃色，另一個命名為藍色。
• 在大綱窗格中，將黃色矩形小部件拖動到黃色面板狀態。然后，將其移動到畫布上的（0,0）。對藍色矩形小部件重復此操作。

創建一個全局變量來存儲用戶的選擇

• 在頂部菜單中，轉到項目→全局變量。
• 在全局變量對話框中，單擊添加以添加新變量，將其命名為ColorVar。
• 單擊確定關閉對話框。

捕獲用戶的輸入并轉到下一頁

將變量的值設置為下拉列表的選擇

• 在畫布上打開第1頁，然后選擇下拉列表小部件。
• 在交互窗格中單擊新建交互。
• 在出現的列表中選擇選擇更改事件，然后選擇設置變量值操作。
• 在目標下拉列表中選擇ColorVar變量。
• 在設置為下拉列表中，選擇的選定選項。
• 在小部件下拉列表中將此保持選中狀態，然后單擊確定以保存操作。

打開鏈接到第2頁

• 選擇按鈕小部件，然后在交互窗格中單擊Click or Tap→Open Link。
• 在鏈接到下拉列表中選擇第2頁，然后單擊確定以保存操作。

將動態面板的狀態設置為變量的值

• 打開Page 2，然后單擊畫布上的空白處以選擇頁面本身。 然后在交互窗格中單擊新建交互。
• 在出現的列表中選擇頁面加載事件，然后選擇設置面板狀態操作。
• 在目標下拉菜單中選擇動態面板。
• 在狀態下拉列表中，選擇值。然后單擊出現的字段旁邊的fx圖標以打開編輯值對話框。
• 刪除對話框上方字段中的文本，然后單擊插入變量或函數。
• 在出現的下拉菜單中，選擇全局變量標題下的ColorVar。對話框頂部的字段現在應顯示為：[[ColorVar]]。（此括號括起來的表達式將在網絡瀏覽器中替換為變量的值。）

注意：我們能夠將動態面板的狀態設置為下拉列表的選定選項（存儲在變量中），因為面板的狀態與下拉列表的選項具有相同的名稱。

• 單擊確定關閉編輯值對話框，然后單擊確定保存設置面板狀態操作。

預覽互動

• 預覽頁面1并在下拉菜單中選擇一種顏色。
• 單擊下一頁按鈕導航到第2頁。動態面板應顯示您在下拉列表中選擇的顏色。

     

---

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

關注慧聚IT微信公眾號???，了解產品的最新動態及最新資訊。