說明：喜歡翻譯國外交互設(shè)計(jì)體驗(yàn)設(shè)計(jì)網(wǎng)站優(yōu)秀文章案例，僅供互相學(xué)習(xí)探討，翻譯有版權(quán)，表述包含譯者個(gè)人理解，如有錯(cuò)誤，請多指正~

前言

“Are home page carousels actually helpful to users? ……(此處省略一萬字)The short answer is that home page carousels can work, but in practice the vast majority of implementations perform poorly with end users……(此處省略一萬字)But saying that home page carousels should never be used doesn’t fully align with our seven years of large-scale usability testing — at least in an e-commerce context.”

簡單來說，作者想說的是：使用輪播圖對于在有限空間來提升用戶閱讀效率是很有用的，但現(xiàn)有大部分情況輪播圖設(shè)計(jì)得并不好用。

遵守本文中提到的10個(gè)輪播圖設(shè)計(jì)原則可以提使用高輪播圖時(shí)的用戶體驗(yàn)，如果在做設(shè)計(jì)時(shí)不能很好地注意這10個(gè)體驗(yàn)方面的細(xì)節(jié)原則，那么最好少用輪播圖設(shè)計(jì)。

在這篇文章中，作者首先會(huì)通過實(shí)例來過一遍10個(gè)輪播圖設(shè)計(jì)原則，然后說明為什么以及怎樣區(qū)別對待桌面端和移動(dòng)端的輪播圖，以及在文章最后列舉出一種相比于輪播圖更好更易用的展示方式。

一、實(shí)際運(yùn)用中的輪播圖

在美國一份針對50家頂級零售電商網(wǎng)站的統(tǒng)計(jì)中發(fā)現(xiàn)輪播圖被廣泛運(yùn)用于電商網(wǎng)站：PC端52%的電商網(wǎng)站使用輪播圖，而與此同時(shí)移動(dòng)端56%的電商網(wǎng)站使用輪播圖。(以下圖表是譯者個(gè)人為方便大家理解制作的)

這篇文章的重點(diǎn)旨在講如何通過設(shè)計(jì)和交互細(xì)節(jié)使首頁輪播圖更加user-friendly，而不是關(guān)注于輪播圖本身應(yīng)該放那些內(nèi)容。此時(shí)，我們輪播圖的內(nèi)容應(yīng)該注意以下幾點(diǎn)：

1. 如果輪播圖的內(nèi)容與網(wǎng)站本身不相關(guān)，且沒有經(jīng)過精心設(shè)計(jì)和使用高質(zhì)量的圖片，那么用戶體驗(yàn)會(huì)很糟糕 — 輪播內(nèi)容應(yīng)與網(wǎng)站主題相關(guān)
2. 如果輪播圖的內(nèi)容看起來太像廣告，那么用戶會(huì)直接忽視它，即使輪播圖的內(nèi)容與用戶所需相關(guān) — 輪播圖內(nèi)容不能過于商業(yè)化
3. 輪播圖的一個(gè)主要優(yōu)勢就是可以放專門設(shè)計(jì)過的和大文件的圖片 — 大文件和那些經(jīng)過設(shè)計(jì)的圖片會(huì)降低首頁的退出率并且會(huì)對網(wǎng)站和品牌產(chǎn)生積極效果，因?yàn)槟切┙?jīng)過設(shè)計(jì)的高清大圖能在首頁給用戶留下一個(gè)好印象 — 在用戶快速?zèng)Q定停留或者離開之前增加用戶在首頁的駐足時(shí)間 — 輪播圖片要精心設(shè)計(jì)

二、輪播圖設(shè)計(jì)十原則

那么，怎樣在實(shí)際運(yùn)用中做好輪播圖設(shè)計(jì)呢，作者將10原則分成了四個(gè)部分來進(jìn)行闡述：

1. 滑動(dòng)(輪播)順序和點(diǎn)擊后的落地頁

大部分用戶不會(huì)看完所有的首頁輪播圖，即使是一個(gè)自動(dòng)切換的輪播圖。他們常常會(huì)在所有輪播圖內(nèi)容循環(huán)一遍以前就早早的跳到另一個(gè)頁面或者向下滑動(dòng)頁面，換句話說就是沒有人可以預(yù)測用戶下一步到底會(huì)看哪一幀輪播圖。

因此，只要輪播圖不是展示網(wǎng)站特點(diǎn)和展示網(wǎng)站產(chǎn)品的唯一方式，那么用戶即使不看完所有輪播圖問題也不大。

我們之前做的輪播圖可用性研究(仔細(xì)安排每一幀的展示內(nèi)容和順序)，發(fā)現(xiàn)大部分用戶會(huì)在輪播圖自動(dòng)輪播完一個(gè)輪回前就跳到另一個(gè)頁面了，而在手動(dòng)輪播圖網(wǎng)站里輪播圖只會(huì)停留在第一幀，除非用戶主動(dòng)去找不然他們不會(huì)注意到那些有用的信息。所以，即使完善輪播圖的細(xì)節(jié)設(shè)計(jì)是一個(gè)很好的想法，但這并不能成為用戶獲取網(wǎng)站信息的唯一方式。

兩條原則：

• 原則1： 輪播圖的展示順序特別是第一幀非常重要；
• 原則2：把輪播圖當(dāng)成展示網(wǎng)站重要信息和特點(diǎn)的一種補(bǔ)充手段而非唯一方式。

2. PC端自動(dòng)輪播邏輯

自動(dòng)輪播形式能夠保證輪播圖的每一幀都有一定的曝光量，并且實(shí)際上自動(dòng)輪播的點(diǎn)擊率(8%~10%)要比手動(dòng)輪播的點(diǎn)擊率高(1%~2%)，這是因?yàn)椋合駝?dòng)態(tài)圖片一樣，自動(dòng)輪播圖很容易把用戶的注意力從頁面的其他靜態(tài)圖片上吸引過來，因此輪播圖的內(nèi)容和設(shè)計(jì)質(zhì)量都需要很高的要求才能保證用戶產(chǎn)生有效的閱讀，此時(shí)要注意三個(gè)極其重要的自動(dòng)輪播圖設(shè)計(jì)原則：

原則1：自動(dòng)輪播不要太快——

如果輪播得太快那么用戶就沒有足夠的時(shí)間看完感興趣的輪播圖內(nèi)容；如果輪播的太快那么用戶就會(huì)因?yàn)椴桓信d趣的輪播內(nèi)容而被騷擾。

輪播圖的展示時(shí)間應(yīng)該根據(jù)輪播圖的文案內(nèi)容來決定 — 尼爾森諾曼集團(tuán)推薦自動(dòng)輪播圖的單幀時(shí)長按照1秒展示3個(gè)文案來播放，這就意味著每個(gè)輪播圖的展示時(shí)長都是獨(dú)立的。

其實(shí)也可以學(xué)學(xué)蘋果將輪播時(shí)間外顯來讓用戶有一個(gè)心理預(yù)期。

原則2：用戶hover內(nèi)容時(shí)應(yīng)該暫停自動(dòng)輪播——

Web information seeking and interaction 指出用戶鼠標(biāo)的位置與他們在當(dāng)前頁面關(guān)注的內(nèi)容有內(nèi)在聯(lián)系 ：

1. 當(dāng)用戶鼠標(biāo)懸停在某一幀輪播圖時(shí)說明他們對它的內(nèi)容感興趣；
2. 當(dāng)用戶懸停時(shí)輪播圖暫停的第二個(gè)理由是防止用戶在點(diǎn)擊想看的那一幀輪播圖時(shí)自動(dòng)輪播到下一幀 ；
3. 如果用戶意識到他們點(diǎn)擊后跳轉(zhuǎn)到一個(gè)無關(guān)的頁面那么用戶會(huì)感覺很氣惱和失落，并且會(huì)不得不重新回到主頁，然后再次點(diǎn)擊原來想要的那一部幀輪播圖。

原則3：用戶有任何主動(dòng)交互行為時(shí)應(yīng)該停止自動(dòng)輪播——

當(dāng)用戶主動(dòng)點(diǎn)擊輪播圖按鈕來看前一幀或者下一幀內(nèi)容時(shí)，這種行為是有意進(jìn)行的并且 (當(dāng)前輪播內(nèi)容)不應(yīng)該被改變，即使用戶決定去查看主頁的其他內(nèi)容。

點(diǎn)擊行為是用戶的主動(dòng)響應(yīng)行為，它是反應(yīng)用戶意圖和興趣的一個(gè)強(qiáng)烈的信號。因此，當(dāng)用戶主動(dòng)對輪播圖進(jìn)行交互時(shí)(輪播圖)應(yīng)該停止自動(dòng)輪播，因?yàn)橛脩魳O有可能是有意要查看某一幀的內(nèi)容。

3. 輪播圖控件應(yīng)該具備兩項(xiàng)功能

原則1：輪播圖控件提示當(dāng)前圖片所在幀數(shù)位置——

1. 提示用戶有更多幀數(shù)的圖片，讓用戶有更多探索的可能；
2. 提示用戶輪播圖到底有多少幀圖片；
3. 當(dāng)輪播圖自動(dòng)播放到最后一幀時(shí)提示用戶將循環(huán)到第一幀。

比較常用的設(shè)計(jì)是在一張五彩斑斕的圖片上設(shè)置一組小點(diǎn)，但這通常會(huì)很難識別，把這些點(diǎn)放置在圖片外面會(huì)好一點(diǎn)。

原則2：輪播圖控件允許用戶進(jìn)行前后幀內(nèi)容的切換——

這是使用箭頭是比較好的方法，然而我們發(fā)現(xiàn)由于底圖與箭頭的對比不夠以及箭頭本身大小有限，會(huì)導(dǎo)致用戶容易忽視這些控件，那怎樣避免進(jìn)行前后切換的箭頭被用戶忽視呢：

1. 展示部分下一幀或前一幀圖片；
2. 根據(jù)所識別的背景圖片的顏色和明度進(jìn)行相應(yīng)的顏色改變。

通過展示前后一幀內(nèi)容的部分內(nèi)容，用戶很容易感知到可以進(jìn)行切換。

除了傳統(tǒng)的設(shè)計(jì)樣式像是用來感知位置的小點(diǎn)和前后切換的箭頭，“table of contents”這種設(shè)計(jì)樣式同樣也能起到一樣的效果 。

• 首先，它結(jié)合了位置感知和手動(dòng)切換的控件為一個(gè)整體的UI組件；
• 其次，它能為用戶提供了一定的輪播信息線索，讓用戶知道接下來會(huì)看到什么因而可以讓用戶更有效的進(jìn)行跨幀的切換。

4. 在移動(dòng)端一切都如此不同

觸屏設(shè)備上的輪播圖與PC端有著很大的不同 — 之前列舉的PC端上的交互邏輯在移動(dòng)設(shè)備上是無效的并且有很多新的規(guī)則：

原則1：移動(dòng)端沒有hover狀態(tài)因此盡量避免自動(dòng)輪播——

hover狀態(tài)是用戶對某一特定幀內(nèi)容感興趣并有可能在閱讀完文案后產(chǎn)生點(diǎn)擊的一種信號，這意味著如果沒有hover狀態(tài)來激活自動(dòng)輪播暫停，那么自動(dòng)輪播在移動(dòng)設(shè)備上的使用就不那么合適了 — 自動(dòng)輪播會(huì)使圖片在用戶要點(diǎn)擊輪播圖幾毫秒之前就突然切換，這會(huì)使用戶跳轉(zhuǎn)到錯(cuò)誤的頁面。

原則2：移動(dòng)端支持滑動(dòng)操作——

• 用戶在觸屏設(shè)備上的操作預(yù)期就是滑動(dòng)來進(jìn)行導(dǎo)航切換
• 傳統(tǒng)的輪播圖操作控件同樣重要(如進(jìn)行前后切換的箭頭和讓用戶感知位置的小點(diǎn))

原則3：移動(dòng)端屏幕的圖片需要特別優(yōu)化——

• 許多在PC端上使用的輪播圖設(shè)計(jì)稿是直接縮放后在移動(dòng)端上重復(fù)使用，這造成在移動(dòng)端屏幕上許多文案的閱讀性較差；
• 移動(dòng)端用戶對加載較慢的輪播圖更沒有耐心( 用戶在PC端可以邊花費(fèi)1到5秒鐘來等待輪播圖刷新邊瀏覽網(wǎng)頁的導(dǎo)航欄和其他信息，而在移動(dòng)端有限的屏幕大小下用戶只能看到輪播圖)

現(xiàn)在我們來總結(jié)一下：

三、輪播圖的替代方案

單純展示靜態(tài)內(nèi)容作為在主頁的獨(dú)立部分是替代輪播圖的一種好方式：

1. 它沒有輪播圖的那些用來控制切換圖片的控件，因而尤其適合在移動(dòng)端使用；
2. 它高度符合用戶與首頁的交互方式(70%的移動(dòng)端用戶會(huì)下意識的拖動(dòng)并瀏覽首頁的內(nèi)容，來獲知他們來到了什么類型的網(wǎng)站)；
3. 相比于使用輪播圖要遵守的那10條原則，它使用起來更加便捷，那些商家和公司會(huì)越來越認(rèn)識到布局設(shè)計(jì)上的緊湊會(huì)有多重要。

原文作者：Christian Holst

原文地址鏈接：https://www.smashingmagazine.com/2016/07/ten-requirements-for-making-home-page-carousels-work-for-end-users/

本文由 @?vanhelsinglhj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 pexels，基于CC0協(xié)議