很多時(shí)候思灌，在做開(kāi)啟某個(gè)狀態(tài)時(shí)，用單選按鈕可能呈現(xiàn)的效果不太好，這時(shí)使用滑動(dòng)開(kāi)關(guān)按鈕就是個(gè)更好的選擇溪王，一般應(yīng)用于 允許通知毕箍、控制某些功能的開(kāi)啟或關(guān)閉 等的具體情境弛房，比如微信的新消息提醒界面就會(huì)經(jīng)常應(yīng)用到這種開(kāi)關(guān)按鈕。所以而柑，在做原型設(shè)計(jì)時(shí)文捶，畫出這種效果可以給程序猿和UI設(shè)計(jì)師呈現(xiàn)的更直觀。
1媒咳、準(zhǔn)備一個(gè)矩形和圓形粹排，設(shè)置矩形的寬、高為58,30涩澡，圓角度（CORNER）為35顽耳，隱藏邊框，填充色設(shè)為#333333筏养，并將該矩形命名為背景斧抱；設(shè)置圓形的寬、高為28,28渐溶，隱藏邊框辉浦，填充色#FFFFFF，并將該圓形命名為按鈕茎辐。
選中背景宪郊，右鍵選擇STYLE EFFECTS掂恕，點(diǎn)擊【選中】，設(shè)置填充色為#76D471
2弛槐、將按鈕拖至背景的左側(cè)懊亡，選中兩個(gè)元件，右鍵創(chuàng)建動(dòng)態(tài)面板乎串，將動(dòng)態(tài)面板命名為組合動(dòng)態(tài)店枣。
3、點(diǎn)擊動(dòng)態(tài)面板叹誉，開(kāi)始設(shè)置動(dòng)態(tài)面板的交互動(dòng)作
1）點(diǎn)擊New Interaction鸯两，選擇【鼠標(biāo)單擊時(shí)】，添加用例1
點(diǎn)擊紫色加號(hào)长豁，繼續(xù)插入動(dòng)作
2）因?yàn)橛美?只是開(kāi)啟按鈕的交互钧唐，還要設(shè)置關(guān)閉按鈕的交互，所以需要繼續(xù)添加用例2匠襟，步驟與上面相同
動(dòng)態(tài)面板的交互全部設(shè)置完成后的樣子應(yīng)該是下圖
4钝侠、一個(gè)開(kāi)關(guān)狀態(tài)切換的控件就完成了，F(xiàn)5預(yù)覽效果
