亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

【譯】無限滾動(dòng)加載最佳實(shí)踐

Sunxb / 1841人閱讀

摘要：優(yōu)秀無限滾動(dòng)的五項(xiàng)原則將無限滾動(dòng)做好，并不是不可能完成的任務(wù)。提供為特定項(xiàng)添加書簽的可能無限滾動(dòng)最常見的缺點(diǎn)之一就是，內(nèi)容出現(xiàn)的時(shí)候，沒法添加書簽。結(jié)論無限滾動(dòng)實(shí)現(xiàn)得好的話，可以達(dá)到令人難以置信的光滑無縫體驗(yàn)。

本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/673
原文：https://uxplanet.org/infinite-scrolling-best-practices-c7f24c9af1d#.1xzr65wil

無限滾動(dòng)（Infinite scrolling），有時(shí)候被稱為無盡滾動(dòng)（endless scrolling），這種技術(shù)允許用戶在大量內(nèi)容上滾動(dòng)，眼中看不到結(jié)束的地方。這種技術(shù)很簡單，就是頁面往下滾動(dòng)的時(shí)候保持刷新。

這項(xiàng)技術(shù)使用戶在沒有打斷和額外交互的情況下滾動(dòng)列表 —— 隨著用戶滾動(dòng)，一條條的內(nèi)容就出現(xiàn)了。Facebook 的新聞推送頁，Google 的圖片搜索，Twitter 的時(shí)間線，這些頁面都用到了這項(xiàng)技術(shù)。雖然聽起來還挺有誘惑力的，但并不是對(duì)所有網(wǎng)站或應(yīng)用都通用的。

優(yōu)秀無限滾動(dòng)的五項(xiàng)原則

將無限滾動(dòng)做好，并不是不可能完成的任務(wù)。為了完成它，記住并遵守以下方針。

1. 導(dǎo)航條保持可見

使用無限滾動(dòng)時(shí)候，最好保持導(dǎo)航條持續(xù)可見，這樣可以很快導(dǎo)航到頁面或應(yīng)用的不同區(qū)域，對(duì)用戶來說也更簡單。如果找不到導(dǎo)航條，用戶將不得不一路向上將頁面滾回去。

僅適用移動(dòng)設(shè)備：因?yàn)橐苿?dòng)端屏幕要小得多，導(dǎo)航條所占比例可以相對(duì)大一些。如果屏幕上是滾動(dòng)的內(nèi)容，用戶滾動(dòng)獲取新內(nèi)容的時(shí)候，導(dǎo)航條可以隱藏起來；當(dāng)用戶開始往回滾動(dòng)試圖回到頂部的時(shí)候再顯示出來。

2. 如果有頁腳，加上“加載更多”按鈕

無限滾動(dòng)阻礙用戶的訪問頁腳。實(shí)際上，這也是無限滾動(dòng)設(shè)計(jì)的主要挑戰(zhàn)之一：用戶到達(dá)列表底部的時(shí)候，內(nèi)容在不斷地加載進(jìn)來，用戶會(huì)有一兩秒時(shí)間看到頁腳，直到下一組結(jié)果加載成功并將頁腳擠出視圖之外。這阻止用戶接觸到頁腳。

拿 Bing 圖片舉例子。頁腳包含“了解更多”、“幫助”等鏈接，但用戶沒辦法真正點(diǎn)到任何一個(gè)，直到過一會(huì)兒，頁面停止無限滾動(dòng)。

如果你的網(wǎng)站或應(yīng)用有頁腳，且它對(duì)你（或者，更要緊的，對(duì)你的用戶）很重要，那就應(yīng)該用“加載更多”的方法。新內(nèi)容不會(huì)自動(dòng)加載，直到用戶點(diǎn)擊了“加載更多”的按鈕。這構(gòu)成了一個(gè)很簡單的交互界面，也使得按需加載額外內(nèi)容的認(rèn)知負(fù)荷可能是最小。

Instagram 使用“加載”更多按鈕以便頁腳簡單可及，并且不會(huì)強(qiáng)制用戶再三點(diǎn)擊“加載更多”。

3. 返回按鈕將用戶待回至之前的位置

有時(shí)候，無限滾動(dòng)的實(shí)現(xiàn)帶來一個(gè)主要的可用性缺陷：滾動(dòng)位置并未被記錄為“狀態(tài)”。如果用戶從列表中的鏈接跳轉(zhuǎn)了，然后點(diǎn)返回按鈕，他們希望能回到頁面原來相同的位置。但是列表的位置不再存在了，這意味著使用瀏覽器的返回按鈕一般都導(dǎo)致滾動(dòng)位置重置到頁面頂部。無怪乎用戶很快就覺得沮喪，都沒有一個(gè)合適的“回到列表”的功能。

別讓你的用戶就因?yàn)槭褂?em>返回按鈕，找不到列表的位置。很重要的是，用戶通過列表訪問了某一個(gè)項(xiàng)目的詳情頁，他們點(diǎn)擊瀏覽器返回按鈕返回列表的時(shí)候，也應(yīng)該在相同的位置。

Flickr 監(jiān)聽用戶點(diǎn)擊瀏覽器后退按鈕的行為，滿足用戶的期望。APP 記住用戶的滾動(dòng)位置，所以當(dāng)用戶按后退按鈕的時(shí)候，返回到原始位置。

4. 提供為特定項(xiàng)添加書簽的可能

無限滾動(dòng)最常見的缺點(diǎn)之一就是，內(nèi)容出現(xiàn)的時(shí)候，沒法添加書簽。喜愛內(nèi)容的簡單的書簽（或者
“保存稍后再看”），作為未來的參照，對(duì)用戶來說是很有用的工具。當(dāng)網(wǎng)站或應(yīng)用提供書簽功能的時(shí)候，用戶會(huì)使用的。比方說，Pinterest，使用書簽工具幫助用戶保存創(chuàng)意。

5. 加載新內(nèi)容時(shí)提供視覺反饋

當(dāng)內(nèi)容在加載的時(shí)候，用戶需要明確的指示，說明正在進(jìn)行中。使用進(jìn)度指示（process indicator）讓用戶知道，新內(nèi)容正在加載，很快就會(huì)在頁面上顯示。

因?yàn)榧虞d新內(nèi)容是一個(gè)很快的動(dòng)作（不會(huì)超過 2-10 秒鐘），你可以使用循環(huán)動(dòng)畫來提供反饋，表明系統(tǒng)正在工作。

也可以有助于為用戶添加額外的清晰,包括文本解釋了為什么用戶等待(例如“加載評(píng)論…”)。
為用戶添加額外聲明，提供說明為何用戶在等待的文本（如“正在加載評(píng)論”），也是很有用的。

結(jié)論

無限滾動(dòng)實(shí)現(xiàn)得好的話，可以達(dá)到令人難以置信的光滑無縫體驗(yàn)。很好的是，關(guān)于好的無限滾動(dòng)，你已經(jīng)獲得一些線索了，這會(huì)幫你建立完美的用戶體驗(yàn)。

謝謝！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/79792.html

相關(guān)文章

  • 前端優(yōu)化 - 收藏集 - 掘金

    摘要：雖然有著各種各樣的不同，但是相同的是，他們前端優(yōu)化不完全指南前端掘金篇幅可能有點(diǎn)長，我想先聊一聊閱讀的方式，我希望你閱讀的時(shí)候，能夠把我當(dāng)作你的競爭對(duì)手，你的夢(mèng)想是超越我。 如何提升頁面渲染效率 - 前端 - 掘金Web頁面的性能 我們每天都會(huì)瀏覽很多的Web頁面，使用很多基于Web的應(yīng)用。這些站點(diǎn)看起來既不一樣，用途也都各有不同，有在線視頻，Social Media，新聞，郵件客戶端...

    VincentFF 評(píng)論0 收藏0

  • 深入理解js

    摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問題集錦關(guān)于，工作和學(xué)習(xí)過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱為惰性加載，即在長網(wǎng)頁中延遲加載圖像。用戶滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...

    caikeal 評(píng)論0 收藏0

  • 【譯】通過例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件?？偨Y(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤合并成一個(gè)單獨(dú)的事件。確保一個(gè)持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個(gè)很相似但是又不同的技術(shù)，都可以控制一個(gè)函數(shù)在一段時(shí)間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們?cè)诓僮?DOM 事件的時(shí)候，為函數(shù)添加 debounce 或者 th...

    LeoHsiun 評(píng)論0 收藏0

  • 2月份前端資源分享

    摘要：月份前端資源分享更多資源請(qǐng)文章轉(zhuǎn)自前端生成好看的二維碼十大經(jīng)典排序算法帶動(dòng)圖演示為什么知乎前端圈普遍認(rèn)為游戲和展示的個(gè)人整理和封裝的庫中文詳細(xì)注釋供新手學(xué)習(xí)使用擴(kuò)展語法記錄掉坑初期工具漢字拼音轉(zhuǎn)換工具實(shí)現(xiàn)漢字轉(zhuǎn)拼音的插件下拉列表支持拼音簡 2月份前端資源分享 更多資源請(qǐng)Star：https://github.com/maidishike... 文章轉(zhuǎn)自：https://github...

    yanwei 評(píng)論0 收藏0

  • 設(shè)計(jì)無限滾動(dòng)下拉加載，實(shí)踐高性能頁面真諦

    摘要：論壇上有過這么一篇熱門文章，它從角度分析了無限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。無限滾動(dòng)加載背后的技術(shù)挑戰(zhàn)其實(shí)比想象中要多不少。整體思路和方案設(shè)計(jì)我們要實(shí)現(xiàn)的頁面樣例如圖，它能夠做到無限下拉加載內(nèi)容。 UX Planet論壇上有過這么一篇熱門文章: Infinite Scrolling Best Practices，它從UX角度分析了無限滾動(dòng)加載的設(shè)計(jì)實(shí)踐。 無限滾動(dòng)加載在互聯(lián)網(wǎng)上到處都有應(yīng)用：豆瓣...

    Hanks10100 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<