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

為了增加鼠標移入時的響應，一般會在鼠標手勢之外另外再加一些特殊的效果突出體現，目的是告之用戶“你已經碰到我了”。

常見的效果有以下幾種：

1、懸停時圖片放大

圖1：woshipm首頁輪播右側的圖片展位

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

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

圖3：優酷視頻列表 – 懸停時有陰影

圖4：當當網商品列表 – 懸停時連線變化

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

圖5：woshipm首頁的輪播圖

圖6：土豆網的視頻列表

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

所需要元件：

• 動態面板 * 1
• 圖片元件 * 1

涉及交互事件（用例）：

• 鼠標移入時
• 鼠標移出時

涉及動作：設置尺寸。

涉及動畫：線性。

一、最簡達成目標

1. 新建一張圖片，將其命名為“圖片”（養成為元件命名的好習慣）

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

2. 添加交互，達到以下效果

• 鼠標移入時，圖片放大；
• 鼠標移出時，圖片復原。

那么，就需要設置兩個用例：鼠標移入時、鼠標移出時，可參照下圖進行相應設置：

注意：

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

好，現在預覽先看一下效果：

可以看到，鼠標移入移出時，圖片（尺寸）放大或還原的效果已經達到。但是，我們上文中提到的效果，圖片并沒有跑出展位的區域。所以，我們還要給這個圖片，加一個展示區域 —— 動態面板。

3. 新建一個動態面板，設置寬高與圖片相同，命名為“1”

示例原型為400*400

4. 圖片元件“圖片”剪切粘貼至動態面板“1”中

OK，再來預覽一下效果，正常的情況應該如下圖：

二、優化之處

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

主要的場景：后期維護、復用。

不小心就忘了調整，導致效果出錯（圖片變形）。

此處可以調整為：

a、鼠標移入時：

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

b、鼠標移出時：

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

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

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

以上2個優化點的設置位置如下圖：

優化后的效果：

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

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

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

后續動態預告

1. 本文提到的另外兩種預覽效果如何實現；
2. 中繼器制作3級菜單。

相關閱讀

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

Axure：一個簡單的進度條，了解“觸發事件”動作

Axure：菊花轉（頁面加載動畫）如何制作

Axure：巧用交互樣式實現多tab切換效果

本文由 @牧逸 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議