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

?

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

?

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

?

一、準備頁面元素。

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

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

?

二、設(shè)置交互

?

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

?

?

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

?

?

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

?

?

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

?

?

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

?

?

6、設(shè)置好放大后圖片的尺寸，左邊選擇縮放時的錨點?？梢愿鶕?jù)你的實際需要選擇縮放時的動畫與動畫時間，或者不選擇動畫。

?

?

7、預(yù)覽看一下效果。

?

?

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

?

?

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

?

?

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

?

?

11、點擊確定，完成交互設(shè)置。

?

12、這時候預(yù)覽一下最終效果。

?

?

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

?

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

?

?

2、復(fù)制帶交互的圖片。

?

?

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

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