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

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

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

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

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

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

查看詳情

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

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

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

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

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

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