資訊專欄INFORMATION COLUMN
摘要：優(yōu)秀無限滾動的五項原則將無限滾動做好，并不是不可能完成的任務(wù)。提供為特定項添加書簽的可能無限滾動最常見的缺點之一就是，內(nèi)容出現(xiàn)的時候，沒法添加書簽。結(jié)論無限滾動實現(xiàn)得好的話，可以達(dá)到令人難以置信的光滑無縫體驗。
本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/673
原文：https://uxplanet.org/infinite-scrolling-best-practices-c7f24c9af1d#.1xzr65wil
無限滾動（Infinite scrolling），有時候被稱為無盡滾動（endless scrolling），這種技術(shù)允許用戶在大量內(nèi)容上滾動，眼中看不到結(jié)束的地方。這種技術(shù)很簡單，就是頁面往下滾動的時候保持刷新。
這項技術(shù)使用戶在沒有打斷和額外交互的情況下滾動列表 —— 隨著用戶滾動，一條條的內(nèi)容就出現(xiàn)了。Facebook 的新聞推送頁，Google 的圖片搜索，Twitter 的時間線，這些頁面都用到了這項技術(shù)。雖然聽起來還挺有誘惑力的，但并不是對所有網(wǎng)站或應(yīng)用都通用的。
優(yōu)秀無限滾動的五項原則將無限滾動做好，并不是不可能完成的任務(wù)。為了完成它，記住并遵守以下方針。
1. 導(dǎo)航條保持可見使用無限滾動時候，最好保持導(dǎo)航條持續(xù)可見，這樣可以很快導(dǎo)航到頁面或應(yīng)用的不同區(qū)域，對用戶來說也更簡單。如果找不到導(dǎo)航條，用戶將不得不一路向上將頁面滾回去。
僅適用移動設(shè)備：因為移動端屏幕要小得多，導(dǎo)航條所占比例可以相對大一些。如果屏幕上是滾動的內(nèi)容，用戶滾動獲取新內(nèi)容的時候，導(dǎo)航條可以隱藏起來；當(dāng)用戶開始往回滾動試圖回到頂部的時候再顯示出來。
2. 如果有頁腳，加上“加載更多”按鈕無限滾動阻礙用戶的訪問頁腳。實際上，這也是無限滾動設(shè)計的主要挑戰(zhàn)之一：用戶到達(dá)列表底部的時候，內(nèi)容在不斷地加載進(jìn)來，用戶會有一兩秒時間看到頁腳，直到下一組結(jié)果加載成功并將頁腳擠出視圖之外。這阻止用戶接觸到頁腳。
拿 Bing 圖片舉例子。頁腳包含“了解更多”、“幫助”等鏈接，但用戶沒辦法真正點到任何一個，直到過一會兒，頁面停止無限滾動。
如果你的網(wǎng)站或應(yīng)用有頁腳，且它對你（或者，更要緊的，對你的用戶）很重要，那就應(yīng)該用“加載更多”的方法。新內(nèi)容不會自動加載，直到用戶點擊了“加載更多”的按鈕。這構(gòu)成了一個很簡單的交互界面，也使得按需加載額外內(nèi)容的認(rèn)知負(fù)荷可能是最小。
Instagram 使用“加載”更多按鈕以便頁腳簡單可及，并且不會強(qiáng)制用戶再三點擊“加載更多”。
3. 返回按鈕將用戶待回至之前的位置有時候，無限滾動的實現(xiàn)帶來一個主要的可用性缺陷：滾動位置并未被記錄為“狀態(tài)”。如果用戶從列表中的鏈接跳轉(zhuǎn)了，然后點返回按鈕，他們希望能回到頁面原來相同的位置。但是列表的位置不再存在了，這意味著使用瀏覽器的返回按鈕一般都導(dǎo)致滾動位置重置到頁面頂部。無怪乎用戶很快就覺得沮喪，都沒有一個合適的“回到列表”的功能。
別讓你的用戶就因為使用返回按鈕，找不到列表的位置。很重要的是，用戶通過列表訪問了某一個項目的詳情頁，他們點擊瀏覽器返回按鈕返回列表的時候，也應(yīng)該在相同的位置。
Flickr 監(jiān)聽用戶點擊瀏覽器后退按鈕的行為，滿足用戶的期望。APP 記住用戶的滾動位置，所以當(dāng)用戶按后退按鈕的時候，返回到原始位置。
4. 提供為特定項添加書簽的可能無限滾動最常見的缺點之一就是，內(nèi)容出現(xiàn)的時候，沒法添加書簽。喜愛內(nèi)容的簡單的書簽（或者
“保存稍后再看”），作為未來的參照，對用戶來說是很有用的工具。當(dāng)網(wǎng)站或應(yīng)用提供書簽功能的時候，用戶會使用的。比方說，Pinterest，使用書簽工具幫助用戶保存創(chuàng)意。
當(dāng)內(nèi)容在加載的時候，用戶需要明確的指示，說明正在進(jìn)行中。使用進(jìn)度指示（process indicator）讓用戶知道，新內(nèi)容正在加載，很快就會在頁面上顯示。
因為加載新內(nèi)容是一個很快的動作（不會超過 2-10 秒鐘），你可以使用循環(huán)動畫來提供反饋，表明系統(tǒng)正在工作。
也可以有助于為用戶添加額外的清晰,包括文本解釋了為什么用戶等待(例如“加載評論…”)。
為用戶添加額外聲明，提供說明為何用戶在等待的文本（如“正在加載評論”），也是很有用的。
無限滾動實現(xiàn)得好的話，可以達(dá)到令人難以置信的光滑無縫體驗。很好的是，關(guān)于好的無限滾動，你已經(jīng)獲得一些線索了，這會幫你建立完美的用戶體驗。
謝謝！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/79792.html
摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點長，我想先聊一聊閱讀的方式，我希望你閱讀的時候，能夠把我當(dāng)作你的競爭對手，你的夢想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會瀏覽很多的Web頁面，使用很多基于Web的應(yīng)用。這些站點看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...
摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件。總結(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個單獨(dú)的事件。確保一個持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個很相似但是又不同的技術(shù)，都可以控制一個函數(shù)在一段時間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們在操作 DOM 事件的時候，為函數(shù)添加 debounce 或者 th...
摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動加載的設(shè)計實踐。無限滾動加載背后的技術(shù)挑戰(zhàn)其實比想象中要多不少。整體思路和方案設(shè)計我們要實現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動加載的設(shè)計實踐。 無限滾動加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...
閱讀 2867·2021-10-08 10:12
閱讀 3966·2021-09-22 15:45
閱讀 2555·2019-08-30 15:52
閱讀 2625·2019-08-29 18:44
閱讀 2644·2019-08-29 12:37
閱讀 1154·2019-08-26 13:36
閱讀 2561·2019-08-26 13:34
閱讀 1473·2019-08-26 12:20
