原型設(shè)計工具Axure RP入門教程（十三）：撥動開關(guān)教程

---

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í)如何創(chuàng)建一個在打開和關(guān)閉時都會改變顏色的切換開關(guān)。

小部件設(shè)置

創(chuàng)建撥動開關(guān)的關(guān)閉狀態(tài)

• 打開一個新的RP文件，然后在畫布上打開Page 1。
• 將Box 3小部件拖到畫布上。將其寬度設(shè)置為50，將其高度設(shè)置為20。在樣式窗格中，將其角半徑設(shè)置為25。
• 接下來，將一個橢圓小部件拖動到畫布上，并將其寬度和高度都設(shè)置為30。
• 使用頂部工具欄中的對齊選項，將橢圓拖到矩形的頂部，并在左側(cè)和中間對齊。這對小部件將為切換開關(guān)的關(guān)閉狀態(tài)。

創(chuàng)建撥動開關(guān)的打開狀態(tài)

• 選擇小部件，復(fù)制它們，然后將它們的副本粘貼到畫布上。
• 將重復(fù)橢圓的填充顏色設(shè)置為藍(lán)色，并將其與矩形小部件的右邊緣對齊。這對小部件將是撥動開關(guān)的打開狀態(tài)。

將切換小部件放置在兩個狀態(tài)的動態(tài)面板中

• 選擇關(guān)閉窗口小部件對，右鍵單擊選擇，然后在上下文菜單中選擇創(chuàng)建動態(tài)面板。
• 在大綱窗格中，將光標(biāo)懸停在新的動態(tài)面板窗口小部件的項目上，然后單擊右側(cè)的添加狀態(tài)圖標(biāo)。
• 仍在輪廓窗格中，選擇上橢圓和矩形，然后將它們拖到右側(cè)以使其在狀態(tài)2下縮進(jìn)。這會將它們添加到該動態(tài)面板狀態(tài)并在畫布上打開該狀態(tài)。
• 將上橢圓和矩形移動到畫布上的（0,0）。
• 單擊畫布右上方的關(guān)閉，或按ESC退出狀態(tài)編輯模式。

單擊時，將動態(tài)面板的狀態(tài)設(shè)置為下一步

• 選擇動態(tài)面板狀態(tài)小部件，然后在交互窗格中單擊新建交互。
• 在出現(xiàn)的列表中選擇Click或Tap事件，然后選擇Set Panel State操作。
• 在目標(biāo)下拉列表中選擇此小部件。
• 在狀態(tài)下拉列表中，選擇下一步。然后選中出現(xiàn)的從最后到第一包框。這將使動態(tài)面板在達(dá)到最后一個狀態(tài)后返回其第一個狀態(tài)。
• 單擊確定以保存操作。

預(yù)覽互動

預(yù)覽頁面，然后單擊切換開關(guān)將其打開和關(guān)閉。

---

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