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

（圖8）

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

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

（圖9）

（圖10）

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

第五步：同時(shí)選中slider_on和bg_on，單擊右鍵，在彈出的關(guān)聯(lián)菜單中選中【轉(zhuǎn)換為動(dòng)態(tài)面板】，并給動(dòng)態(tài)面板命名為switch_button，然后同時(shí)選中slider_off和bg_off，單擊右鍵，選擇【剪切】，雙擊switch_button動(dòng)態(tài)面板，在彈出的【動(dòng)態(tài)面板狀態(tài)管理】對(duì)話框中單擊綠色加號(hào)圖標(biāo)，新增一個(gè)狀態(tài)State2。雙擊State2，單擊右鍵，選擇【粘貼】，將剛剛剪切的slider_off和bg_off粘貼到設(shè)計(jì)區(qū)域，并設(shè)置其坐標(biāo)為（x:0，y:0），見圖12。

（圖11）

（圖12）

此時(shí)，slider_on坐標(biāo)為（x:98，y:2），slider_on 坐標(biāo)為（x:2，y:2）。

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

繼續(xù)勾選slider_on，并設(shè)置其移動(dòng)為【絕對(duì)】（x:98，y:2），動(dòng)畫【搖擺】，時(shí)間【300】毫秒，見圖14。

（圖13）

（圖14）

繼續(xù)新增【等待】動(dòng)作，在【配置動(dòng)作】中設(shè)置等待時(shí)間【300】毫秒，見圖15。

（圖15）

繼續(xù)新增【設(shè)置面板狀態(tài)】動(dòng)作，在【配置動(dòng)作】中勾選switch_button，并設(shè)置其選擇狀態(tài)為State1，進(jìn)入/退出動(dòng)畫【淡入淡出】，時(shí)間【300】毫秒，見圖16。

（圖16）

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

（圖17）

繼續(xù)在右側(cè)【配置動(dòng)作】中勾選slider_off，并設(shè)置移動(dòng)為【絕對(duì)】（x:2， y:2），動(dòng)畫【搖擺】，時(shí)間【300】毫秒，見圖19。

（圖18）

（圖19）

繼續(xù)新增【等待】動(dòng)作，在【配置動(dòng)作】中設(shè)置等待時(shí)間【300】毫秒，見圖20。

（圖20）

繼續(xù)新增【設(shè)置面板狀態(tài)】動(dòng)作，在【配置動(dòng)作】中勾選switch_button，并設(shè)置其選擇狀態(tài)為State2，進(jìn)入/退出動(dòng)畫【淡入淡出】，時(shí)間【300】毫秒，見圖21。

（圖21）

至此，switch_button開關(guān)交互就設(shè)置完畢了，單擊【預(yù)覽】按鈕快速測試。

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

（圖22）

（圖23）