Axure怎么設(shè)計(jì)APP開關(guān)按鈕狀態(tài)切換的原型?

百度經(jīng)驗(yàn) 發(fā)布時(shí)間：2019-03-21 14:57:03 作者：877249630

Axure怎么設(shè)計(jì)APP開關(guān)狀態(tài)切換的原型？使用手機(jī)的時(shí)候，我們開啟或關(guān)閉app的功能的時(shí)候，會出現(xiàn)一個(gè)滑動按鈕，該怎么制作這個(gè)原型呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

我們在設(shè)計(jì)APP選項(xiàng)時(shí)，對于只有兩個(gè)選項(xiàng)的抉擇時(shí)下拉顯然不是那么好操作，這是我們可以選擇使用切換開關(guān)按鈕來實(shí)現(xiàn)這個(gè)功能，下面是原型動演示態(tài)圖，我們可以使用axure來制作這個(gè)滑動按鈕的原型，下面我們就來看看詳細(xì)的教程。

Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機(jī)+漢化包+安裝教程)

類型：輔助設(shè)計(jì)
大?。?/span>83.2MB
語言：簡體中文
時(shí)間：2019-04-26

查看詳情

1、首先我們來創(chuàng)建原件，這里主要用到了快關(guān)（組合）這下面的兩個(gè)原件，創(chuàng)建一個(gè)矩形和一個(gè)圓，原件寬度自己定，高度一樣即可，創(chuàng)建完以后需要把兩個(gè)元件居中對齊，然后分別命名為按鈕和背景。

2、從動畫我們可以看到，當(dāng)我們點(diǎn)擊的時(shí)候背景色在變化，這里我們是設(shè)置了選中狀態(tài)，當(dāng)我們選中原件時(shí)替換原有的顏色即可，這里我設(shè)置了按鈕的邊框顏色和背景的背景色，讓他們在選中是跟背景顏色一致。

3、接下來進(jìn)行交互設(shè)計(jì)，當(dāng)我們選中按鈕時(shí)將按鈕移動右側(cè)，再次點(diǎn)擊按鈕時(shí)將按鈕移到左側(cè)，因?yàn)樵腦坐標(biāo)是以左邊為基準(zhǔn)的，所以我們在計(jì)算坐標(biāo)時(shí)要把本身的寬度計(jì)算進(jìn)去，首先是從左到右移動，這里我們選中按鈕在下方找到X右邊的FX點(diǎn)進(jìn)去定義按鈕和背景的局部變量，然后插入值[[LVAR1.x+LVAR2.width-LVAR1.width]]，y軸水平不變，直接賦值即可[[target.y]]，動畫選擇線性500ms即可。

4、接著是反向移動，原理跟上面一樣，只是計(jì)算的時(shí)候我們需要先加上按鈕本身的寬度再減去背景的寬度，這樣x坐標(biāo)就回到了之前的位置了：[[LVAR1.x+LVAR1.width-LVAR2.width]]，y軸水平不變，直接賦值即可[[target.y]]，動畫選擇線性500ms即可。

5、到這里我們的按鈕已經(jīng)實(shí)現(xiàn)了左右切換了，但是你會發(fā)現(xiàn)點(diǎn)擊按鈕時(shí)會出現(xiàn)連個(gè)case事件，不好操作，所以我們需要再事件前面添加一個(gè)判斷語句，當(dāng)按鈕原件選中時(shí)執(zhí)行那個(gè)事件，按鈕原件未選中時(shí)執(zhí)行那個(gè)事件（默認(rèn)是為選中狀態(tài)的）。

6、現(xiàn)在我們就已經(jīng)實(shí)現(xiàn)了切換樣式了，但是你會發(fā)現(xiàn)狀態(tài)沒有發(fā)生改變，因?yàn)槟壳斑€沒有設(shè)置選中狀態(tài)，這里我們要在事件后面繼續(xù)添加一個(gè)選中狀態(tài)，當(dāng)我們點(diǎn)擊按鈕時(shí)，設(shè)置按鈕和背景為選中狀態(tài)，這樣我們選中狀態(tài)中的顏色就會被切換了，當(dāng)我們再次點(diǎn)擊按鈕時(shí)取消選中狀態(tài)即可。

7、這樣我們的切換樣式就實(shí)現(xiàn)了，因?yàn)檫@是手機(jī)端的設(shè)計(jì)，點(diǎn)擊按鈕還是不怎么方便，所以這里我再加個(gè)功能，當(dāng)我點(diǎn)擊背景時(shí)就可以實(shí)現(xiàn)按鈕的切換，這樣操作更符合app使用（微信也是這樣設(shè)計(jì)的），這里直接把按鈕的事件復(fù)制到背景上即可。