“無(wú)限滾動(dòng)加載”適用于你的產(chǎn)品嗎？

2015-01-11    分類： 網(wǎng)站建設(shè)

怎樣通過(guò)更友好的方式來(lái)呈現(xiàn)一系列的數(shù)據(jù)內(nèi)容，包括文章、鏈接、圖片、搜索結(jié)果等等——對(duì)于設(shè)計(jì)師來(lái)說(shuō)，這不是一件很輕松的事。在這方面，頁(yè)碼導(dǎo)航(pagination)是一種經(jīng)過(guò)時(shí)間驗(yàn)證的、還算值得信賴的解決方案。
不過(guò)最近幾年，我們可以發(fā)現(xiàn)越來(lái)越多的網(wǎng)站開(kāi)始使用無(wú)限滾動(dòng)(infinite scrolling)的方式來(lái)呈現(xiàn)內(nèi)容了——當(dāng)用戶瀏覽到頁(yè)面底部時(shí)，傳統(tǒng)意義上的“下一頁(yè)”數(shù)據(jù)會(huì)自動(dòng)加載，并輸出到當(dāng)前頁(yè)面中。
對(duì)于某些類型的網(wǎng)站或移動(dòng)應(yīng)用來(lái)說(shuō)，無(wú)限滾動(dòng)確實(shí)是一種不錯(cuò)的模式；但在在某些情況下，它也會(huì)造成災(zāi)難性的后果。
我們先來(lái)看一下無(wú)限滾動(dòng)加載的優(yōu)缺點(diǎn)。
優(yōu)點(diǎn)
1.有效的降低了界面復(fù)雜度，節(jié)省了空間：我們不再需要臃腫復(fù)雜的頁(yè)碼導(dǎo)航鏈接或按鈕了。
2.對(duì)觸屏設(shè)備來(lái)說(shuō)，交互方式更符合直覺(jué)：在移動(dòng)應(yīng)用的交互環(huán)境當(dāng)中，通過(guò)向上滑動(dòng)進(jìn)行滾屏的操作已經(jīng)成為最基本的用戶習(xí)慣，而且所需要的操作精準(zhǔn)程度遠(yuǎn)遠(yuǎn)低于點(diǎn)擊鏈接或按鈕。
3.更高的參與度：以上兩點(diǎn)所帶來(lái)的交互便捷性可以使用戶將注意力更多的集中在內(nèi)容而不是操作上，從而讓他們更樂(lè)于沉浸在探索與瀏覽當(dāng)中。
缺點(diǎn)
1.有限的用例：無(wú)限滾動(dòng)的方式只適用于某些特定類型產(chǎn)品當(dāng)中一部分特定類型的內(nèi)容。例如，在電商網(wǎng)站當(dāng)中，用戶時(shí)常需要在商品列表與詳情頁(yè)面之間切換，這種情況下，傳統(tǒng)的、帶有頁(yè)碼導(dǎo)航的方式可以幫助用戶更穩(wěn)妥和準(zhǔn)確的回到某個(gè)特定的列表頁(yè)面當(dāng)中。
2.額外的復(fù)雜度：那些用來(lái)打造無(wú)限滾動(dòng)的JS庫(kù)雖然都自稱很容易使用，但你總會(huì)需要在自己的產(chǎn)品中進(jìn)行不同程度的定制化處理，以滿足你們自己的需求；另外這些JS庫(kù)在瀏覽器和設(shè)備兼容性等方面的表現(xiàn)也參差不齊，你必須做好充分的測(cè)試與調(diào)整工作。
3.再見(jiàn)了，頁(yè)腳：如果使用了比較典型的無(wú)限滾動(dòng)加載模式，這就意味著你可以和頁(yè)腳說(shuō)拜拜了。最好考慮一下頁(yè)腳對(duì)于你的網(wǎng)站，特別是用戶的重要性；如果其中確實(shí)有比較重要的內(nèi)容或鏈接，那么最好換一種更傳統(tǒng)和穩(wěn)妥的方式。千萬(wàn)不要耍弄你的用戶，當(dāng)他們一次次的瀏覽到頁(yè)面底部，看到頁(yè)腳，卻因?yàn)樽詣?dòng)加載的內(nèi)容突然出現(xiàn)而無(wú)論如何都無(wú)法點(diǎn)擊頁(yè)腳中的鏈接時(shí)，他們會(huì)變的越發(fā)憤怒。
4.SEO：集中在一頁(yè)當(dāng)中動(dòng)態(tài)加載數(shù)據(jù)，與一頁(yè)一頁(yè)的輸出相比，究竟那種方式更利于SEO，這是你必須考慮的問(wèn)題。對(duì)于某些以類型網(wǎng)站來(lái)說(shuō)，在這方面進(jìn)行冒險(xiǎn)是很不劃算的。
5.關(guān)于頁(yè)面數(shù)量的印象：其實(shí)站在用戶的角度來(lái)看，這一點(diǎn)并非負(fù)面；不過(guò)，如果對(duì)于你的網(wǎng)站來(lái)說(shuō)，通過(guò)更多的內(nèi)容頁(yè)面展示更多的相關(guān)信息(包括廣告)是很重要的策略，那么單頁(yè)無(wú)限滾動(dòng)的方式對(duì)你并不適用。
了解了相關(guān)的優(yōu)缺點(diǎn)，接下來(lái)我們看一看我個(gè)人認(rèn)為在無(wú)限滾動(dòng)的運(yùn)用方面比較到位的兩個(gè)網(wǎng)站。
Twitter
Twitter適合采用無(wú)限滾動(dòng)加載的一個(gè)重要原因，就是每個(gè)內(nèi)容單元都很短小精煉，其本身就是內(nèi)容整體，用戶不需要在“列表索引”與“內(nèi)容詳情”之間切換就可以獲取全部信息，而且當(dāng)鼠標(biāo)懸停在某個(gè)內(nèi)容條目范圍內(nèi)的時(shí)候，對(duì)應(yīng)的操作(回復(fù)、刪除、收藏等)就會(huì)呈現(xiàn)；所有內(nèi)容與功能全部集中在當(dāng)前的上下文環(huán)境中。
圖片14
Tumblr
默認(rèn)情況下，Tumblr是通過(guò)無(wú)限滾動(dòng)的方式加載內(nèi)容的，但他們?cè)谠O(shè)置當(dāng)中為用戶提供了禁用無(wú)限滾動(dòng)的選項(xiàng)，這種做法非常體貼。Tumblr的產(chǎn)品特色決定了其內(nèi)容類型的廣泛性，不同類型的用戶所關(guān)注的內(nèi)容在形式方面可能有很大的區(qū)別；允許用戶自主設(shè)置內(nèi)容加載方式的做法可以照顧到不同的用戶群體。
圖片15
默認(rèn)的無(wú)限滾動(dòng)方式
圖片16
用戶可以選擇是否啟用無(wú)限滾動(dòng)
圖片17
禁用后，回到頁(yè)碼導(dǎo)航的傳統(tǒng)方式
下面是我個(gè)人認(rèn)為不大適合采用無(wú)限滾動(dòng)的例子。
Bing的圖片搜索
與Google相仿，Bing在圖片與視頻的搜索結(jié)果頁(yè)面當(dāng)中采用了無(wú)限滾動(dòng)加載的做法。不過(guò)當(dāng)用戶點(diǎn)擊某張縮略圖從而進(jìn)入圖片詳情頁(yè)面后，再回到搜索結(jié)果列表時(shí)會(huì)失去之前的定位，這使得用戶必須重新滾動(dòng)頁(yè)面，尋找點(diǎn)擊之前的位置。如果你的關(guān)鍵詞會(huì)產(chǎn)生大量的搜索結(jié)果，這種方式將給你帶來(lái)極大的不便。(現(xiàn)在Bing已經(jīng)改變了這一做法，當(dāng)用戶點(diǎn)擊了搜索結(jié)果中的縮略圖時(shí)，會(huì)直接在當(dāng)前頁(yè)面輸出包含大圖及相關(guān)信息在內(nèi)的彈出層；新的流程使用戶不會(huì)再脫離當(dāng)前環(huán)境 - 譯者C7210小注)
YouTube
我愛(ài)YouTube的整體設(shè)計(jì)，同時(shí)也理解他們不斷修改和調(diào)整設(shè)計(jì)方案的初衷，不過(guò)他們最近將首頁(yè)的頁(yè)碼導(dǎo)航改為無(wú)限滾動(dòng)的做法還是讓我有些不爽。和Bing的問(wèn)題類似，YouTube的實(shí)際內(nèi)容(視頻)是在一個(gè)獨(dú)立的頁(yè)面中的，用戶顯然不希望在看過(guò)一個(gè)視頻后回到列表頁(yè)面卻發(fā)現(xiàn)列表重新加載了。
另外有些尷尬的是，YouTube的無(wú)限滾動(dòng)加載不是那么的“自動(dòng)”，用戶需要點(diǎn)擊一個(gè)按鈕來(lái)使列表加載更多的視頻內(nèi)容；從某種角度上講這不算壞，因?yàn)樗_實(shí)是將控制權(quán)交給了用戶，實(shí)現(xiàn)了類似前面提到的Tumblr的做法，但直接將無(wú)限滾動(dòng)與手動(dòng)觸發(fā)結(jié)合在一起的形式多少有些不倫不類。
圖片18
好實(shí)踐
希望你能通過(guò)以上這些內(nèi)容了解到自己的產(chǎn)品是否適合采用無(wú)限滾動(dòng)加載的方式。如果答案是肯定的，那么下面這些要點(diǎn)也許可以幫助你避免掉實(shí)踐當(dāng)中的一些關(guān)鍵問(wèn)題：
1.提供降級(jí)方案：前端開(kāi)發(fā)人員要考慮到在特殊環(huán)境下JavaScrit無(wú)法正常運(yùn)行的狀況，提供平穩(wěn)降級(jí)的解決方案。
2.可設(shè)置：如果可能的話，考慮向用戶提供設(shè)置選項(xiàng)，方便他們選擇最適合自己的瀏覽方式。這會(huì)讓用戶感到貼心，從而提升對(duì)你的產(chǎn)品的滿意度與忠誠(chéng)度。
3.視覺(jué)反饋提示：在自動(dòng)加載新內(nèi)容的時(shí)候，要向用戶提供必要的視覺(jué)反饋，例如各種能夠表達(dá)“加載中”的動(dòng)畫效果，否則用戶將無(wú)法了解當(dāng)前的狀況；在沒(méi)有視覺(jué)提示的情況下，如果加載時(shí)間過(guò)長(zhǎng)，會(huì)讓用戶誤以為接下來(lái)不再有內(nèi)容了。
4.幫用戶定位：不要因?yàn)橛脩粼L問(wèn)內(nèi)容詳情并點(diǎn)擊了瀏覽器上的回退按鈕就失去掉之前的列表位置。如果確實(shí)沒(méi)有辦法做到，而這一點(diǎn)對(duì)你的產(chǎn)品又很重要，那么還是考慮傳統(tǒng)方式為好。
5.測(cè)試：使用目標(biāo)用戶群有可能用到的各種設(shè)備進(jìn)行測(cè)試，檢驗(yàn)無(wú)限滾動(dòng)加載方案的實(shí)際表現(xiàn)。

新聞標(biāo)題：“無(wú)限滾動(dòng)加載”適用于你的產(chǎn)品嗎？
本文路徑：http://www.bm7419.com/news/33001.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、網(wǎng)站改版、網(wǎng)頁(yè)設(shè)計(jì)公司、做網(wǎng)站、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)