起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識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 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash ，基于 CC0 協(xié)議
很有幫助，按照操作一步步實現(xiàn)了，就是有點不太清楚容器為真和容器為假的意思是什么，試著刪除了之后，按按鈕就沒有出現(xiàn)綠色填充了，我理解，因為填充綠色的容器是選中情況下才會出現(xiàn)，選中“關(guān)”的時候，容器為真意思就是容器沒有被選中，所以沒有填充，而選中“開”的時候，容器為假意思就是容器被選中了。推導(dǎo)一下就是容器為真是原始狀態(tài)，容器為假是選中態(tài)，也就是關(guān)的時候是原始態(tài)，開的時候是選中態(tài)。
有一個悖論，點擊一次以后，另一個圓形按鈕就被隱藏了，所以無法實現(xiàn)開關(guān)效果。
既然是開關(guān)效果，點擊了一次后另一個圓形當(dāng)然得隱藏起來。你再次點擊另一個按鈕的時候再把它顯示出來就好啦。這篇是我前期寫的文章沒有預(yù)覽地址，這里附上你可以打開看看：https://b5hakg.axshare.com
一個動態(tài)模板里放開和關(guān)兩個狀態(tài)，單擊切換就完了。。。有這么復(fù)雜嗎。。。
哈哈兩條路嘛，這個案例只是想教會剛學(xué)Axure小白們關(guān)于交互、交互樣式還有隱藏的操作。
當(dāng)然也可以用動態(tài)面板去實現(xiàn)，我的另一篇文章就是使用動態(tài)面板。
http://www.aharts.cn/zhichang/3146472.html