在電商的商品詳情頁(yè)中我們經(jīng)常會(huì)看到圖片放大器的運(yùn)用，我們以京東商品詳情頁(yè)為例來(lái)制作這樣的原型效果。案例中綜合運(yùn)用了鼠標(biāo)移入事件、鼠標(biāo)移動(dòng)事件，元件的移動(dòng)、元件的顯示/隱藏等交互動(dòng)作。

?觀察交互

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

當(dāng)鼠標(biāo)在左側(cè)圖片上方移動(dòng)時(shí)，圖片上方會(huì)出現(xiàn)一個(gè)半透明的圖層跟隨鼠標(biāo)移動(dòng)，我們將這個(gè)半透明的圖層稱之為放大鏡。同時(shí)在原圖右側(cè)會(huì)出現(xiàn)一張放大版的高清大圖，高清大圖顯示的圖片信息與左側(cè)半透明圖層下的圖片信息一致。

鼠標(biāo)移出原圖范圍邊界時(shí)，放大鏡不在移動(dòng)，同時(shí)右側(cè)的高清大圖消失。

商品圖片下方有多張縮略圖，鼠標(biāo)在這些縮略圖之間來(lái)回移動(dòng)可切換上方的商品圖片。鼠標(biāo)停留在縮略圖上方時(shí)，縮略圖會(huì)有一個(gè)選中效果，邊框變?yōu)榱思t色。

思路分析

商品原圖以及放大版的高清大圖可以用動(dòng)態(tài)面板盛放，動(dòng)態(tài)面板的每個(gè)狀態(tài)放置一張商品圖片。商品圖片及高清大圖這兩個(gè)動(dòng)態(tài)面板中的圖片順序盡量保持一致。兩個(gè)動(dòng)態(tài)面板的尺寸相同，這里切記不要勾選自適應(yīng)內(nèi)容。

通過(guò)為頁(yè)面設(shè)置鼠標(biāo)移動(dòng)事件，控制放大鏡的移動(dòng)，放大鏡隨鼠標(biāo)移動(dòng)，放大鏡在水平方向的位置為鼠標(biāo)的橫坐標(biāo)-放大鏡一半的寬度，垂直方向的位置為鼠標(biāo)的縱坐標(biāo)-放大鏡一半的高度。

在設(shè)置交互之前，我們需要添加一些邏輯判斷條件，限制鼠標(biāo)的移動(dòng)范圍，即鼠標(biāo)僅能在商品圖片的動(dòng)態(tài)面板內(nèi)移動(dòng)。 在這個(gè)交互事件中，我們還需要確定高清大圖的坐標(biāo)位置。

與商品原圖不同的是，商品原圖上方的放大鏡在移動(dòng)，商品圖片不動(dòng)；右側(cè)的高清大圖在移動(dòng)，上方的放大鏡不動(dòng)（這里的放大鏡用于輔助理解，實(shí)際上不存在）。所以高清大圖的移動(dòng)距離=-放大鏡相較于商品原圖的移動(dòng)距離x圖片的放大倍數(shù)（高清大圖的尺寸/商品原圖尺寸）。

放大鏡的移動(dòng)距離=放大鏡的坐標(biāo)-商品原圖的坐標(biāo)。

放大鏡的默認(rèn)位置與商品圖片的位置一致，這里建議放大鏡的尺寸大于等于商品圖片的一半尺寸。

默認(rèn)隱藏放大鏡和高清大圖的動(dòng)態(tài)面板。

縮略圖切換商品圖片這一交互效果，可以通過(guò)鼠標(biāo)移入事件來(lái)顯示不同的商品原圖和高清大圖。

制作原型

元件準(zhǔn)備?：

拖動(dòng)一個(gè)動(dòng)態(tài)面板至設(shè)計(jì)區(qū)域，為動(dòng)態(tài)面板增加5個(gè)狀態(tài)，每個(gè)狀態(tài)頁(yè)面中放大一張商品圖片，商品圖片尺寸為400×400。

再?gòu)脑?kù)拖動(dòng)一個(gè)動(dòng)態(tài)面板至右側(cè)，為動(dòng)態(tài)面板增加5個(gè)狀態(tài)，每個(gè)狀態(tài)頁(yè)面中放置一張高清大圖，大圖尺寸為800×800。

放置一個(gè)紅色半透明的矩形至商品圖片動(dòng)態(tài)面板的上方，矩形尺寸為200×200，矩形與商品圖片位置相同。

放大圖片：

為頁(yè)面設(shè)置鼠標(biāo)移動(dòng)事件，添加邏輯條件，當(dāng)鼠標(biāo)的移動(dòng)范圍不超出原圖動(dòng)態(tài)面板的邊界且動(dòng)態(tài)面板狀態(tài)為圖1時(shí)，顯示放大鏡，移動(dòng)放大鏡至絕對(duì)位置（[[Cursor.x-Target.width/2]]，[[Cursor.y-Target.height/2]]），顯示高清大圖1，移動(dòng)高清大圖1至絕對(duì)位置（[[(LVAR2.x-LVAR1.x)2]]，[[(LVAR2.y-LVAR1.y)2]]）。

案例中有5張商品圖片，同樣的原理，為另外4張商品圖片設(shè)置交互情形。最后還要為商品添加一個(gè)情形，即當(dāng)鼠標(biāo)移出商品圖片邊界外時(shí)，隱藏放大鏡和高清大圖。

圖3-放大圖片1.png

切換商品圖片 將5張商品縮略圖設(shè)置為一個(gè)選項(xiàng)組，為縮略圖設(shè)置選中樣式，即選中時(shí)邊框線為紅色。為每個(gè)縮略圖添加鼠標(biāo)移入事件，選中縮略圖，切換商品圖片和高清大圖的動(dòng)態(tài)面板狀態(tài)，顯示對(duì)應(yīng)的圖片。

到這里，原型已經(jīng)制作完畢，點(diǎn)擊預(yù)覽，在瀏覽器中查看原型。

#專欄作家#

拼搏的80后，人人都是產(chǎn)品經(jīng)理專欄作家。10年互聯(lián)網(wǎng)從業(yè)經(jīng)歷，具有各類型B端、C端產(chǎn)品的設(shè)計(jì)經(jīng)驗(yàn)，關(guān)注區(qū)塊鏈及人工智能的技術(shù)發(fā)展及應(yīng)用場(chǎng)景探索。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議