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

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

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

（圖16）

A：選中時

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

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

（圖17）

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

（圖18）

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

（圖19）

（圖20）

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

（圖21）

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

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

（圖22）

（圖23）

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

（圖24）

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

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

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

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

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

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

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

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

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

（圖25）

（圖26）

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

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

（圖27）

（圖28）

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

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

（圖29）

A：拉伸之前的圖像。

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

C：使用保護邊角拉伸后的圖像。

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

（圖30）