就像任何其他設(shè)計(jì)趨勢(shì)一樣,無限滾動(dòng)正變得越來越流行,經(jīng)常遇到一個(gè)頁面網(wǎng)站,可以盡可能地向下滾動(dòng),但永遠(yuǎn)不會(huì)到達(dá)底部。那么對(duì)于您的網(wǎng)站來說,這是一個(gè)值得遵循的好趨勢(shì),還是您寧愿避免它?
答案取決于您網(wǎng)站的類型和目標(biāo)。據(jù)Nielsen Norman的說法,“無限滾動(dòng)并不適用于每個(gè)網(wǎng)站”。這有優(yōu)點(diǎn)和缺點(diǎn),但在決定在您的網(wǎng)站上實(shí)施無限滾動(dòng)之前,您需要確保它提供的優(yōu)點(diǎn)比缺點(diǎn)更有價(jià)值。
無限滾動(dòng)是一種基本網(wǎng)絡(luò)交互設(shè)計(jì),允許用戶通過滾動(dòng)而不是單擊頁面鏈接來瀏覽內(nèi)容。這樣,新內(nèi)容會(huì)在用戶到達(dá)該點(diǎn)之前自動(dòng)加載并準(zhǔn)備就緒,而在分頁的情況下,每個(gè)頁面的內(nèi)容在單擊頁面鏈接后開始加載。
這種網(wǎng)頁設(shè)計(jì)技術(shù)已被Twitter、Pinterest甚至Facebook等社交網(wǎng)絡(luò)巨頭成功采用,許多網(wǎng)站效仿他們的做法并失敗也就不足為奇了。為什么無限滾動(dòng)在Twitter和Pinterest上運(yùn)行良好的原因并不是因?yàn)樗鼈兪抢吓坪蛿?shù)十億的公司。這是因?yàn)檫@些網(wǎng)站擁有大量不斷更新的用戶生成內(nèi)容。在這種情況下,無限滾動(dòng)被證明是提供優(yōu)質(zhì)用戶體驗(yàn)的最佳解決方案。
如果您要問我的意見的話,我會(huì)說這個(gè)趨勢(shì)值得嘗試,但是你需要謹(jǐn)慎地考慮你的網(wǎng)站是否適合使用無限滾動(dòng)。如果你的網(wǎng)站主要是以內(nèi)容為主導(dǎo)的,并且有大量不斷更新的內(nèi)容,那么無限滾動(dòng)可能是一個(gè)不錯(cuò)的選擇。然而,如果你的網(wǎng)站是以銷售產(chǎn)品或服務(wù)為主的,或者你的目標(biāo)用戶是那些需要大量自定義和個(gè)性化內(nèi)容的用戶,那么你可能需要考慮使用其他的設(shè)計(jì)模式,例如分頁或者可定制的搜索結(jié)果??偟膩碚f,你需要對(duì)你的目標(biāo)用戶和他們的需求有一個(gè)清晰的認(rèn)識(shí),然后選擇最適合他們的設(shè)計(jì)模式。
01、完美的觸摸
在當(dāng)今的多設(shè)備時(shí)代,提供卓越的桌面和移動(dòng)用戶體驗(yàn)至關(guān)重要。由于大多數(shù)平板電腦和手機(jī)都采用了觸摸技術(shù),因此專注于觸摸優(yōu)化是至關(guān)重要的。這也是無限滾動(dòng)成為有競(jìng)爭(zhēng)力的優(yōu)勢(shì)之一,它通過前瞻性技術(shù)滿足了移動(dòng)設(shè)備小屏幕的需求,以更方便用戶的方式顯示內(nèi)容。相比之下,傳統(tǒng)的分頁方式需要用戶點(diǎn)擊微小的頁面鏈接來訪問新內(nèi)容,這種體驗(yàn)往往較差。因此,對(duì)于大多數(shù)網(wǎng)站來說,采用無限滾動(dòng)是更好的選擇。
02、視覺導(dǎo)向
誰不喜歡看到高質(zhì)量的精美圖像呢?這是網(wǎng)絡(luò)上根據(jù)“一張圖片勝過千字”原則的另一個(gè)新興趨勢(shì)。向用戶傳遞大量圖像內(nèi)容的最佳方式似乎就是使用無限滾動(dòng)。這樣,用戶就不需要分心去查找并點(diǎn)擊下一個(gè)鏈接,從而保持了愉快的體驗(yàn)。Pinterest和Flickr這兩個(gè)面向視覺的網(wǎng)站就是如何從無限滾動(dòng)中受益的很好例子。
無論您的網(wǎng)站提供何種類型的內(nèi)容,您都希望獲得盡可能多的展示。在傳統(tǒng)分頁的情況下,用戶在點(diǎn)擊下一頁之前無法看到下一頁的內(nèi)容,而無限滾動(dòng)將您的所有內(nèi)容放在一個(gè)無限長(zhǎng)的頁面上。這意味著用戶可以在一個(gè)滾動(dòng)操作內(nèi)看到所有的內(nèi)容,無需進(jìn)行額外的點(diǎn)擊操作。
03、快速簡(jiǎn)便的瀏覽
無限滾動(dòng)頁面通常比普通分頁的頁面加載速度更快。這是因?yàn)楫?dāng)用戶向下滾動(dòng)頁面時(shí),更多內(nèi)容會(huì)自動(dòng)加載到同一頁面中,而無需每次都點(diǎn)擊頁面鏈接并重新加載頁面。這不僅節(jié)省了用戶的時(shí)間,從搜索引擎優(yōu)化的角度來看也是有益的。
04、更多創(chuàng)意空間
無限滾動(dòng)作為一種信息展示方式具有非常新穎的特性,同時(shí)也具有巨大的創(chuàng)新潛力。在網(wǎng)頁設(shè)計(jì)師的手中,這種滾動(dòng)方式可以變得不僅實(shí)用,而且充滿趣味性和吸引力。在lostworldsfair.com和andrevv.com這兩個(gè)網(wǎng)站上,你可以找到這種創(chuàng)新方法的絕佳實(shí)例。
無限滾動(dòng)的一種非常流行的創(chuàng)新擴(kuò)展是視差滾動(dòng)技術(shù),它通過獨(dú)特的滾動(dòng)方式創(chuàng)造出美妙的視覺故事情節(jié)。如果你想了解這種技術(shù)的最佳實(shí)踐,不妨訪問makeyourmoneymatter.org和cyclemon.com這兩個(gè)網(wǎng)站。
05、頁腳問題
這是一個(gè)普遍存在的問題,尤其對(duì)于電子商務(wù)網(wǎng)站而言。如果您曾經(jīng)在線購物過,那么您至少知道所有重要鏈接的位置:通常在頁腳中?,F(xiàn)在想象一下,您想訪問一個(gè)無限滾動(dòng)網(wǎng)頁上的“運(yùn)輸信息”頁面。但是,您的時(shí)間非常有限!當(dāng)您只有幾秒鐘的時(shí)間來找到并點(diǎn)擊該鏈接,否則它就會(huì)“滾動(dòng)離開”時(shí),這會(huì)令人非常沮喪。
06、迷失方向
網(wǎng)絡(luò)上的各種功能基本上都是基于現(xiàn)實(shí)世界的概念構(gòu)建的,因此,從這個(gè)角度來看,任何無限的東西都可能顯得不自然和矛盾。在信息時(shí)代,我們每天都要處理大量的數(shù)據(jù)和信息,如果沒有一種秩序或結(jié)構(gòu),我們就很難有效地處理這些信息。
無限滾動(dòng)也帶來了類似的問題。它缺乏明確的方向性,用戶很難再次找到他們?cè)陧撁嫔峡吹竭^的內(nèi)容。與分頁內(nèi)容不同,無限滾動(dòng)無法通過頁碼來進(jìn)行相對(duì)的定位,這就增加了用戶尋找特定內(nèi)容的難度。
另外,左側(cè)的滾動(dòng)條通常顯示的是內(nèi)容已經(jīng)展示的數(shù)量,這可能給用戶一個(gè)錯(cuò)誤的信息,即他們已經(jīng)看到了大部分內(nèi)容。當(dāng)用戶意識(shí)到還有更多的內(nèi)容未被展示時(shí),他們可能會(huì)感到被誤導(dǎo)和失望。
07、導(dǎo)航問題
一個(gè)基本的設(shè)計(jì)原則是,用戶需要知道他們?cè)诰W(wǎng)站或應(yīng)用中的當(dāng)前位置,這對(duì)于提供良好的用戶體驗(yàn)至關(guān)重要。然而,在無限滾動(dòng)的情況下,用戶很難理解他們?cè)趦?nèi)容流中的當(dāng)前位置,這可能造成導(dǎo)航和定位的困擾。
更進(jìn)一步說,如果用戶點(diǎn)擊了一個(gè)鏈接或元素然后想要返回到他們之前所在的位置,會(huì)發(fā)生一種被稱為“pogosticking”的現(xiàn)象。這是因?yàn)闊o限滾動(dòng)的內(nèi)容是動(dòng)態(tài)加載的,所以當(dāng)用戶點(diǎn)擊新的內(nèi)容并加載后,他們會(huì)被帶回到內(nèi)容流的頂部,而不是他們之前所在的位置。這種情況非常令人沮喪,因?yàn)樗茐牧擞脩舻臑g覽流程,并可能導(dǎo)致用戶失去對(duì)內(nèi)容的興趣。
08、沒有跳過
分頁內(nèi)容的一個(gè)主要優(yōu)點(diǎn)是,您可以輕松跳過第一頁,例如跳過第100頁,直接進(jìn)入第101頁。這在無限滾動(dòng)中是很難實(shí)現(xiàn)的。用戶往往很難理解或估計(jì)無限滾動(dòng)中的內(nèi)容量,更不用說跳過其中一部分內(nèi)容了。
09瀏覽器崩潰
沒有任何技術(shù)可以在所有瀏覽器上都能完美運(yùn)行,無限滾動(dòng)也同樣如此。當(dāng)加載大量?jī)?nèi)容時(shí),計(jì)算機(jī)的內(nèi)存使用可能會(huì)變得非常高,尤其是對(duì)于較舊的計(jì)算機(jī),可能會(huì)導(dǎo)致瀏覽器崩潰或變慢,給用戶帶來不良體驗(yàn)。因此,在實(shí)踐中,需要根據(jù)具體的應(yīng)用場(chǎng)景和目標(biāo)受眾,選擇最適合的技術(shù)和實(shí)現(xiàn)方式,以確保最佳的用戶體驗(yàn)。
10、壓倒性的內(nèi)容
擁有大量?jī)?yōu)質(zhì)信息對(duì)于網(wǎng)站來說是好事,但當(dāng)內(nèi)容不斷加載,每秒鐘都有新的內(nèi)容出現(xiàn)時(shí),用戶可能會(huì)感到無所適從和壓力。就像是一場(chǎng)沒有目的地的公路旅行,用戶無法停止,最終會(huì)感到無聊和心理上的疲憊。因此,在提供大量信息的同時(shí),也需要考慮用戶的體驗(yàn)和感受,確保他們能夠輕松地獲取所需的信息。
11、畢竟,無限滾動(dòng)是好是壞?
如果正確使用,技術(shù)的每一步進(jìn)步都是好的。至于無限滾動(dòng),它對(duì)一些網(wǎng)站有益且吸引人,但對(duì)其他網(wǎng)站來說可能適得其反并損害用戶體驗(yàn)。這完全取決于您網(wǎng)站的目標(biāo)和用戶的期望。如果您的網(wǎng)站是以目標(biāo)為導(dǎo)向的,用戶在其中執(zhí)行特定任務(wù)并期望找到特定結(jié)果,那么無限滾動(dòng)可能會(huì)損害網(wǎng)站的可用性。
但是,如果您的網(wǎng)站上有大量?jī)?nèi)容,且每部分內(nèi)容對(duì)用戶而言具有相同價(jià)值和重要性級(jí)別,那么無限滾動(dòng)可能是一種有效提供內(nèi)容的方式。以lookbook.nu為例,每篇文章都有視覺內(nèi)容,同樣可能讓用戶感興趣。
據(jù)許多專家和實(shí)際經(jīng)驗(yàn),無限滾動(dòng)對(duì)電子商務(wù)網(wǎng)站表現(xiàn)不佳,Etsy在線購物網(wǎng)站的例子也證明了這一點(diǎn)。
但是,如果您選擇無限滾動(dòng)作為您網(wǎng)站的最佳選擇,請(qǐng)嘗試應(yīng)用一些最佳實(shí)踐技術(shù)以確保您的網(wǎng)站滿足用戶期望。首先將導(dǎo)航欄貼在網(wǎng)頁頂部并使其持久可見。嘗試通過在頁面末尾添加“加載更多”按鈕來結(jié)合傳統(tǒng)分頁和無限滾動(dòng),讓用戶決定是否需要更多內(nèi)容或是否足夠。這樣也會(huì)有一個(gè)正常的頁腳。最后,確保用戶單擊提要中的某個(gè)項(xiàng)目后可以返回到他們離開的地方。