產品經理在進行原型設計的時候,時常會遇到這樣一種動態效果:鼠標移入到頁面中的某個圖片或者圖標上,圖標會進行放大,提醒用戶現在鼠標所在的位置爲當前的圖片。移出該圖片時,圖片的尺寸回覆爲原本大小。
通常我們會在圖片的展示頁面中用到它,比如電商網站中商品的展示頁面。
在前面的分析中,我們基本知道這個交互的邏輯是怎樣的了,那麼這個效果在Axure RP9中應該怎麼樣去操作設置呢?我們一步步來看看。
一、準備頁面元素。
這裏我們使用了兩張商品的圖片,是這個效果的主要部分,其他的元素大家可以按照自己的實際情況去繪製,這裏就不浪費這個時間了。
二、設置交互
1、選中需要設置的圖片(先設置其中一個)
2、將檢查窗口的標籤切換到“交互”標籤,方可進行交互設置。
3、點擊新建交互,創建一個新交互。選擇用例事件,按照我們的交互效果,這裏選擇的是鼠標移入時事件。
4、接着選擇用例動作,同樣根據我們的需要選擇“設置尺寸”動作
5、配置“設置尺寸”動作,選擇當前部件即可對當前選擇的圖片的尺寸進行設置。
6、設置好放大後圖片的尺寸,左邊選擇縮放時的錨點。可以根據你的實際需要選擇縮放時的動畫與動畫時間,或者不選擇動畫。
7、預覽看一下效果。
8、鼠標移入時圖片放大的交互設置我們就完成了,接下來我們要設置的是,當鼠標移出圖片的時候,圖片恢復爲原來的大小。經過前面的設置,相信大家對於這個設置已經有思路了。在剛纔的交互設置的下方,選擇“新建交互”
9、選擇事件。沒錯,這裏我們要選擇的是“鼠標移入時”相對應的事件“鼠標移出時”。
10、動作和動作的配置與“移入時”類似,不同的是圖片的尺寸是圖片的原尺寸。
11、點擊確定,完成交互設置。
12、這時候預覽一下最終效果。
通常我們不止在一張圖片上應用這個交互。在確保交互的設置沒有問題之後,就可以將這個交互應用到其他圖片中了,這裏有這樣兩種方法可以復刻這個交互。
1、複製交互設置,粘貼到另外的圖片的交互用例中。選擇需要複製的交互,CTRL+C(或者右鍵菜單選擇“複製”)。選中新的圖片,直接CTRL+V即可複製用例交互成功。
2、複製帶交互的圖片。
雙擊圖片更改圖片,選擇實現準備好的不同的圖片即可。
Axure 9有很多朋友在使用上還比較生疏,如果有需要的話,大家可以把需要了解或者不清楚如何製作的案例告知我們,我們將會給大家講述,在Axure 9中該如何解決問題、製作案例,期待大家的反饋。