在我們?yōu)g覽購(gòu)物網(wǎng)站時(shí)，經(jīng)常見(jiàn)到這種交互效果，如選擇商品的尺碼、顏色，見(jiàn)圖16。

下面昆明網(wǎng)站建設(shè)小編就帶大家來(lái)看看我們?cè)贏xure RP8中使用圖像的交互樣式實(shí)現(xiàn)這個(gè)簡(jiǎn)單的交互效果。

首先，準(zhǔn)備好三張圖像素材，見(jiàn)圖17。

（圖16）

A：選中時(shí)

B：鼠標(biāo)懸停時(shí)

C：未觸發(fā)交互樣式

（圖17）

第一步：將 unselected.jpg 拖入Axure設(shè)計(jì)區(qū)域，或者使用圖像部件導(dǎo)入，見(jiàn)圖18。

（圖18）

第二步：右鍵單擊圖像，在彈出的關(guān)聯(lián)菜單中選擇【交互樣式】，見(jiàn)圖19。然后在彈出的【設(shè)置交互樣式】對(duì)話框中選擇【鼠標(biāo)懸?！?，勾選【圖像】并導(dǎo)入 hover.jpg，見(jiàn)圖20。

（圖19）

（圖20）

第三步：選擇【選中】，勾選【圖像】并導(dǎo)入 selected.jpg，見(jiàn)圖21。然后單擊【確定】，關(guān)閉【設(shè)置交互樣式】對(duì)話框。

（圖21）

第四步：在設(shè)計(jì)區(qū)域中選中圖像部件，然后在右側(cè)的部件【屬性】面板中雙擊【鼠標(biāo)單擊時(shí)】事件，見(jiàn)圖22，然后在彈出的【用例編輯器】對(duì)話框中進(jìn)行配置，見(jiàn)圖23。

在【用例編輯器】中配置完動(dòng)作后，點(diǎn)擊【確定】按鈕，關(guān)閉【用例編輯器】，此時(shí)在部件【屬性】面板中可以看到剛剛配置好的用例，見(jiàn)圖24。

（圖22）

（圖23）

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

（圖24）

分割/裁剪圖像：圖像部件可以被水平或垂直分割，這樣可以非常方便地處理導(dǎo)入的截圖。右鍵單擊圖片，選擇【分割圖像】或【裁剪圖像】或在部件【屬性】面板中選擇，見(jiàn)圖25。

1：輸入用例名稱(chēng)（在學(xué)習(xí)階段應(yīng)養(yǎng)成給用例命名的好習(xí)慣）。

2：在左側(cè)添加【選中】動(dòng)作。

3：組織動(dòng)作（有多個(gè)動(dòng)作時(shí)，可以組織動(dòng)作的執(zhí)行順序）。

4：在右側(cè)的配置動(dòng)作中勾選【圖像部件】。

5：設(shè)置選中狀態(tài)值為true。

分割圖像（Slice）：將圖像分割成多個(gè)水平或垂直的部分。

裁剪圖像（Crop）：設(shè)置想保留的圖片區(qū)域。

圖像邊框和圓角：通過(guò)選擇工具欄中的線寬和線條顏色就可以給圖像添加邊框。也可以通過(guò)拖動(dòng)部件左上角的圓角半徑控制手柄，或是進(jìn)入部件的樣式面板設(shè)置圖像圓角，見(jiàn)圖26（A: 自左至右分別是圖像線條顏色、線條寬度、線條樣式；B: 圓角半徑控制手柄）。

（圖25）

（圖26）

圖像的不透明度：導(dǎo)入的圖像可以調(diào)整透明度，在部件樣式面板中輸入不透明度百分比即可，見(jiàn)圖27。

優(yōu)化圖像：大圖像會(huì)使你的RP文件增大，還會(huì)影響瀏覽質(zhì)量，使用優(yōu)化圖像可以在不改變圖像尺寸的前提下減小圖像大小，但是這有可能影響圖片質(zhì)量。要優(yōu)化圖片，右鍵單擊圖像并選擇【優(yōu)化圖像】，見(jiàn)圖28。

（圖27）

（圖28）

小提示：導(dǎo)入GIF動(dòng)畫(huà)圖像時(shí)不要使用優(yōu)化圖像，這樣會(huì)導(dǎo)致圖像失去動(dòng)態(tài)效果。

保護(hù)邊角：該功能類(lèi)似于九宮格切圖和.9png制作，它可以在調(diào)整圖像大小時(shí)保護(hù)邊角不變，見(jiàn)圖29。

（圖29）

A：拉伸之前的圖像。

B：未使用保護(hù)邊角拉伸后的圖像。

C：使用保護(hù)邊角拉伸后的圖像。

指定選項(xiàng)組：和單選按鈕組相似，圖像也可以被指定選擇組，當(dāng)選擇組中的圖像設(shè)置了選中時(shí)的交互樣式后，點(diǎn)選其中一張圖像，其他圖像都會(huì)被設(shè)置為默認(rèn)樣式（未選中狀態(tài)）。要將圖像設(shè)置到選項(xiàng)組，先選擇多張圖像，然后單擊右鍵選擇【指定選項(xiàng)組】，或者在部件【屬性】面板底部選擇“設(shè)置選項(xiàng)組”，見(jiàn)圖30。

（圖30）