內容展示頁,是選擇瀑布流還是分頁呈現?
每個設計師在工作中都會糾結于是使用瀑布流還是分頁列表去展示內容。到底如何選擇,讓我們先分析下兩種交互方式的優缺點。
瀑布流
瀑布流是一種允許用戶不斷往下滾動,頁面自動刷新呈現內容的交互形式,且這樣的滾動是沒有終點的。這種方式在很多網站和應用中有所應用,但并不適合所有的網站和應用。對著生活中實例來映射,下圖中的藝考打分畫面,老師在大量的畫海中一張一張瀏覽打分,有幾分瀑布流的味道。
優點分析
使用瀑布流作為瀏覽內容的交互方式能夠延長用戶在頁面的停留時長,增加用戶的參與度。
它是伴隨信息高速增長應運而生,允許用戶在信息海洋自由徜徉,有種無拘無束的直觀感,比較適合用戶去在大量的內容中隨意逛游發現自己中意的內容。當用戶在海量內容里去挑選自己喜歡的東西,而不是去挑選特定內容的時候,瀑布流成了一個標配,它非常符合逛的特質。再從操作本身來比較,比起單擊和雙擊等動作,無論是PC端還是移動端,滾動或滑動來得更簡單,效率更高。比如將一篇冗長的文章分散在不同頁面去呈現,還不如讓用戶滾動去看完全篇,這樣的體驗比分頁更好。
缺點分析
首先預加載對于用戶的瀏覽是一個極佳的體驗,這個技術出現的背景是因為內容加載速度慢而導致的用戶的高流失率,應用的被卸載。使用瀑布流的頁面和應用會不斷預加載內容,但是當加載了大量內容后,頁面反應速度會越來越慢,影響使用體驗。其次因為瀑布流都會配備大量圖片,所以對于硬件的容量要求特別高,很多16G、32G的PAD在使用了一段時間后,需要我們清除緩存才能再次使用。
其次就是當我們滾動過程中發現了幾個好的內容,但是也沒有可以標記的動作,回頭再想找中意的內容時就很痛苦,你得重復剛剛的滾動過程,運氣好你能找到印象中的那幾個內容,回馬槍很難耍起來,降低了這方面的用戶體驗。
再次我們無法直觀看到內容的數量,瀑布流不會像分頁統計一樣有一個總數據的統計。用戶也無法通過瀏覽器的滾動條的長度去預估什么時候能到底。因為當頁面滾動到底部的時候,更多內容會加載進來,滾動條的長度又開始發生變化,同時footer會被推開視野,然后footer中包含的信息也就看不到了,對于想看得用戶來說是個難點。所以設計的時候可以嘗試把底部做固定或者設計一個“更多”的按鈕,這樣內容的加載控制點在用戶手中,體驗更佳。
分頁顯示
顧名思義就是把內容分別拆分到不同的頁面顯示。比如200行內容,每一分頁顯示20行,分10頁顯示,你能直觀看到內容的總分頁數,分頁內容數,分頁呈現內容數的控制。看下實際生活中的例子,去超市購物,貨架與貨物的關系與內容和分頁的關系有異曲同工之妙。
優點分析
分頁顯示可以方便用戶去尋找特定的內容,用戶再次打開頁面,還是能快速找到對應的內容。精確的定位能幫助你快速找到那些你中意的內容,整個閱讀的進度,加載多少內容都會是在精確的控制范圍內。
對比瀑布流的無窮無盡,用戶在分頁顯示中知道內容數量是多少,總數量是多少,什么時候可以瀏覽完畢。分頁操作的界面:上一頁,01,02,03,04,05……19,20?下一頁,讓用戶做到胸有成竹,讓用戶感受到控制感。上述特點可以看到,分頁顯示比較適用一些購物類的網站,當用戶在網上購物,他們經常會來回比較查看感興趣的產品。比對下淘寶和京東的APP,京東在網下滑動的時候是有分頁顯示的“9/70”,明確告訴你數量,淘寶這點暫時還沒發現。
缺點分析
當然對比瀑布流的操作方式,分頁的方式在操作次數所需更多,比如用戶要看下一個分頁內容,得找到”下一頁”的按鈕,鼠標移動到按鈕上,“點擊”然后等待下頁的加載,每頁顯示的內容也是有限的。
那如何決定是使用瀑布流還是分頁顯示?
從現網成功案例來講,UGC為主的相關網站和應用都在使用瀑布流去承載內容,比如微博、臉書、人人都是產品經理等,然后還有一些以圖片為主的網站和應用,比如花瓣、pinterest、instagram等也在使用。分頁顯示相對來說是一種安全模式,比較適用那些帶有明確內容偏向的用戶去使用的場景。
舉個直觀的例子:谷歌的文字搜索是使用分頁顯示,而圖片搜索采用的是瀑布流的方式,糾其原因是:
- 文字搜索對于用戶來說是有明確目的傾向的而圖片搜索對于用戶來說他也不知道該找哪張圖片,所以需要從海量圖片中找尋;
- 用戶瀏覽和處理圖片的速度遠大于處理文字的速度,瀑布流的大量內容的推送對于用戶處理來說不在話下。
所以設計師在選擇使用瀑布流或分頁顯示前得想清楚各自的優缺點。具體使用哪種交互方式,得基于實際的場景和內容的傳遞方式來分析??偟膩碚f,瀑布流更適合那些隨意瀏覽,逛逛看看不帶特定目的的場景使用。而分頁顯示比較適合帶有特定目的,想查找具體項在哪個位置,瀏覽過的內容還能回頭一一快速而方便找回的場景。
本文由 @agileyang 原創發布于人人都是產品經理。未經許可,禁止轉載。
后臺數據看板怎么設計
還有什么方式沒有
分頁顯示;下拉持續加載;下拉點擊“更多”加載。
樓主說的這些缺點很多都有解決方法了。比如唯品會APP的下拉持續加載會在右下顯示層數,只有記住商品存在哪個層數,在拉回去就可以找到了