最近做了幾個(gè)后臺管理系統(tǒng)，表格在其中占據(jù)著不可或缺的地位。在此對于表格的設(shè)計(jì)做一個(gè)整理，如有考慮不周之處，歡迎留言，共同學(xué)習(xí)進(jìn)步~

表格：一種可視化的數(shù)據(jù)交流模式，也是組織整理數(shù)據(jù)的一種手段，主要承載數(shù)據(jù)的展示、對比和歸納。

一、設(shè)計(jì)原則

易讀：表格應(yīng)該是一目了然的，層級分明的。讓用戶的注意力集中在內(nèi)容而不是表格的形式。

高效：表格頁應(yīng)該是可交互的，幫助用戶更快來分類獲取信息以他們習(xí)慣的方式。

?二、表格結(jié)構(gòu)

下圖展示的為最常見的表格，表格不僅可以包含數(shù)據(jù)還可以包含可視化元素，比如：圖表。對于表格，最基本的元素就是表體，也就是數(shù)據(jù)部分。

1. 容器：容器包含表格的所有內(nèi)容。
2. 搜索/篩選區(qū)域：方便用戶快速查詢定位數(shù)據(jù)，一般位于表格上方。
3. 功能性按鈕：一般位于表格上方，有時(shí)也可以位于表格下方。
4. 表頭：起到對于數(shù)據(jù)內(nèi)容的解釋以及可以附加篩選排序等。
5. 表體：包含行和列數(shù)據(jù)以及一些操作（可選）。
6. 底欄：底欄包含數(shù)據(jù)量以及總頁數(shù)和當(dāng)前頁數(shù)以及每頁數(shù)據(jù)量和分頁，底欄數(shù)據(jù)也可以放置在表格頂部。

2.1 搜索/篩選區(qū)域

在表格設(shè)計(jì)中，一般搜索和篩選會(huì)同時(shí)出現(xiàn)，但是兩者一般很少同時(shí)使用來對數(shù)據(jù)進(jìn)行定位。搜索更多的是對單一或者包含某個(gè)字段的的數(shù)據(jù)來進(jìn)行定位，有更高的精確度；

不同于搜索，篩選更多的是查詢一類數(shù)據(jù)，可以和一些功能相配合使用（導(dǎo)出）。

根據(jù)搜索和篩選的屬性，我們可以根據(jù)實(shí)際情況設(shè)計(jì)搜索和篩選的表現(xiàn)形式。

根據(jù)MECE，我們可以歸納出以下的場景：

1. 常用搜索少用篩選，若篩選項(xiàng)多，可以選擇隱藏篩選性，篩選少可以展示出來；
2. 搜索和篩選都常用，可以將搜索和篩選都展示出來；
3. 常用篩選少用搜索，篩選和搜索同時(shí)展示；
4. 篩選和搜索都不常用，展示搜索隱藏篩選。

搜索

• 構(gòu)成：標(biāo)簽，輸入框，搜索按鈕（可選）
• 輸入：通過輸入特定的字段，來查詢單一的數(shù)據(jù)，在表格中有導(dǎo)航的作用。
• 查詢范圍：可以查詢單個(gè)數(shù)據(jù)類型，也可以查詢多個(gè)數(shù)據(jù)類型
• 搜索結(jié)果：根據(jù)輸入的搜索字段，可能存在空狀態(tài)。對于搜索結(jié)果的排序，可以根據(jù)數(shù)據(jù)的匹配度或者生成時(shí)間等排序。

根據(jù)匹配方式，可以分為：精確搜索和模糊搜索。在大多數(shù)情況下，模糊搜索有利于減輕用戶記憶負(fù)擔(dān)，但是在同一個(gè)輸入框搜索具有相似度很高的內(nèi)容（比如手機(jī)號和ID都包含數(shù)字）時(shí)，建議對于該內(nèi)容使用精確搜索或者分開兩個(gè)輸入框搜索。

根據(jù)搜索時(shí)效性，又可將搜索分為，實(shí)時(shí)搜索和點(diǎn)擊搜索。實(shí)時(shí)搜索，指的時(shí)在用戶輸入數(shù)據(jù)時(shí)便進(jìn)行數(shù)據(jù)的搜索，具有搜索快速，搜索結(jié)果實(shí)時(shí)顯示的好處，但是僅適用于小數(shù)據(jù)搜索；點(diǎn)擊搜索，指的是在輸入數(shù)據(jù)后，需要點(diǎn)擊按鈕才能進(jìn)行搜索，該搜索方式適用性強(qiáng)。

根據(jù)表現(xiàn)形式，可以將搜索分為,簡單搜索和復(fù)雜搜索。簡單搜索，指的是單一搜索框的形式，視用戶對于搜索的需求的強(qiáng)烈度，可以放置輸入框在篩選框前或后（注意保持所有頁面統(tǒng)一），簡單搜索還可以加上標(biāo)簽篩選，來搜索不同的數(shù)據(jù)類型（圖書搜索—作者，書名，編號等）；復(fù)雜搜索，指的是多個(gè)搜索框的形式，一般只展示一個(gè)最常用的輸入框，其余的輸入框隱藏。

篩選

• 構(gòu)成：菜單項(xiàng)，單選/復(fù)選框（可選），搜索框（可選），篩選按鈕（可選）
• 篩選：通過選擇特定的選項(xiàng)，來對現(xiàn)有的數(shù)據(jù)進(jìn)行篩選，篩選項(xiàng)應(yīng)該遵循MECE原則。
• 數(shù)據(jù)數(shù)量：對于數(shù)據(jù)篩選沒有交叉的情況，同時(shí)篩選項(xiàng)少于5項(xiàng)時(shí)，我們可以采用展開的形式（單選框，標(biāo)簽的形式，頂部tab等形式）來進(jìn)行篩選；對于超過5項(xiàng)少于25項(xiàng)的情況，我們可以采用下拉菜單的形式；對于超過25項(xiàng)的內(nèi)容，我們可以在下拉菜單加上模糊搜索，采用實(shí)時(shí)搜索。
• 數(shù)據(jù)呈現(xiàn)：一般包含全部或者不限這一項(xiàng)，對于兩者的區(qū)別就如同all和any的區(qū)別。對于數(shù)據(jù)的呈現(xiàn)，我們可以根據(jù)用戶的行為設(shè)置默認(rèn)值。

根據(jù)觸發(fā)方式，可分為：觸發(fā)篩選，實(shí)時(shí)篩選。一般情況下，篩選條件存在交叉時(shí)使用觸發(fā)篩選，不存在交叉時(shí)使實(shí)時(shí)篩選。也可以根據(jù)篩選條件的數(shù)量選擇合適的觸發(fā)方式，比如條件少時(shí)用實(shí)時(shí)篩選，條件多時(shí)用觸發(fā)篩選。

根據(jù)篩選的位置，可以分為：標(biāo)題篩選，表頭篩選。標(biāo)題篩選指的是，在表格的標(biāo)題處可以進(jìn)行相關(guān)項(xiàng)的篩選，優(yōu)點(diǎn)時(shí)可以節(jié)省空間，缺點(diǎn)是一次只能篩選一項(xiàng)；表頭篩選，指的時(shí)篩選框單獨(dú)呈現(xiàn)在表頭，形式可以是組合篩選（多個(gè)篩選條件）和單個(gè)篩選，同時(shí)視篩選的對用戶的重要程度可以選擇是展開還是隱藏顯示。

交互形式：點(diǎn)擊菜單呈現(xiàn)下拉框，鼠標(biāo)移到相應(yīng)的項(xiàng)會(huì)有視覺區(qū)分，點(diǎn)擊該項(xiàng)選中該項(xiàng)，外部顯示選中的項(xiàng)。日期篩選建議使用一次點(diǎn)擊選擇日期范圍，而不是需要點(diǎn)擊兩次來分別選擇，同時(shí)禁用無數(shù)據(jù)的日期。

2.2 功能性按鈕

常見的功能性按鈕有：導(dǎo)出，創(chuàng)建，設(shè)置表格結(jié)構(gòu)（定制表單，設(shè)置行高…）等（功能性按鈕在這里指的是對于表格數(shù)據(jù)進(jìn)行增刪改查等 ）。

根據(jù)人的閱讀習(xí)慣和人機(jī)工程，一般重要的按鈕(破壞性按鈕除外)放在左邊，次要的放在右邊，常用的按鈕放在左邊，不常用的按鈕放在右邊。

所以我們可以根據(jù)按鈕的重要程度和使用頻率來設(shè)計(jì)按鈕的放置位置。

導(dǎo)出

形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態(tài)。

交互：在未選中數(shù)據(jù)時(shí)（有復(fù)選框的形式），按鈕為禁用狀態(tài)，若設(shè)計(jì)為啟用狀態(tài)，可以在點(diǎn)擊是出現(xiàn)toast提示；在選中數(shù)據(jù)時(shí)，點(diǎn)擊導(dǎo)出數(shù)據(jù)。

導(dǎo)出數(shù)據(jù)：導(dǎo)出的數(shù)據(jù)可以是部分?jǐn)?shù)據(jù)也可以是全部數(shù)據(jù)，視實(shí)際情況而言。對于導(dǎo)出文件的名稱一般的處理為：當(dāng)前頁面的名稱+當(dāng)前日期（時(shí)間視情況而定）。不導(dǎo)出表單的相關(guān)操作，只導(dǎo)出數(shù)據(jù)。

創(chuàng)建數(shù)據(jù)

形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態(tài)。

交互：一般點(diǎn)擊創(chuàng)建按鈕，會(huì)出現(xiàn)包含創(chuàng)建項(xiàng)目數(shù)據(jù)的彈窗。彈窗一般包含：標(biāo)題，創(chuàng)建項(xiàng)目表單，取消/創(chuàng)建按鈕（創(chuàng)建按鈕一般在必填數(shù)據(jù)未填寫時(shí)呈現(xiàn)禁用狀態(tài)）。

彈窗表單設(shè)計(jì)注意點(diǎn)：1.選擇合適的輸入方式 ?2.顯示必要的數(shù)據(jù)項(xiàng)以及默認(rèn)的數(shù)據(jù)（默認(rèn)的序號等） 3.能創(chuàng)建數(shù)據(jù)，一般就能刪除數(shù)據(jù)

自定義表單項(xiàng)

使用場景：由于一份數(shù)據(jù)報(bào)表，往往需要滿足各種不同的角色在不同情況下的需求，因而在數(shù)據(jù)內(nèi)容上，一般采取寧多勿少的原則，即系統(tǒng)提供盡可能詳細(xì)的數(shù)據(jù)給用 戶，由此就造成了表格數(shù)據(jù)項(xiàng)過多，難以在一個(gè)屏幕內(nèi)完整展示，導(dǎo)致需要橫向拉伸，極大的降低了表格的可讀性。

表現(xiàn)形式：一般有兩種形式，一種是將所有的數(shù)據(jù)項(xiàng)都展示在表格的上方（可以收起/展開）；另一種是點(diǎn)擊按鈕出現(xiàn)彈窗進(jìn)行選擇配置。

設(shè)計(jì)注意點(diǎn)：一般默認(rèn)顯示最重要，最常見的幾個(gè)數(shù)據(jù)項(xiàng)，用戶可以根據(jù)自己的需求自定義數(shù)據(jù)項(xiàng)。

設(shè)置行高

使用場景：由于用戶閱讀表單的設(shè)備的多樣性，一個(gè)統(tǒng)一的行高會(huì)導(dǎo)致在不同尺寸設(shè)備上一屏顯示的數(shù)據(jù)的差異化，影響閱讀的效率。

設(shè)計(jì)注意點(diǎn)：設(shè)置行高為興奮需求，可以提高用戶的用戶體驗(yàn)。所以我們可以視表格的具體情況來設(shè)計(jì)設(shè)置行高的形式，可以放置在設(shè)置按鈕里，也可以在外部按鈕較少的情況下展示出來。

2.3 表頭

作用：解釋當(dāng)前列數(shù)據(jù)。所以在數(shù)據(jù)有明顯的差異以及能自我表意的時(shí)候，甚至可以去掉表頭（郵箱），畢竟表頭也占據(jù)一定的空間。

設(shè)計(jì)注意點(diǎn)：

1. 表頭標(biāo)題盡量簡約
2. 表頭的UI表現(xiàn)區(qū)別于正文
3. 表頭標(biāo)題與數(shù)據(jù)對齊，完整顯示標(biāo)題

根據(jù)表頭的構(gòu)成，可以分為三類：

1. 純文本表頭-僅起到解釋數(shù)據(jù)屬性的作用
2. 多功能表頭-可以篩選、排序、搜索相關(guān)數(shù)據(jù)
3. 多級表頭-信息分類層級較多的情況下使用

對于多功能表頭，常見的功能包含：全選復(fù)選框，篩選，搜索，排序。

• 全選復(fù)選框：對于全選，有兩種情況，一種是全選當(dāng)前頁面的所有數(shù)據(jù)項(xiàng)，另一種是全選所有數(shù)據(jù)項(xiàng)。所以為了適應(yīng)不同的場景需求，復(fù)選框可以進(jìn)一步篩選是全選當(dāng)前頁面所有數(shù)據(jù)還是所有數(shù)據(jù)，也可以篩選別的類型的數(shù)據(jù)（已讀、未讀、已標(biāo)記、未標(biāo)記等）。
• 篩選：表頭篩選和單獨(dú)篩選相比，只能篩選一列數(shù)據(jù)，使用實(shí)時(shí)篩選，但是具有節(jié)省空間的作用。篩選不僅可以篩選單選或復(fù)選，還可以篩選日期。
• 搜索：我們還可以對于一列的數(shù)據(jù)在表頭進(jìn)行搜索，來節(jié)省空間。
• 排序：設(shè)置查看數(shù)據(jù)優(yōu)先級順序，快速發(fā)掘最關(guān)注的信。可以使用上下按鈕進(jìn)行排序（只有兩種排序），還可以使用下拉菜單進(jìn)行排序（適用于多種排序）。同時(shí)我們可以根據(jù)用戶的認(rèn)識來設(shè)計(jì)排序，比如對于銷量，我們可以只顯示從高到低的排序(用戶并不會(huì)對于低銷量的商品感興趣)。對于排序的方式，有按A-Z首字母升序/降序，也有按數(shù)值升序/降序。

對于表頭的交互，可以將表頭分為固定表頭和隨數(shù)據(jù)一起滾動(dòng)的表頭。固定表頭，一般標(biāo)題的數(shù)據(jù)屬性相似或者數(shù)據(jù)很多或者需要橫向滾動(dòng)表格時(shí)，固定表頭便于分辨記憶。對于滾動(dòng)表頭，建議若數(shù)據(jù)之間差異大可以直接去掉表頭。

2.4 表體

表體的構(gòu)成：數(shù)據(jù)，分割線，功能操作（可選）。

表體的布局：

• 垂直布局—弱化了行，強(qiáng)化了列，用于行與行之間的數(shù)據(jù)對比，一般用于數(shù)據(jù)統(tǒng)計(jì)；
• 水平布局—強(qiáng)化了行，弱化了列，符合閱讀從左往右的順序，強(qiáng)調(diào)信息的連貫性，多用于多數(shù)據(jù)的情況，使用較為廣泛；
• 矩形布局—每個(gè)數(shù)據(jù)被分割，適用于數(shù)據(jù)過多，沒有足夠的空間來區(qū)分?jǐn)?shù)據(jù)的情況。

數(shù)據(jù)：

對于數(shù)據(jù)，根據(jù)表現(xiàn)形式可以分為行數(shù)據(jù)和列數(shù)據(jù)。行和列是包含數(shù)據(jù)的容器。

行：

一行數(shù)據(jù)一般都是同一主體的不同屬性（比如：同一用戶的相關(guān)信息：ID、姓名、身份證、性別、年齡等。當(dāng)然行數(shù)據(jù)也可以是對于列數(shù)據(jù)的統(tǒng)計(jì)。

交互：鼠標(biāo)移到一行數(shù)據(jù)一般有視覺區(qū)分（顏色或者是高度-陰影）。已點(diǎn)擊閱讀的項(xiàng)有視覺區(qū)分（顏色弱化或者有標(biāo)記）。

UI表現(xiàn)：為了加強(qiáng)行數(shù)據(jù)的聯(lián)系，我們可以使用斑馬線（顏色差距不宜太大）或者是去除豎分割線的形式，來加強(qiáng)視覺引導(dǎo)，提高閱讀效率。

行高：行高通過數(shù)據(jù)的密度和一屏顯示的行數(shù)，來影響用戶提取數(shù)據(jù)的效率?？紤]表格的行高時(shí)，我認(rèn)為可以參考文字排版的常用做法，將整個(gè)表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設(shè)定為字號的1.2-1.8倍，文字與分割線間距離可以設(shè)定為字號的1-1.5倍。

行高因?yàn)橛脩袅?xí)慣和用戶設(shè)備的不同，無法滿足所有用戶的需求，所以對于行高我們可以讓用戶去選擇合適的行高。

列：

一列數(shù)據(jù)指的是同一屬性的數(shù)據(jù)。根據(jù)7±2原理，建議最多展示9條列數(shù)據(jù)，同時(shí)少量的列數(shù)據(jù)也方便用戶瀏覽。建議將重要的列數(shù)據(jù)居左放置，表格只顯示重要的數(shù)據(jù)，對于次要的數(shù)據(jù)可以放入詳情頁。

UI表現(xiàn)：為了加強(qiáng)縱向數(shù)據(jù)的對比，可以使用兩種方式，1.縱向斑馬線，一般用于列與列之間的數(shù)據(jù)對比，用處有限；2.有時(shí)會(huì)使用不同粗細(xì)的縱向分割線對信息進(jìn)行區(qū)隔，增加同類信息對比性。

列寬：

1. 數(shù)據(jù)長度固定時(shí)，一般顯示完整數(shù)據(jù)，具有固定的列寬，比如手機(jī)號可以設(shè)置150px；
2. 數(shù)據(jù)長度不固定時(shí)，首先我們應(yīng)該了解用戶的輸入內(nèi)容的情況，比如用戶個(gè)性簽名，我們設(shè)置了200字符，但是經(jīng)過數(shù)據(jù)分析，發(fā)現(xiàn)大多用戶的簽名長度少于20，那我們可以設(shè)置列寬為20，從而保證大多數(shù)數(shù)據(jù)的完整；
3. 較少情況下，我們設(shè)置的數(shù)據(jù)不能完整的顯示數(shù)據(jù)，但是數(shù)據(jù)對于用戶有比較的重要。那我們可以讓用戶手動(dòng)拖拽調(diào)整列寬（不影響別的列寬，可能會(huì)出現(xiàn)橫向滑動(dòng)的情況）。

交互形式：對于一些列數(shù)據(jù)我們可以加上超鏈接，比如ID，用戶稱號等。注意區(qū)分別的數(shù)據(jù)，比如可以使用顏色。

顯示：

（1）字體的選擇

表格數(shù)據(jù)一般包含文本和數(shù)字。字體的選擇，保證字體的可讀性。

對于文本，有以下幾點(diǎn)建議：

1. 避免全大寫字體，因?yàn)樗茈y讀，需要轉(zhuǎn)化思維；
2. 避免使用襯線字體，因?yàn)閭€(gè)性會(huì)產(chǎn)生閱讀噪音，不利于用戶對數(shù)據(jù)的理解和思考；
3. 避免使用斜體，易引起視線疲勞，影響閱讀；
4. 避免使用多種字體和選擇可讀性高的字體，保持風(fēng)格統(tǒng)一。

對于數(shù)字，建議使用表格數(shù)字而非舊式字體和比例字。數(shù)字的單位，一般在表頭中顯示。

為了便于用戶信息的提取，我們可以設(shè)計(jì)數(shù)值的格式。表格數(shù)字不是越精確越好，需要多少有效數(shù)字就顯示多少，不必太多。所以我們可以設(shè)置數(shù)字的格式 :

1. 顯示數(shù)值，但是設(shè)置小數(shù)點(diǎn)位數(shù)，千分位和數(shù)值單位等；
2. 顯示百分比，設(shè)置小數(shù)點(diǎn)位數(shù)。

對于數(shù)值，我們應(yīng)該減少用戶的計(jì)算，通過對比分析數(shù)據(jù)，在原有的數(shù)值上給出差值，升降變化，總計(jì)值平均值等分析性數(shù)據(jù)結(jié)果，方便用戶的查閱。

（2）對齊很重要

對齊可以遵循以下3條原則：

1. 數(shù)字右對齊；
2. 文字信息左對齊；
3. 表頭與數(shù)據(jù)對齊。

數(shù)字是從右向左讀的：這是因?yàn)椋覀儗Ρ葦?shù)字時(shí)，首先看個(gè)位，然后十位、百位。多數(shù)人也是這么學(xué)會(huì)算數(shù)的——從右邊開始，向左移動(dòng)，在移動(dòng)中傳遞數(shù)字。

文字信息是從左向右讀：這是符合人們的閱讀習(xí)慣的，一般人們的閱讀方式是從左往右，從上往下。當(dāng)然不同的區(qū)域有不同的閱讀習(xí)慣，比如阿拉伯就是從右往左的閱讀習(xí)慣。

通常，表頭應(yīng)當(dāng)符合數(shù)據(jù)的對齊方式。這能保持表格豎直方向整潔，營造一致性和上下文環(huán)境。

（3）數(shù)據(jù)顯示

在一個(gè)單元格數(shù)據(jù)顯示不完整時(shí)，我們可以截?cái)鄶?shù)據(jù)以…暗示數(shù)據(jù)的不完整。

對于截?cái)鄶?shù)據(jù)的展示，我們可以使用氣泡彈窗的形式（查看靈活，操作成本低，但是影響查看其他內(nèi)容）或者是下拉查看（適合查看較多的內(nèi)容，不會(huì)影響查看其他內(nèi)容，操作成本高）。

空單元，會(huì)給用戶帶來疑惑，到底是無數(shù)據(jù)還是數(shù)值為0？

對于數(shù)值為0的數(shù)據(jù)，我們應(yīng)顯示0，數(shù)值格式的處理和其他數(shù)值相同（小數(shù)點(diǎn)等），方便查看；對于無數(shù)據(jù)，我們可以使用“-”來顯示。

（4）分割線

如果對表格中的數(shù)據(jù)使用了合適的對齊方式，分隔線就會(huì)很多余。使用分隔線的首要好處是可以縮小元素間的空間，但仍可以區(qū)分各元素。即便要使用分隔線，也應(yīng)該把顏色盡量減淡，不能妨礙快速瀏覽所以建議采用相同顏色的具有一定透明度的分割線，減少視覺噪音。

水平分隔線的用處是最大的，因?yàn)樗娠@著減輕長表格占用的垂直方向的視覺重心，加快大量數(shù)據(jù)的對比工作，以及隨著時(shí)間看清趨勢。

（5）功能性操作

表體的功能操作根據(jù)針對的對象，可以分為：

1. 單個(gè)數(shù)據(jù)—可以針對單個(gè)數(shù)據(jù)進(jìn)行編輯，形式可以是框內(nèi)編輯（不適合長內(nèi)容），可以浮層編輯，也可以彈窗編輯（會(huì)覆蓋信息）；
2. 整行數(shù)據(jù)—一般操作放置在表格的最后一列，建議超過兩個(gè)的操作，次要操作彈窗顯示（節(jié)省水平空間，防止誤操作），在鼠標(biāo)hover狀態(tài)時(shí)顯示彈窗；
3. 在針對數(shù)據(jù)操作過多時(shí)，我們可以在選中該條數(shù)據(jù)時(shí)顯示針對數(shù)據(jù)的操作（Gmail）。

（6）操作按鈕的顯示

1. 圖標(biāo)（和文字相比占據(jù)更少的空間，但是要注意其表意性）；
2. 圖標(biāo)+標(biāo)簽（占據(jù)更多的水平空間，但是可視化程度更高，適用于單個(gè)操作的情況）；
3. 文本鏈接（表意性強(qiáng)，但是可能存在文本過長的問題，建議在只有少于3個(gè)按鈕的時(shí)候使用，或者在下拉菜單中使用）。

對于單條數(shù)據(jù)的編輯修改，如果數(shù)據(jù)內(nèi)容固定且只有幾項(xiàng)，則可以使用下拉菜單的形式；若數(shù)據(jù)內(nèi)容不固定，但是數(shù)據(jù)長度短，可以在單元格內(nèi)修改；若數(shù)據(jù)長度不固定，這可以使用彈窗的形式來進(jìn)行編輯。

2.5 底欄

底欄同樣可以放置在表頭的上方。

底欄一般包含以下幾個(gè)部分：

1. 當(dāng)前頁面數(shù)據(jù)的條數(shù)設(shè)置（可固定配置也可用戶手動(dòng)設(shè)置）以及總的數(shù)據(jù)條數(shù)；
2. 總頁數(shù)以及當(dāng)前處于的頁數(shù)顯示；
3. 前后翻頁功能（前一頁,后一頁，首頁，尾頁）；
4. 跳轉(zhuǎn)功能（對于很多頁數(shù)的表格尤其適用）。

對于分頁器可以分為以下幾類：

1. 復(fù)雜分頁器：可以設(shè)置每頁的顯示條數(shù)，適合大數(shù)據(jù)量。用戶可以根據(jù)自己的顯示屏調(diào)整顯示條數(shù)以提???高數(shù)據(jù)處理效率。對于條數(shù)的設(shè)置，可以選擇已設(shè)置的條數(shù)，也可以手動(dòng)輸入設(shè)置條數(shù)。
2. 簡單的分頁器：不可以設(shè)置每頁條數(shù),甚至沒有跳轉(zhuǎn)功能

分頁器的功能就是加載數(shù)據(jù)，該功能還有一種方式可以取代分頁器，那就是加載更多。

但是加載更多只適合小數(shù)據(jù)量，它具有節(jié)省空間，同時(shí)能給用戶一種沉浸式體驗(yàn)。但是這種模式，對于數(shù)據(jù)量難以把握，操作不靈活。

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

題圖來自 Pexels ，基于 CC0 協(xié)議