B端組件指南:分頁

CUPTEA
2 評論 3639 瀏覽 28 收藏 9 分鐘

分頁這個功能往往因為設(shè)計點太小而被忽視,但其實分頁這個功能,也有許多細節(jié)值得考慮。這篇文章里,作者就對分頁的作用、結(jié)構(gòu)等方面進行了經(jīng)驗分享,一起來看。

分頁在B端是一個很重要的功能,但往往因為設(shè)計點太小而被設(shè)計師忽略。上一周我在優(yōu)化系統(tǒng)的大數(shù)據(jù)表單頁面,發(fā)現(xiàn)了許多問題,也踩了點坑,記錄下來和各位分享點經(jīng)驗。

一、什么是分頁

Element:當數(shù)據(jù)量過多時,使用分頁分解數(shù)據(jù)。

Ant Design:采用分頁的形式分隔長列表,每次只加載一個頁面。

TDeisgn:用于模塊內(nèi)切換內(nèi)容的控件。

也就是說當頁面出現(xiàn)數(shù)據(jù)量過多或者長內(nèi)容列表需要加載時,可以利用分頁器控制單頁內(nèi)的信息數(shù)量,把大內(nèi)容切割成為小塊展示在頁面上。

雖各大廠對分頁的設(shè)計略有不同,但往往都逃不過以下這幾個元素。其中,「上一頁」「當前頁」「下一頁」是分頁最基本的三要素。

你真的了解分頁嗎?(上)

二、分頁的作用

1. 減少用戶單次請求對服務(wù)器產(chǎn)生的性能壓力和時間損耗

在大數(shù)據(jù)量的場景下,若不做分頁,服務(wù)器就需要承擔巨大的壓力,龐大的數(shù)據(jù)量一次性傳給前端,導致加載緩慢甚至服務(wù)器崩潰。

2. 減少低價值的請求

在大數(shù)據(jù)量的結(jié)果頁中,若用戶在查看完前幾頁之后發(fā)現(xiàn)該數(shù)據(jù)不是自己想要的,就能立馬退出頁面,無需等待所有的結(jié)果加載完成,從而減少了無價值的加載請求。

三、分頁的結(jié)構(gòu)

1. 總數(shù)據(jù)數(shù)

總數(shù)據(jù)數(shù)的顯示可以讓用戶具有掌控感和安全感,讓用戶在操作時更具心理預(yù)期。

2. 單個頁面顯示的條數(shù)

單個頁面顯示的條數(shù)也可稱為步長設(shè)置。在步長的規(guī)則設(shè)計上,各家系統(tǒng)略有不同。Acro在當前頁面切換步長后自動跳轉(zhuǎn)回第一頁。

你真的了解分頁嗎?(上)

而Element在設(shè)置步長后則保持原位置不動。

你真的了解分頁嗎?(上)

看似Element的做法是更優(yōu)解,但設(shè)置步長這個操作并沒有什么意義,也會給前端開發(fā)工程師徒增工作量。不論是選擇Acro還是Element的做法,切換步長時,數(shù)據(jù)位置已經(jīng)改變,用戶也找不到剛剛看到的數(shù)據(jù)去了什么位置。

在優(yōu)化系統(tǒng)時,PM提出了給分頁加步長的這么一個需求,原因是因為他使用的電腦分辨率比我的要高,因此在我頁面上顯示十行數(shù)據(jù)時為滿屏狀態(tài),而他的頁面底部還有許多留白。

此時靠用戶改變步長增加了用戶的交互成本,但如果讓前端工程師把「頁面展示規(guī)定數(shù)量」規(guī)則放開,改成「自適應(yīng)顯示」,不限制每行Min-Height,保證低分辨率正常顯示,超出滾動的規(guī)則,問題也就解決了。

3. 相鄰頁數(shù)

相臨的頁碼是為了讓用戶能夠更快速的點擊跳轉(zhuǎn)到附近頁面。

設(shè)計師需要注意頁碼展示的數(shù)量一定要夠長,不然點擊臨頁的作用就會等同于「上一頁」「下一頁」的按鈕。

點擊「上一頁」按鈕一下便能跳轉(zhuǎn)到第8頁,點擊兩下便能到第7頁,也不是什么費力的事情。若展示更多的相鄰頁數(shù),頁碼就能起到快速跳轉(zhuǎn)的作用。

你真的了解分頁嗎?(上)

4. 尾頁

尾頁不一定是總頁數(shù)。

如果數(shù)據(jù)非常的龐大,顯示總頁數(shù)會給前端帶來比較大的壓力,如果在業(yè)務(wù)中用戶并沒有查看最后一頁的需求,那么可以不在尾頁顯示總頁數(shù)。

如果用戶就想看最后一頁的數(shù)據(jù),那么利用倒序或者跳至尾頁豈不更方便快捷些。

你真的了解分頁嗎?(上)

5. 跳轉(zhuǎn)頁面

下圖是TDesign設(shè)計系統(tǒng)中給出的跳轉(zhuǎn)頁面樣式。

你真的了解分頁嗎?(上)

TDesign在跳轉(zhuǎn)頁面的按鈕展現(xiàn)了總頁數(shù),我認為是一個過多的設(shè)計。

其一:分頁有尾頁做提示。

其二,如下圖Element給出的樣式,當輸入超過頁面數(shù)量的頁碼時,系統(tǒng)不生效,即便用戶輸入很長一段數(shù)字也不會產(chǎn)生什么問題。

你真的了解分頁嗎?(上)

還有兩個值得注意的點就是數(shù)據(jù)的刷新方式和使用頻率。

在設(shè)計時,需要與前端充分溝通,知道該頁面的數(shù)據(jù)是否出于一直刷新的狀態(tài)和使用頻率。若該數(shù)據(jù)頁一直處于刷新的狀態(tài),那么原本在第一頁的數(shù)據(jù)將會一直往后出現(xiàn)在第二頁,第三頁…那么,即便你記住了某一條數(shù)據(jù)所處的頁數(shù),他的位置在不斷的刷新,回過頭輸入頁碼又怎么能找到他呢。

同理,若該數(shù)據(jù)用戶好幾個月不查看一次,那他也不會記住數(shù)據(jù)所在的位置,也更不會想要去查看了。我想任何人在用瀏覽器搜索某個內(nèi)容時,都不會滑到頁面底部去選擇頁碼吧。

這時,跳轉(zhuǎn)頁面在分頁的中便也沒有出現(xiàn)的意義了。

6. 隱藏分頁

走查時,PM扔給我一個截圖說,當數(shù)據(jù)只加載出來一頁時就別展示分頁了。

我?guī)е枨蠛颓岸诉M行了溝通,發(fā)現(xiàn)在Element組件庫中有一個特殊的場景是隱藏分頁,當數(shù)據(jù)只有一頁時可以選擇隱藏分頁,但我和前端一致認為沒有必要隱藏分頁。

你真的了解分頁嗎?(上)

原因有兩點。

其一,該數(shù)據(jù)列表關(guān)聯(lián)的執(zhí)行動作是在不斷運行的,也就是說數(shù)據(jù)會在不停的增加,很快數(shù)據(jù)就會占滿一頁。那么就沒有必要為這短暫的一刻把分頁做一個隱藏,不僅增加了交互成本也增加了開發(fā)和測試的成本。

其二,若該數(shù)據(jù)結(jié)果數(shù)量基本不變,保持在一頁左右,甚至小于一頁,那么也就沒有必要做分頁了吧。

設(shè)計師在進行分頁時,要充分了解組件特點,全面考慮數(shù)據(jù)特性,與開發(fā)隨時保持交流,避免做出美而不實的設(shè)計。

文章到這就結(jié)束了,下次談?wù)劮猪摷虞d和無限加載的區(qū)別。

本文由 @CUPTEA 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 單頁展示條數(shù)中,您寫的“不限制每行Min-Height”有什么作用?
    通常來說行高應(yīng)該是固定的,根據(jù)屏幕分辨率和固定的行高決定每頁展示多少條數(shù)據(jù)。數(shù)據(jù)顯示條數(shù)是自適應(yīng)的且正好占滿一屏,是不是也就無需“超出滾動的規(guī)則”一說了。

    來自河南 回復(fù)
  2. 可以的

    來自中國 回復(fù)