【白皮書4.0解讀】圖片交互如何做會更好？
導語：2018年8月，百度搜索資源平臺發(fā)布的《百度移動搜索落地頁體驗白皮書4.0》中提到圖片頁資源標準：“詳情頁中主體內容包括圖片的情況下，圖片應能點擊調起大圖、縮小放大功能使用自如，手勢支持順滑，圖集能自由切換?！睂τ谶@一標準，有哪些案例可以參考呢？對于基礎的點擊調起大圖功能，應該如何實現(xiàn)呢？《百度移動搜索落地頁體驗白皮書4.0專題解讀》之《圖片交互如何做會更好？》，將為你解答這些疑問。
一、為什么圖片要增加交互功能？
優(yōu)質的資源通暢是圖文并茂的，優(yōu)質圖片所帶來的直觀體驗，可以讓用戶快速獲取信息，是用戶體驗中非常重要的一環(huán)。
但是，受限于移動端屏幕大小，考慮到用戶流量等問題，詳情頁中主體內容的圖片通常被默認設置為小圖。而用戶在瀏覽時，看到感興趣的圖片，往往希望能夠在點擊圖片后獲取大圖，以便獲取更詳細的信息。
如下圖所示，用戶往往希望能夠在點擊圖片后獲取大圖，并對圖片進行局部放大和移動，以便查看圖中的詳細數據。
而對于圖集來說，還需要有自由切換功能，才能夠滿足用戶需求。
因此，詳情頁中主體內容包括圖片的情況下，圖片應能點擊調起大圖、縮小放大功能使用自如，手勢支持順滑，圖集能自由切換。
二、參考案例
參考案例1
如下圖所示，詳情頁主體內容中的圖片，點擊后可以調起大圖，縮小放大功能使用自如，手勢支持順滑，可以作為參考。
參考案例2
如下圖所示，詳情頁主體內容中的圖集，點擊后可以調起大圖，縮小放大功能使用自如，手勢支持順滑，且能夠自由切換，可以作為參考。
三、以點擊調起大圖為例談技術實現(xiàn)
普通的Web頁面是無法直接查看圖片的，而放大查看圖片不僅僅是簡單的放大圖片，如果想要實現(xiàn)與原生手機應用中類似的放大查看圖片的能力，需要通過JS代碼進行一些動效和交互效果封裝。
1. MIP站添加popup屬性即可直接使用
在MIP中，已經將圖片查看效果封裝到了<mip-img>組件內部，通過添加popup屬性來直接使用，例如：<mip-img popup>。
使用popup以后效果如下：
對于MIP站來說，直接添加popup屬性就可以實現(xiàn)點擊調起大圖的效果。而對于普通站點來說，也可以參考MIP的popup技術原理，升級自己的站點。
2. popup技術原理詳解
popup效果不算特別復雜，接下來通過如下示例為大家講解popup在MIP中是如何實現(xiàn)的。
（1）功能拆解
實現(xiàn)圖片的popup效果，主要考慮以下幾個功能：
- 圖片popup（圖片彈起）：當前圖片遵循約定動畫曲線放大至最大，同時將背景變黑；
- 圖片拖拽：圖片進入放大查看狀態(tài)以后，可以被拖拽，向下拖拽時可以退出放大瀏覽效果；
- 圖片popdown（圖片落坑）：當圖片從放大瀏覽狀態(tài)退出時，應當遵循通過平滑動畫回到原來圖片位置的交互效果，簡稱落坑。
（2） 代碼實現(xiàn)
通過以上功能拆解，我們可以一起看一下幾個圖片popup的核心功能的代碼實現(xiàn)：
（3）popup實現(xiàn)
① popup需要創(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');
// 阻止縱向滑動
new Gesture(popup, {
preventY: true
});
popup.className = 'mip-img-popUp-wrapper';
popup.setAttribute('data-name', 'mip-img-popUp-name');
// 創(chuàng)建圖片預覽圖層
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;
}
② 實現(xiàn)用戶點擊時的圖片放大和背景變化效果，代碼示例如下：
function bindPopup(element, img) {
var popup;
var popupBg;
var popupImg;
// 圖片點擊時展現(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);
}
③ 實現(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);
}
基于以上，我們基本可以實現(xiàn)圖片的popup效果了。
四、結語
提高用戶體驗，就要從用戶的角度出發(fā)，滿足用戶的合理需求。期待我們從多角度，全方位共同提高用戶體驗。
注：若對本文有疑問，可以發(fā)送郵件，我們將挑選出有代表性的問題予以解答。
來源：百度搜索資源平臺 百度搜索學堂
