我們?nèi)砸再?gòu)物網(wǎng)站中選擇尺碼的交互場(chǎng)景為例，當(dāng)我們單擊選擇尺碼M時(shí)，L和XL變?yōu)榛疑ㄎ催x中）。同理，點(diǎn)擊L 碼時(shí)， M和XL 變?yōu)榛疑ㄎ催x中），見(jiàn)圖31。

（圖31）

下面昆明網(wǎng)站建設(shè)小編就Axure RP8中使用給圖像“指定選項(xiàng)組”功能來(lái)實(shí)現(xiàn)這個(gè)交互效果。

首先，準(zhǔn)備好6張圖像素材，分別是3張未選中狀態(tài)和3張選中狀態(tài)的圖像，見(jiàn)圖32。

（圖32）

第一步：將3張未選中狀態(tài)的圖像導(dǎo)入Axure，并在右側(cè)的部件【屬性】面板中分別給其命名為M、L、XL，見(jiàn)圖33。

（圖33）

第二步：分別設(shè)置這三張圖像的【鼠標(biāo)懸停時(shí)】的交互樣式，上一個(gè)小案例中詳細(xì)介紹過(guò)哦。

1．先右鍵單擊圖像。

2．在彈出的關(guān)聯(lián)菜單中選擇【交互樣式】。

3．在彈出的【設(shè)置交互樣式】對(duì)話框頂部選擇【選中】。

4．勾選【圖像】并導(dǎo)入與之對(duì)應(yīng)的選中時(shí)的圖像。

5．點(diǎn)擊【確定】按鈕，關(guān)閉【設(shè)置交互樣式】對(duì)話框，見(jiàn)圖34。

（圖34）

第三步：在設(shè)計(jì)區(qū)域中選中圖像M，在部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件，在彈出的【用例編輯器】中添加【選中】動(dòng)作，并在右側(cè)的【配置動(dòng)作】中勾選圖像M，設(shè)置其選中狀態(tài)值為true，見(jiàn)圖35，然后單擊【確定】按鈕關(guān)閉用例編輯器。

第四步：使用同樣的方法給圖像 L和XL 添加【鼠標(biāo)點(diǎn)擊時(shí)】事件。

第五步：在設(shè)計(jì)區(qū)域中同時(shí)選中三張圖像，右鍵點(diǎn)擊其中任意一張，在彈出的關(guān)聯(lián)菜單中選擇【指定選項(xiàng)組】，見(jiàn)圖36。然后在彈出的【設(shè)置選項(xiàng)組】對(duì)話框中輸入組名稱(chēng)，見(jiàn)圖37，單擊【確定】按鈕關(guān)閉【設(shè)置選項(xiàng)組】對(duì)話框。

（圖35）

（圖36）

（圖37）

第五步：在頂部的工具欄中點(diǎn)擊【預(yù)覽】按鈕，或者按下快捷鍵F5/Shift+Command+P，快速預(yù)覽交互效果。