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

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

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

（圖16）

A：選中時(shí)

B：鼠標懸停時(shí)

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

（圖17）

第一步：將 unselected.jpg 拖入Axure設計區域，或者使用圖像部件導入，見(jiàn)圖18。

（圖18）

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

（圖19）

（圖20）

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

（圖21）

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

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

（圖22）

（圖23）

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

（圖24）

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

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

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

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

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

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

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

裁剪圖像（Crop）：設置想保留的圖片區域。

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

（圖25）

（圖26）

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

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

（圖27）

（圖28）

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

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

（圖29）

A：拉伸之前的圖像。

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

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

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

（圖30）