關于分頁的設計

1 評論 9125 瀏覽 10 收藏 5 分鐘

作用:跳轉(zhuǎn)到上一個頁面或下一個頁面。

元素:分頁的基本元素有:上頁+頁碼+下頁(如標注1);總頁碼(如標注2);跳轉(zhuǎn)頁(如標注3);確認”按鈕(如標注4);

場景:根據(jù)以上這些基本元素在不同的場景會有不同的組合

(場景1)19樓論壇:

論壇頁面數(shù)量多的時候會達到上千頁;分頁的內(nèi)容多數(shù)是頂貼或者是原創(chuàng)陸續(xù)更新帖子所以一般用戶都會查看首頁原創(chuàng)帖,然后又選擇性地查看些留言頁面。手動全部翻一遍的幾率幾乎為0;所以論壇性的分頁會又以下特點:

1.多數(shù)用戶會在看了原創(chuàng)帖后直接翻頁或選擇回到貼子列表所以除底部還在頂部添加翻頁并設置了”返回列表”的快捷操作

2.所以第”1″頁是home的作用,始終有第”1″頁,中間用”…”表示未顯示的頁碼;

3.只提供”首頁1+5個連續(xù)頁碼+最后一頁”頁碼;開發(fā)者應該是考慮一般用戶最多連續(xù)查看5頁的內(nèi)容?;蛘呔椭苯犹磷詈笠豁摬榭此燥@示最后一頁頁碼和直接跳至最后一頁的快捷按鈕;

(場景2)微博:

用戶瀏覽的信息是關注的信息,會像讀報紙一樣逐頁的瀏覽下去,因此”上一頁””下一頁”用的次數(shù)最多;其次是跳轉(zhuǎn)翻頁,為體現(xiàn)輕量微博的概念,將傳統(tǒng)翻頁的中間頁碼部分簡化成下拉菜單,既能標識當前頁位置又能翻頁切換跳轉(zhuǎn);

新浪weibo:一頁45條微薄,更多則翻頁,上一頁、下一頁及第幾頁,默認推送10頁

(場景3)百度搜索頁面:

1.搜索結(jié)果首次只提供10個頁碼;一般用戶在這10頁內(nèi)還沒找到想要的內(nèi)容應該會更換搜索內(nèi)容。腳印圖形和下面頁碼對應都可點擊翻頁,增加了頁面趣味性

2.因為搜索頁面用戶一般不會回到首頁所以頁面只有上一頁和下一頁的快捷按鈕

3.點擊任何一頁碼繼續(xù)瀏覽,發(fā)現(xiàn)后續(xù)提供的頁碼是:當前頁+9;便于用戶擴大搜索范圍放大。

4.最多提供20個頁碼;比較適于頁面寬度

(場景4)信息滾動翻頁:

1.騰訊weibo:一頁45條微薄,更多默認顯示更多按鈕,點擊后下面又多顯示45條,以此類推;同時騰訊還推出頁碼翻頁模式供用戶選擇

更人性化了

2.花瓣”無限滾動翻頁”,當用戶瀏覽到頁面底部,自動刷新頁面展示新的信息;連續(xù)翻過很多頁后,當再無內(nèi)容可以展示時,自動出現(xiàn)關聯(lián)信息按鈕”查看更多信息”,引導用戶去瀏覽其他相關信息;頁面過長時提供”回到頂部”按鈕;

拓展:以下為其他不同的分頁形式

以上是交互團隊對分頁的小小分享。

文章來源:良無限-UED

擴展閱讀:淺談分頁和加載分頁

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!
专题
12519人已学习15篇文章
互联网医疗是医疗行业与互联网的综合应用,其以互联网及相关技术为载体和支撑,开展线下传统或线上衍生的医疗健康服务。本专题的文章分享了对互联网医疗的分析和见解。
专题
17650人已学习14篇文章
批量导入是用户在工作中经常需要用到的功能。本专题的文章分享了批量导入的设计思路和优化思路。
专题
14519人已学习12篇文章
排行榜在帮助用户做决定的同时,引导用户购买目标产品,极大降低了用户的选择成本。本专题的文章分享了对于排行榜的设计思考。
专题
16176人已学习12篇文章
对于产品经理来说,做用户调研是一项很重要的过程。本专题的文章分享了如何做好用户调研。
专题
12839人已学习15篇文章
知识付费是内容赛道上的一块高地,有着上百亿的市场规模。本专题的文章分享了关于对知识付费的观点。
专题
12873人已学习11篇文章
需求评审会议对整个项目想影响至关重要,作为产品经理,应该如何完成需求评审呢?本专题的文章分享了如何高效完成需求评审。