原型設計工具Axure RP入門教程（十三）：撥動開關教程

---

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

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

---

在本教程中，您將學習如何創建一個在打開和關閉時都會改變顏色的切換開關。

小部件設置

創建撥動開關的關閉狀態

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

創建撥動開關的打開狀態

• 選擇小部件，復制它們，然后將它們的副本粘貼到畫布上。
• 將重復橢圓的填充顏色設置為藍色，并將其與矩形小部件的右邊緣對齊。這對小部件將是撥動開關的打開狀態。

將切換小部件放置在兩個狀態的動態面板中

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

單擊時，將動態面板的狀態設置為下一步

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

預覽互動

預覽頁面，然后單擊切換開關將其打開和關閉。

---

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