本文僅適用于具有一定Axure使用經(jīng)驗(yàn)的用戶閱讀。

Axure中經(jīng)常會(huì)設(shè)計(jì)幾個(gè)按鈕或幾個(gè)菜單的互斥選擇效果，互斥效果有兩種方式可以實(shí)現(xiàn)：

1） 可以通過(guò)點(diǎn)擊事件控制選中當(dāng)前點(diǎn)擊的按鈕或菜單，并取消選中其它按鈕或菜單；

但這種方式由明顯的缺點(diǎn)，如果后續(xù)有增加了按鈕或菜單，需要將之前每一個(gè)按鈕或菜單的用例全部修改一遍，工作量很大而且很容易搞亂。

2） 通過(guò)對(duì)按鈕分組實(shí)現(xiàn)。

這種方式可以非常方便地定義每個(gè)按鈕或菜單的事件，即使后續(xù)增加了按鈕或菜單也很容易修改。

下文將通過(guò)實(shí)例介紹第二種方式。

設(shè)置按鈕或菜單互斥效果的大致步驟為：

定義樣式–>設(shè)置互斥–>添加用例

1???? 定義按鈕或菜單選中樣式

1） 在Axure文件中任意新建一個(gè)頁(yè)面，在頁(yè)面中繪制若干按鈕和菜單，參考下圖：

2） 選中所有的按鈕，點(diǎn)擊右鍵選擇“交互樣式…”，顯示設(shè)置交互樣式對(duì)話框；

3） 選擇“選中”頁(yè)簽，并分別設(shè)置字體顏色、粗體、填充顏色等，參考圖如下：

由于選中了“預(yù)覽”選項(xiàng)，因此樣式可以直接看到效果，點(diǎn)擊確定后預(yù)覽效果消失。

4） 同理，設(shè)置菜單的選中樣式，參考圖如下：

2 設(shè)置按鈕或菜單互斥

1） 選中所有的按鈕，點(diǎn)擊右鍵，選中“Selection Group…”為按鈕分組，并輸入分組名稱：

2） 同一分組內(nèi)的按鈕即可互斥，如果希望前3個(gè)按鈕互斥，后3個(gè)按鈕互斥，而不是6個(gè)按鈕都互斥，則只需要將前3個(gè)按鈕、后3個(gè)按鈕分別進(jìn)行分組即可。

3） 同理，設(shè)置6個(gè)菜單互斥。

3? ? ?設(shè)置按鈕或菜單單擊事件

此時(shí)預(yù)覽頁(yè)面你會(huì)發(fā)現(xiàn)剛才設(shè)計(jì)的效果在頁(yè)面中一點(diǎn)作用都沒(méi)有，別急下面才是關(guān)鍵步驟。

1） 為按鈕Tab1添加“鼠標(biāo)單擊時(shí)”用例，設(shè)置鼠標(biāo)單擊時(shí)選中自己，如下圖：

2） 定義完成后，選中“鼠標(biāo)單擊時(shí)”下面的用例1，點(diǎn)擊右鍵選擇復(fù)制，如下圖所示：

3） 為按鈕Tab2添加“鼠標(biāo)單擊時(shí)”用例，直接將上述復(fù)制的用例粘貼；

4） 分別為其他的按鈕粘貼用例；

5） 同理，為所有的菜單也粘貼相同的用例；

6） 預(yù)覽頁(yè)面，點(diǎn)擊按鈕或菜單，可以看到按鈕或菜單已經(jīng)有互斥效果了。效果圖如下：

注意：上述截圖為了能夠看出來(lái)效果，分別設(shè)置了第1個(gè)按鈕和第1個(gè)菜單默認(rèn)為選中狀態(tài)。

本文由 @互聯(lián)科技 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。