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

5 評論 9570 瀏覽 13 收藏 4 分鐘

筆者在本文中介紹了如何用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 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 很有幫助,按照操作一步步實(shí)現(xiàn)了,就是有點(diǎn)不太清楚容器為真和容器為假的意思是什么,試著刪除了之后,按按鈕就沒有出現(xiàn)綠色填充了,我理解,因?yàn)樘畛渚G色的容器是選中情況下才會(huì)出現(xiàn),選中“關(guān)”的時(shí)候,容器為真意思就是容器沒有被選中,所以沒有填充,而選中“開”的時(shí)候,容器為假意思就是容器被選中了。推導(dǎo)一下就是容器為真是原始狀態(tài),容器為假是選中態(tài),也就是關(guān)的時(shí)候是原始態(tài),開的時(shí)候是選中態(tài)。

    來自湖南 回復(fù)
  2. 有一個(gè)悖論,點(diǎn)擊一次以后,另一個(gè)圓形按鈕就被隱藏了,所以無法實(shí)現(xiàn)開關(guān)效果。

    來自山東 回復(fù)
    1. 既然是開關(guān)效果,點(diǎn)擊了一次后另一個(gè)圓形當(dāng)然得隱藏起來。你再次點(diǎn)擊另一個(gè)按鈕的時(shí)候再把它顯示出來就好啦。這篇是我前期寫的文章沒有預(yù)覽地址,這里附上你可以打開看看:https://b5hakg.axshare.com

      來自廣東 回復(fù)
  3. 一個(gè)動(dòng)態(tài)模板里放開和關(guān)兩個(gè)狀態(tài),單擊切換就完了。。。有這么復(fù)雜嗎。。。

    來自廣東 回復(fù)
    1. 哈哈兩條路嘛,這個(gè)案例只是想教會(huì)剛學(xué)Axure小白們關(guān)于交互、交互樣式還有隱藏的操作。
      當(dāng)然也可以用動(dòng)態(tài)面板去實(shí)現(xiàn),我的另一篇文章就是使用動(dòng)態(tài)面板。
      http://theventurebank.com/zhichang/3146472.html

      來自廣東 回復(fù)