導(dǎo)語(yǔ)：2018年8月，百度搜索資源平臺(tái)發(fā)布的《百度移動(dòng)搜索落地頁(yè)體驗(yàn)白皮書(shū)4.0》中提到圖片頁(yè)資源標(biāo)準(zhǔn)："詳情頁(yè)中主體內(nèi)容包括圖片的情況下，圖片應(yīng)能點(diǎn)擊調(diào)起大圖、縮小放大功能使用自如，手勢(shì)支持順滑，圖集能自由切換。"對(duì)于這一標(biāo)準(zhǔn)，有哪些案例可以參考呢？對(duì)于基礎(chǔ)的點(diǎn)擊調(diào)起大圖功能，應(yīng)該如何實(shí)現(xiàn)呢？《百度移動(dòng)搜索落地頁(yè)體驗(yàn)白皮書(shū)4.0專題解讀》之《圖片交互如何做會(huì)更好？》，將為你解答這些疑問(wèn)。

一、為什么圖片要增加交互功能？

優(yōu)質(zhì)的資源通暢是圖文并茂的，優(yōu)質(zhì)圖片所帶來(lái)的直觀體驗(yàn)，可以讓用戶快速獲取信息，是用戶體驗(yàn)中非常重要的一環(huán)。

但是，受限于移動(dòng)端屏幕大小，考慮到用戶流量等問(wèn)題，詳情頁(yè)中主體內(nèi)容的圖片通常被默認(rèn)設(shè)置為小圖。而用戶在瀏覽時(shí)，看到感興趣的圖片，往往希望能夠在點(diǎn)擊圖片后獲取大圖，以便獲取更詳細(xì)的信息。

如下圖所示，用戶往往希望能夠在點(diǎn)擊圖片后獲取大圖，并對(duì)圖片進(jìn)行局部放大和移動(dòng)，以便查看圖中的詳細(xì)數(shù)據(jù)。

而對(duì)于圖集來(lái)說(shuō)，還需要有自由切換功能，才能夠滿足用戶需求。

因此，詳情頁(yè)中主體內(nèi)容包括圖片的情況下，圖片應(yīng)能點(diǎn)擊調(diào)起大圖、縮小放大功能使用自如，手勢(shì)支持順滑，圖集能自由切換。

二、參考案例

參考案例1

如下圖所示，詳情頁(yè)主體內(nèi)容中的圖片，點(diǎn)擊后可以調(diào)起大圖，縮小放大功能使用自如，手勢(shì)支持順滑，可以作為參考。 

參考案例2

如下圖所示，詳情頁(yè)主體內(nèi)容中的圖集，點(diǎn)擊后可以調(diào)起大圖，縮小放大功能使用自如，手勢(shì)支持順滑，且能夠自由切換，可以作為參考。

三、以點(diǎn)擊調(diào)起大圖為例談技術(shù)實(shí)現(xiàn)

普通的Web頁(yè)面是無(wú)法直接查看圖片的，而放大查看圖片不僅僅是簡(jiǎn)單的放大圖片，如果想要實(shí)現(xiàn)與原生手機(jī)應(yīng)用中類似的放大查看圖片的能力，需要通過(guò)JS代碼進(jìn)行一些動(dòng)效和交互效果封裝。

1. MIP站添加popup屬性即可直接使用

在MIP中，已經(jīng)將圖片查看效果封裝到了<mip-img>組件內(nèi)部，通過(guò)添加popup屬性來(lái)直接使用，例如：<mip-img popup>。

使用popup以后效果如下：

對(duì)于MIP站來(lái)說(shuō)，直接添加popup屬性就可以實(shí)現(xiàn)點(diǎn)擊調(diào)起大圖的效果。而對(duì)于普通站點(diǎn)來(lái)說(shuō)，也可以參考MIP的popup技術(shù)原理，升級(jí)自己的站點(diǎn)。

2. popup技術(shù)原理詳解

popup效果不算特別復(fù)雜，接下來(lái)通過(guò)如下示例為大家講解popup在MIP中是如何實(shí)現(xiàn)的。

（1）功能拆解

實(shí)現(xiàn)圖片的popup效果，主要考慮以下幾個(gè)功能： 

- 圖片popup（圖片彈起）：當(dāng)前圖片遵循約定動(dòng)畫曲線放大至最大，同時(shí)將背景變黑； 

- 圖片拖拽：圖片進(jìn)入放大查看狀態(tài)以后，可以被拖拽，向下拖拽時(shí)可以退出放大瀏覽效果； 

- 圖片popdown（圖片落坑）：當(dāng)圖片從放大瀏覽狀態(tài)退出時(shí)，應(yīng)當(dāng)遵循通過(guò)平滑動(dòng)畫回到原來(lái)圖片位置的交互效果，簡(jiǎn)稱落坑。

（2） 代碼實(shí)現(xiàn)

通過(guò)以上功能拆解，我們可以一起看一下幾個(gè)圖片popup的核心功能的代碼實(shí)現(xiàn)：

（3）popup實(shí)現(xiàn)

① popup需要?jiǎng)?chuàng)建專用的彈層dom，代碼示例如下：

    // 創(chuàng)建彈層 dom    function createPopup(element, img) {        var mipPopWrap = document.querySelector('.mip-img-popUp-wrapper');        if (!!mipPopWrap && mipPopWrap.getAttribute('data-name') === 'mip-img-popUp-name'            && mipPopWrap.parentNode.tagName.toLowerCase() === 'body') {            mipPopWrap.querySelector('img').setAttribute('src', img.src);            return mipPopWrap;        }        var popup = document.createElement('div');        // 阻止縱向滑動(dòng)        new Gesture(popup, {            preventY: true        });        popup.className = 'mip-img-popUp-wrapper';        popup.setAttribute('data-name', 'mip-img-popUp-name');        // 創(chuàng)建圖片預(yù)覽圖層        var popUpBg = document.createElement('div');        var innerImg = new Image();        popUpBg.className = 'mip-img-popUp-bg';        innerImg.className = 'mip-img-popUp-innerimg';        innerImg.src = img.src;        popup.appendChild(popUpBg);        popup.appendChild(innerImg);        document.body.appendChild(popup);        return popup;    }

② 實(shí)現(xiàn)用戶點(diǎn)擊時(shí)的圖片放大和背景變化效果，代碼示例如下：

function bindPopup(element, img) {        var popup;        var popupBg;        var popupImg;        // 圖片點(diǎn)擊時(shí)展現(xiàn)圖片        img.addEventListener('click', function (event) {            event.stopPropagation();            // 圖片未加載則不彈層            if (img.width + img.naturalWidth === 0) {                return;            }            popup = createPopup(element, img);            popupBg = popup.querySelector('.mip-img-popUp-bg');            popupImg = popup.querySelector('img');            //觸發(fā)圖片落坑            popup.addEventListener('click', imagePop, false);            var imgOffset = getImgOffset(img);            var onResize = function () {                imgOffset = getImgOffset(img);                css(popupImg, imgOffset);                naboo.animate(popupImg, getPopupImgPos(imgOffset.width, imgOffset.height)).start();            };            window.addEventListener('resize', onResize);            css(popupImg, imgOffset);            css(popupBg, 'opacity', 1);            css(popup, 'dISPlay', 'block');            naboo.animate(popupImg, getPopupImgPos(imgOffset.width, imgOffset.height)).start();            css(img, 'visibility', 'hidden');            css(img.parentNode, 'zIndex', 'inherit');        }, false);    }

③ 實(shí)現(xiàn)圖片落坑，具體代碼示例如下：

function imagePop() {    naboo.animate(popupBg, {        opacity: 0    }).start();    naboo.animate(popupImg, getImgOffset(img)).start(function () {        css(img, 'visibility', 'visible');        css(popup, 'display', 'none');    });    popup.removeEventListener('click', imagePop, false);}

基于以上，我們基本可以實(shí)現(xiàn)圖片的popup效果了。

四、結(jié)語(yǔ)

提高用戶體驗(yàn)，就要從用戶的角度出發(fā)，滿足用戶的合理需求。期待我們從多角度，全方位共同提高用戶體驗(yàn)。

注：若對(duì)本文有疑問(wèn)，可以發(fā)送郵件，我們將挑選出有代表性的問(wèn)題予以解答。