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

軟件名稱：Axure RP v8.1.0.3382 Enterprise 中文特別版(附注冊機+漢化包+安裝教程)軟件大?。?3.2MB更新時間：2019-04-26

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

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

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

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

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

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