第一步：在【部件】面板中單擊【選項】按鈕，在彈出的菜單中選擇【創建部件庫】，見圖8。

（圖8）

第二步：在彈出的對話框中給自定義部件庫指定路徑位置，單擊【保存】后會打開另一個Axure APP窗口，見圖9。

第三步：在左側【部件庫頁面】面板中雙擊【新部件1】，并給其重命名為switch button，見圖10。

（圖9）

（圖10）

第四步：使用矩形部件調整圓角角度，制作如圖11所示的形狀，部件尺寸可由讀者自定。昆明網站建設小編為了演示方便，在此將圓形尺寸設置為100×100像素，圓角矩形尺寸為200×104像素。并分別給4個形狀部件命名為slider_off、bg_off、slider_on和bg_on。

第五步：同時選中slider_on和bg_on，單擊右鍵，在彈出的關聯菜單中選中【轉換為動態面板】，并給動態面板命名為switch_button，然后同時選中slider_off和bg_off，單擊右鍵，選擇【剪切】，雙擊switch_button動態面板，在彈出的【動態面板狀態管理】對話框中單擊綠色加號圖標，新增一個狀態State2。雙擊State2，單擊右鍵，選擇【粘貼】，將剛剛剪切的slider_off和bg_off粘貼到設計區域，并設置其坐標為（x:0，y:0），見圖12。

（圖11）

（圖12）

此時，slider_on坐標為（x:98，y:2），slider_on 坐標為（x:2，y:2）。

第六步：選中slider_off部件，在右側部件【屬性】面板中雙擊【鼠標單擊時】事件，在彈出的【用例編輯器】中新增【移動】動作，在【配置動作】中勾選slider_off，并設置其移動為【絕對】（x:98，y:2），動畫【搖擺】，時間【300】毫秒，見圖13。

繼續勾選slider_on，并設置其移動為【絕對】（x:98，y:2），動畫【搖擺】，時間【300】毫秒，見圖14。

（圖13）

（圖14）

繼續新增【等待】動作，在【配置動作】中設置等待時間【300】毫秒，見圖15。

（圖15）

繼續新增【設置面板狀態】動作，在【配置動作】中勾選switch_button，并設置其選擇狀態為State1，進入/退出動畫【淡入淡出】，時間【300】毫秒，見圖16。

（圖16）

第七步：在【Outline：頁面】面板中雙擊slider_on（快速選擇想要的部件），見圖17，在部件【屬性】面板中雙擊【鼠標單擊時】事件，在彈出的【用例編輯器】中新增【移動】動作，在【配置動作】中勾選slider_on，并設置移動為【絕對】（x:2，y:2），動畫【搖擺】，時間【300】毫秒，見圖18。

（圖17）

繼續在右側【配置動作】中勾選slider_off，并設置移動為【絕對】（x:2， y:2），動畫【搖擺】，時間【300】毫秒，見圖19。

（圖18）

（圖19）

繼續新增【等待】動作，在【配置動作】中設置等待時間【300】毫秒，見圖20。

（圖20）

繼續新增【設置面板狀態】動作，在【配置動作】中勾選switch_button，并設置其選擇狀態為State2，進入/退出動畫【淡入淡出】，時間【300】毫秒，見圖21。

（圖21）

至此，switch_button開關交互就設置完畢了，單擊【預覽】按鈕快速測試。

第八步：到這里，昆明網站制作小編認為自定義部件就制作完畢了。在頂部菜單欄中單擊【文件＞保存】，關閉當前的AxureAPP。當再次打開AxureAPP時，在【部件】面板的下拉列表中就可以看到剛剛創建的名為my_widget_library的部件庫了，見圖22。選擇該部件庫后可以看到剛剛制作的switch_button部件，見圖23。將其拖放到設計區域，單擊【預覽】按鈕，打開瀏覽器測試，剛剛添加的交互都可以正常執行。

（圖22）

（圖23）