寫在開頭:開關的制作在幾乎所有原型設計中都會用到，所以美觀自然的交互開關可以給你的原型設計加分不少。

本次開關設計主要用到的是邏輯為：選中狀態的切換

首先，來看一下演示動畫

開始原型設計

一、創建元件

首先需要打開Axure軟件，并在畫板上創建兩個圖形：一個為300*40的矩形，需要在“樣式”一欄中修改它的元件半徑為60，背景填充顏色為灰色，線段類型為無none，并命名為beijing；一個為45*45的圓形，填充顏色為深灰色，線段類型為無none，并命名為anniu。

創建完以后需要把兩個元件居中對齊。

二、交互設計

(1)設置圓形anniu的交互動作(case 1)

① 當鼠標點擊時，移動當前元件到絕對值X、Y

② X=[[anniu.x+beijing.width-anniu.width]]，需要定義Fx的局部變量anniu以及beijing

上面函數的意思為：按鈕的X坐標值+后面矩形背景的寬度-按鈕的寬度，因為元件的X坐標是以左邊為基準的。

③Y=[[target.y]]，target不需要定義因為它的含義為“目標的” ; ? ?[[target.y]] 意為：移動后的Y坐標和移動前的一致。

④ 動畫為線性500ms

現在可以點擊預覽一下畫面，然后你就會驚奇的發現還沒有設置顏色變換。

所以我們還要設置anniu選中狀態！因為選中狀態可以切換顏色進行變化展示。

(2)改變選中交互設置

下面需要設置anniu、beijing的選中交互設置為改變填充顏色

如下圖所示：

? ? ? ? ? ? ? ? ? ? ? ? ??

接著設置鼠標單擊anniu的交互動作為選中狀態于anniu、beijing為true；

(3)設置選中狀態及交互條件(case 2)

① 然后設置鼠標單擊anniu的case 2 的條件為當anniu的選中狀態為true的情況下

移動當前元件到絕對值，X=[[anniu.x+anniu.width-beijing.width]]，同樣也需要進行Fx的定義。

Y=[[target.y]]， 動畫為線性500ms。

② 設置選中狀態于anniu、beijing為flase，這樣可以達到周而復始循環開關的效果。

(4)設置case 1的條件

要實現循環開關，則需要給case 1進行條件約束，保證case 1和case 2不互相進行干擾。因為要是不給case 1限制的話，當鼠標點擊按鈕后，元件會移動到指定位置完成第一步操作。但是再次點擊按鈕后，元件會繼續往前移動，一直進行case 1 的動作而不運行case 2 的動作。

所以需要在case 1前設立條件如果anniu的元件狀態為flase，這樣就可以循環滿足條件實現原型設計。

整個交互用例設計如下圖所示

因為交互用例中沒有直接改變目標顏色的交互操作，所以如果你想要更改目標顏色，不妨試試使用選中狀態、禁用狀態、鼠標按下以及鼠標懸停這些設置，通過設置狀態變化從而切換顯示顏色。

至此，雷達效果講演結束，期待與您的交流溝通！

總結

以上是生活随笔為你收集整理的axure选中后横线切换_3、开关状态切换 —— Axure实用交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。