本文我來嘗試著用axure，將懸停時放大的效果做一下，一起來看看~

為了增加鼠標(biāo)移入時的響應(yīng)，一般會在鼠標(biāo)手勢之外另外再加一些特殊的效果突出體現(xiàn)，目的是告之用戶“你已經(jīng)碰到我了”。

常見的效果有以下幾種：

1、懸停時圖片放大

圖1：woshipm首頁輪播右側(cè)的圖片展位

圖2：36Kr列表頁圖片展位

2、懸停時邊框突出（或增加陰影）

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

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

3、懸停時浮層隱現(xiàn)（包括一些特殊的動畫）

圖5：woshipm首頁的輪播圖

圖6：土豆網(wǎng)的視頻列表

這一篇我們先來嘗試著用axure，將懸停時放大的效果做一下。

所需要元件：

• 動態(tài)面板 * 1
• 圖片元件 * 1

涉及交互事件（用例）：

• 鼠標(biāo)移入時
• 鼠標(biāo)移出時

涉及動作：設(shè)置尺寸。

涉及動畫：線性。

一、最簡達(dá)成目標(biāo)

1. 新建一張圖片，將其命名為“圖片”（養(yǎng)成為元件命名的好習(xí)慣）

直接將圖片拖入到編輯界面；或者拖入一個圖片元件再雙擊導(dǎo)入圖片。

2. 添加交互，達(dá)到以下效果

• 鼠標(biāo)移入時，圖片放大；
• 鼠標(biāo)移出時，圖片復(fù)原。

那么，就需要設(shè)置兩個用例：鼠標(biāo)移入時、鼠標(biāo)移出時，可參照下圖進(jìn)行相應(yīng)設(shè)置：

注意：

1. 放大設(shè)置的寬高要比默認(rèn)的寬高大，要不然看不到效果—— 示例中圖片元件默認(rèn)為400*400，設(shè)置放大后的尺寸為450*450。
2. （兩個動作的）錨點(diǎn)要選擇為“中心”，即保證中心不動，默認(rèn)為“左上角”。
3. 可適當(dāng)選擇使用動畫，增加一些效果—— 該階段原型暫未使用動畫。

好，現(xiàn)在預(yù)覽先看一下效果：

可以看到，鼠標(biāo)移入移出時，圖片（尺寸）放大或還原的效果已經(jīng)達(dá)到。但是，我們上文中提到的效果，圖片并沒有跑出展位的區(qū)域。所以，我們還要給這個圖片，加一個展示區(qū)域 —— 動態(tài)面板。

3. 新建一個動態(tài)面板，設(shè)置寬高與圖片相同，命名為“1”

示例原型為400*400

4. 圖片元件“圖片”剪切粘貼至動態(tài)面板“1”中

OK，再來預(yù)覽一下效果，正常的情況應(yīng)該如下圖：

二、優(yōu)化之處

（1）設(shè)置尺寸時，我們是使用的是純數(shù)字 —— 絕對值。當(dāng)我們需要使用其他圖片時，這個數(shù)字很有可能需要重新調(diào)整一下（圖片尺寸變了）。

主要的場景：后期維護(hù)、復(fù)用。

不小心就忘了調(diào)整，導(dǎo)致效果出錯（圖片變形）。

此處可以調(diào)整為：

a、鼠標(biāo)移入時：

• 寬：[[this.width * 1.1]] —— 當(dāng)前元件寬度的1.1倍
• 高：[[this.height * 1.1]]?—— 當(dāng)前元件高度的1.1倍

b、鼠標(biāo)移出時：

• 寬：[[this.width / 1.1]] —— 當(dāng)前元件寬度除于1.1（恢復(fù)后放大前）
• 高：[[this.height / 1.1]]?—— 當(dāng)前元件高度除于1.1（恢復(fù)后放大前）

（2）增加一定的動畫，將圖片放大/縮小效果更平滑一些。

此處選擇的動畫是：線性 500ms完成到放大/縮小后的尺寸。

以上2個優(yōu)化點(diǎn)的設(shè)置位置如下圖：

優(yōu)化后的效果：

是不是看上去更舒服一些了？！

以上，圖片懸停放大的制作基本完成，預(yù)覽一下自己的RP，看看效果出來了沒？

有問題請留言！希望大家閱文過程中發(fā)現(xiàn)問題，及時指出，大膽懷疑，我都會一一回復(fù)的。

后續(xù)動態(tài)預(yù)告

1. 本文提到的另外兩種預(yù)覽效果如何實(shí)現(xiàn)；
2. 中繼器制作3級菜單。

相關(guān)閱讀

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

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

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

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

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

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