2023年B端設(shè)計指南06-表格（上）

B端設(shè)計指南06——表格（上）目前我主要深耕于B端設(shè)計中，深知B端表格設(shè)計與C端有很大的不同，無論是表格的展現(xiàn)形式以及承載內(nèi)容上都有特別大的差異。

而現(xiàn)在網(wǎng)上有不少關(guān)于表格如何設(shè)計的文章，但要真正落到實處的少之又少，因此今日我們就來聊聊表格，探討一下B端表格畢竟應(yīng)當(dāng)如何設(shè)計。

由于表格組件類型簡單，因此分為上下兩篇，上篇主要講基礎(chǔ)學(xué)問點，下篇主要針對溝通群中的20個問題進(jìn)行解答，歡迎持續(xù)關(guān)注～

在我們B端表格頁中，由導(dǎo)航、篩選、表格幾大模塊構(gòu)成，由于表格面積占比最大，頁面呈現(xiàn)最為重要，會直接影響用戶的使用體驗。

在我們對表格的設(shè)計思索過程中，需要留意兩項原則：易讀與易用前者是提升使用者在表格掃瞄時的體驗，主要是從信息密度、顏色分隔、以及視覺節(jié)奏三個方面去理解；后者是使用表格時的操作感受，比如快捷操作、多數(shù)據(jù)編輯等方面去理解。

無論是B端的任何頁面，表格都是必不行少的部分。

想要把這三種形式講透，需要將數(shù)據(jù)的形式結(jié)合起來說，我會從展現(xiàn)形式、數(shù)據(jù)結(jié)構(gòu)、前端標(biāo)簽三個方面去解釋三者的區(qū)分。

數(shù)據(jù)采集表單：

表單擁有一對一的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶明白數(shù)據(jù)間的對應(yīng)關(guān)系。同時使用表單的門檻最低，擁有更合理的錄入形式，比如在常見的問卷調(diào)查、登陸注冊都是實行表單的形式。

在前端展現(xiàn)方面，表單采納的標(biāo)簽一般會包含：text、password、radio、checkbox、button、submit、reset、image、file等屬性，我們也要針對不同的屬性進(jìn)行相應(yīng)的設(shè)計區(qū)分。

單維度數(shù)據(jù)整理列表：

列表能夠?qū)?shù)據(jù)在一列中井然有序的展現(xiàn)，保持?jǐn)?shù)據(jù)的有序與干凈。列表擁有一對多的數(shù)據(jù)結(jié)構(gòu)，能夠讓用戶理清一條數(shù)據(jù)下的多個對應(yīng)關(guān)系，并且多個對應(yīng)關(guān)系是相互并列。

比如在常見地待辦事項、走查清單中里，就是使用單維度數(shù)據(jù)進(jìn)行排列。

在前端展現(xiàn)上，列表中的標(biāo)簽分為有序與無序。

有序列表：即有挨次的列表，其各個列表項根據(jù)肯定的規(guī)章排列定義，前端標(biāo)簽上實行olli的結(jié)構(gòu)。通常有序列表一般為數(shù)字序號（1、2、3、4）或者字母序號（a、b、c、d）；有序列表：無序列表的各個列表項之間沒有挨次級別之分，為并列關(guān)系。前端標(biāo)簽上實行ulli的結(jié)構(gòu)。

多緯度數(shù)據(jù)整理、數(shù)據(jù)分析-表格：

在多維度的數(shù)據(jù)分析中，你是永久的逃離不了表格，使用多維度數(shù)據(jù)進(jìn)行統(tǒng)一的結(jié)構(gòu)化展現(xiàn)，讓用戶清楚的看到在同一主題下的多條數(shù)據(jù)的對比，使數(shù)據(jù)能夠進(jìn)行多維度的展現(xiàn)，保證數(shù)據(jù)的完整性。

在前端的方面，表格中都是實行table標(biāo)簽進(jìn)行展現(xiàn)，同時表格中的行與列分別用tr與td標(biāo)簽，我們通常說的表頭，則為th標(biāo)簽。但要留意，在前端眼中表格永久沒有列的概念，列都是每行拼接而成。

一、表格是什么？

正式開頭之前，我們先定義一下表格～

表格是一種常見的信息呈現(xiàn)形式，它是全部B端組件中信息展現(xiàn)密度最高，同時涵蓋了B端的全部場景，因此是B端設(shè)計中的一個重要的組件。

在我們常見的B端產(chǎn)品改版中，除了對頁面流程調(diào)整以外，更多就是圍繞表格而綻開的一系列優(yōu)化。因此表格的設(shè)計，做為B端設(shè)計師的基礎(chǔ)力量之一，也是檢驗一個B端設(shè)計師是否合格的關(guān)鍵因素。

1.表格痛點

1）形式單一

表格屬于形式非常單一的組件，對于沒有閱歷的設(shè)計師來說，會認(rèn)為能夠調(diào)整的地方實在太少，往往在思索層面就會有所不足。

對于一個B端表格來說，它需要具備數(shù)據(jù)掃瞄、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計，因此功能多而全，很難思索解決問題思路。

2）組件聯(lián)動多

通常設(shè)計師設(shè)計單個組件，都會有較好的全量意識。

而到了多組件的聯(lián)動時，就會消失問題。比如在表格中，除了表格本身，還會有搜尋、篩選、視圖、分頁等操作，假如不對多組件的交叉使用進(jìn)行思索，也會缺少對于這些場景的設(shè)計。

3）數(shù)據(jù)形式多

在表格中，會承載多種多樣的字段類型，而每一個字段類型都會有相應(yīng)的差異。形式的不同落到表格上就會有不同的呈現(xiàn)形式，在關(guān)鍵數(shù)值的處理上，也會差強(qiáng)人意。

因此看上去簡潔的一個表格，其實會有許多需要設(shè)計的點。

而深化到表格的內(nèi)部中，你會發(fā)覺能做的遠(yuǎn)遠(yuǎn)不止于此，假如剛開頭沒有對表格進(jìn)行梳理，那么你在設(shè)計的過程中，對于反復(fù)消失的表格將束手無策，為了讓大家能夠?qū)Ρ砀裼懈畹睦斫?，我將表格進(jìn)行系統(tǒng)的拆解，結(jié)合實際案例，能夠讓表格更淺顯易懂。

2.表格拆解

首先問大家一個問題，你覺得表格一共有幾個部分組成，分別是什么？在我看來，表格一共分為五部分：

1）標(biāo)題

概括整個表格的內(nèi)容信息，讓用戶一眼就知道該表格的用途是否符合自己心中的預(yù)期。

在實際場景中，除了通過標(biāo)題文字去的形式之外，你還可以為每一個表格去設(shè)計不同類型的圖標(biāo)，這樣能夠讓用戶看到圖標(biāo)就能聯(lián)想到內(nèi)容，這也是現(xiàn)在無代碼開發(fā)平臺常見的處理方式。

2）工具欄

但在工具欄的排列方式會有特別多的講究，在市面上的操作區(qū)域一般可分為單行與雙行的狀態(tài)，可依據(jù)自身產(chǎn)品要求的特點進(jìn)行隨便的變化，會在文章后半部分詳細(xì)講到工具欄的設(shè)計思路，這里就不再過多贅述。

3）表頭

概括每列的主要信息，在用戶使用表格中，起到數(shù)據(jù)解釋作用，讓數(shù)據(jù)能與之進(jìn)行匹配，使用戶能夠看懂?dāng)?shù)據(jù)。同時在表頭處會擁有一些操作，比如凍結(jié)、篩選、排序都會放置于此，因此需要進(jìn)行留意。

4）單元格

承載用戶的每一條數(shù)據(jù)，也是整個表格的核心。

單元格的大小行高都會直接影響用戶使用表格的體驗，單元格的設(shè)計上也會有許多設(shè)計思路，在后半部分也給他家供應(yīng)了我自己的看法，與大家進(jìn)行探討，在這個就先按下不表。

5）分頁

嚴(yán)格意義上講，分頁是不屬于表格當(dāng)中，但當(dāng)數(shù)據(jù)超過用戶所設(shè)定的閾值時，就需要使用分頁拆解數(shù)據(jù)，所以分頁和表格是常常聯(lián)系在一起的。

分頁一共有：基礎(chǔ)型、迷你型、完整型三種類型。而如何進(jìn)行跨頁的操作，始終都是分頁在B端中的難點，需要有好的思路與規(guī)律，在分頁模塊中與大家聊聊。

二、表格類型

你知道表格類型的多少打算你了設(shè)計表格的下限。

雖然在大多數(shù)業(yè)務(wù)場景中都是使用基礎(chǔ)表格，但在B端產(chǎn)品中業(yè)務(wù)的多樣性使得許多特別的表格有它獨特發(fā)揮的空間。

我發(fā)覺在我的B端溝通群都有著類似的問題，他們不知道表格還存在這么多的類型，這時候你與別人之間的認(rèn)知的差距就是你設(shè)計優(yōu)勢所在。

1.基礎(chǔ)表格

基礎(chǔ)表格是根基，是由行與列的單元格組成。在使用層面上能滿意用戶多維度查看數(shù)據(jù)的需求。由于大家都很熟知，在這一章節(jié)并不是主角，我們就不做過多贅述。

2.樹形表格包含關(guān)系

當(dāng)表格中的數(shù)據(jù)為包含與被包含的結(jié)構(gòu)時，可實行樹形表格。通過逐級大綱的形式來呈現(xiàn)數(shù)據(jù)間的層級關(guān)系，讓整個信息結(jié)構(gòu)變得一目了然。這一表格形式常消失于項目管理工具中，比如Teambition、Tapd、飛蛾都有這樣的設(shè)計。

Tapd作為騰訊最重要的項目管理工具，在產(chǎn)品設(shè)計之初，就考慮到類似狀況，你能夠在Tpad單列數(shù)據(jù)編輯點擊入口，創(chuàng)建子數(shù)據(jù)，這樣在項目管理的場景下，有著較為友好的交互體驗。

Teambition前段時間，Teambition正式成為阿里旗下的辦公套件，而釘釘?shù)脑漆斠惑w化，或許證明這樣浩大的市場仍舊還要等待時間的挖掘。

期盼資本對于B端行業(yè)的更多動作我們回到設(shè)計上，Teambition在9月份經(jīng)受的改版，變化許多，有機(jī)會可以總結(jié)一個改版分析共享給大家，作為一個項目管理軟件，Teambition也擁有樹形表格的這樣一共功能，它的添加入口消失在每個數(shù)據(jù)詳情頁的最下方。

同時在視圖層面，也可以篩選展現(xiàn)為：全部任務(wù)、僅父任務(wù)、僅子任務(wù)四種場景，更能滿意用戶的需求～

3.子表格嵌套關(guān)系

當(dāng)一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時，這時候就可以用子表格進(jìn)行創(chuàng)建。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋，具體的了解主數(shù)據(jù)中數(shù)據(jù)的含義。

從表象上看，就是在一個表格中還嵌套著另一個表格比如在對某集團(tuán)對旗下子公司的銷售表格中，它能夠通過嵌套子表格的形式，將每一個子公司下的銷售人員的銷售記錄進(jìn)行記錄，從而能夠更加細(xì)的了解到每一個公司、每一個人員的詳細(xì)狀況。

在國外報表中，這類表格很少消失，而在中國的報表中，嵌套子表格算是一種不折不扣的中國式報表。當(dāng)然這里我們照舊可以深化理解，比如在兩個表格之間，用戶是通過什么樣的方式建立一個父子的關(guān)系？

表格中當(dāng)父數(shù)據(jù)刪除時，子數(shù)據(jù)如何處理？

設(shè)計上對父子之間的關(guān)聯(lián)有著何種限制，這都是我們需要思索的，由于這里牽涉到業(yè)務(wù)實在太多，我也無法抽象出一個規(guī)律供大家學(xué)習(xí)，因此只有詳細(xì)問題詳細(xì)分析。

4.交叉表格/表頭分組兩條數(shù)據(jù)在形式上有交叉

當(dāng)一個表格里面有多條數(shù)據(jù)在同一個小范圍的維度進(jìn)行展現(xiàn)時，它就是交叉表格。從表象上看，就是表頭有許多分組進(jìn)行區(qū)分，因此它也叫做表頭分組。

它能夠通過硬拆分將數(shù)據(jù)進(jìn)行切割，但是這樣數(shù)據(jù)的易讀性就是有很大的差距。

比如在2022-2022公司年度收支表格中，需要同時展現(xiàn)每一年份的收入、支出與利潤，使用交叉報表能夠讓用戶一眼就是看清數(shù)據(jù)，而基礎(chǔ)表格卻不行。交叉表格也算是中國式表格中的一種，能夠滿意詳細(xì)業(yè)務(wù)上的需求。

5.圖表表格表格數(shù)據(jù)的另一種呈現(xiàn)形式

當(dāng)一個表格里面有多種圖表數(shù)據(jù)進(jìn)行展現(xiàn)時，他就是圖表表格。

在對一些項目做定制化開發(fā)時，這是非常常見的場景。用戶點擊某一數(shù)據(jù)后，直接跳出數(shù)據(jù)的統(tǒng)計圖，便利用戶進(jìn)行對比。同時這一功能也可以通過儀表盤這樣的功能去解決，也就說到國內(nèi)最愛做的數(shù)據(jù)可視化。

三、表格的設(shè)計

1.表格尺寸

這是許多人都會忽視的一個點，主要是大家對于表格的理解各不相同，也沒有詳細(xì)的文章對于表格尺寸有個特別明確的限制，在這里共享一個我常用的數(shù)據(jù)點，用于推斷表格設(shè)計的優(yōu)劣：表占比。

表占比：表占比是指在19202280的屏幕大小下，表格占整個頁面的比例即：表格面積/頁面面積=表占比這里需要指出，這里的表格面積是指，表頭+單元格+分頁（不包含工具欄）。

在我對十幾款主流B端軟件的總結(jié)分析中，驚異的發(fā)覺大多數(shù)產(chǎn)品「表占比」都是在65-70%之間，而一些不注意交互設(shè)計上的產(chǎn)品則會有所偏差，那為何65-70%是一個更為合理的數(shù)據(jù)？

由于只要在頁面中消失表格，就代表這個頁面肯定是以表格作為核心。

而表占比低于65%，代表頁面中的表格不處于內(nèi)容的核心，你需要重新端詳這個頁面所需要傳達(dá)的功能。假如表占比高于80%，則代表表格消失面積過大，要考慮用戶是否能夠接受如此大的占比。

因此，設(shè)計的合理性來說，占比在65-70%之間能夠保證數(shù)據(jù)展現(xiàn)的合理性，同時這主要是針對CRM產(chǎn)品，大家可以使用這個占比去衡量自己設(shè)計的B端產(chǎn)品～

當(dāng)然這樣的狀況并不是一塵不變的，B端最大的魅力便是業(yè)務(wù)規(guī)律，我們來看一個看起來像是反面的例子：在銷幫幫中，表占比為：61.2%，看似是一個并不合格的成果，而且數(shù)據(jù)非常特別，讓我想要深挖，為何會如此的低。

通過進(jìn)一步的分析，發(fā)覺銷幫幫是一款與釘釘生態(tài)深度綁定的產(chǎn)品，其產(chǎn)品只能通過釘釘軟件進(jìn)行使用，而釘釘本身默認(rèn)并不是1080px的寬度，用戶打開并且全屏的尺寸偏小。

默認(rèn)尺寸大小的不同，最終讓銷幫幫選擇去滿意業(yè)務(wù)而犧牲表占比去換取更多的功能。

2.工具欄設(shè)計

由于在B端的工具欄的設(shè)計中，市面上缺少思路與方法的指導(dǎo)，會消失特別多的問題，因此我綻開講講工具欄的設(shè)計，就不出單獨系列進(jìn)行講解～

首先，對于工具欄，不同的產(chǎn)品，會對它有著不同的定義。比如在AppleMacOS系統(tǒng)當(dāng)中常常提到的Toolbars和ToolbarItems；又或者是Microsoft產(chǎn)品中實行的Ribbon設(shè)計模式。

在設(shè)計底層思路上截然不同，平臺級產(chǎn)品思路與定制化產(chǎn)品思路存在許多截然不同的做法，我們今日簡潔聊聊大家遇到過多的表格工具欄設(shè)計，不做深挖～在表格工具欄的設(shè)計中，信息分區(qū)與頁面透氣是特別重要的兩個設(shè)計核心。

信息分區(qū)：由于工具欄是由標(biāo)題、篩選、搜尋、視圖、新建等操作組成，而功能間的區(qū)分是工具欄設(shè)計的一個關(guān)鍵。

當(dāng)一個工具欄中，需要將如此多的元素進(jìn)行組合排列時，必定會有其排序的規(guī)章，這時我們就可以通過親熱性原則，對工具欄中的信息進(jìn)行相應(yīng)區(qū)分在設(shè)計的親熱性原則中，我們可以將功能相近的工具放在一起，比如：搜尋與篩選都是數(shù)據(jù)過濾的操作，應(yīng)當(dāng)放在同一分區(qū)。

同樣，工具欄也會存在一些功能點不太相近操作，我們就應(yīng)當(dāng)通過分區(qū)將其間隔開，比如在下圖中，每個功能都將其用線條區(qū)分。

當(dāng)然，在信息的去區(qū)分上，也有強(qiáng)弱兩種不同的方式，一種是通過線條直接分割；另一種是將工具欄進(jìn)行空間上的區(qū)分。因此可以通過信息區(qū)分去檢查你的工具欄設(shè)計是否合理。

內(nèi)容呼吸：在一個定制化項目中，設(shè)計師肯定要讓自己的頁面具有呼吸感。在B端業(yè)務(wù)中，信息量本身就已經(jīng)足夠浩大，而頁面的中的疏密關(guān)系就顯得尤為重要。

通常列表都承載著繁雜、冗余的數(shù)據(jù)，是一個信息集中的密；工具欄作為與表格關(guān)聯(lián)的上部分，呼吸感便成為表格的重要因素。通常在表頭處要將空間盡量分散開，這樣才能滿意整體的疏密關(guān)系。

3.表頭設(shè)計

常?？吹揭恍┓浅Ｈ唠s的表頭，甚至它丟失了表頭的真正含義。在實際狀況下，盡可能明確、簡潔的講出表頭的內(nèi)容，以免造成表格的宣兵奪主。當(dāng)然也會存在一些專業(yè)術(shù)語，這時候，給一個Tooltips再合適不過。

4.單元格設(shè)計

在表格中，單元格的行高是始終都是一個難以掌握的變量，由于行高會直接掌握表格中的信息密度，而信息密度永久是一個無法量化的元素。而在我們設(shè)計過程中，需要實行盒子模型的方式，讓你的設(shè)計更加落地。

學(xué)問點補充：盒子模型從前端開發(fā)而言，單元格是一個最為基礎(chǔ)的盒子模型。而HTML中的全部元素都可以看作是一個盒子。而我們所設(shè)計的頁面也正是由這個樣的原理去還原出來。

Margin(外邊距)：清除邊框外的區(qū)域，外邊距是透亮?????的。Border(邊框)：圍繞在內(nèi)邊距和內(nèi)容外的邊框。Padding(內(nèi)邊距)：清除內(nèi)容四周的區(qū)域，內(nèi)邊距是透亮?????的。Content(內(nèi)容)：盒子的內(nèi)容，顯示文本和圖像。

1）單元格內(nèi)容

內(nèi)容一般為文字、圖標(biāo)、頭像等等，而對于數(shù)據(jù)中你想要非常突出的內(nèi)容，這里稱為關(guān)鍵數(shù)據(jù)標(biāo)識別。從盒子模型的角度來看，它就是當(dāng)中的Connect，但單元格內(nèi)容中，一般會有一些處理技巧：

關(guān)鍵數(shù)據(jù)標(biāo)識：用戶在使用表格時，會常常去留意一些關(guān)鍵的數(shù)據(jù)。比如數(shù)據(jù)的狀態(tài)、變化的多少…

假如在系統(tǒng)中，你能夠很明確知道用戶想要了解的數(shù)據(jù)時，便可在關(guān)鍵數(shù)據(jù)上進(jìn)行標(biāo)識。這樣能夠關(guān)心用戶快速定位到自己想要的信息，削減數(shù)據(jù)查找所化的時間。

但假如你對關(guān)鍵數(shù)據(jù)標(biāo)識消失誤判，這條數(shù)據(jù)便是一條非常干擾的數(shù)據(jù)，因此在這里的設(shè)計，需要慎重考慮。

比如在飛書的成員與部門中，對于賬號狀態(tài)就是一個關(guān)鍵數(shù)據(jù)的標(biāo)識，一方面用戶可以快速了解到已經(jīng)激活的成員；另一方面對于未激活狀態(tài)的進(jìn)行突出展現(xiàn)，同時賜予用戶未激活后的再次發(fā)送提示的操作，是對用戶使用的優(yōu)化提升。

但，假如將不重要的數(shù)據(jù)進(jìn)行標(biāo)識，例如手機(jī)號，那么這將會是一個令人苦痛的設(shè)計。

人員角色展現(xiàn)：人員角色展現(xiàn)在表格中非常常見，通常會是以用戶名稱+頭像的形式展現(xiàn)。但在真實場景的表格中，頭像需要賜予默認(rèn)的形式，比如釘釘、飛書就是以用戶“姓”作為頭像的默認(rèn)值。

而在多個人員角色展現(xiàn)時，就需要考慮特別狀況，無論是極值省略展現(xiàn)與獵取全量數(shù)據(jù)中，都需要我們進(jìn)行設(shè)計上的處理。

進(jìn)度條進(jìn)度條是屬于關(guān)鍵數(shù)據(jù)的一種，它所涉及到的功能與圖表表格類似，能夠更直觀展現(xiàn)數(shù)據(jù)的占比，便利用戶對于多條數(shù)據(jù)間的值來推斷。進(jìn)度條常見于“容量、使用量”的數(shù)據(jù)中。

表格空白處理表格中常常消失空數(shù)據(jù)的狀況，而表格的留白對于用戶而言會造成一些困擾，特殊存在與頁面中的大面積留白，感覺像是數(shù)據(jù)沒有加載出。因此在表格空白數(shù)據(jù)處理上，可以使用“-”來進(jìn)行默認(rèn)展現(xiàn)。

2）單元格行高

單元格行高一般由：文字大小、文字行高、左右上下邊距共同組成。從盒子模型的角度來看，它就是其中的Padding。因此行高的確定，是由上方四個條件共同組成。

文字大?。阂话阆г诒砀裰械奈淖执笮《荚?2-16px之間，通常13、14px最為常見，建議大家設(shè)計也在此范疇內(nèi)。

文字行高：行高是一行文本垂直方向的高度，這個高度和字高無關(guān)，文字內(nèi)容水平居中。可設(shè)置為字號的1.2-1.8倍，文字與分割線間距離可以設(shè)定為字號的1-1.5倍。

邊距（Padding）：表格中的邊距分為左上右下四個方向，而左上右下恰好就是對應(yīng)前端去編寫Padding代碼的挨次，在對頁面驗收時，便可實行這樣的形式。

單元格行高可配置：單元格行高直接影響著信息排列的密度，而在實際業(yè)務(wù)中，真正落地也有著不同的做法。在對定制化項目的開發(fā)中，通常會設(shè)計一套設(shè)計師認(rèn)為更加合理的單元格高度，一般為32px-56px區(qū)間內(nèi)。

而在許多通用化產(chǎn)品中，存在多個設(shè)備屏幕辨別率的差異，為了讓每一個辨別率下的產(chǎn)品都能夠有較好的展現(xiàn)效果，于是乎將選擇權(quán)交給用戶，在表格左下角會設(shè)置舒適、標(biāo)準(zhǔn)、緊湊三種高度來滿意需求，使得表格更加落地合理。

總結(jié)：整個單元格的行高，就是由這三部分組成，它們的嵌套與組合，所形成了單元格的行高

3）表格分割

在表格設(shè)計當(dāng)中，每一條線都有著它存在的意義。當(dāng)表格中展現(xiàn)橫線；隱蔽縱線。用戶的橫向閱讀體驗更佳，強(qiáng)調(diào)一條數(shù)據(jù)的完整性，能夠讓用戶進(jìn)行快速的對應(yīng)。

當(dāng)表格中展現(xiàn)縱線；隱蔽橫線。用戶的縱向閱讀體驗更佳，強(qiáng)調(diào)數(shù)據(jù)上下間的對比，能夠讓用戶找到同一緯度數(shù)據(jù)下的對比。

比如在一個組織架構(gòu)的成員列表中，我信任大家都設(shè)計過類似頁面，同樣的設(shè)計方式，我一個實行展現(xiàn)橫線、一個展現(xiàn)縱線，結(jié)果明顯，我成員需要閱讀完整條數(shù)據(jù)，因此橫線會更加合理。

當(dāng)然，在我們?nèi)粘５脑O(shè)計中，展現(xiàn)橫線的場景明顯會更多，但我們?nèi)粘Ｊ褂脮r，數(shù)據(jù)對應(yīng)的場景還會更多這是需要有更強(qiáng)的設(shè)計形式：

斑馬紋：斑馬紋通過填充灰色的底色，能夠強(qiáng)化水平分割線。

優(yōu)點：能夠在大量數(shù)據(jù)表格中，讓用戶更友好的進(jìn)行橫向視覺移動，特殊是使用寬屏場景，更是一個友好的設(shè)計體驗。缺點：在少量數(shù)據(jù)中使用斑馬紋，可能與其他狀態(tài)的顏色混淆。但通常表格中會有Hover狀態(tài)的展現(xiàn)，也就是用戶Hover到某一行數(shù)據(jù)后，會賜予用戶一個默認(rèn)的灰色，來便利用戶進(jìn)行滾動數(shù)據(jù)查看，因此在斑馬紋的使用上要非常留意。

4）行、列凍結(jié)

當(dāng)表格的行與列的數(shù)量過多時，會導(dǎo)致一屏展現(xiàn)不下，而表格中的關(guān)鍵信息與操作是需要在任何時候都展現(xiàn)，這是實行行、列凍結(jié)，能讓用戶快速觸達(dá)。

表頭凍結(jié)：通常消失在垂直滾動時，通過固定表頭的信息，能夠讓用戶閱讀時對應(yīng)不同的數(shù)據(jù)，使用戶更好理解數(shù)據(jù)。首尾凍結(jié)：通常消失在水平滾動，通過固定首列的主屬性字段以及尾列的數(shù)據(jù)操作，來滿意用戶對于一列數(shù)據(jù)的認(rèn)知，從而使用戶進(jìn)行快速操作。

5.分頁設(shè)計

在對分頁設(shè)計的分析中，我們需要對分頁中的元素進(jìn)行拆解，才能明白分頁的類型所帶來的不同。

表格信息：會展現(xiàn)表格信息當(dāng)中的數(shù)據(jù)總量、更新時間、默認(rèn)排序方式等

數(shù)據(jù)總量主要展現(xiàn)用戶需要掃瞄的內(nèi)容的總量；常見于管理后臺搜尋、篩選符合條件的數(shù)據(jù)記錄時，搜尋結(jié)果頁通常會展現(xiàn)這個信息，這讓銷售人員在操作時有心理預(yù)期。更新時間主要是展現(xiàn)用戶當(dāng)前表格所操作時的日期時間。

常見于金融類產(chǎn)品中，他們對于表格中數(shù)據(jù)的時效性尤為關(guān)注，這樣可以便利用戶對表格數(shù)據(jù)中的有效性進(jìn)行推斷默認(rèn)排序方式主要是展現(xiàn)表格中是根據(jù)哪一個字段進(jìn)行的排序。

通常這種做法多消失于表頭直接展現(xiàn)icon，但對于可配置化的產(chǎn)品而言，隨著列數(shù)的增多，你越來越找不到你想要的默認(rèn)排序方式，因此在表格的固定位置展現(xiàn)，就再好不過（記住，只針對特定場景）。

頁面展現(xiàn)數(shù)量：結(jié)構(gòu)為「X條/頁」它能掌握每個頁面展現(xiàn)多少條數(shù)據(jù)；當(dāng)在系統(tǒng)中有許多數(shù)據(jù)時，你可以直接通過「頁面展現(xiàn)數(shù)據(jù)*分頁總數(shù)」直接算出整個表格的數(shù)據(jù)總和。

上一頁和下一頁翻頁：分頁中基本組成元素通過用戶點擊上一頁、下一頁的按鈕，實現(xiàn)表格的翻頁功能。

翻頁通常會依據(jù)場景不同，去省略翻頁中的不同元素，比如在下面立刻那個講到的三種翻頁類型，但是上一頁和下一頁是肯定不行省略的。翻頁也猶如你翻書一樣，可以進(jìn)行對數(shù)據(jù)的逐頁閱讀，遵從用戶之前的使用習(xí)慣。

當(dāng)前頁碼：當(dāng)前頁碼說明白頁面中數(shù)據(jù)當(dāng)前所處的位置，便利用戶進(jìn)行翻頁的操作。

相鄰頁碼展現(xiàn)：相鄰頁碼通常展現(xiàn)前后兩頁，比如你在第6頁時，頁面需要展現(xiàn)：4、5、6、7、8；但頁碼在第1頁時，就需要展現(xiàn)：1、2、3、4、5；頁尾同理。

更多分頁：當(dāng)表格數(shù)據(jù)過多時，就需要使用分頁，同樣，當(dāng)分頁過多時，我們需要進(jìn)行處理，就是省略，采納更多分頁，去展現(xiàn)多余的分頁狀況，當(dāng)用戶需要查看更多的分頁，點擊更多圖標(biāo)即可。

總頁數(shù)：代表也許會有多少頁此類數(shù)據(jù)，通過使用總頁數(shù)才能讓用戶知道總頁數(shù)說明白內(nèi)容一共有多少頁，就像一本紙質(zhì)書有總頁數(shù)，一本有聲書有總時長；通過這個元素，用戶才能了解內(nèi)容的多少，對整理內(nèi)容有個把握。

頁碼跳轉(zhuǎn)：頁碼跳轉(zhuǎn)關(guān)心用戶從當(dāng)前頁面跳轉(zhuǎn)到其他某個頁面；比如用戶在搜尋了某件商品，按銷量排序，這時掃瞄到了第15頁，滿足度越來越低；于是準(zhǔn)備從前5頁選一個，這時就能通過頁碼跳轉(zhuǎn)快速跳轉(zhuǎn)到第1-5頁了。

簡潔型：當(dāng)分頁數(shù)量較少時，通常在7頁以內(nèi)，就只有最基礎(chǔ)的展現(xiàn)：上一頁、分頁數(shù)量、下一頁。

迷你型：當(dāng)頁面空間不足或者降低分頁的視覺影響時，可以采納迷你型，主要為當(dāng)前頁/總頁數(shù)，可以直接跳轉(zhuǎn)到某頁面。

完整型：當(dāng)表格數(shù)據(jù)較多，為了滿意更多的用戶需求，可以依據(jù)需求選擇分頁類型。

比較完整的分頁還包括如下功能：顯示總數(shù)、調(diào)整每頁顯示條數(shù)、直接跳轉(zhuǎn)到某頁。完整型的雖然滿意各種功能需求，但是所占空間較大，所以我們要依據(jù)自己的需求合理拆分使用。

分頁固定：在表格中使用分頁，除了選擇合理的分頁類型外，我們還需要留意當(dāng)數(shù)據(jù)過多的時候，是否要固定分頁。

這個需要依據(jù)需求來打算，假如用戶翻頁很頻繁，表格數(shù)據(jù)又特殊長，就可以考慮分頁固定在底部，免得每次用戶翻頁都要跑到表格的最底部才能分頁，還可以在表頭也放迷你型分頁。

但通常在設(shè)計表格的時候就沒有固定，也很少使用表頭分頁，所以依據(jù)需求來定，同樣按鈕的設(shè)計也會存在類似的狀況。

另外就是當(dāng)數(shù)量過少時，只有一頁或者很多據(jù)的時候，我們是不需要分頁的，這個時候最好去掉分頁，展現(xiàn)在這里沒有什么意義了。但許多時候我們設(shè)計沒有做區(qū)分，開發(fā)也就不管了。

四、表格場景分析

老讀者都知道，我會反復(fù)去強(qiáng)調(diào)“場景”這一概念（比如在導(dǎo)航菜單、篩選、彈窗、圖標(biāo)中常常提到這一詞），由于你只有明白用戶真正的業(yè)務(wù)場景，才能夠真正的明白用戶的痛點。

我們回到表格中，在表格的場景主要分為五類不同場景：數(shù)據(jù)掃瞄、數(shù)據(jù)新增、數(shù)據(jù)操作、數(shù)據(jù)統(tǒng)計與通用場景。我會通過不同場景的梳理分析我們在不同場景中存在那些優(yōu)化點，可以進(jìn)行深化探討。

1.數(shù)據(jù)掃瞄

在數(shù)據(jù)掃瞄的場景中，本質(zhì)上是對大量數(shù)據(jù)進(jìn)行查找與確認(rèn)。用戶需要在此場景下進(jìn)行高效精確?????的數(shù)據(jù)查找。

而伴隨著用戶的查找，就需要使用表格當(dāng)中的工具進(jìn)行幫助查找，比如篩選、搜尋，這些工具的消失，都能夠關(guān)心用戶進(jìn)行數(shù)據(jù)的清洗，使