良多人都會和我說，網(wǎng)站中的動彈切換設(shè)計一般都是弊多利少，盡量不要使用。但是，本文會告訴你并非所有情況都是如斯。

我寫這篇文章就是但愿我們能夠更多理解網(wǎng)站中的動彈切換設(shè)計，不要聽信傳說傳聞。我將用我們的調(diào)查數(shù)據(jù)來闡述我們的發(fā)現(xiàn)，先容我們用以調(diào)研的方法，同時，對如何準(zhǔn)確使用圖文動彈切換提出一些建議。

可以說，有良多人都對動彈切換的壞名聲做出了貢獻。例如，Nielsen Norman團隊（由Jakob Nielsen， Donald Norman 和 Bruce Tognazzini于1998年景立的一家電腦用戶界面和用戶體驗的咨詢公司）曾發(fā)表過關(guān)于動彈切換會妨礙用戶捕獲頁面上樞紐信息的文章。此外，最主要的言論來自于Erik Runyon（圣母大學(xué)The University of Notre Dame的技術(shù)總監(jiān)和開發(fā)職員）的一篇關(guān)于學(xué)院網(wǎng)站中圖片動彈切換應(yīng)用的分析文章。在Jared Smith 制作的一個“Should I Use A Carousel?”網(wǎng)站上，他也堅定地稱，不要使用動彈切換。隨后，網(wǎng)頁設(shè)計師Brad Frost在他的“Carousels”文章中也表達了對動彈切換的負(fù)面情感。最后，國際公認(rèn)的數(shù)碼產(chǎn)品的領(lǐng)導(dǎo)者Luke Wroblewski（曾設(shè)計的軟件在國內(nèi)外有十億用戶的影響力）也說現(xiàn)在基本已有的數(shù)據(jù)足以說服讓大家不要再用動彈切換（下文中會提及Luke的一些言論觀點）。

在Mobify（一個匡助企業(yè)優(yōu)化他們在智能手機以及平板電腦間的網(wǎng)頁轉(zhuǎn)換的移動電子商務(wù)平臺），我們?yōu)橐苿釉O(shè)備開發(fā)了大規(guī)模的電商網(wǎng)頁。在這些電商網(wǎng)頁上，大多至少都有一個動彈切換的應(yīng)用。如斯看來，我們做錯了嗎？我們在給用戶幫倒忙嗎？假如我們休止使用動彈切換，我們的網(wǎng)頁可以更好嗎？我和我的合作編纂Peter Maclachlan在瀏覽我們開發(fā)的網(wǎng)站時一直在探討這些題目。于是，我們想與其一直在別人的研究結(jié)論中迷茫，不如開始我們自己的研究。

因此，我們開始分析我們所能獲得的數(shù)據(jù)。剛開始，我們只是很好奇我們的數(shù)據(jù)能夠反映什么？然而，從這些數(shù)據(jù)中不斷獲得的小驚喜足以鼓動我們繼承深究下去。我們用了11個月的時間檢測了許很多多中到大型的電商網(wǎng)頁。在這里我說的中到大型是指每年至少有2千萬美金（約1.26億RMB）的電商銷量的網(wǎng)頁。這期間，大約750萬個動彈切換的交互行為被我們進行采樣，基于這些數(shù)據(jù)，以下是我們的研究成果。

我們?yōu)槭裁匆��?rdquo;動彈切換”?

我們研究中所測的一個動彈切換的案例

動彈切換不僅是一種將產(chǎn)品信息呈現(xiàn)在主頁上的方法，更是一種在移動設(shè)備上用以平衡信息密度的工具。在移動設(shè)備上，有限的小屏幕需要得到最大化的利用，我們要盡量確�？偰茏罴咽褂庙撁娴目臻g，因此通過動彈切換，就可以使信息的密度最大化，也使用戶不用通過進一步向下滑屏來獲得信息。

我們研究中所測的另一種動彈切換案例

此外，對于動彈切換來說，動彈切換間的上下關(guān)系是相互呼應(yīng)并且完整的。我們的設(shè)計團隊會盡量避免提供前后關(guān)系不呼應(yīng)的動彈切換給用戶。多數(shù)情況下，我們只在網(wǎng)頁中的一個地方使用動彈切換，即：在呈現(xiàn)產(chǎn)品細(xì)節(jié)圖集的時候。此時，用戶知道可以通過滑動動彈切換來獲得產(chǎn)品更多的圖片信息。而在主頁上的商用動彈切換中，用戶往往會對下一張會呈現(xiàn)什么內(nèi)容以及他們?yōu)槭裁匆�關(guān)注這些內(nèi)容全無所聞。

“動彈切換”的反對聲

目前關(guān)于動彈切換應(yīng)用的批評主要在以下四點：

1.用戶無法用動彈切換進行交互。

2.假如用戶用動彈切換進行交互，那他們的交互行為也僅僅局限于第一張圖文。

3.動彈切換這種方法是不可取的 。

4.用戶不喜歡動彈切換中元素的自動更替。

我們將通過對比Erik Runyon的數(shù)據(jù)以及我們所找到的數(shù)據(jù)來解說前兩個題目，后兩個題目由于比較偏向動彈切換的性質(zhì)意義，因此我將單獨來分析。

假設(shè)1：用戶無法用動彈切換進行交互。

論點：

現(xiàn)在的論據(jù)主要以Erik Runyon為圣母大學(xué)網(wǎng)站作調(diào)研時所提供的數(shù)據(jù)為中央。這些數(shù)據(jù)表明，只有1.07％的網(wǎng)站來訪者會點擊特定的貿(mào)易廣告動彈切換。此處，瀏覽圖文不能算是一種交互，只有當(dāng)用戶點擊了圖文才能算。

于是，為了辯駁這一假設(shè)，我們的數(shù)據(jù)必需顯示出用戶與動彈切換的交互率高于1.07％。

我們的結(jié)論：

在產(chǎn)品圖片集的動彈切換中，高達72％的用戶會至少一次切到下一張滾屏，又有23％的用戶會通過縮放行為（zooming）來與網(wǎng)站中的滾屏切換進行直接交互。

假如你仔細(xì)研究一下我們交互數(shù)據(jù)的縮放行為（zooming），你可以發(fā)現(xiàn)有23％的用戶會直接點擊進去獲取更多信息。假如把范圍擴大，即以任何方式切換到下一張滾屏都算做一種交互行為，那么有72％的用戶會這么做。

注釋：

假如想知道我們獲得這些結(jié)論的方法，請閱讀下文中的“Findings”。

假設(shè)2：假如用戶用動彈切換進行交互，那他們的交互行為也僅僅局限于第一張滾屏。

論點：

在上文中所提及的Erik所說的 1.07％會點擊動彈切換圖文的用戶中，有89.1％會點擊第一張圖文。假如我們假設(shè)圖文動彈切換是可以進行有效交互的，那么跟著我們添加更多圖文頁，數(shù)據(jù)會呈現(xiàn)出一個公道的下降趨勢。Erik的數(shù)據(jù)表明位于第二張的圖文只有3.1％的點擊率，泛起了大幅衰減。更精準(zhǔn)地說，在訪問圣母大學(xué)網(wǎng)站的3755297位用戶中，只有1234的來訪者點擊了第二張圖文頁。而第二張開始后的圖文頁訪問量的衰減的趨勢是我們預(yù)期的。

于是，假如我們要辯駁這個假設(shè)，數(shù)據(jù)必需顯示出用戶在訪問第二張圖文頁時的比例需大于3.1％。

我們的結(jié)論：

我們發(fā)現(xiàn)用戶與動彈切換的產(chǎn)品圖集中的第二張圖文的直接交互率是15.7％，其中至少有64％的用戶會進一步從第二張切到第三張。

下圖中的數(shù)據(jù)顯示出用戶切換各張動彈的圖文頁的訪問比例大致呈現(xiàn)出一種線性的規(guī)律。當(dāng)然，不同控制方式的設(shè)計會得出不同交互可能性的結(jié)果。但都體現(xiàn)出用戶對于下一張圖文有很高的介入度，至少64％的用戶在與第一張圖文交互后會繼承與第二張交互。

圣母大學(xué)的數(shù)據(jù)很顯著是依照用戶點擊圖文來丈量交互率的。為了使得數(shù)據(jù)之間進行有效的對比，在我們的研究中，這是一種直接交互中的縮放行為交互（zooming）。我們的數(shù)據(jù)顯示，23％的用戶會進行縮放交互，這其中，54.1％的用戶會縮放第一張圖文，而會于第二張圖文交互的比例達到了15.7％。（如下圖所示）

我們的數(shù)據(jù)圖看起來和Erik的很相似，即絕大多數(shù)用戶的直接交互行會發(fā)生在第一張圖文。但是，在之后交互比例的遞減趨勢中，我們的調(diào)研數(shù)據(jù)會看起來比圣母大學(xué)的數(shù)據(jù)更公道一點。由于在我們的數(shù)據(jù)中，泛起在第一張圖文以后的直接交互比例總和是45.9％，這就意味著近一半的直接交互會泛起在首張圖文之后。

注釋：

假如想知道我們獲得這些結(jié)論的方法，請閱讀下文中的“Findings”。

假設(shè)3：動彈切換方法是不可取的。

這里的觀點不是說要抵制使用各種圖文動彈切換，而是要辯駁現(xiàn)如今已被使用的圖片動彈切換。實在讓圖片動彈切換做到易被獲取不是不可能的，但是現(xiàn)在還很少。確實，我們自己在設(shè)計圖片動彈切換時并不會太多考慮其易訪問性。

我以為這不是圖文動彈切換自身的錯，但是當(dāng)你在決定是否要用動彈切換的時候，應(yīng)該考慮他的易訪問性。因此，使動彈切換的插件可以易被他人所獲取將是我們下一個版本開發(fā)的重要特性。由于這點和動彈切換的有效性無關(guān)，在此我們將不會過多談?wù)摗?/p>

正如他們說的，圖文動彈切換缺乏易訪問性，但是沒有理由說在未來無法做到。

假設(shè)4：用戶不喜歡動彈切換中元素的自動更替。

這里的論據(jù)是，假如動彈切換應(yīng)用中設(shè)置了自動更替，那么想要點擊圖文的用戶就會被頁面的自動切換所干擾。我很贊同這一觀點，假如要使用動彈切換，那一定要避免自動切換更替圖文。

假如你一定要使用自動更替的動彈切換，那么當(dāng)用戶開始與圖文有交互動作時就應(yīng)該把它封閉，這樣最少比讓用戶點錯圖文要好一點。詳細(xì)如何做呢？例如，當(dāng)鼠標(biāo)劃過電腦屏幕上的動彈切換時，休止其自動更替，或者當(dāng)用戶在手機上有一個觸屏動作時，休止其自動更替。

總之，不提倡自動更替的動彈切換，假如你要做動彈切換，那就不要讓它自動更替。

發(fā)現(xiàn)（Findings）

注：接下來這部門主要概括了我們?nèi)绾芜M行調(diào)研和使用數(shù)據(jù)的。假如您覺得很有愛好的話可以閱讀一下，您也可以跳過這部門到下一個章節(jié)。

調(diào)研方法和內(nèi)容

我們所使用的數(shù)據(jù)來自于超過11個月時間的對一些中到大型電商網(wǎng)站的研究調(diào)查。這期間，我們采集了大約750萬個動彈切換的用戶交互行為�；�于隱私權(quán)政策，我們保證其中不會有用戶的可識別信息。

為了使數(shù)據(jù)能夠應(yīng)用于以上的幾點假設(shè)，我們主要考慮了數(shù)據(jù)的以下兩方面：

1.用戶與動彈切換交互的頻率

2.用戶與第一張以后的圖文交互的頻率

定義交互

實驗過程中，我們定義了以下四種用戶與圖文動彈切換的交互行為。

1.輕刷（swipe）：用戶在手機屏上從左至右的滑動輕掃手勢。

2.按鍵（arrow）：用戶通過點擊按鍵進入（或返回）下一張（或上一張）圖文。

3.輕擊縮略圖（thumbnails）：用戶輕擊位于圖文動彈切換底部的縮略圖。

4.縮放（zoom）：輕擊當(dāng)前圖文至全屏瀏覽。

上文中也提過，要使我們的數(shù)據(jù)和圣母大學(xué)的有可比性，即：確保所研究的交互行為的一致性。我們將用到縮放（zoom），由于這在我們和圣母大學(xué)的研究中，用戶都用到此方式來介入和動彈切換的互動。

另一個很重要的點就是我們只考慮用戶有意的交互行為，無意偶然的誤觸和滑屏或者因其導(dǎo)致的圖頁切進不會觸發(fā)交互。

研究結(jié)果

1.唯一交互率

這個數(shù)據(jù)是指手機用戶多常會與動彈切換交互一次。“唯一交互”指的是用戶第一次與圖文動彈切換的任何交互行為。例如，假如一位用戶輕擊5個縮略圖，我們也將只紀(jì)錄一次交互行為，是用戶獨占的一次的交互體驗。（下文中將會細(xì)分非唯一交互）

數(shù)據(jù)表明，大約72％的網(wǎng)站來訪者會與動彈切換進行任何形式下交互，其中的領(lǐng)跑者是縮略圖交互（thumbnails），即：55％的來訪者會至少輕擊一張縮略圖。

? 唯一交互的比例

從我們的數(shù)據(jù)中可以得出，輕擊縮略圖（thumbnails）是用戶最受歡迎的交互方式，他的幾乎是其他項的兩倍，并且要比輕刷（swipe）和按鍵（arrow）的總和還多。

縮放（zoom）排在第二位，縮放（zoom）和輕刷（swipe）相對于其他方式來說具有最大的觸發(fā)區(qū)域，也就是說，用戶可以通過動彈切換圖文中的任意區(qū)域來進行縮放（zoom）和輕刷（swipe）交互。因此，我們需要假定的是這其中的一些是用戶無意識的誤觸行為。但即便如斯，縮放（zoom）仍是有高達23％的比率，以至于可以忽略其無意偶然性。

輕刷（swipe）是最不受歡迎的，這也是為什么要提倡為用戶建立明確的可視化交互控制系統(tǒng)。

按鍵（arrow）和輕刷（swipe）交互都包括統(tǒng)一舉動，即：把用戶帶入下一張圖文頁。假如我們并合他們的比例，會發(fā)現(xiàn)他們之和與縮略圖（thumbnails）的比例相似。

2.合計交互率

總體說來，均勻每次唯一交互中會泛起2.4個交互行為。這表明在72％會與動彈切換互動的來訪者中，幾乎都會與其進行大于一次的交互。

? 相同類型的交互方式的均勻交互次數(shù)（非唯一）

圖中可以看出，縮略圖（thumbnails）比例是最大的，當(dāng)用戶與動彈切換交互時均勻每次要點擊6張縮略圖。按鍵（arrow）和輕刷（swipe）的均勻次數(shù)相近，分別是3.9和3.5次�？s放（zoom）最小，用戶只有當(dāng)十分感愛好的時候才會縮放產(chǎn)品圖片。

通過縮略圖（thumbnails）進行交互的用戶的均勻交互次數(shù)最高，這說明相較于按鍵（arrow）和輕刷（swipe），用戶在縮略圖（thumbnails）具有較高級別的介入度。而對用戶的介入度的探索可以引出一些有趣的微轉(zhuǎn)換，例如“添加到購物車”的設(shè)計。

假如我們合并按鍵（arrow）和輕刷（swipe）的數(shù)值，與分析唯一交互時所用的方法相似，那么我們可以發(fā)現(xiàn)，這個代表“把用戶帶入下一張圖文頁”的交互方式會成為最受歡迎的那一個。

3.交互遞減率

從我們搜集的數(shù)據(jù)中，我們可以構(gòu)造繼第一次之后的交互概率模型。也就是圖文切進，詳細(xì)來說，就是指用戶從第一張圖文頁切換到第二張圖文頁，再繼承從第二張切到第三張。在直接交互中，這表示第一張圖文頁后繼承輕擊縮放之后的圖頁。

我們?yōu)槊恳环N交互方式都構(gòu)造了圖文切進致使的交互衰變率模型：縮略圖（thumbnails），按鍵（arrow），輕刷（swipe）以及縮放（zoom）。

? 縮略圖（thumbnails）

在縮略圖瀏覽中，大概有69％的用戶會繼承查看下一張縮略圖，我們用下面的數(shù)據(jù)遞減圖可以更明確地表示出來。值得一提的是，即便用戶可以以任何順序來瀏覽，但大多數(shù)用戶仍是會依次瀏覽動彈切換中的縮略圖。

? 按鍵（arrow）

我們從按鍵（arrow）的數(shù)據(jù)圖中可以發(fā)現(xiàn)一個大致的線性遞減關(guān)系，其中76％的用戶會再次輕擊按鍵來瀏覽到下一張圖文頁。

? 輕刷（swipe）

輕刷交互的數(shù)據(jù)模型也是線性遞減的，有64％的用戶會再次輕刷。

? 縮放(zoom)

縮放交互的遞減模式是一個冪次定律，即：少數(shù)幾個事件的發(fā)生頻率占了整個發(fā)生頻率的大部門， 而其余的大多數(shù)事件只占整個發(fā)生頻率的一個小部門，假如r2將近0.98，則表示契合得很好。

留意事項：

商用動彈切換 VS 圖像動彈切換

在對比我們和Erik的圣母大學(xué)數(shù)據(jù)時會碰到一個題目，那就是我們所研究的動彈切換類型是不同的。但這個對我們的研究發(fā)現(xiàn)影響不大，盡管兩種動彈切換的類型在視覺呈現(xiàn)上截然不同。我們的研究目標(biāo)是為了判定是否用水平動彈切換多張圖文頁這種方式該被抵制，數(shù)據(jù)告訴我們謎底是否定的。而圣母大學(xué)所研究的根本題目看似并不是普通廣義的動彈切換，更像在談?wù)撛O(shè)計。

通常在網(wǎng)站上的廣告盲區(qū)處會設(shè)置商用動彈切換，而這些商用動彈切換無法提供相關(guān)網(wǎng)站信息給用戶。貿(mào)易標(biāo)語類的動彈切換很無效由良多原因造成，全部怪罪到用戶界面（UI）模式是不公道的，我們確實也會在網(wǎng)站上使用商用動彈切換，因此，假如能夠?qū)⑽覀兒褪ツ复髮W(xué)在這方面的數(shù)據(jù)做對比，將會是一個很有趣的隨訪。

國際公認(rèn)的數(shù)碼產(chǎn)品的領(lǐng)導(dǎo)者Luke Wroblewski（曾設(shè)計的軟件在國內(nèi)外有十億用戶的影響力）在一個Google演講中提供了來自亞馬遜（Amazon）用戶體驗經(jīng)理PJ McCormick的數(shù)據(jù)。PJ夸耀了亞馬遜是如何使用貿(mào)易廣告動彈切換的以及所得出的更多樂觀數(shù)據(jù)。Luke表示，現(xiàn)有的商用動彈切換的一個很大的題目是對其控制方式的不顯著，而亞馬遜的動彈切換通常呈現(xiàn)在底部，通過提供一個外顯的動彈切換控制回避了這一題目。

亞馬遜的營銷動彈屏使用了清楚的控制模塊來鼓勵用戶進行交互

移動設(shè)備交互 VS 電腦桌面交互

我們的動彈切換只是基于移動設(shè)備上的研究，然而圣母大學(xué)的數(shù)據(jù)來自于電腦桌面。在這里，有一種可能性是移動設(shè)備用戶比電腦桌面用戶與動彈切換的交互更多。由于輕刷或者控制起來比用鼠標(biāo)更輕易也更天然一些。

動彈切換的成功尺度

我們對于衡量動彈切換是否成功方式與Erik的不同，Erik是通過用戶點擊到頁面內(nèi)容，而我們則是通過用戶瀏覽下一張圖文頁并且查閱所有圖片來衡量。

前一個的衡量級別更高一些，由于需要用戶輕擊并切換到新一張的頁面，這也可能是為什么圣母大學(xué)的動彈切換的交互率會比我們的更低。

學(xué)院網(wǎng)站 VS 電子商務(wù)網(wǎng)站

另外一點在將我們與圣母大學(xué)作對比時所受到的限制是網(wǎng)站內(nèi)容的不同。在電商網(wǎng)站，用戶目標(biāo)是發(fā)現(xiàn)可以做購買決定的產(chǎn)品信息，而院校網(wǎng)站則是更多與學(xué)校相關(guān)的信息。

未來的趨勢：

這份調(diào)查研究也讓我了解到仍有良多關(guān)于網(wǎng)站圖文動彈切換的調(diào)研需要做，可以參考以下的步驟：

1.我們但愿類似的研究能夠被應(yīng)用在不同類型的網(wǎng)站動彈切換。

2.同樣會很有趣的是研究如何通過與動彈切換交互來影響用戶行為。例如，假如與一個產(chǎn)品的動彈圖集交互，用戶是否會更傾向“添加到購物籃”這個選項？

3.我還但愿能有更好的方法來丈量各種傳播媒介對交互率的影響，如移動設(shè)備，平板電腦，電腦桌面等。

4.數(shù)據(jù)表明輕刷（swipe）是在動彈切換頂用戶使用起碼的交互方式之一。調(diào)研中發(fā)現(xiàn)，通過提供一個附加的控制設(shè)計，用戶可以明確知曉該如何與動彈切換進行交互，那么他們就會更傾向于這種方式，這種交互方式可能對輕刷交互會有一定影響。那么值得繼承研究的是，是否刪除這種附加的控制方式就會使得輕刷（swipe）交互比例上升。

總結(jié)

我們以反省我們在Mobify網(wǎng)站上為什么以及如何使用我們建立的圖文動彈切換開始說起。不同類型的圖文動彈切換間有很大區(qū)別。我們發(fā)現(xiàn)可以通過提供上下文相關(guān)信息使動彈切換更惹人留意，而不是迫使用戶去使用。

目前現(xiàn)有的數(shù)據(jù)中大部門是基于貿(mào)易廣告網(wǎng)站的圖文動彈切換。這些數(shù)據(jù)也支持關(guān)于用戶與動彈切換的交互率很低——僅1.07％的論點。同時，數(shù)據(jù)也表明用戶在與動彈切換交互時繼承切進到下一張圖文頁的概率很低。數(shù)據(jù)還反映出一些公認(rèn)的觀點，即：動彈切換的不易獲得性以及動彈切換中的自動更頁是不提倡的。

我們與Erik Runyon對圣母大學(xué)的研究的共同之處很少。我們的研究發(fā)現(xiàn)與Erik Runyon對圣母大學(xué)的研究發(fā)現(xiàn)有很少的共同之處。用戶與我們的動彈切換的交互率較高，此外，他們還以一個比圣母大學(xué)的研究數(shù)據(jù)高良多的比率與其他的頁面交互。會泛起這些差異性的原因主要是我們各自研究的動彈切換類型和目標(biāo)不同，詳細(xì)說明就在我們所討論的“留意事項”中，這也是本文的重點結(jié)論。

動彈切換有多種形態(tài)大小，一些有效一些則不是，我們需要基于更多不通情況下的數(shù)據(jù)�；�于Erik的研究，其對于主頁上的商用動彈切換的反對是公道的。假如用戶不知道從頁面上可以獲悉什么，他們就不會想瀏覽，因此可以通過動彈切換來示意下一張圖文頁，從而使得其真正施展作用。

所以，你應(yīng)該要用一個“動彈切換”嗎？

首先，不要只是想添加內(nèi)容而使用動彈切換，可認(rèn)為動彈切換思索一個特別的使用場景，即：在一個特定的上下文環(huán)境中添加信息。另外，當(dāng)網(wǎng)頁空間受到限制的時候頁可以使用動彈切換，如移動手機，使用時要留意動彈切換中的信息內(nèi)容要與網(wǎng)頁內(nèi)容的相關(guān)。

當(dāng)動彈切換中的內(nèi)容不太有趣或沒什么用時也不要使用。在動彈切換中，前一張圖文頁需要對后一張起到推波助瀾的作用。想一想為什么用戶要從一張圖文切到另一張商用標(biāo)語頁？除非里面有他們需要的內(nèi)容。因此，動彈切換的內(nèi)容需要有吸引力才能使他們更有效。

假如你想讓用戶看到全部內(nèi)容的時候就不要使用動彈切換啦！即便你的動彈切換很有效，但多數(shù)用戶都不會每一頁都看。通常第一張圖文頁會展示最重要的內(nèi)容，依次的重要性遞減。假如瀏覽動彈切換中的各張圖文頁對你來說是重要但不是必要的，建議可以用縮略圖（thumbnails）的方式。

言而總之，這個題目的謎底不是獨一的。對于一些情況，如貿(mào)易標(biāo)語的動彈切換，謎底會是：不要用。而例如產(chǎn)品圖集的動彈切換，謎底會是：絕對可以。無論怎樣，對于“我可以用圖文切換嗎？”的最好回答老是：“假如對用戶好，那就用吧！”