全栈工程师?
嗯.....目前并不是!

Axure RP9 案例:京東與淘寶的商品圖片是如何被放大的?

在電商的商品詳情頁中我們經常會看到圖片放大器的運用,我們以京東商品詳情頁為例來製作這樣的原型效果。案例中綜合運用了鼠標移入事件、鼠標移動事件,元件的移動、元件的顯示/隱藏等交互動作。

 觀察交互

【Axure RP9案例】京東與淘寶的商品圖片是如何被放大的

首先我們觀察京東詳情頁中的圖片放大效果。

當鼠標在左側圖片上方移動時,圖片上方會出現一個半透明的圖層跟隨鼠標移動,我們將這個半透明的圖層稱之為放大鏡。同時在原圖右側會出現一張放大版的高清大圖,高清大圖顯示的圖片信息與左側半透明圖層下的圖片信息一致。

鼠標移出原圖範圍邊界時,放大鏡不在移動,同時右側的高清大圖消失。

商品圖片下方有多張縮略圖,鼠標在這些縮略圖之間來回移動可切換上方的商品圖片。鼠標停留在縮略圖上方時,縮略圖會有一個選中效果,邊框變為了紅色。

思路分析

商品原圖以及放大版的高清大圖可以用動態面板盛放,動態面板的每個狀態放置一張商品圖片。商品圖片及高清大圖這兩個動態面板中的圖片順序盡量保持一致。兩個動態面板的尺寸相同,這裡切記不要勾選自適應內容。

通過為頁面設置鼠標移動事件,控制放大鏡的移動,放大鏡隨鼠標移動,放大鏡在水平方向的位置為鼠標的橫坐標-放大鏡一半的寬度,垂直方向的位置為鼠標的縱坐標-放大鏡一半的高度。

在設置交互之前,我們需要添加一些邏輯判斷條件,限制鼠標的移動範圍,即鼠標僅能在商品圖片的動態面板內移動。 在這個交互事件中,我們還需要確定高清大圖的坐標位置。

與商品原圖不同的是,商品原圖上方的放大鏡在移動,商品圖片不動;右側的高清大圖在移動,上方的放大鏡不動(這裡的放大鏡用於輔助理解,實際上不存在)。所以高清大圖的移動距離=-放大鏡相較於商品原圖的移動距離x圖片的放大倍數(高清大圖的尺寸/商品原圖尺寸)。

放大鏡的移動距離=放大鏡的坐標-商品原圖的坐標。

放大鏡的默認位置與商品圖片的位置一致,這裡建議放大鏡的尺寸大於等於商品圖片的一半尺寸。

默認隱藏放大鏡和高清大圖的動態面板。

縮略圖切換商品圖片這一交互效果,可以通過鼠標移入事件來顯示不同的商品原圖和高清大圖。

製作原型

元件準備 :

拖動一個動態面板至設計區域,為動態面板增加5個狀態,每個狀態頁面中放大一張商品圖片,商品圖片尺寸為400×400。

再從元件庫拖動一個動態面板至右側,為動態面板增加5個狀態,每個狀態頁面中放置一張高清大圖,大圖尺寸為800×800。

放置一個紅色半透明的矩形至商品圖片動態面板的上方,矩形尺寸為200×200,矩形與商品圖片位置相同。

【Axure RP9案例】京東與淘寶的商品圖片是如何被放大的

放大圖片:

為頁面設置鼠標移動事件,添加邏輯條件,當鼠標的移動範圍不超出原圖動態面板的邊界且動態面板狀態為圖1時,顯示放大鏡,移動放大鏡至絕對位置([[Cursor.x-Target.width/2]],[[Cursor.y-Target.height/2]]),顯示高清大圖1,移動高清大圖1至絕對位置([[(LVAR2.x-LVAR1.x)2]],[[(LVAR2.y-LVAR1.y)2]])。

案例中有5張商品圖片,同樣的原理,為另外4張商品圖片設置交互情形。最後還要為商品添加一個情形,即當鼠標移出商品圖片邊界外時,隱藏放大鏡和高清大圖。

【Axure RP9案例】京東與淘寶的商品圖片是如何被放大的

圖3-放大圖片1.png

【Axure RP9案例】京東與淘寶的商品圖片是如何被放大的

切換商品圖片 將5張商品縮略圖設置為一個選項組,為縮略圖設置選中樣式,即選中時邊框線為紅色。為每個縮略圖添加鼠標移入事件,選中縮略圖,切換商品圖片和高清大圖的動態面板狀態,顯示對應的圖片。

【Axure RP9案例】京東與淘寶的商品圖片是如何被放大的

【Axure RP9案例】京東與淘寶的商品圖片是如何被放大的

到這裡,原型已經製作完畢,點擊預覽,在瀏覽器中查看原型。

#專欄作家#

拼搏的80后,人人都是產品經理專欄作家。10年互聯網從業經歷,具有各類型B端、C端產品的設計經驗,關注區塊鏈及人工智能的技術發展及應用場景探索。

本文原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《Axure RP9 案例:京東與淘寶的商品圖片是如何被放大的?》
文章链接:https://www.pmbear.com/archives/9498
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们