編輯導(dǎo)語(yǔ)：選中功能是日常應(yīng)用中的常見(jiàn)功能，那么，我們可以如何利用Axure來(lái)設(shè)置選項(xiàng)組？本篇文章里，作者介紹了利用Axure來(lái)設(shè)置選項(xiàng)組的使用技巧，一起來(lái)看一下。

今天的內(nèi)容說(shuō)的是選中功能的實(shí)現(xiàn)。效果如下圖：

一共需要三步：

1. 給元件設(shè)置好選中狀態(tài)；
2. 設(shè)置懸浮狀態(tài)、加陰影文字變色狀態(tài)；
3. 設(shè)置選項(xiàng)組。

具體步驟如下。

一、給元件設(shè)置好選中狀態(tài)

拖出一個(gè)帶陰影的大矩形備用。拖出一個(gè)相同顏色的小矩形，并在上面寫(xiě)好你想要的文字標(biāo)識(shí)。

為這個(gè)小矩形設(shè)置交互。

在單擊時(shí)設(shè)置選中，目標(biāo)為當(dāng)前元件。設(shè)置值為真。

這個(gè)意思就是，當(dāng)我們點(diǎn)擊了這個(gè)元件以后，我們是真的選中了。

打好底以后，我們開(kāi)始為這個(gè)元件上妝，做效果。

二、設(shè)置懸浮狀態(tài)、加陰影文字變色

在完成上面一步以后，我們可以像在word里設(shè)置文字的樣式一樣，設(shè)置這個(gè)元件的樣式。不同的點(diǎn)在于，元件之所以會(huì)變換樣式，是因?yàn)槲覀儗?duì)它發(fā)出交互。

所以簡(jiǎn)單來(lái)說(shuō)，就是動(dòng)作+樣式。

選中元件以后，右擊選擇交互樣式。

交互樣式有“鼠標(biāo)懸停”、“鼠標(biāo)按下”、“選中”、“禁用”、“獲取焦點(diǎn)”五個(gè)模式。

我們這次用到的是“選中”和“鼠標(biāo)懸停”。

分別在這兩個(gè)欄目下設(shè)置你想要的填充和字體顏色，就完成上妝了。

三、設(shè)置選項(xiàng)組

首先解釋一下為什么要設(shè)置選項(xiàng)組。通過(guò)上面的步驟，我們已經(jīng)完成了這次交互80%的工作了，沒(méi)有全部按完成的原因，在于僅有上面的設(shè)置，會(huì)出現(xiàn)這樣的效果。

而選項(xiàng)組的意義就在于，在一組選項(xiàng)中，它每一次只會(huì)選中其中的一項(xiàng)，每個(gè)選項(xiàng)之間都是互斥的。

將這些選項(xiàng)全部選中，然后右擊選項(xiàng)組，填入名稱，就可以完成交互了。

其他小技巧：在矩形上加文字，可以采用相同背景色的小矩形疊加，不必使用文本框。

本文由 @艾筱說(shuō) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于 CC0 協(xié)議