本期內(nèi)容概覽

下圖為內(nèi)容目錄，大家可以通過下面的目錄針對(duì)感興趣的內(nèi)容進(jìn)行選擇性閱讀。文章分為兩小章節(jié)類，從最基礎(chǔ)對(duì)表格的認(rèn)識(shí)再到表格如何提升“易讀性”進(jìn)行分享。

 

什么是表格？

 

我先從表格的最基礎(chǔ)的基本認(rèn)知跟大家分享，幫助大家對(duì)表格有個(gè)初步的認(rèn)知。那么什么是表格呢？用一句概括：“將復(fù)雜的內(nèi)容進(jìn)行「歸納整理」，將「信息展示」給用戶，幫助用戶高效率的進(jìn)行「數(shù)據(jù)分析」。”

 

1. 表格的意義

1.1. 表格定義

表格是一種常見且最有效的信息組織整理手段。在B端產(chǎn)品應(yīng)用中“表格用于組織并呈現(xiàn)結(jié)構(gòu)化的數(shù)據(jù)及信息內(nèi)容，通常會(huì)提供對(duì)數(shù)據(jù)對(duì)數(shù)據(jù)及信息的操作能力，進(jìn)而方便用戶閱讀、分析、比較數(shù)據(jù)”。

單元格：通過縱向與橫向的分割線組合而成的“單元格”構(gòu)成了表格的基本單位。

縱列、橫列：表格中縱列、橫列是由多個(gè)單元格進(jìn)行橫向、縱向排布組合而成，他們相互獨(dú)立又相互關(guān)聯(lián)；

表體：是由多行和多列的單元格組合而成，用于顯示數(shù)字和其他項(xiàng)以便快速引用、分析和操作。

1.2 表格應(yīng)用

表格在B端產(chǎn)品中它是頁(yè)面布局的重要組成部分，可用于展示結(jié)構(gòu)化數(shù)據(jù)、靜態(tài)信息以及處于變化中的數(shù)據(jù)。表格中行與列形成了單元格的寬高，不同的寬高有著疏密之別，使信息之間更易于對(duì)比，大大提升了用戶對(duì)信息的接收效率和理解程度。

因?yàn)楸砀袷浅Ｒ姷男畔⒔M織手段，所以數(shù)據(jù)經(jīng)過歸納整理和合理布局后，更易于用戶感知并分辨其中的差異、變化、關(guān)聯(lián)，可以將數(shù)據(jù)進(jìn)行對(duì)比分析。如下圖所示：

 

2. “表格”的構(gòu)成

常規(guī)情況下，可以把表格分為：a. 內(nèi)部構(gòu)成元素，它包含了表格頭部、表格主體、表尾；b. 外部構(gòu)成元素，它包含了表格篩選區(qū)、按鈕操作區(qū)、底部區(qū)；

2.1 內(nèi)部構(gòu)成元素

如下圖所示為表格的內(nèi)部結(jié)構(gòu)樣式。

1）表格頭部：表格每一列的標(biāo)題作用包括屬性分類或基本概括，還包括了對(duì)列進(jìn)行排序、篩選、凍結(jié)等功能。但是，不建議在表頭進(jìn)行篩選等復(fù)雜操作。

2）表格主體：表格主體是由表格的多個(gè)基本單元格組成，它主要展示表格的主體信息內(nèi)容。

3）表格尾部：一般承載統(tǒng)計(jì)信息，如總計(jì)、平均數(shù)等。

2.2 外部構(gòu)成元素

如下圖所示為表格的外部結(jié)構(gòu)樣式。

1）表格篩選區(qū)：它是針對(duì)表格主體內(nèi)容進(jìn)行篩選。

2）按鈕操作區(qū)：它是針對(duì)表格內(nèi)部元素做整體的操作，按鈕區(qū)的操作可分為增、刪、改操作和業(yè)務(wù)處理操作（比如常見業(yè)務(wù)中常用到的自定義列）。

3）表格底部區(qū)：底欄一般放統(tǒng)計(jì)信息、分頁(yè)等內(nèi)容。

2.3 常見的布局規(guī)則

一般來說，表格有水平型、垂直型兩種布局。

垂直布局

是在行分割的基礎(chǔ)上，通過強(qiáng)化列的視覺特征來突出行間信息的對(duì)比，如下圖所示：

水平布局

弱化列的存在，強(qiáng)調(diào)信息的連貫性，保證用戶閱讀信息時(shí)視覺流是從左到右的，然后自上而下逐條掃描，適合大量信息的瀏覽。

 

3. 表格類型

類型一：基礎(chǔ)表格

最基礎(chǔ)的表格，由表頭和單元格組成，無其他拓展操作，對(duì)信息進(jìn)行最基礎(chǔ)展示。

幾種常見的風(fēng)格樣式：1）常規(guī)型，僅顯示橫向分割可減少整個(gè)網(wǎng)格的視覺干擾；2）斑馬紋，隔行交替使用底色來區(qū)分?jǐn)?shù)據(jù)橫向?qū)Ρ龋?）田字型，單元格有均勻而明顯的分割線，邊框單元格比較明顯。

類型二：固定行表格

用于固定表格高度內(nèi)容區(qū)不能完全展示內(nèi)容的場(chǎng)景，出現(xiàn)滾動(dòng)條可滑動(dòng)預(yù)覽，滾動(dòng)僅發(fā)生在表格內(nèi)部，表格內(nèi)有一個(gè)獨(dú)立的垂直滾動(dòng)。如下圖為騰訊投放廣告表格，當(dāng)表格縱向區(qū)域內(nèi)容過長(zhǎng)時(shí)可上下滑動(dòng)頁(yè)面預(yù)覽：

類型三：固定列表格

用于固定重要信息列，在寬度有限的頁(yè)面窗口中表格橫向內(nèi)容不能完全被展示的場(chǎng)景，可左右滑動(dòng)查看其他更多的內(nèi)容信息。如下圖為騰訊投放廣告表格，當(dāng)表格橫向區(qū)域內(nèi)容過寬時(shí)可左右滑動(dòng)頁(yè)面預(yù)覽：

類型四：?jiǎn)?多選表格

表格可進(jìn)行單選/多選。如下圖為騰訊投放廣告表格，可以進(jìn)行列的選擇并將其進(jìn)行編輯操作：

類型五：可展開表格

表格行可以展開/折疊信息，一些次要的或擴(kuò)展內(nèi)容會(huì)被折疊起來，有必要操作或查看時(shí)可進(jìn)行展開。如下圖為騰訊投放廣告表格，他將一些延展的詳情數(shù)據(jù)收起，用戶可點(diǎn)擊展開：

類型六：樹表格

當(dāng)數(shù)據(jù)信息有清晰的層級(jí)關(guān)系時(shí)，可以使用樹表格。如下圖Demo所示：

 

4. 本章總結(jié)

本章屬于本篇分享的第一章節(jié)。主要將表格存在的意義進(jìn)行了定義，把表格的主要使用場(chǎng)景和作用（價(jià)值）進(jìn)行詳細(xì)分析，目的是想讓大家了解實(shí)際工作中應(yīng)該在什么的場(chǎng)景下如何使用表格。同時(shí)也將表格的主要構(gòu)成元素（內(nèi)部、外部）進(jìn)行了拆解，目的想讓大家了解后能夠正確設(shè)計(jì)表格。為了方便大家的理解，也通過圖文結(jié)合的形式更具象、更清楚的提高閱讀理解。

 

 

如何提高表格的“易讀性”

表格內(nèi)部構(gòu)成元素分表由表格頭部、表格主題、表格尾部組成，因此提升表格的易讀性可以從表格內(nèi)部著手優(yōu)化；

 

1. 提升表格易用性因素

1.1 易讀性（本期重點(diǎn)）

易讀性是指通過使用表格高效的將數(shù)據(jù)進(jìn)行展現(xiàn)、傳遞給用戶。表格中的數(shù)據(jù)需要結(jié)構(gòu)化、展現(xiàn)規(guī)則一致、視覺層級(jí)清晰，這樣即可以將大量的數(shù)據(jù)進(jìn)行有效的歸納與分類并陳列信息，又可以表達(dá)信息之間的關(guān)系；

1.2 易操作（下期重點(diǎn)）

將表格中大量的數(shù)據(jù)通過篩選、搜索、排序、分頁(yè)這四個(gè)操作提供給用戶，幫助用戶快速查找、對(duì)比、分析的操作，進(jìn)而達(dá)到易操作的目的；

2. 內(nèi)部構(gòu)成元素易讀性設(shè)計(jì)

2.1 表頭提升易讀性的方法

方法一：凍結(jié)表頭(也是表格的一種類型)

將表格頭部固定，一般使用在電腦屏幕顯示不全表格縱向內(nèi)容高度時(shí)，為滿足用戶在向下滾動(dòng)表體的場(chǎng)景下也能實(shí)時(shí)有效閱讀表體數(shù)據(jù)與表頭屬性描述，從而有效提升表格使用易讀性。如下圖為騰訊投放廣告表格，當(dāng)表格縱向區(qū)域內(nèi)容過長(zhǎng)時(shí)可上下滑動(dòng)頁(yè)面預(yù)覽：

方法二：多級(jí)表頭

信息層級(jí)分類較多、結(jié)構(gòu)較為復(fù)雜時(shí)，可使用多級(jí)表頭來體現(xiàn)數(shù)據(jù)的層次關(guān)系。注意：表格頭部的層級(jí)需要盡可能的簡(jiǎn)潔，避免過重的表頭增加用戶的閱讀成本導(dǎo)致失去表格的意義。如下圖Demo所示：

2.2表體提升易讀性的方法

方法一：行高設(shè)置

表格主體是由表格的多個(gè)基本單元格組成，它主要展示表格的主體信息內(nèi)容，所以我們控制好每個(gè)基本單元格的高度及可控制表格行高。我們可以使用《原子設(shè)計(jì)》理論將單元格再次拆分，我們可以把單元格看作是一個(gè)分子，那么組成單元格的原子是文字、分割線；

表格行高=單元格行高=文字大小+文字行高+上下邊距（Padding）+分割線，如下圖所示：

 

文字大小設(shè)置：一般出現(xiàn)在表格中的文字大小都在12-16px之間，通常12-14px最為常見，建議大家設(shè)計(jì)也在此范疇內(nèi)。

文字行高設(shè)置：行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號(hào) + 行間距，而不是單指字體高度，所以文字的高度不等于字號(hào)的高度，如：字號(hào)12px，行高為22px，根據(jù)Web頁(yè)面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：

一般行高可設(shè)置為字號(hào)的1.2-1.8倍，具體情況可按實(shí)際的場(chǎng)景訴求制定規(guī)范，比如：可以制定幾個(gè)梯度（緊密、正常、寬松）來配合場(chǎng)景的應(yīng)用，當(dāng)文本內(nèi)容較多時(shí)為了不讓文字密度那么高可以使用寬松梯度做應(yīng)用，當(dāng)空間較小但又想承載更多的內(nèi)容可以使用緊密梯度做應(yīng)用；

具體可以查看我之前分享的《文字規(guī)范系統(tǒng)》

上下邊距（Padding）：表格中的邊距上下個(gè)方向。如下圖所示：

分割線：垂直分割線可跟隨列的數(shù)量（表格列的密集程度）判斷是否需要，一般而言一屏列數(shù)較少時(shí)可不配置，可減少視覺干擾讓表格更簡(jiǎn)潔，使用列與列之間的間距作區(qū)分（格式塔原理）。但是一屏需要展示較多列時(shí)建議加上垂直分割線。

但是水平分割線在表格中一般情況下會(huì)存在，它能顯著減輕表格在垂直方向的視覺重量，提升用戶進(jìn)行大量數(shù)據(jù)對(duì)比時(shí)的速度。

那么問題來了，在設(shè)置單元格的時(shí)候分割線需要加進(jìn)去嗎？答案是需要，但是每個(gè)單元格只需要在下方加一個(gè)1px分割線即可。舉個(gè)例：?jiǎn)卧裥懈邽?6px，那單元格容器高度=55px+分割=1px。如下圖所示：

 

小結(jié)：單元格行高是由字體大小、字體行高、上下邊距、分割線組成，表格行是由多個(gè)單元格組成，標(biāo)體又是由多個(gè)表格行組成。所以，在實(shí)際應(yīng)用場(chǎng)景中可設(shè)置字體大小、字體行高、上下邊距控制單元格的高度，進(jìn)而滿足設(shè)置表格行高的訴求。如下圖拆解：

注意：在制作規(guī)范時(shí)盡量避免出現(xiàn)超過3種以上類型表格行高（不然很難管理和規(guī)范使用），可以預(yù)設(shè)緊密、正常、寬松來配合滿足不同業(yè)務(wù)場(chǎng)景的訴求。

方法二：行寬設(shè)置

表格行寬也就是單元格寬度是由內(nèi)容容器、左右邊距組成。如下圖所示：

那么問題來了，當(dāng)隨著不同大小的屏幕如何做自適應(yīng)規(guī)則呢。可看下圖，將圖中A1部分固定寬度，不隨頁(yè)面縮小/拉寬而變化，A2部分看作為自適應(yīng)部分，它跟隨頁(yè)面縮小/拉寬而變化。如下圖所示：

方法三：固定列 (也是表格的一種類型)

將表格中的最關(guān)鍵的內(nèi)容與操作放在首尾列并固定，幫助用戶便捷閱讀、操作，未固定列可通過鼠標(biāo)左右滑動(dòng)方式查看。優(yōu)勢(shì)是在寬度有限的頁(yè)面窗口中可以左右滑動(dòng)查看其他更多的內(nèi)容信息。如下圖為騰訊投放廣告表格，當(dāng)表格橫向區(qū)域內(nèi)容過寬時(shí)可左右滑動(dòng)頁(yè)面預(yù)覽：

注意：這里是指首尾列固定位置，而不是固定列的寬度。對(duì)于使用鼠標(biāo)用戶而言，水平滾動(dòng)交互體驗(yàn)不佳。因此，盡可能通過調(diào)整列寬，避免出現(xiàn)水平滾動(dòng)的情況。

適用場(chǎng)景：當(dāng)表格的列數(shù)量過多導(dǎo)致寬度大于頁(yè)面寬度時(shí)的場(chǎng)景。

方法四：可拖拽列

可伸縮列是指用戶可手動(dòng)拖拽表格某列的寬度，從而達(dá)到最佳可閱讀狀態(tài)。如下圖為騰訊投放廣告表格所示：

可拖拽表格注意事項(xiàng)：

1）需設(shè)置列最小寬度：可按屬性（日期、ID、數(shù)字、圖片等）進(jìn)行定義最小寬度設(shè)定，比如正常文本類，如姓名、描述字段可設(shè)置最小寬度為3個(gè)中文字符、電話號(hào)碼類固定為11個(gè)英文字符等、圖片的最小列寬不影響圖片的可閱讀，超出部份換行顯示；

2）某列的寬度被手動(dòng)調(diào)節(jié)寬度后，其余列的寬度應(yīng)當(dāng)不受影響，如果調(diào)整后，如果所有列寬總和大于屏幕寬度時(shí)可采用橫滑的形式展現(xiàn)；

可拖拽表格適用場(chǎng)景：

表格的數(shù)據(jù)內(nèi)容可以很簡(jiǎn)單或非常復(fù)雜。但是預(yù)設(shè)的寬度并不能給用戶最好的閱讀體驗(yàn)。這種情況下，我們可以使用寬度可調(diào)整的表格，讓用戶在瀏覽時(shí)根據(jù)需要，自主控制表格列的寬度。

方法五：數(shù)據(jù)處理值

一般用在需要表格原始數(shù)據(jù)的基礎(chǔ)上給出數(shù)據(jù)差值、數(shù)據(jù)升降變化、數(shù)據(jù)平均值、數(shù)據(jù)總計(jì)等處理結(jié)果為導(dǎo)向，目的是減少用戶再次需要處理加工數(shù)據(jù)的過程，提升用戶閱讀信息的效率。

比如，用戶想快速查看對(duì)比某兩個(gè)時(shí)間段數(shù)據(jù)總計(jì)情況，那么可以在表格底部或表體第一列給個(gè)總計(jì)行，供用戶進(jìn)行快速查閱。如下圖為總計(jì)案例Demo：

方法六：自定義列

提供自定義列設(shè)置可讓用戶根據(jù)自己的訴求來定義表格的列展示列及順序，常常用在表格中列數(shù)特較多場(chǎng)景。用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。

首先用戶可以在操作中預(yù)設(shè)幾個(gè)常用的自定義列展示，方便后續(xù)的延用。其次在對(duì)表格列的定義設(shè)置彈窗中可分成兩個(gè)操作區(qū)：1、用戶先在左側(cè)選擇希望在表格中展示的列；2、右側(cè)可對(duì)表格列字段進(jìn)行排序。如下圖為騰訊投放廣告表格所示：

注意：系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶操作成本。

2.3 表尾提升易讀性的方法

方法一：提供分頁(yè)器

在數(shù)據(jù)量較大的表格中使用分頁(yè)器有以下四大優(yōu)勢(shì)：

1）方便用戶看到的內(nèi)容盡可能聚焦，避免信息量過載。

2）分頁(yè)可以緩解服務(wù)器的數(shù)據(jù)加載壓力導(dǎo)致的加載時(shí)間過長(zhǎng)。

3）分頁(yè)可以跳躍查看數(shù)據(jù)，靈活性更高、步驟更短。

4）用戶在表格瀏覽時(shí)可作為導(dǎo)航提示作用，告知用戶瀏覽哪幾條數(shù)據(jù)及數(shù)據(jù)總條數(shù)。

 

分頁(yè)器“解刨”（延展部分）

既然說到分頁(yè)器，那我們來細(xì)聊一下這個(gè)組件。首先，我們應(yīng)該得知道分頁(yè)器是一個(gè)獨(dú)立的組件，而不是表格組件中的一部分，在本文中他與表格一起出現(xiàn)只是應(yīng)用場(chǎng)景之一。

一般應(yīng)用應(yīng)用在展示大量?jī)?nèi)容或數(shù)據(jù)條目時(shí)，為了使用戶看到的內(nèi)容盡可能聚焦，避免信息過載，我們應(yīng)使用分頁(yè)器將內(nèi)容分成多頁(yè)展示。分頁(yè)器分為常規(guī)、簡(jiǎn)潔兩種類型；

常規(guī)分頁(yè)器

1）翻頁(yè)按鈕：用于在前后頁(yè)面之間翻頁(yè)導(dǎo)航功能;（必要）

2）當(dāng)前頁(yè)碼：高亮的當(dāng)前所在頁(yè)碼，告知用戶頁(yè)面中數(shù)據(jù)處于當(dāng)前位置;（必要）

3）普通頁(yè)碼：用戶點(diǎn)擊可快速切換至該頁(yè);（必要）

4）截?cái)喾?hào)：當(dāng)頁(yè)面過多時(shí)用于省略中間頁(yè)，同時(shí)作為快速導(dǎo)航及被省略頁(yè)碼的操作入口;（必要）

5）條目設(shè)置：用于設(shè)置每頁(yè)顯示條目數(shù)量;（可選）

6）總頁(yè)數(shù)：通過使用總頁(yè)數(shù)告訴用戶知道大概會(huì)有多少數(shù)據(jù)；（可選）

7）頁(yè)碼跳轉(zhuǎn)：幫助用戶從當(dāng)前頁(yè)面跳轉(zhuǎn)到其他某個(gè)頁(yè)面；（可選）

簡(jiǎn)潔分頁(yè)器

1）翻頁(yè)按鈕：用于在前后頁(yè)面之間翻頁(yè)導(dǎo)航功能；（必要）

2）頁(yè)碼提示：a、提示用戶當(dāng)前頁(yè)/總頁(yè)數(shù)；b、點(diǎn)擊出現(xiàn)現(xiàn)下拉選擇，用戶可以直接跳轉(zhuǎn)到某頁(yè)面；（可選）

 

3. 數(shù)據(jù)如何展示

3.1 從屬信息展示

通常為了提高用戶的快速瀏覽效率，減少次要信息的漏出。表格不會(huì)默認(rèn)展示所有的信息，一些次要的、不是必須要關(guān)注的數(shù)據(jù)內(nèi)容將其折疊起來，用戶有需要時(shí)可通過行展開的方式呈現(xiàn)。

方法一：使用嵌套子表格

將表格中父級(jí)行數(shù)據(jù)下的多條數(shù)據(jù)關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋，詳細(xì)的了解主數(shù)據(jù)中數(shù)據(jù)的含義。如下圖所示，就是在一個(gè)表格中還能嵌套另一個(gè)表格：

方法二：使用樹形表格 (也是表格的一種類型）

樹形表格是指表格的主要列的數(shù)據(jù)組織方式是一個(gè)樹結(jié)構(gòu)，他可以時(shí)是多級(jí)樹結(jié)構(gòu)的展現(xiàn)形式，對(duì)應(yīng)的列數(shù)據(jù)（多級(jí)）與標(biāo)題強(qiáng)相關(guān)。當(dāng)數(shù)據(jù)信息有清晰的層級(jí)關(guān)系時(shí)，可以使用樹表格。如下圖Demo所示：

方法三：使用可展開 (也是表格的一種類型）

表格行可以展開/折疊信息，一些次要的或擴(kuò)展內(nèi)容會(huì)被折疊起來，有必要操作或查看時(shí)可進(jìn)行展開，比如：可以是表單字段詳情、可以是介紹說明等。如下圖為騰訊投放廣告表格，他將一些延展的詳情數(shù)據(jù)收起，用戶可點(diǎn)擊展開：

 

3.2 單元格空數(shù)據(jù)展示

在表格字段展現(xiàn)中進(jìn)場(chǎng)會(huì)有某個(gè)數(shù)據(jù)為空的情況，這時(shí)候建議大家不要用戶“0”或“空白”展示。因?yàn)樵跓o數(shù)據(jù)/空的情況下用“0”容易誤導(dǎo)用戶數(shù)據(jù)是“0”，一般用會(huì)用“-”來表示數(shù)據(jù)為空（用戶慣性認(rèn)知）。

3.3 默認(rèn)排序

默認(rèn)情況下常以創(chuàng)建時(shí)間進(jìn)行排序，把最新創(chuàng)建的數(shù)據(jù)排在表格的最前面。因?yàn)橛脩袈窂绞莿?chuàng)建后對(duì)最新的操作評(píng)率較高，方便用戶查找。我們可以假設(shè)如果創(chuàng)建一條數(shù)據(jù)后，把最新數(shù)據(jù)放在最后一列，那么用戶在查找需要額外的搜索/篩選/使用分頁(yè)，增加了用戶的操作成本。如下圖所示可以默認(rèn)時(shí)間排序，也可以按升序排序：

3.4 數(shù)據(jù)的對(duì)齊方式

合適的對(duì)齊方式能夠提升數(shù)據(jù)的瀏覽效率，比如：常見的文本左對(duì)齊，數(shù)據(jù)類右對(duì)齊。表格內(nèi)信息的縱向列對(duì)齊符合格式塔中相近原則，它能夠很好將表格每列的數(shù)據(jù)形成一個(gè)個(gè)組的視覺效果。通過正確的對(duì)齊，會(huì)讓表格更加規(guī)范并易理解，從而快速提升數(shù)據(jù)的瀏覽、對(duì)比效率。

數(shù)據(jù)類型

數(shù)值類型右對(duì)齊：便于用戶直觀而又準(zhǔn)確地讀取數(shù)據(jù)，要做到一眼觀定、簡(jiǎn)潔明了。在表格中數(shù)值分布排列時(shí)，通常采用“右對(duì)齊”方式，既方便用戶快捷讀取數(shù)據(jù)，還可以使用戶進(jìn)行縱向數(shù)據(jù)對(duì)比。比如常見的金額、人數(shù)、大小等，可以通過數(shù)據(jù)位數(shù)的長(zhǎng)短直觀對(duì)比，因?yàn)樵诒砀裰袑?duì)比數(shù)字時(shí)，閱讀順序是看個(gè)位、十位、百位…等。注意：數(shù)據(jù)格式需要保持一致，避免出現(xiàn)格式不一致的情況，比如：100.89、100、100.1；應(yīng)該：100.89、100.00、100.10格式。

 

布爾型左對(duì)齊：比如常見的男/女、是/否、真/假等。

文本類型

固定或不固定長(zhǎng)度文本都是用右對(duì)齊，固定長(zhǎng)度是指文本長(zhǎng)度不會(huì)發(fā)生變化，比如：日期、手機(jī)號(hào)等；不固定長(zhǎng)度是指正常的項(xiàng)目描述、解釋說明、名稱之類格式和長(zhǎng)度都不固定。應(yīng)為左對(duì)齊符合中/英文的閱讀習(xí)慣，如下圖所示：

3.5 數(shù)據(jù)格式

規(guī)范數(shù)據(jù)表達(dá)，保證直觀準(zhǔn)確一致的理解數(shù)據(jù)，比如：數(shù)值用來表示計(jì)量大小，它可單獨(dú)出現(xiàn)或搭配數(shù)字符號(hào)進(jìn)行使用等一些規(guī)范。

大額計(jì)量

如果一個(gè)金額很大，那么數(shù)值中的“萬”“億”單位可采用漢字。如果一個(gè)數(shù)值很大，那么數(shù)值中的“萬”“億”單位可采用漢字。

 

數(shù)字脫敏

數(shù)據(jù)脫敏是指對(duì)某些敏感信息通過脫敏規(guī)則進(jìn)行數(shù)據(jù)變形。下圖為通用場(chǎng)景，遇到數(shù)據(jù)安全性較強(qiáng)的業(yè)務(wù)場(chǎng)景，可根據(jù)業(yè)務(wù)場(chǎng)景自行調(diào)整。下圖為常見脫敏類型及通用使用方式：

時(shí)間日期格式

數(shù)值符合展現(xiàn)

在表格中數(shù)值用來表示計(jì)量大小，它也可單獨(dú)出現(xiàn)或搭配數(shù)字符號(hào)進(jìn)行使用。

計(jì)量單位

在表格中，計(jì)量單位默認(rèn)放在表頭，并默認(rèn)右對(duì)齊。如下圖所示：

 

本章總結(jié)

本章屬于本篇分享的第二章節(jié)。我們首先分析了提升表格效率的的兩大因素，分別是易讀性和易操。其次我們通過分析“表格內(nèi)部構(gòu)成元素設(shè)計(jì)”和“數(shù)據(jù)如何展示”的設(shè)計(jì)手段來達(dá)到提高表格的易讀性。

其中“表格內(nèi)部構(gòu)成元素設(shè)計(jì)”章節(jié)講述了將表格內(nèi)部元素表頭、表體、表尾拆解并將設(shè)計(jì)技巧和設(shè)計(jì)手段進(jìn)行分享，目的是想幫助大家在設(shè)計(jì)表格時(shí)能夠通過這些技巧和手段提升表格的易讀性。“數(shù)據(jù)如何展示”章節(jié)講述了從各個(gè)維度思考如何正確將表格中的數(shù)據(jù)如何正確展示。

 

文章總結(jié)

根據(jù)上文我們可總結(jié)到表格是“將復(fù)雜的內(nèi)容進(jìn)行「歸納整理」，將「信息展示」給用戶，幫助用戶高效率的進(jìn)行「數(shù)據(jù)分析」”。所以表格的作用是常見且最有效的信息組織整理手段，我們想要提升表格的體驗(yàn)就需要著手從“易讀性”和“易操作”角度出發(fā)。本文側(cè)重拆解了什么是表格以及分析了如何提高表格的“易讀性”，下篇分享將以“易操作”角度繼續(xù)分享如何提升表格的體驗(yàn)。

 

參考文獻(xiàn)

http://www.woshipm.com/pd/1655376.html

http://www.woshipm.com/ucd/714641.html

http://www.woshipm.com/pd/661699.html

http://www.woshipm.com/pd/5323117.html

https://ant.design/components/table-cn/