所需元件筆者在感謝中介紹了如何用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è)橢圓得交互都涉及到對方,假如沒有一開始給它們命好名,那么你在設(shè)置交互時(shí)就會(huì)出現(xiàn)下圖這種情況:
圖中有兩個(gè)(橢圓形),你不知道哪個(gè)是開哪個(gè)是關(guān),那么這就會(huì)是一個(gè)很大得麻煩。所以切記,每拉入作圖區(qū)里一個(gè)元件就給該元件命好名。
感謝由 等Nilz 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止感謝
題圖來自 Unsplash ,基于 CC0 協(xié)議