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

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

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

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

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

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

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

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

我們研究中所測(cè)的另一種滾動(dòng)切換案例

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

“滾動(dòng)切換”的反對(duì)聲

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

1.用戶(hù)無(wú)法用滾動(dòng)切換進(jìn)行交互。

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

3.滾動(dòng)切換這種方法是不可取的 。

4.用戶(hù)不喜歡滾動(dòng)切換中元素的自動(dòng)更替。

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

假設(shè)1：用戶(hù)無(wú)法用滾動(dòng)切換進(jìn)行交互。

論點(diǎn)：

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

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

我們的結(jié)論：

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

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

注釋?zhuān)?/p>

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

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

論點(diǎn)：

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

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

我們的結(jié)論：

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

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

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

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

注釋?zhuān)?/p>

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

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

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