中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

分頁(yè)這個(gè)功能往往因?yàn)樵O(shè)計(jì)點(diǎn)太小而被忽視，但其實(shí)分頁(yè)這個(gè)功能，也有許多細(xì)節(jié)值得考慮。這篇文章里，作者就對(duì)分頁(yè)的作用、結(jié)構(gòu)等方面進(jìn)行了經(jīng)驗(yàn)分享，一起來(lái)看。

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

一、什么是分頁(yè)

Element：當(dāng)數(shù)據(jù)量過(guò)多時(shí)，使用分頁(yè)分解數(shù)據(jù)。

Ant Design：采用分頁(yè)的形式分隔長(zhǎng)列表，每次只加載一個(gè)頁(yè)面。

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

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

雖各大廠對(duì)分頁(yè)的設(shè)計(jì)略有不同，但往往都逃不過(guò)以下這幾個(gè)元素。其中，「上一頁(yè)」「當(dāng)前頁(yè)」「下一頁(yè)」是分頁(yè)最基本的三要素。

二、分頁(yè)的作用

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

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

2. 減少低價(jià)值的請(qǐng)求

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

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

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

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

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

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

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

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

在優(yōu)化系統(tǒng)時(shí)，PM提出了給分頁(yè)加步長(zhǎng)的這么一個(gè)需求，原因是因?yàn)樗褂玫碾娔X分辨率比我的要高，因此在我頁(yè)面上顯示十行數(shù)據(jù)時(shí)為滿屏狀態(tài)，而他的頁(yè)面底部還有許多留白。

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

3. 相鄰頁(yè)數(shù)

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

設(shè)計(jì)師需要注意頁(yè)碼展示的數(shù)量一定要夠長(zhǎng)，不然點(diǎn)擊臨頁(yè)的作用就會(huì)等同于「上一頁(yè)」「下一頁(yè)」的按鈕。

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

4. 尾頁(yè)

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

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

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

5. 跳轉(zhuǎn)頁(yè)面

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

TDesign在跳轉(zhuǎn)頁(yè)面的按鈕展現(xiàn)了總頁(yè)數(shù)，我認(rèn)為是一個(gè)過(guò)多的設(shè)計(jì)。

其一：分頁(yè)有尾頁(yè)做提示。

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

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

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

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

這時(shí)，跳轉(zhuǎn)頁(yè)面在分頁(yè)的中便也沒(méi)有出現(xiàn)的意義了。

6. 隱藏分頁(yè)

走查時(shí)，PM扔給我一個(gè)截圖說(shuō)，當(dāng)數(shù)據(jù)只加載出來(lái)一頁(yè)時(shí)就別展示分頁(yè)了。

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

原因有兩點(diǎn)。

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

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

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

文章到這就結(jié)束了，下次談?wù)劮猪?yè)加載和無(wú)限加載的區(qū)別。