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

一、標(biāo)題

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

二、查詢

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

2.1、省空間查詢條件

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

2.2、獨(dú)立查詢條件

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

三、操作

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

3.1、類型

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

3.2、組合

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

3.3、操作反饋

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

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

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

五、表格

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

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

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

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

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

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

5.1.2、展示效率

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

5.1.3、操作便捷性

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

5.1.4、靈活性

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

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

5.2、表格元素

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

5.3、操作列

為什么要單獨(dú)把操作列拿出來(lái)講，因?yàn)椴僮髁械脑O(shè)計(jì)蘊(yùn)含了太多內(nèi)容需要考慮，設(shè)計(jì)師在設(shè)計(jì)的時(shí)候很容易忽略。

5.3.1、形式

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

5.3.2、數(shù)量控制

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

5.3.3、操作狀態(tài)

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

5.4、分頁(yè)器

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

5.5、表頭

5.5.1、表頭篩選

表頭篩選平時(shí)用的比較少，因?yàn)橥饷嬉呀?jīng)有獨(dú)立的篩選功能，有些也放出來(lái)，補(bǔ)充一些不常用的篩選。

5.5.2、表頭排序

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

5.5.3、表頭提示

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

5.6、表格配置解決方案

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

六、額外功能

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

6.1、只看已選

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

6.2、已選數(shù)量

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

6.3、只看表頭

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

七、總結(jié)

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