列表頁多用于一個功能的首屏，是一個功能的數(shù)據(jù)集中載體，它的主要功能就是集中處理、展示、查詢、以及統(tǒng)計數(shù)據(jù)等。列表頁一般包含5個組成部分：標(biāo)題、查詢、操作、統(tǒng)計以及表格。

一、標(biāo)題

系統(tǒng)中只要是功能，就一定有標(biāo)題，就像只要是個人，就一定有姓名一樣，標(biāo)題的展示根據(jù)系統(tǒng)的結(jié)構(gòu)，可能在面包屑中，可能在標(biāo)簽欄中，也有可能在頁面容器中。如果標(biāo)題放在容器中，位置一般是固定的，不隨著頁面滾動而滾動，標(biāo)題字體也要和內(nèi)容字體做區(qū)分，一般是字號增大或者加粗等方式。

二、查詢

查詢條件的設(shè)計也是五花八門，根據(jù)查統(tǒng)頁使用場景大致可以分成兩種：一種是省空間的設(shè)計，一般只需要放一兩個查詢條件，那么它就可以和操作按鈕放一起，多出現(xiàn)于數(shù)據(jù)字段比少且簡單的情況；一種是經(jīng)常需要混合高級查詢，一般會獨立有一塊查詢條件模塊，多出現(xiàn)于數(shù)據(jù)統(tǒng)計類頁面。

2.1、省空間查詢條件

為了達到省空間的目的，查詢條件和操作放一行，一般會只放一兩個查詢條件，輸入或選擇后即執(zhí)行查詢，不需要單獨點擊查詢按鈕，這種方式好處就是省空間，缺點是它默認展示的篩選項比較少，需要再點擊“更多查詢”才能看到更多。設(shè)計這種查詢方式需要注意的是，輸入查詢一般是輸入后即執(zhí)行查詢，容易導(dǎo)致執(zhí)行過于頻繁（輸入一個字符即執(zhí)行了），因此會做防抖設(shè)置，可以在輸入0.5s后執(zhí)行。再一個，這種展開收起的情況，用戶容易看不到隱藏的篩選，因此需要一些標(biāo)記，比如展示已選擇的數(shù)量。

2.2、獨立查詢條件

獨立查詢條件的方式，就是將查詢條件單獨劃出一個模塊，可以一次性展示多個查詢條件。這種方式的好處就是，查詢更便捷，還可以做更多的拓展性方案，如用戶可以自定義高級查詢方案。缺點就是占空間，對于小分辨率電腦不是很友好。

三、操作

列表的操作是由產(chǎn)品的功能權(quán)限控制，由權(quán)限決定哪些人能夠使用和查看數(shù)據(jù)，下面從操作的類型、組合、操作反饋以及狀態(tài)的角度分析如何設(shè)計好操作功能。

3.1、類型

操作模塊一般是由一組用于操作表格數(shù)據(jù)的按鈕組，主要分為3種：一種是全局性操作，一種是選擇數(shù)據(jù)進行操作，一種是混合型操作。全局性操作（如新增數(shù)據(jù)、導(dǎo)入、導(dǎo)出模板、刷新等）不需要勾選當(dāng)前具體某行數(shù)據(jù)，就可以直接點擊操作；選擇數(shù)據(jù)進行操作（如刪除、編輯、審批等），即操作前需要至少勾選一條數(shù)據(jù)，因為它是對當(dāng)前已存在的數(shù)據(jù)進行操作；混合型操作（如導(dǎo)出、更新狀態(tài)等），在勾選數(shù)據(jù)的時候會對當(dāng)前數(shù)據(jù)進行操作，未勾選數(shù)據(jù)的時候默認會全部處理或者其他的操作，比如“導(dǎo)出操作”，勾選數(shù)據(jù)時會導(dǎo)出已選數(shù)據(jù)，未勾選時則默認導(dǎo)出空模板或者導(dǎo)出全部數(shù)據(jù)（根據(jù)具體產(chǎn)品要求）。

3.2、組合

操作組一般會由一個或多個按鈕組成，通常只有一個主操作（primary）。主操作是帶有引導(dǎo)性的功能，如“新增數(shù)據(jù)”，還有若干個普通按鈕（default），不帶有引導(dǎo)性。按鈕組還可以根據(jù)操作類型形成組合，以分割線或收納的形式展示，收納按鈕主要有兩種展示形式：一種是帶主操作的收納按鈕（如歸納同類型的操作），一種是直接收納，不帶主操作的（如按鈕太多需要進行收起）。操作的順序通常也會根據(jù)優(yōu)先級和操作頻次來決定。

3.3、操作反饋

操作后需要給個反饋，告知用戶操作結(jié)果，告知結(jié)果分三種情況：1、直接給結(jié)果，如toast提示，操作成功/操作失??；2、給操作建議，如：toast提示，請先勾選至少一條數(shù)據(jù)；3、警告提示，如刪除數(shù)據(jù)時候告知風(fēng)險，二次確認防止誤操作。

四、數(shù)據(jù)統(tǒng)計

數(shù)據(jù)統(tǒng)計一般是拾取表格數(shù)據(jù)某些維度的統(tǒng)計結(jié)果，用于快速知曉當(dāng)前所有數(shù)據(jù)的情況，有些統(tǒng)計還帶交互，比如點擊選中后進行數(shù)據(jù)過濾。

五、表格

市面上封裝好的表格組件可配置api很多，像antd，但是想要做的更強大，還有很多能夠做的細節(jié)，我們先來分析下表格的組成。表格是由行和列組成的網(wǎng)格數(shù)據(jù)，表格可以分2種，明細表和交叉表，查統(tǒng)頁中采用的就是明細表中的橫表，即表頭是橫向的。

5.1、表格設(shè)計原則

表格的設(shè)計原則遵循以下幾點：數(shù)據(jù)可讀性、展示效率、操作便捷性、以及靈活性等。

5.1.1、數(shù)據(jù)可讀性

表格作為信息密度最大的組件，在設(shè)計的時候要考慮數(shù)據(jù)的可讀性，可以從以下幾點入手。

• 對齊方式。比較常用的是左對齊，數(shù)字金額百分比一般是右對齊，方便百分號小數(shù)點和千分位的對齊。如果表格不帶豎向分割線，則表頭也要和表體內(nèi)容對齊。
• 斑馬線。尤其是屏幕比較寬的時候，兩個字段隔得比較遠，在眼睛移動過程中容易看錯行，斑馬線就是解決這個問題，當(dāng)然，如果不嫌麻煩，鼠標(biāo)懸停上去，該行的背景色一般也會變化。
• 行高。文字行高一般是字號大小的1.2-1.8倍。單行文字表格行高一般在32px-56px之間，如果支持換行則換行文字自動擠開表格行高。
• 表頭樣式。表頭要和表體在樣式上做區(qū)分，如文字加粗，背景色等。
• 滾動。當(dāng)表體產(chǎn)生滾動的時候需要出現(xiàn)滾動條或者在固定列旁邊出現(xiàn)陰影。

5.1.2、展示效率

B端產(chǎn)品尤其是ERP這種數(shù)據(jù)密集程度很高的產(chǎn)品，對空間的利用要求是很高的，因此在設(shè)計的時候要充分考慮展示的效率，可以從行高、列寬等角度去設(shè)計表的細節(jié)。我設(shè)計表的時候習(xí)慣先跟產(chǎn)品討論清楚每個字段大概的長度，在設(shè)計的時候就會預(yù)留匹配的默認字段寬度，比如14號字體的表格，在展示“創(chuàng)建時間”字段的時候，字段寬度不會超過170px，我會留180px的默認寬度，既有呼吸感，又不浪費空間。最后預(yù)留一個字段寬度作為auto自適應(yīng)，給到個min最小值，這樣在不同分辨率上能展示相同的效果。

5.1.3、操作便捷性

表格在展示數(shù)據(jù)的時候往往會遇到一些問題，比如字段顯示不完整，這時候就需要手動支持調(diào)節(jié)列寬，或者懸停tips展示全部內(nèi)容。再比如想要復(fù)制某段內(nèi)容，而文字展示不全，又不支持調(diào)整列寬，這時候要么在比較常用于復(fù)制的字段后面跟個“復(fù)制”圖標(biāo)，或者懸停出現(xiàn)tips的時候鼠標(biāo)移上去不會馬上消失，這樣用戶就能框選文字復(fù)制了。

5.1.4、靈活性

表格設(shè)計的時候不一定能覆蓋所有用戶和場景，因此需要預(yù)留一些靈活調(diào)整的空間，下面介紹幾個常用點。

• 調(diào)整字段順序。有些產(chǎn)品為了能讓用戶根據(jù)習(xí)慣更靈活地查看內(nèi)容，會讓用戶直接拖拽表頭進行重新排序。
• 調(diào)整字段寬度。表格內(nèi)容有些長度是未知的，在使用的時候發(fā)現(xiàn)信息看不全，因此通過拖動可以快速調(diào)整字段寬度。

5.2、表格元素

表格元素包含了背景、數(shù)據(jù)（文字、圖片、圖標(biāo)、標(biāo)簽、附件等）、序號、邊框、選擇框、操作項、斑馬線等。這些在設(shè)計表格的時候都是設(shè)計師需要去定義展示形式

5.3、操作列

為什么要單獨把操作列拿出來講，因為操作列的設(shè)計蘊含了太多內(nèi)容需要考慮，設(shè)計師在設(shè)計的時候很容易忽略。

5.3.1、形式

目前操作列按鈕主要兩種形式，“圖標(biāo)按鈕”和“文字按鈕”，圖標(biāo)按鈕主要用于比較簡單易懂的一些常規(guī)操作，優(yōu)勢是長度可控，容易對齊，劣勢是，有時候需要懸停上去才知道含義，不夠直接；文字按鈕用的范圍比較廣，簡單明白，缺點是長度不可控，不好對齊。

5.3.2、數(shù)量控制

操作列和復(fù)選框一樣，一般作為固定列，不隨著字段橫向滾動。數(shù)量也不可控，根據(jù)業(yè)務(wù)情況，有多有少，因此在做的時候要解決數(shù)量問題，如果全部展示，則勢必影響內(nèi)容的展示面積，因此設(shè)計師根據(jù)真實的操作數(shù)量設(shè)定固定列寬度規(guī)則，操作項超過一定數(shù)量或一定長度做“更多”按鈕收納。還有一種展示方式，默認不展示，鼠標(biāo)懸停展示該條數(shù)據(jù)需要展示的操作，這樣既可以解決信息展示面積問題，又不需要考慮和其他行數(shù)據(jù)的操作對齊，還不需要定操作列列寬規(guī)則，缺點是，不夠直接，如果不懸停就不知道還有操作項。有的產(chǎn)品干脆直接把操作項去掉，全部采用上面的全局操作，勾選數(shù)據(jù)后執(zhí)行，總之各有各的優(yōu)缺點。

5.3.3、操作狀態(tài)

設(shè)計師經(jīng)常會困惑，什么時候操作禁用，什么時候隱藏。按鈕隱藏一般根據(jù)數(shù)據(jù)權(quán)限控制，“隱藏”通常是角色無該操作權(quán)限的時候采用，“禁用”通常是由于數(shù)據(jù)本身的問題導(dǎo)致暫時性失效。舉例個例子，組織架構(gòu)的頁面，管理員對所有組織架構(gòu)和成員有編輯和刪除權(quán)限，而普通員工只能查看數(shù)據(jù)，這時候操作按鈕就需要隱藏。再比如訂單功能，有的訂單已經(jīng)進入審批環(huán)節(jié)不可刪除，那么它的刪除按鈕就會變成禁用，而有的訂單還未進入審批環(huán)節(jié)，這時候是允許刪除的，這時候刪除按鈕就會亮起。

5.4、分頁器

數(shù)據(jù)量比較大的時候會用上分頁器，設(shè)計師在設(shè)計的時候也要定好默認一頁幾條，不然開發(fā)就會根據(jù)自己的臆想來做。分頁器位置的設(shè)計也分兩種，在表格上方和表格下方，市面上看到的大部分都是在下方。放在下方就有個問題了，是要固定頁面位置還是隨著表格自動計算位置？我對比了幾個比較成熟的產(chǎn)品，大部分都是固定在底部，不隨著頁面滾動，整個頁面滾動的區(qū)域只有表身，有小部分是跟在表格尾部，每頁條數(shù)超過屏幕高度可展示量，分頁器就會被擠到下面看不見，這種好處就是省了一點展示空間，不好的地方就是，要想再使用分頁器得往下找。還有極小部分產(chǎn)品兼容了這兩個方案，當(dāng)條數(shù)少的時候跟在表格尾部，當(dāng)條數(shù)多的時候，會頂在底部，類似固定釘功能?？傊还懿捎媚姆N方案，都要兼顧便捷性和易用性。

5.5、表頭

5.5.1、表頭篩選

表頭篩選平時用的比較少，因為外面已經(jīng)有獨立的篩選功能，有些也放出來，補充一些不常用的篩選。

5.5.2、表頭排序

排序規(guī)則主要由產(chǎn)品提供，設(shè)計需要知道一下。一般默認是以產(chǎn)品的創(chuàng)建時間為排序，排序不帶具體業(yè)務(wù)含義的一般采用時間倒序，最新數(shù)據(jù)在表格最上面，這樣每次新增數(shù)據(jù)就可以快讀看到，不用劃到最后面甚至翻頁后才能看到。有的采用時間正序，最新的數(shù)據(jù)在最后面，這種一般是數(shù)據(jù)本身帶有排序?qū)傩?，如果貿(mào)然在最上面插入數(shù)據(jù)會打亂已設(shè)定好的順序，這種帶排序?qū)傩缘谋砀?，往往還有調(diào)整順序的操作。觸發(fā)排序一般只需要點擊表頭即執(zhí)行，通常點一次會進行正序/反序，再點一次會反過來，再點一次取消排序。如果點另一個字段的排序則默認會采用最新的排序字段。

5.5.3、表頭提示

有些比較難懂的字段需要在表頭增加一個提示信息，來輔助用戶理解字段含義

5.6、表格配置解決方案

前面講了表格的各種屬性，為了使用的靈活性，有些成熟的產(chǎn)品會設(shè)計一個設(shè)置表格屬性的功能，可以讓用戶自定義表格屬性，如字段展示（篩選）、字段順序、字段對齊方式、字段固定列、是否展示序號、斑馬線等。事情有利必有弊，靈活也意味著學(xué)習(xí)成本高和投入開發(fā)成本大，是否需要做有各自的真實情況決定，不過作為設(shè)計師得知道，這些就是你能雕琢的地方。

六、額外功能

還有一些額外的設(shè)計過程中你不一定會注意到但挺好用功能推薦。

6.1、只看已選

在選擇數(shù)據(jù)的時候，為了便于一眼看到選中的數(shù)據(jù)，會做這個么個操作。

6.2、已選數(shù)量

表格的選擇，默認一般是不支持跨頁選擇的，所以產(chǎn)品或者設(shè)計需要要求開發(fā)支持跨頁選擇，而一旦支持跨頁選擇，就容易忘了到底選了多少條，因此會展示選中條數(shù)，以及一鍵清空選中，這個功能還可以和“只看已選”功能混合著用。

6.3、只看表頭

對于有些帶明細數(shù)據(jù)的表單，通常在表單中會分表頭和明細（表身），舉個例子，商品訂單中會包含一些像訂單編號、客戶名稱、發(fā)貨時間、發(fā)貨地址等等這種，叫做表頭。像具體的明細數(shù)據(jù)，如訂單中包含100個a商品，200個b商品等等，叫做明細（表身），因此在列表功能展示的時候有時候需要一眼看出明細數(shù)據(jù)，就會以表身明細數(shù)據(jù)為主數(shù)據(jù)展示，但是數(shù)據(jù)量會蹭蹭往上，因此用戶可能會選擇是按“表頭”數(shù)據(jù)展示還是按“表頭+明細”數(shù)據(jù)展示。

七、總結(jié)

列表頁承載了一個b端系統(tǒng)半壁江山，設(shè)計師在設(shè)計過程中需要不斷打磨，設(shè)計出符合自己產(chǎn)品特性的列表。