自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

Web開發(fā)設(shè)計:分頁還是加載,這是一個問題

開發(fā) 架構(gòu)
無論是在web頁面還是手機(jī)應(yīng)用,信息往往無法在一個頁面全部展示,這就需要用到一些可以擴(kuò)展頁面信息的交互模式:分頁(Pagination)和加載(Continuous Scrolling)。分頁和加載都是非常常見的交互模式,我們每天都會遇到,也正是因?yàn)樘R姡覀兩踔粮杏X不到它們的存在,瀏覽到頁面的底部時,看到分頁就順手點(diǎn)一下,自動加載了就繼續(xù)閱讀。

無論是在web頁面還是手機(jī)應(yīng)用,信息往往無法在一個頁面全部展示,這就需要用到一些可以擴(kuò)展頁面信息的交互模式:分頁(Pagination)和加載(Continuous Scrolling)。分頁和加載都是非常常見的交互模式,我們每天都會遇到,也正是因?yàn)樘R?,我們甚至感覺不到它們的存在,瀏覽到頁面的底部時,看到分頁就順手點(diǎn)一下,自動加載了就繼續(xù)閱讀。但正是這小小的一點(diǎn),也會帶給用戶很不同的微妙感受。下面就來聊聊這些小差異帶來的大不同。

 

分頁

分頁可以將大篇幅的內(nèi)容分成小塊,顯示在單獨(dú)的連續(xù)頁面上,便于用戶理解和查找??梢宰層脩羟宄闹?,自己所要瀏覽的內(nèi)容到底有多少、已經(jīng)瀏覽到哪個部分、還剩余多少。分頁可以使用戶對所瀏覽的內(nèi)容有清楚的預(yù)期。

篇幅較長的文章是一定會用到分頁的。一是給用戶內(nèi)容多少的預(yù)期,二是可以給瀏覽者提供一個停頓。如果用戶看一篇文章已經(jīng)翻了十幾屏,滾動條還是停留在瀏覽器中間靠上的位置,那該多絕望。

再來看看搜索引擎和電商網(wǎng)站,也一定會看到分頁控件。

在搜索或是查看商品列表時,內(nèi)容的多少根本無法預(yù)期,分頁的***個作用自然還是告訴用戶要瀏覽信息的量。第二,分頁可以讓用戶快速的跳過一些不想看的信息,或是快速跳轉(zhuǎn)到首頁或尾頁,自主的選擇想要瀏覽的內(nèi)容。第三,分頁非常便于定位和回找,也許在搜索一條裙子時,我已經(jīng)翻到了第五頁,突然想起第二頁有條好像還不錯,可以直接跳轉(zhuǎn)快速找到它。

分頁控件實(shí)際上是給網(wǎng)站的內(nèi)容創(chuàng)造了一個自然的停頓,這個停頓運(yùn)用得好的話,可以讓產(chǎn)品更有節(jié)奏感。但是當(dāng)用戶瀏覽完一頁的內(nèi)容時,就必須停下正在進(jìn)行的閱讀,通過點(diǎn)擊進(jìn)行跳轉(zhuǎn)來獲取更多內(nèi)容。不可否認(rèn),這個停頓會在一定程度上打斷用戶的思路。在遇到分頁時,用戶很有可能會去思考,是繼續(xù)瀏覽呢?還是離開網(wǎng)站呢?所以遇到分頁時,往往會流失一部分用戶。

連續(xù)加載

連續(xù)加載是一個與分頁相反的交互模式,信息之間沒有明顯的界限或是停頓。當(dāng)頁面滾動到底部,新的信息就會被自動加載進(jìn)來。

各種社交網(wǎng)絡(luò)就特別喜歡用這種控件,用戶不會被打斷,可以順暢的一直瀏覽下去,沉浸其中。

但是由于信息是自動加載的,頁面看起來好像沒有結(jié)束,很難預(yù)測頁面的內(nèi)容到底有多少。一味的加載會讓用戶產(chǎn)生迷失感:這一頁的內(nèi)容到底有多少呢?我已經(jīng)瀏覽了多少內(nèi)容?我什么時候才能讀完這一頁呢?對于這種沒有停頓的頁面,用戶想要搜尋之前看到過的信息時,也有些困難。但對于這種以休閑娛樂為主社交型的產(chǎn)品來說,使用不打斷用戶信息流的加載方式,還是非常合適的。

使用分頁控件時,用戶必須通過點(diǎn)擊才能查看到更多的內(nèi)容,所以說,信息獲取是用戶主動請求的。而使用連續(xù)加載時,新的信息是被自動加載進(jìn)來,用戶是被動的接受。

#p#

折中的方式

分頁和加載各有利弊,如今的很多網(wǎng)站也會采取一些折中的方式:分頁加載一起用。

如Quora,會在自動加載4次后出現(xiàn)一個“More”按鈕,在連續(xù)的信息流之后,給用戶一個停頓,讓他們?nèi)ブ鲃拥墨@取更多信息。

新浪微博也采取了這種折中方式,自動加載兩次后出現(xiàn)分頁。對于大多數(shù)用戶,在閑暇時瀏覽微博,加載兩次的內(nèi)容已經(jīng)能夠滿足他們,對于需要瀏覽更多信息的用戶,也讓他們知道自己到底瀏覽了多少。

為了使用戶可以快速看到更多圖片,Google圖片搜索也采用連續(xù)加載的方式,但在搜索圖片時,用戶也非常需要明確的自己的位置,也很有可能會回去找剛才看到過的圖片,所以Google在同一頁中也會標(biāo)出頁碼,便于定位和查找。這也是另一種折中的方式。

手機(jī)客戶端

在屏幕更小、使用場景更多變的手機(jī)端,滑動顯然比精確點(diǎn)擊更簡單更不容易誤操作。手機(jī)端產(chǎn)品信息架構(gòu)相對簡單,用戶瀏覽時長相對較短,使用時注意力也相對分散。所以大多數(shù)app都會使用連續(xù)加載的方式。而且加載也比分頁控件更省空間。

但像搜索引擎這樣的產(chǎn)品,還是保留了分頁的設(shè)計。

選擇加載還是分頁只是設(shè)計中一個很小的點(diǎn),但出色的產(chǎn)品都是由無數(shù)個這樣的小點(diǎn)組成的。根據(jù)產(chǎn)品的特點(diǎn),選擇最合適它的交互方式,就是交互設(shè)計師要做的事。

原文鏈接:http://www.leeyue1007.com/index.php/2012/09/05/pagination/

責(zé)任編輯:林師授 來源: 子木yoyo的博客
相關(guān)推薦

2017-06-02 08:48:29

互斥鎖JavaCAS

2018-05-29 09:08:16

vSAN 塊存儲應(yīng)用

2020-01-20 14:44:03

云計算架構(gòu)IT

2017-04-25 14:58:02

網(wǎng)絡(luò)可見性漏洞

2023-03-29 10:48:28

2021-10-01 00:02:54

CHAR VARCHARMYSQL

2015-05-05 09:39:57

編程被編程

2020-02-17 21:17:40

www域名主機(jī)

2020-06-21 05:55:45

勒索軟件攻擊贖金

2018-01-19 08:58:25

手機(jī)系統(tǒng)系統(tǒng)更新手機(jī)廠商

2020-12-12 13:50:16

云開發(fā)

2021-01-27 13:54:05

開發(fā)云原生工具

2022-10-17 10:28:05

Web 組件代碼

2018-03-29 23:06:02

路由器網(wǎng)絡(luò)電源

2018-03-05 08:52:57

2013-04-11 09:48:52

Web設(shè)計師云計算

2013-04-24 13:47:38

云計算

2020-10-10 06:21:15

爬蟲互聯(lián)網(wǎng)

2016-03-11 09:46:26

面向?qū)ο?/a>設(shè)計無狀態(tài)類

2018-05-07 08:19:28

點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號