Axure 交互案例:放大縮小圖片

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

 

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

 

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

 

 

一、準備頁面元素。

 

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

 

                           

 

二、設置交互

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

6、設置好放大後圖片的尺寸,左邊選擇縮放時的錨點。可以根據你的實際需要選擇縮放時的動畫與動畫時間,或者不選擇動畫。

 

 

7、預覽看一下效果。

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 


 

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

 

 

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

 

 

 

2、複製帶交互的圖片。

 

 

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

 

 

 

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章