Axure教程_簡單開關(guān)按鈕的實現(xiàn)

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

一個命名為“容器”得矩形

一個命名為“關(guān)”得橢圓

一個命名為“開”得橢圓

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

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

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

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

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

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

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

（7）將“開”橢圓隱藏

（8）看看效果

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

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

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

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

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

感謝由 等Nilz 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝

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