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

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)惠購(gòu)買Axure RP

在本教程中，您將學(xué)習(xí)如何創(chuàng)建一個(gè)在打開和關(guān)閉時(shí)都會(huì)改變顏色的切換開關(guān)。

小部件設(shè)置

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

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

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

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

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

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

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

預(yù)覽互動(dòng)

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

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