原型設(shè)計工具Axure RP入門教程（八）：在下一頁教程中設(shè)置動態(tài)面板狀態(tài)

---

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

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

---

在本教程中，您將學(xué)習(xí)如何使用全局變量基于原型上一頁的選擇來設(shè)置動態(tài)面板的狀態(tài)。

小部件和頁面設(shè)置

第1頁–選擇表格

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

第2頁–動態(tài)面板

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

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

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

創(chuàng)建一個全局變量來存儲用戶的選擇

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

捕獲用戶的輸入并轉(zhuǎn)到下一頁

將變量的值設(shè)置為下拉列表的選擇

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

打開鏈接到第2頁

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

將動態(tài)面板的狀態(tài)設(shè)置為變量的值

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

注意：我們能夠?qū)討B(tài)面板的狀態(tài)設(shè)置為下拉列表的選定選項（存儲在變量中），因為面板的狀態(tài)與下拉列表的選項具有相同的名稱。

• 單擊確定關(guān)閉編輯值對話框，然后單擊確定保存設(shè)置面板狀態(tài)操作。

預(yù)覽互動

• 預(yù)覽頁面1并在下拉菜單中選擇一種顏色。
• 單擊下一頁按鈕導(dǎo)航到第2頁。動態(tài)面板應(yīng)顯示您在下拉列表中選擇的顏色。

     

---

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

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