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

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

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

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

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

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

我們研究中所測的一個(gè)滾動切換的案例

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

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

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

“滾動切換”的反對聲

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

1.用戶無法用滾動切換進(jìn)行交互。

2.如果用戶用滾動切換進(jìn)行交互，那他們的交互行為也僅僅局限于第一張圖文。

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

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

我們將通過對比Erik Runyon的數(shù)據(jù)以及我們所找到的數(shù)據(jù)來解說前兩個(gè)問題，后兩個(gè)問題因?yàn)楸容^偏向滾動切換的性質(zhì)意義，因此我將單獨(dú)來分析。

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

論點(diǎn)：

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

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

我們的結(jié)論：

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

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

注釋：

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

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

論點(diǎn)：

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

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

我們的結(jié)論：

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

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

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

我們的數(shù)據(jù)圖看起來和Erik的很相似，即絕大多數(shù)用戶的直接交互行會發(fā)生在第一張圖文。但是，在之后交互比例的遞減趨勢中，我們的調(diào)研數(shù)據(jù)會看起來比圣母大學(xué)的數(shù)據(jù)更合理一點(diǎn)。因?yàn)樵谖覀兊臄?shù)據(jù)中，出現(xiàn)在第一張圖文以后的直接交互比例總和是45.9％，這就意味著近一半的直接交互會出現(xiàn)在首張圖文之后。

注釋：

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

標(biāo)簽： 電商網(wǎng)站設(shè)計(jì) 電商網(wǎng)站優(yōu)化 視覺滾動設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。