筆者在本文中介紹了如何用Axure實(shí)現(xiàn)開關(guān)按鈕效果的操作步驟，與大家分享。

筆者在本文中介紹了如何用Axure實(shí)現(xiàn)開關(guān)按鈕效果的操作步驟，與大家分享。

所需元件

一個(gè)命名為“容器”的矩形

一個(gè)命名為“關(guān)”的橢圓

一個(gè)命名為“開”的橢圓

操作步驟

（1）設(shè)置矩形圓角半徑為40

（2）將矩形尺寸調(diào)為w:100，h:31

（3）將兩個(gè)橢圓放到“容器”內(nèi)合適的位置

（4）設(shè)置“容器”的交互樣式——選中——填充顏色

（5）設(shè)置“關(guān)”橢圓的交互——鼠標(biāo)單擊時(shí)

（6）設(shè)置“開”橢圓的交互——鼠標(biāo)單擊時(shí)：

特別注意，這里的“容器”選中狀態(tài)要改為false。

（7）將“開”橢圓隱藏

（8）看看效果

1）關(guān)閉開關(guān)效果：

2）開啟開關(guān)效果：

小記

（1）這是開啟Axure繪制原型學(xué)習(xí)過程中一個(gè)非常容易實(shí)現(xiàn)的原型，盡管非常的簡單，但是作用卻很大。目前許多的APP在通知開關(guān)用到的樣式都是這種開關(guān)按鈕樣式，學(xué)會(huì)這個(gè)，那么你在許多APP類原型中就都可以用到了！

（2）雖然簡單，但還是要提醒大家，在繪制原型時(shí)為每一個(gè)元件命好名。像這個(gè)原型，有兩個(gè)形狀大小都相同的橢圓，且兩個(gè)橢圓的交互都涉及到對(duì)方，假如沒有一開始給它們命好名，那么你在設(shè)置交互時(shí)就會(huì)出現(xiàn)下圖這種情況：

圖中有兩個(gè)（橢圓形），你不知道哪個(gè)是開哪個(gè)是關(guān)，那么這就會(huì)是一個(gè)很大的麻煩。所以切記，每拉入作圖區(qū)里一個(gè)元件就給該元件命好名。

本文由 @Nilz 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash ，基于 CC0 協(xié)議