在前一篇文章Axure：PC端常見圖片展位懸停效果（一）介紹過鼠標(biāo)懸停時圖片放大的效果。本篇我們繼續(xù)嘗試使用用axure，實現(xiàn)以下效果：懸停時邊框突出（或增加陰影）。

再重新看一下我們要實現(xiàn)的效果：

優(yōu)酷視頻列表 – 懸停時有陰影

當(dāng)當(dāng)網(wǎng)商品列表 – 懸停時連線變化

所需要元件：圖片元件 * 1；

涉及交互事件（用例）：無；

涉及動作：無；

涉及動畫：無；

關(guān)鍵設(shè)置：（元件的）交互樣式。

元件的“交互樣式”

我們在文章?Axure：巧用交互樣式實現(xiàn)多tab切換效果?中使用過元件的“交互樣式”。

目前，axure支持大部分的基本元件的“交互樣式”設(shè)置。

右鍵元件，即可在菜單中找到“交互樣式”入口。

目前，可以設(shè)置元件常見的4個狀態(tài)的交互樣式：

1. 鼠標(biāo)懸停；
2. 鼠標(biāo)按下；
3. 選中；
4. 禁用。

以下進(jìn)入制作過程 —— 其實非常簡單！

懸停時突出邊框

1. 拖入一個圖片（元件）；
2. 右鍵圖片菜單選擇“交互樣式”，進(jìn)入交互樣式設(shè)置；
3. （默認(rèn)的）在“鼠標(biāo)懸?！眛ab下做以下設(shè)置。

a、（勾選）線段顏色 —— 樣例中使用的是0099FFF；

b、（勾選）線寬 ——?樣例中使用的是3號線。

實際練習(xí)中應(yīng)該根據(jù)實際情況自行設(shè)置相應(yīng)屬性及值。設(shè)置好之后效果就出來了，如下圖：

懸停時增加陰影

1. 拖入一個圖片（元件）；
2. 右鍵圖片菜單選擇“交互樣式”，進(jìn)入交互樣式設(shè)置；
3. （默認(rèn)的）在“鼠標(biāo)懸停”tab下做以下設(shè)置。

（勾選）外部陰影? ——?樣例中的設(shè)置是，x、y軸偏移值都為0，模糊值為10，顏色為默認(rèn)值。

如下圖所示：

實際練習(xí)中應(yīng)該根據(jù)想要的效果自行設(shè)置相應(yīng)屬性及值。

設(shè)置好之后效果就出來了，如下圖：

注意：該效果在預(yù)覽時，會有一個小情況 —— 第一次圖片懸停時可能會閃動縮放一下。仔細(xì)查找著相應(yīng)設(shè)置，并未發(fā)現(xiàn)出錯的地方，可能是axure生機(jī)的html文件，或者瀏覽器渲染的問題，知道即可，不必過于糾結(jié)。（當(dāng)然，若哪位大俠知道這個原因，也請告之一下，不甚感謝）

寫在最后

以上效果預(yù)覽：https://4o2c1f.axshare.com

日常練習(xí)時，一些相對常見簡單的交互，基本都可以在“交互設(shè)置”中體現(xiàn)。

我們本次只了嘗試了兩個效果，通過“交互設(shè)置”的設(shè)置界面，我們可以看到有很多的設(shè)置（效果），可以依次都嘗試一下，等到實際需要時選擇最合適的設(shè)置。

相關(guān)閱讀

Axure：PC端常見圖片展位懸停效果（一）

Axure中繼器：2級菜單最簡潔的打開方式

Axure：一個簡單的進(jìn)度條，了解“觸發(fā)事件”動作

Axure：菊花轉(zhuǎn)（頁面加載動畫）如何制作

Axure：巧用交互樣式實現(xiàn)多tab切換效果

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

題圖來自 Pexels，基于 CC0 協(xié)議