無限下拉滾動(dòng)Vs分頁

一筑辨、無線下拉滾動(dòng)

無限下拉加載技術(shù)使用戶在大量成塊的內(nèi)容面前一直滾動(dòng)查看。這種方法是在你向下滾動(dòng)的時(shí)候不斷加載新內(nèi)容。雖然聽起來比較誘人歉秫,但該技術(shù)并不是一個(gè)面向任何網(wǎng)站或應(yīng)用程序的通用方案。

優(yōu)點(diǎn)1:用戶參與和內(nèi)容發(fā)現(xiàn)

當(dāng)你使用滾動(dòng)作為發(fā)現(xiàn)數(shù)據(jù)的主要方法時(shí)鸭津,它可能使你的用戶在網(wǎng)頁上停留更長時(shí)間并提升用戶參與度盒卸。隨著社交媒體的流行较雕,大量的數(shù)據(jù)被用戶消費(fèi)搪缨。無線滾動(dòng)提供了一個(gè)高效的方法讓用戶瀏覽海量信息食拜,而不必等待頁面的預(yù)加載。

無限滾動(dòng)幾乎是一個(gè)發(fā)現(xiàn)界面的必備功能副编。當(dāng)用戶并不特意尋找特定的內(nèi)容時(shí)负甸,他們需要通過查看大量內(nèi)容找到自己中意的信息。

你可以通過Facebook信息流的例子來評(píng)估無線滾動(dòng)的好處痹届。用戶知道他們不可能看到信息流里面的所有內(nèi)容呻待,因?yàn)閮?nèi)容更新太頻繁了。通過無線滾動(dòng)技術(shù)短纵,F(xiàn)acebook正竭盡所能促使更多的信息能呈獻(xiàn)給用戶面前带污,用戶則產(chǎn)生對(duì)信息的瀏覽和消費(fèi)行為僵控。

優(yōu)點(diǎn)2:滾動(dòng)要比點(diǎn)擊好

用戶使用滾動(dòng)能獲得比點(diǎn)擊/輕點(diǎn)更好的體驗(yàn)香到。鼠標(biāo)滾輪和觸控屏使?jié)L動(dòng)行為要比點(diǎn)擊更快更容易。對(duì)于那些連續(xù)且冗長的內(nèi)容报破,比如一本說明書悠就,滾動(dòng)要比把這些信息分成幾個(gè)獨(dú)立的屏幕或頁面有更好的易用性。

優(yōu)點(diǎn)3:滾動(dòng)對(duì)移動(dòng)設(shè)備很友好

屏幕越小充易,滾動(dòng)就越長梗脾。移動(dòng)瀏覽的普及也促使了長滾動(dòng)。移動(dòng)設(shè)備的手勢(shì)控制使?jié)L動(dòng)更直觀和易用盹靴。其結(jié)果就是炸茧,用戶享受響應(yīng)式的體驗(yàn)不論他們使用何種設(shè)備。

缺點(diǎn)1:頁面性能和設(shè)備資源

頁面加載速度是良好用戶體驗(yàn)的一切稿静。多項(xiàng)研究已經(jīng)表明緩慢的加載速度會(huì)造成用戶離開你的網(wǎng)站或者刪除你的應(yīng)用程序從而降低轉(zhuǎn)換率梭冠。這對(duì)那些應(yīng)用了無線滾動(dòng)方案的開發(fā)者自然是壞消息。用戶在一個(gè)頁面越向下滾動(dòng)改备,就會(huì)加載更多的內(nèi)容控漠。結(jié)果就是頁面性能越來越低。

另一個(gè)問題是用戶設(shè)備資源的限制性。在很多應(yīng)用無線滾動(dòng)方案的網(wǎng)站上盐捷,尤其那些包含很多圖片的站點(diǎn)偶翅,那些受資源限制的設(shè)備,比如iPad會(huì)越來越慢因?yàn)槠浼虞d了大量外部資源碉渡。

缺點(diǎn)2:搜索和位置標(biāo)記

無線滾動(dòng)的另一個(gè)問題是當(dāng)用戶到了當(dāng)前信息流中的一個(gè)特定點(diǎn)聚谁,他們沒法標(biāo)記當(dāng)前位置且不能再隨后再回到這里。他們一旦離開爆价,就會(huì)丟失當(dāng)前的瀏覽記錄垦巴,以至于如果要回到上次的位置,他們必須得重新滾動(dòng)去發(fā)現(xiàn)铭段。這種做法的結(jié)果就是用戶產(chǎn)生困擾厭煩更影響了其全程的體驗(yàn)骤宣。

在2012年,Esty花時(shí)間使用了無線滾動(dòng)方案序愚,最后發(fā)現(xiàn)該方案并沒有分頁方案表現(xiàn)的好憔披。雖然兩種方案下的購買轉(zhuǎn)化率差不多,但是用戶的參與度降低了—用戶沒再過多的使用搜索功能爸吮。

就像Dmitry?Fadeev 指出:“人們會(huì)想要回到他們的搜索結(jié)果列表中檢查他們剛剛找到的東西芬膝,并跟列表之外他們發(fā)現(xiàn)的東西做對(duì)比。無線滾動(dòng)不光打破了這種動(dòng)態(tài)形娇,它也使得上下移動(dòng)列表變得困難锰霜,尤其當(dāng)你返回到列表頁卻發(fā)現(xiàn)自己又回到頂部,不得不重新滾動(dòng)等待結(jié)果的加載桐早。從這個(gè)角度來看癣缅,無線滾動(dòng)確實(shí)要比分頁方案效率低『逶停”

缺點(diǎn)3:無關(guān)緊要的滾動(dòng)條

另一個(gè)討厭的問題是滾動(dòng)條并沒有反映出實(shí)際的數(shù)據(jù)量友存。假設(shè)你快要接近底部了,你會(huì)很容易受滾動(dòng)條的引誘再滾動(dòng)一點(diǎn)點(diǎn)陶衅,但結(jié)果卻發(fā)現(xiàn)當(dāng)你到那里的時(shí)候數(shù)據(jù)量又翻倍了屡立。從一個(gè)可用性的角度來說,打破滾動(dòng)條的正常使用規(guī)則對(duì)用戶來講是非常糟糕的搀军。

缺點(diǎn)4:頁腳的缺失

頁腳的存在是有原因的:它們包含一些用戶可能會(huì)需要的信息—如果用戶找不到它們想找的東西或它們需要一些額外的信息的話膨俐,他們通常會(huì)到頁腳看看。但是因?yàn)檫@種信息流的無線滾動(dòng)罩句,用戶經(jīng)常一到底部就會(huì)有更多的數(shù)據(jù)加載出來從而將頁腳永遠(yuǎn)的置于了視野之外焚刺。

那些應(yīng)用無線滾動(dòng)方案的站點(diǎn)應(yīng)該讓頁腳或者固定或者將其遷移至頂部或側(cè)邊欄顯示。

另一個(gè)解決方案是出發(fā)加載更多的按鈕的時(shí)候再去加載信息的止。新的內(nèi)容不會(huì)自動(dòng)加載直到用戶點(diǎn)擊了加載按鈕檩坚。通過這種方法,用戶能很容易地到達(dá)頁腳而不要一直追趕它。

二匾委、分頁

分頁技術(shù)是指將內(nèi)容信息劃分成獨(dú)立的頁面來顯示拖叙。如果你滾到一個(gè)頁面的底部看到一行數(shù)字,這些數(shù)字就是當(dāng)前站點(diǎn)或者應(yīng)用程序里面的分頁赂乐。

優(yōu)點(diǎn)1:良好的轉(zhuǎn)換

當(dāng)用戶是在結(jié)果列表查找特定的信息而不是僅僅瀏覽信息流時(shí)薯鳍,分頁就是好的選擇。

你可以用谷歌搜索的例子來評(píng)估分頁的好處挨措。查找最好的搜索結(jié)果可能需要花費(fèi)1分鐘或者1個(gè)小時(shí)挖滤,這取決于你的搜索。但是放你在谷歌現(xiàn)有的搜索格式下停止搜尋時(shí)浅役,你會(huì)知道搜索結(jié)果的準(zhǔn)確數(shù)量斩松。你能夠決定在哪里停下或者精讀哪些結(jié)果。

優(yōu)點(diǎn)2:掌控感

無限滾動(dòng)就像個(gè)無止境的游戲—

無論你滾動(dòng)多久觉既,你會(huì)感覺永遠(yuǎn)結(jié)束不了惧盹。當(dāng)用戶知道可用結(jié)果的數(shù)量時(shí),他們能夠做出更知情的決定而不是被動(dòng)的無限滾動(dòng)列表瞪讼。按照David Kieras 在他的研究Psychology in Human-Computer Interaction中提出:“能夠到達(dá)結(jié)束點(diǎn)提供了一種掌控感”钧椰。該研究同時(shí)揭示了當(dāng)用戶有有限且相關(guān)的結(jié)果時(shí),他們更容易決定他們?cè)趯ふ业木烤乖诓辉诶锩妗?/p>

同樣的符欠,當(dāng)用戶能夠看到結(jié)果的數(shù)量時(shí)嫡霞,他們將能夠預(yù)估他們找到想找的東西大概要花費(fèi)多長時(shí)間。

優(yōu)點(diǎn)3:位置標(biāo)記

分頁方案讓我們能夠大概定向搜索的目標(biāo)位置希柿。用戶可能難以記錄頁面的精確數(shù)字诊沪,但至少能夠記錄大概位置,而且頁碼鏈接能讓他們更容易到達(dá)那里狡汉。

分頁方案對(duì)電子商務(wù)網(wǎng)站或應(yīng)用程序來說很好娄徊。用戶在線購物的時(shí)候闽颇,他們希望能夠回到他們之前離開的地方繼續(xù)購物盾戴。

缺點(diǎn)1:額外的動(dòng)作

在分頁方案中,用戶要到達(dá)下一張頁面兵多,就必須找到頁碼鏈接尖啡,移動(dòng)鼠標(biāo)置于其上,點(diǎn)擊然后等待新頁面的加載剩膘。

這種方案的主要的問題是大多數(shù)網(wǎng)站中衅斩,每一頁只向用戶戰(zhàn)象相當(dāng)有限的信息。在不影響加載速度的情況下怠褐,加長你的頁面畏梆,用戶就能在每一頁獲取到更多的內(nèi)容,他們就不必太頻繁的點(diǎn)擊那些頁碼鏈接。

三奠涌、什么時(shí)候使用無限滾動(dòng)/分頁方案宪巨?

實(shí)際上,應(yīng)用無限滾動(dòng)方案的實(shí)例只有很少部分溜畅。它最適合于那些靠用戶生產(chǎn)內(nèi)容(Twitter捏卓,F(xiàn)acebook)或表現(xiàn)視覺內(nèi)容(Printerest,Instagram)的站點(diǎn)/應(yīng)用程序慈格。而分頁方案對(duì)那些希望滿足用戶目標(biāo)導(dǎo)向的站點(diǎn)/應(yīng)用程序來說則是一個(gè)安全怠晴、友好的解決方案。

谷歌的經(jīng)驗(yàn)就很好的說明了這一點(diǎn)浴捆。谷歌圖片使用無限滾動(dòng)是為了保證用戶能夠比文本更快的瀏覽處理圖片蒜田。閱讀一個(gè)搜索結(jié)果列表往往花費(fèi)一些時(shí)間。

這就是為什么谷歌索索仍舊使用傳統(tǒng)的分頁方案选泻。

四物邑、結(jié)論

設(shè)計(jì)者在選擇解決方案前應(yīng)該權(quán)衡無限滾動(dòng)/分頁方案的優(yōu)缺點(diǎn)。這個(gè)選擇取決于你設(shè)計(jì)中的上下午和內(nèi)容的呈現(xiàn)方式滔金。一般來說色解,無限滾動(dòng)適用于向Twitter等那些用戶重在消費(fèi)無限的信息流而并不常搜尋特定的信息的應(yīng)用。分頁則適用于那些用戶在尋找特定信息的搜索結(jié)果列表頁以及那些用戶的瀏覽記錄比較重要的場(chǎng)合餐茵。

譯自:https://uxplanet.org/ux-infinite-scrolling-vs-pagination-1030d29376f1#.3oje53veo

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末科阎,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子忿族,更是在濱河造成了極大的恐慌锣笨,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件道批,死亡現(xiàn)場(chǎng)離奇詭異错英,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)隆豹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門椭岩,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人璃赡,你說我怎么就攤上這事判哥。” “怎么了碉考?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵塌计,是天一觀的道長。 經(jīng)常有香客問我侯谁,道長锌仅,這世上最難降的妖魔是什么章钾? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮热芹,結(jié)果婚禮上伍玖,老公的妹妹穿的比我還像新娘。我一直安慰自己剿吻,他們只是感情好窍箍,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丽旅,像睡著了一般椰棘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上榄笙,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天邪狞,我揣著相機(jī)與錄音,去河邊找鬼茅撞。 笑死帆卓,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的米丘。 我是一名探鬼主播剑令,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼拄查!你這毒婦竟也來了吁津?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤堕扶,失蹤者是張志新(化名)和其女友劉穎碍脏,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體稍算,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡典尾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了糊探。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钾埂。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖侧到,靈堂內(nèi)的尸體忽然破棺而出勃教,到底是詐尸還是另有隱情淤击,我是刑警寧澤匠抗,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布,位于F島的核電站污抬,受9級(jí)特大地震影響汞贸,放射性物質(zhì)發(fā)生泄漏绳军。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一矢腻、第九天 我趴在偏房一處隱蔽的房頂上張望门驾。 院中可真熱鬧,春花似錦多柑、人聲如沸奶是。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽聂沙。三九已至,卻和暖如春初嘹,著一層夾襖步出監(jiān)牢的瞬間及汉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國打工屯烦, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留坷随,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓驻龟,卻偏偏與公主長得像温眉,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子翁狐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容