?

?

產品經理在進行原型設計的時候，時常會遇到這樣一種動態效果：鼠標移入到頁面中的某個圖片或者圖標上，圖標會進行放大，提醒用戶現在鼠標所在的位置為當前的圖片。移出該圖片時，圖片的尺寸回復為原本大小。

通常我們會在圖片的展示頁面中用到它，比如電商網站中商品的展示頁面。

在前面的分析中，我們基本知道這個交互的邏輯是怎樣的了，那么這個效果在Axure RP9中應該怎么樣去操作設置呢？我們一步步來看看。

一、準備頁面元素。

這里我們使用了兩張商品的圖片，是這個效果的主要部分，其他的元素大家可以按照自己的實際情況去繪制，這里就不浪費這個時間了。

? ? ? ? ? ? ? ? ? ? ? ? ? ?

二、設置交互

1、選中需要設置的圖片（先設置其中一個）

2、將檢查窗口的標簽切換到“交互”標簽，方可進行交互設置。

3、點擊新建交互，創建一個新交互。選擇用例事件，按照我們的交互效果，這里選擇的是鼠標移入時事件。

4、接著選擇用例動作，同樣根據我們的需要選擇“設置尺寸”動作

5、配置“設置尺寸”動作，選擇當前部件即可對當前選擇的圖片的尺寸進行設置。

6、設置好放大后圖片的尺寸，左邊選擇縮放時的錨點?？梢愿鶕愕膶嶋H需要選擇縮放時的動畫與動畫時間，或者不選擇動畫。

7、預覽看一下效果。

8、鼠標移入時圖片放大的交互設置我們就完成了，接下來我們要設置的是，當鼠標移出圖片的時候，圖片恢復為原來的大小。經過前面的設置，相信大家對于這個設置已經有思路了。在剛才的交互設置的下方，選擇“新建交互”

9、選擇事件。沒錯，這里我們要選擇的是“鼠標移入時”相對應的事件“鼠標移出時”。

10、動作和動作的配置與“移入時”類似，不同的是圖片的尺寸是圖片的原尺寸。

11、點擊確定，完成交互設置。

12、這時候預覽一下最終效果。

?

通常我們不止在一張圖片上應用這個交互。在確保交互的設置沒有問題之后，就可以將這個交互應用到其他圖片中了，這里有這樣兩種方法可以復刻這個交互。

1、復制交互設置，粘貼到另外的圖片的交互用例中。選擇需要復制的交互，CTRL+C（或者右鍵菜單選擇“復制”）。選中新的圖片，直接CTRL+V即可復制用例交互成功。

2、復制帶交互的圖片。

雙擊圖片更改圖片，選擇實現準備好的不同的圖片即可。

Axure 9有很多朋友在使用上還比較生疏，如果有需要的話，大家可以把需要了解或者不清楚如何制作的案例告知我們，我們將會給大家講述，在Axure 9中該如何解決問題、制作案例，期待大家的反饋。

總結

以上是生活随笔為你收集整理的Axure 交互案例：放大缩小图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。