中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：在B端頁面中，表格也是常見的數(shù)據(jù)展示方式。合理的表格設(shè)計有助于清晰、高效地展示數(shù)據(jù)，提升用戶的可讀體驗。那么，在設(shè)計過程中，設(shè)計師應(yīng)當(dāng)依照什么原則進(jìn)行B端頁面的表格設(shè)計？本篇文章里，作者總結(jié)了B端頁面的表格設(shè)計流程，一起來看一下。

本文對表格設(shè)計進(jìn)行了較為全面的總結(jié)，對一些基礎(chǔ)場景構(gòu)成提出了對應(yīng)的設(shè)計規(guī)范建議。全文12606字閱讀需要40分鐘，請耐心查看。

一、表格定義

表格是一種基礎(chǔ)的數(shù)據(jù)展示形式，用來采集、整理、對比、分析數(shù)據(jù)信息的二維矩陣。幾乎所有B端產(chǎn)品都要借助表格查詢與處理數(shù)據(jù)，因此表格也被公認(rèn)為數(shù)據(jù)最為清晰、高效的表現(xiàn)形式。

內(nèi)容信息的排列、數(shù)據(jù)信息的展示、數(shù)據(jù)篩選工具欄的使用，數(shù)據(jù)操作按鈕的擺放，這些都有對應(yīng)的表格來解決，表格的形式也多種多樣。表格的合理布局是提高表格可讀性、感知不同數(shù)據(jù)信息之間關(guān)聯(lián)與區(qū)別的重要手段。

在我們了解表格之前先從幾個維度來探討一下列表、表格、表單之間的聯(lián)系與對比。

列表，英文釋義為List。以表格為容器，裝載著文字或圖表的一種形式，叫列表。

• 展示形式：標(biāo)簽+數(shù)據(jù)+操作按鈕；
• 數(shù)據(jù)結(jié)構(gòu)：一對多；
• 常見模式：待辦事項、走查清單、動態(tài)等；
• 前端類別：有序列表（<0l><li>）和無序列表(<ul><li>并列關(guān)系)。

表格，英文釋義為Table，又稱為表，即是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。主要承載數(shù)據(jù)的歸納、展示與對比的功能，是列表的一種。

• 展示形式：標(biāo)簽+數(shù)據(jù)+操作按鈕；
• 數(shù)據(jù)結(jié)構(gòu)：一對多；
• 常見模式：excle；
• 前端類別：行（<tr>）、列(<td>)、表頭（<th>）ps：在前端眼中列是由行拼接組成，沒有單獨列的概念。

表單，英文釋義為Form。表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能。（詳見我的文章《B端頁面——詳細(xì)表單設(shè)計流程》）

• 展示形式：標(biāo)簽+輸入域+提示信息+操作按鈕；
• 數(shù)據(jù)結(jié)構(gòu)：一對一；
• 常見模式：登錄頁、個人信息錄入等；
• 前端類別：這里的數(shù)據(jù)類型較多例如文本text、密碼輸入password、單選框radio、復(fù)選框checkbox等。

總結(jié)

二、設(shè)計原則與目標(biāo)

1. 設(shè)計原則

其基本設(shè)計原則是業(yè)務(wù)的全面整合，流暢的閱讀體驗，重要信息的快速檢索，便捷的業(yè)務(wù)處理。滿足業(yè)務(wù)需求+符合用戶心智模型。

1）好查找

表格應(yīng)該層級分明、一目了然，讓用戶更多地感受表格承載的內(nèi)容信息而不是表格的形式。

對于提高表格查找效率，這里給出一些我個人的建議：

• 保持一致，保持表格外觀、布局一致，外觀相同的表格用戶會更快地接受，用戶一次學(xué)習(xí)就可通用查看，憑肌肉記憶快速查找關(guān)鍵信息；
• 呼吸適中，表格內(nèi)容區(qū)采用合適的行高和列寬，可以幫助更快地獲取信息；
• 視覺降噪，通過字體、字號、顏色等多維度進(jìn)行視覺降噪處理。

2）好處理

表格應(yīng)該是可交互的，對于查找好的數(shù)據(jù)能讓用戶迅速找到對應(yīng)操作進(jìn)行決策，如導(dǎo)出、編輯等的快捷操作處理。

處理交互提效建議：

• 親密性，數(shù)據(jù)選擇與數(shù)據(jù)操作保持親密性；
• 操作露出與操作隱藏，不同業(yè)務(wù)操作選擇不同的操作形式，比用戶多想一步。

2. 設(shè)計目標(biāo)

對數(shù)據(jù)進(jìn)行高效地查找、新增、編輯、刪除等操作是用戶對表格使用的終極目標(biāo)。

三、表格構(gòu)成

從視覺角度出發(fā)將表格分為：標(biāo)題、篩選操作區(qū)、表頭、內(nèi)容、底欄五部分進(jìn)行構(gòu)建。

1. 標(biāo)題

對表格信息內(nèi)容的整體概括，讓用戶對表格用途一目了然。標(biāo)題內(nèi)容可以包含數(shù)據(jù)來源、日期、地區(qū)等信息。同時在具體業(yè)務(wù)中也可結(jié)合圖標(biāo)對標(biāo)題進(jìn)行補(bǔ)充，幫助用戶更形象地理解表格傳達(dá)的內(nèi)容。

標(biāo)題作為重要的表示元素一般會放在表格的左上角，符合用戶的閱讀習(xí)慣，同時也能突出標(biāo)題的重要性。但在有些情況嚴(yán)格意義上的標(biāo)題則不存在，會被頁面標(biāo)題、面包屑或其他內(nèi)容代替，主要看其能否表達(dá)對表格的概括。

2. 篩選操作區(qū)

兩個區(qū)域常被稱為工具欄，其實兩個區(qū)的功能各不相同，也可以分開講篩選區(qū)與操作區(qū)。

篩選操作區(qū)指方便用戶快速定位查詢數(shù)據(jù)與操作數(shù)據(jù)，是承載表格核心功能“增刪改查”的重要橋梁。篩選操作區(qū)的排序方式對整個表格“好查找”起到了至關(guān)重要的左右，對不同的業(yè)務(wù)進(jìn)行分析對篩選操作區(qū)進(jìn)行排序變化。

3. 表頭

表格信息是對數(shù)據(jù)屬性的分類或基本概括，可以理解為表格總結(jié)，是用戶快速瀏覽表格布局的關(guān)鍵信息，表頭字段應(yīng)當(dāng)符合人們的思維慣性，保證大部分用戶能理解數(shù)據(jù)。

表頭也可以指行標(biāo)簽，是對所屬行或列的描述。表頭也可以承擔(dān)一些簡單的篩選、凍結(jié)與排序，方便用戶對具體的行列進(jìn)行篩選操作。

4. 內(nèi)容

內(nèi)容就是表格的主體區(qū)，表格的全部內(nèi)容信息都在這里獲取。內(nèi)容區(qū)是由一個個的單元格組成，單元格所承載的內(nèi)容就是內(nèi)容的基本單位。

單元格的排列組成行或列，行/列中的數(shù)據(jù)可以是文本、計數(shù)、百分比、狀態(tài)、操作等任何形式，在表尾還可以進(jìn)行數(shù)據(jù)統(tǒng)計，例如合計、平均值等。

5. 底欄

底欄位于表格最下方，一般展示正文的數(shù)據(jù)概要信息，有時也做數(shù)據(jù)的分類統(tǒng)計，或者配合篩選操作區(qū)放置批量處理操作、備注說明等內(nèi)容。

四、表格規(guī)范

1. 標(biāo)題規(guī)范

表格標(biāo)題的示例展示：

示例：teambition項目截圖

標(biāo)題同時承擔(dān)切換視圖與分組的功能操作；飛書會議室管理標(biāo)題隨著右側(cè)架構(gòu)的變化進(jìn)行變化，提醒用戶當(dāng)前表格顯示內(nèi)容；Prowork事項標(biāo)題內(nèi)容帶表格展示日期的區(qū)間；TAPD查找過濾表格標(biāo)題位于表格左上方鮮明扼要的表格展示。

上圖標(biāo)題使用圖標(biāo)樣式，增加表格特征與歸屬感，強(qiáng)化品牌調(diào)性。

2. 表頭規(guī)范

1）表頭類型

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

1. 純文本表頭——僅起到解釋數(shù)據(jù)屬性的作用；
2. 多功能表頭——可以篩選、排序、搜索相關(guān)數(shù)據(jù)；
3. 多級表頭——信息分類層級較多數(shù)據(jù)結(jié)構(gòu)較為復(fù)雜的情況下使用。

2）名稱簡化

表頭展示要注意以下幾點：

• 表頭標(biāo)簽精簡。檢驗標(biāo)準(zhǔn)：少一個字就會改變標(biāo)簽原意。
• 表頭的表現(xiàn)形式與正文稍作區(qū)分，來凸顯表頭的可識別性。
• 表頭標(biāo)簽與所在列數(shù)據(jù)對齊，完整顯示標(biāo)題。

可去掉表頭：表格數(shù)據(jù)維度大，可以通過表格數(shù)據(jù)輕松判斷表頭標(biāo)簽，表頭標(biāo)簽就可以省略。

例如電子郵箱的收件表格，每列數(shù)據(jù)的表示度都很高，去掉表頭也能輕易閱讀。在ProWork中待辦事項表格也省略列表頭。

3）提示信息

當(dāng)表頭標(biāo)簽出現(xiàn)行業(yè)壁壘的專有名詞或生僻字時，新用戶期望搞清楚標(biāo)簽的含義，這時就要借用提示信息來對當(dāng)前標(biāo)題進(jìn)行解釋說明，老用戶也不會因此而感覺頁面冗雜。

4）表頭交互

功能復(fù)合型表頭

除了容納行標(biāo)簽之外，表頭也可以添加排序、搜索、篩選等功能，這些功能受列的影響，一般只能做單次篩選。通過對表頭標(biāo)簽的篩選可快速完成篩選條件。

放置在表頭標(biāo)簽上的篩選，受列內(nèi)容的影響，一般做單次篩選。通過對表頭標(biāo)簽旁按鈕的點擊，使用戶更快捷進(jìn)入到自己的篩選條件中。

通常，表單越左的列數(shù)據(jù)越重要的，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足。

5）表頭篩選

表頭篩選是一種列表內(nèi)置篩選形式，類似Excel表格的操作。表頭篩選和篩選區(qū)的篩選相比，只能篩選一列數(shù)據(jù)，能節(jié)約一定的空間。

雖然表頭篩選能在一定程度上節(jié)約空間，但對于復(fù)雜業(yè)務(wù)的產(chǎn)品來說，不推薦使用，原因如下：數(shù)據(jù)信息列多，高頻篩選功能可能會被遮蓋，表頭復(fù)雜影響用戶表格閱讀。

6）表頭排序

通過對表格信息的排序可以幫助用戶快速抓取有用的信息。

通常默認(rèn)兩種排序方式：升序/降序。

這種排序一般在表頭觸發(fā)，可以是正序或者倒序，按照一定的邏輯進(jìn)行排列，例如是時間的表頭則表示最近時間——最遠(yuǎn)時間或最遠(yuǎn)時間——最近時間排序。切換排序的邏輯一般認(rèn)為是默認(rèn)——升序/降序——降序/升序——默認(rèn)之間來回切換，具體順序根據(jù)業(yè)務(wù)確定。表頭名稱和切換圖標(biāo)都設(shè)置成操作熱區(qū)更利于用戶操作。

特殊排序方式較多時可以采用下拉選擇直接有效展示，減少用戶反復(fù)操作。

7）固定表頭

表格垂直滾動時，對表頭進(jìn)行固定處理，可以幫助用戶更快地找到單元格的屬性和含義，尤其是單元格屬性信息數(shù)據(jù)沒有特征時（比如都是數(shù)字、百分比、姓名等）固定表頭可以大大提高使用效率。

8）可配置列

可配置列與配置篩選條件的功能類似，同樣是考慮到不同角色的用戶，查看數(shù)據(jù)的視角不一樣，對應(yīng)的關(guān)心的字段也會不一樣。

3. 單元格規(guī)范

1）單元格

單元格規(guī)范定義：字號、文字行高、上下左右邊距、表格行高，這些部分要怎樣確定呢？

① 字號

在表格設(shè)計中一般采用正文字號大小按照具體業(yè)務(wù)的使用規(guī)范在12-16px之間，我一般在頁面中使用14px大小的字號作為正文字號。

② 文字行高

與文字字號無關(guān)，是文字及其邊距在頁面上所占的位置高度，一般設(shè)置為字號的1.2-1.8倍大小，文字內(nèi)容水平居中。

③ 上下左右邊距

上下邊距可以設(shè)置為字號大小的1-1.5倍大小，左右邊距根據(jù)業(yè)務(wù)需求設(shè)置固定大小12-24px或者更寬均可，但要注意同一產(chǎn)品表格規(guī)范要保持相同。

④ 表格行高

在前面三項配置完成后就得到了具體的表格行高。單元格較為常見的高度區(qū)間在56-80之間。由于設(shè)備的差別，為了讓產(chǎn)品都能有最好的展示效果，在表格上也會設(shè)置不同的行高，讓用戶根據(jù)不同的場景進(jìn)行選擇緊湊、舒適、寬松的行號模式。

2）盒子模型

盒子模式是最為基礎(chǔ)的前端框架，每個頁面都是由無數(shù)個盒子構(gòu)成。

• Margin（外邊距）：指內(nèi)容的外邊界與相鄰元素之間的間距，外邊距為透明。
• Border（邊框）：指環(huán)繞在內(nèi)容周圍的邊框路徑。
• Padding（內(nèi)邊距）：指內(nèi)容的外邊界在其他子元素的間距。
• Content（內(nèi)容）：指最基礎(chǔ)的內(nèi)容元素。

想要知道線上頁面的具體數(shù)據(jù)，可以用谷歌瀏覽器更多工具——開發(fā)者工具進(jìn)行檢查。

如下圖飛書的會議室表格，Padding內(nèi)邊距為12px/8px，在單元格中對應(yīng)左右邊距12px/上下邊距8px；表格行高為57.26px，正文本字號為14px；margin外邊距為4px，可以看到兩行文本之間的間距。用這種方法可以通過多個盒子的查找來參考線上頁面的單元格規(guī)范，來進(jìn)行我們自己業(yè)務(wù)產(chǎn)品中的單元格規(guī)范。

3）單元格合并

對于特殊的數(shù)據(jù)類型多行或者多列共用同一數(shù)據(jù)時，可以進(jìn)行單元格合并如下圖。

4）關(guān)鍵數(shù)據(jù)

單元格數(shù)據(jù)一般有文字、圖標(biāo)、頭像、進(jìn)度等，而對于較為重要的數(shù)據(jù)可以進(jìn)行關(guān)鍵數(shù)據(jù)的標(biāo)識設(shè)計，這些數(shù)據(jù)往往是用戶最關(guān)心的數(shù)據(jù)，例如數(shù)據(jù)狀態(tài)、數(shù)據(jù)的上升或下降等。

在具體業(yè)務(wù)中，如果你找對了用戶想看的關(guān)鍵數(shù)據(jù)，將會大大提升用戶體驗，反之則干擾用戶查找信息。這就要求我們在前期調(diào)研時用戶使用場景的高度還原，盡可能多地站在用戶的角度思考。

① 標(biāo)簽

關(guān)鍵數(shù)據(jù)較多，顏色與視覺重量要做區(qū)分。

② 圖標(biāo)

名稱與文件類型圖標(biāo)區(qū)分。

③ 人員信息

人員信息展示在表格中也十分常見，通常會用頭像+名稱的方式，例如下圖temabition和飛書中對人員信息的展示。

④ 進(jìn)度條

進(jìn)度條或簡單的數(shù)據(jù)圖，它更能直觀地展示數(shù)據(jù)的進(jìn)度狀態(tài)，方便用戶對數(shù)據(jù)信息做判斷如下圖。

⑤ 空表格

表格數(shù)據(jù)為空時要給予一定的提示信息或快捷操作，讓用戶更快地進(jìn)行對數(shù)據(jù)的操作。

⑥ 空單元格

表格中的空數(shù)據(jù)要使用“-”短橫線符號進(jìn)行填充，數(shù)據(jù)為“0”時請使用“0”填充，避免數(shù)據(jù)為空造成用戶困擾。

⑦ 數(shù)據(jù)過多

單元格內(nèi)數(shù)據(jù)信息過多 時可以采用“…”進(jìn)行省略展示，鼠標(biāo)懸?；螯c擊查看省略的內(nèi)容信息。

5）單元格交互（可彈窗、可卡片、切換視圖）

① 單元格編輯

單元格編輯是對單條數(shù)據(jù)的修改，直接在單元格編輯信息的形式有很多，針對不同的數(shù)據(jù)提供對應(yīng)的編輯方案。

編輯名稱：鼠標(biāo)移入顯示編輯圖標(biāo)，點擊圖標(biāo)按鈕后原位光標(biāo)編輯，編輯完成后隨意點擊空白處完成編輯退出光標(biāo)。

狀態(tài)編輯：下拉選擇切換狀態(tài)。

人員編輯：下拉選擇切換人員并提供模糊搜索對人員信息進(jìn)行搜索。

時間編輯：下拉時間選擇器，默認(rèn)展示當(dāng)前時間，點擊日期切換時間，切換后確定完成編輯。

長文本編輯：彈出簡易富文本編輯器，輸入編輯內(nèi)容后，點擊空白處退出完成編輯。

上述羅列的常見單元格編輯形式供您參考，針對不同的業(yè)務(wù)性質(zhì)對單元格采用不同的交互形式。

② 視圖切換

可以通過視圖切換查看更多細(xì)節(jié)，例如在teambition中支持對任務(wù)的表格/列表/看板三種視圖的查看，每種視圖的側(cè)重點不同，可以適應(yīng)不同角色用戶的不同專注點。

③ 信息完整度

當(dāng)單元格內(nèi)數(shù)據(jù)過長進(jìn)行”…”省略處理后，通過鼠標(biāo)hover彈出氣泡來展示完整的數(shù)據(jù)信息，這時氣泡的位置出現(xiàn)在單元格的什么方向最為合理呢？為此，我找到了下面三種做法。

這里我推薦的是答案例1的做法，把hover氣泡顯示在單元格的上方，因為這樣設(shè)計符合用戶的視覺動線，用戶從左到右從上到下對表格進(jìn)行瀏覽查找，氣泡出現(xiàn)在上方可以不干擾用戶緊接著的發(fā)生的視覺動作。

還要注意氣泡的面積不宜過大，如業(yè)務(wù)必要可在氣泡中增加滾動。

除了對文字信息的氣泡展示以外，還有可以對信息進(jìn)行更多收納，利用卡片進(jìn)行詳細(xì)信息展示，可以展示文字、圖形、數(shù)據(jù)圖等更多維度的信息。

4. 行規(guī)范

1）行高規(guī)則

單元格數(shù)據(jù)內(nèi)容不同如何確定行高？

對于單行顯示數(shù)據(jù)內(nèi)容的表格，建議行高約為內(nèi)容高度的2.5-3倍；對于多行顯示數(shù)據(jù)的表格，建議行中內(nèi)容的最高點與最低點到行框的上下邊距略小于文字高度。

① 固定表格行高

當(dāng)數(shù)據(jù)有單行信息展示有多行信息展示時（或長度不固定），要定義內(nèi)容的行數(shù)（根據(jù)業(yè)務(wù)），根據(jù)行數(shù)確定行高多出的內(nèi)容做省略處理。

固定行高時可以規(guī)范幾種不同的表格行高，例如在我日常工作中規(guī)定了3種行高56px80px110px，行高較高時，我們數(shù)據(jù)內(nèi)容都進(jìn)行居中對齊就會有一些問題。有些單元格只有一行信息，有些有多行信息，會使頁面看起來更混亂，信息查找速度降低（如圖1）。

對此我們進(jìn)行了進(jìn)一步的規(guī)范，當(dāng)行高小于80px時數(shù)據(jù)信息居中對齊，表格行高大于80px 時數(shù)據(jù)信息都居頂對齊，如下圖2。頂對齊可以讓用戶查找信息時有坐標(biāo)依據(jù)，更加快速。

② 流體表格行高

在elementUI組件中，表格行高跟隨行內(nèi)占用最多行數(shù)的單元格變化，設(shè)置固定的上下邊距，表格行高隨著數(shù)據(jù)信息的換行而變化如下圖。

2）行的視覺強(qiáng)調(diào)

為了強(qiáng)調(diào)行內(nèi)信息的連續(xù)性，或采用行的分割線或者斑馬紋來進(jìn)行行的強(qiáng)調(diào)。

分割線的分割較為弱，對用戶的視覺干擾小。

斑馬紋又稱作隔行換色、行的交替樣式。它能很好地區(qū)分相鄰兩行，有效降低讀錯行的情況，同時能夠加強(qiáng)對用戶橫向閱讀的引導(dǎo)。但在設(shè)計時要盡量的減少色的反差，還要注意區(qū)分hover態(tài)與斑馬紋，避免造成視覺干擾，可以根據(jù)實際情況添加1px的行版框。

3）交互

① 行新增

對于與一些較輕量的數(shù)據(jù)新增可以采用表格新增行內(nèi)容。新增行后，要定位高亮顯示所在行，讓用戶快速聚焦。

新增完成后可延時幾秒高亮消失，避免過度干擾用戶。

② 行編輯

行內(nèi)信息的編輯可以在鼠標(biāo)hover 時單個進(jìn)行編輯，也可以在行尾操作區(qū)點擊編輯按鈕進(jìn)行全部編輯操作。

當(dāng)然行的編輯操作是直接在表格內(nèi)操作還是彈窗、抽屜、新頁面的交互選擇，要根據(jù)具體的業(yè)務(wù)內(nèi)容與編輯信息體量來判斷，這里建議與新增行信息的交互選擇相同，如果新增操作是表格原位新增行那么編輯也可以采用同樣的交互方式。

③ 行排序

按邏輯排序

拖曳排序

拖拽排序為用戶的自定義排序，在用戶拖拽時頁面布局保持不變，適用于數(shù)據(jù)量較小有自定義排序的情況下。

• 拖拽前：要讓用戶知道這個表格行是可以拖拽的，可以在每行首添加圖標(biāo)、鼠標(biāo)hover改變光標(biāo)樣式等。
• 拖拽時：要讓用戶知道拖動的動作的效果，對于拖出位置給予一定的樣式保留，讓用戶知道從哪行移出的，對于目標(biāo)位置，給予一定的插入位置符號提示（虛線）或拖入后預(yù)覽反饋。
• 拖拽后：及時更新表格信息，如有排序編號等數(shù)字可在排序后更新。

④ 行密度調(diào)節(jié)

用戶使用的顯示屏都不盡相同，同一個行高設(shè)置在不同的設(shè)備中展示的效果也不大一樣，會影響用戶的閱讀效率，對行高的密度設(shè)置可以提高用戶體驗。

較小的行高可以增加信息的展示效率，一屏展示更多的內(nèi)容，但也容易在高密的表格中迷失。低密度的行高更高，數(shù)據(jù)的的層級展示就更加清晰。

具體的設(shè)置形式，可以根據(jù)表格的具體情況，操作按鈕少時，可直接放與表格上方做成標(biāo)簽的樣式讓用戶進(jìn)行切換，表格復(fù)雜按鈕較多時，可以收起在工具欄中，進(jìn)入設(shè)置再更換顯示密度。

⑤ 展開行

展開信息

行的展開與折疊，可以把行內(nèi)無法展示的附加信息放在行下折疊收起，點擊行首的展開按鈕即可查看，防止用戶因彈出新交互而迷失方向。

折疊的信息適合重要度低的主行展示不下的輔助信息，也可以避免表格的橫向滑動，但如果想要同時查看多條展開行，則需要多次店家展開按鈕進(jìn)行查看。

⑥ 展開表格

與展開行類似，這里展開內(nèi)容為與當(dāng)前行相關(guān)的另一子表格，這個表格有獨立的表頭、行、列，子表格用于對當(dāng)前行信息的補(bǔ)充與說明。

⑦ 展開樹表格

展開的表格與當(dāng)前表格共用同一表頭，整體表格呈樹型，展開的表格與當(dāng)前行呈父子關(guān)系。

5. 列規(guī)范

1）列寬規(guī)則

① 列的寬度

列寬的設(shè)置對于用戶的高效閱讀還是很有作用的，在設(shè)計時要根據(jù)具體的業(yè)務(wù)信息進(jìn)行分析。

列信息內(nèi)容長度固定時：（例如手機(jī)號、性別、身份證號等）可以設(shè)置為固定的列寬。

列信息內(nèi)容長度不固定時：要根據(jù)產(chǎn)品設(shè)置的最大字符數(shù)與用戶數(shù)據(jù)來進(jìn)行設(shè)置。

如組織名稱，字符限制為60，如果表格數(shù)據(jù)內(nèi)容很少，可以全部展示60個字符時則全部展示；當(dāng)內(nèi)容較多時要根據(jù)大部分的用戶數(shù)據(jù)設(shè)置表格中最多展示的字?jǐn)?shù)（例如組織名稱：某某某集團(tuán)有限公司市場拓展與服務(wù)部第一黨支部；某某某集團(tuán)有限公司產(chǎn)品事業(yè)部第一黨支部……）。

大部分?jǐn)?shù)據(jù)都是某公司名稱前綴的展示信息，在設(shè)置展示內(nèi)容時最少也要保證公司名稱前綴之后三個字的展示，才能讓用戶大致區(qū)分?jǐn)?shù)據(jù)差異。

② 列的間距

列與列之間的間距保持相同大小，首列尾列與表格邊緣的間距保持相同。

列的間距n1 保持不變，n2定義最小值，隨著頁面的尺寸自適應(yīng)變化（我的參考：n1固定值定義為12px，n2最小值定義為24px）。

③ 列的數(shù)量

列的數(shù)量建議最多展示9條，因為人們的記憶在7±2之間，數(shù)據(jù)太多用戶會找不到重點。但也不是必須，根據(jù)業(yè)務(wù)需求，如果需要大量數(shù)據(jù)展示時也要展示，因為視覺永遠(yuǎn)低于業(yè)務(wù)（好用比好看更重要）。

列信息從左往右視覺權(quán)重程度逐漸降低，最后一列權(quán)重高（以眼動實驗或點擊數(shù)據(jù)為依據(jù)得出權(quán)重高低），所以在我們的列信息展示把更重要的信息放在左邊。展示不下的數(shù)據(jù)放入詳情頁。

2）列的視覺強(qiáng)調(diào)

列的視覺也可以根據(jù)業(yè)務(wù)需求做引導(dǎo)，一般配合排序或比較使用，比如數(shù)據(jù)或同類信息的對比性。

常見的表現(xiàn)形式有兩種：分割線、填充底色。

3）列的交互

① 列寬自定義

在一些用戶高度自定義表格中，數(shù)據(jù)的列寬不好確定的情況下，可以允許用戶對列寬進(jìn)行調(diào)節(jié)。

通過光標(biāo)的變化提示列寬自定義操作，拖動可完成列寬設(shè)置。

② 列自定義

列數(shù)據(jù)還可以根據(jù)用戶需求進(jìn)行自定義設(shè)置，可以選擇要展示的列，也可以對列進(jìn)行排序。

例如下面兩個案例，都是在表格右上方的設(shè)置按鈕對表格進(jìn)行設(shè)置，清晰高效。

通常系統(tǒng)會記住你上次的自定義設(shè)置，作為這次展示的默認(rèn)形式。

③ 滾動與固定

表格數(shù)據(jù)量過大頁面無法展示時，不得不采用水平滾動或橫向拖拽來閱讀數(shù)據(jù)。

滾動帶給用戶的是不穩(wěn)定性，容易迷失，就需要固定重要信息作為參照讓用戶穩(wěn)定下來。這時固定首列一般是最優(yōu)解，讓用戶滾動數(shù)據(jù)時也能得到固定的參考，提高查找效率。

同時固定表尾可以方便用戶找到對應(yīng)信息后及時操作。如下圖element組件庫：

6. 表格整體規(guī)范

1）視覺降噪

① 留白

表格留白，包括表格內(nèi)部空間（padding）的留白和視覺留白。

內(nèi)部空間要保證表格的可讀性，視覺留白可以考慮操作按鈕hover展示、更多收起等，表格顏色區(qū)分、icon 等手段來優(yōu)化表格信息使其看起來更加易讀。

② 減少分隔線

不同的分隔線適用于不同的業(yè)務(wù)表格：

• 橫向分隔線：可以適用大部分?jǐn)?shù)據(jù)集表格業(yè)務(wù)，是目前最常見的一種類型。
• 縱向分隔線：適用與對列之間產(chǎn)生數(shù)據(jù)對比的表格業(yè)務(wù)，可以局部適用列分隔線或斑馬線。
• 矩陣分隔線：適用于數(shù)據(jù)非常嚴(yán)謹(jǐn)?shù)臄?shù)據(jù)場景，或者是表格沒有空間留白的情況采用矩陣分隔線。
• 極簡留白：表格留白空間足夠，可以清晰地區(qū)分?jǐn)?shù)據(jù)信息，在閱讀時不需要適用輔助幫助的，可以采用此種樣式。

分隔線要在數(shù)據(jù)允許的情況下盡量減小視覺占比，強(qiáng)調(diào)數(shù)據(jù)之間的對比與閱讀效率。

最好不使用斑馬線，對于同一類數(shù)據(jù)來說斑馬線的使用是沒有必要的，斑馬線的視覺占比較重，雖然對數(shù)據(jù)的區(qū)分最明顯，但也是最干擾視覺效率的分隔線。

可以省去分隔線，對于數(shù)據(jù)項較小的表格來說，可以嘗試去掉分隔線。由于表格數(shù)據(jù)量小，表格內(nèi)有合適的留白，也可以獲得清晰了然的表格。

③ 盡量以黑白為主

表格的顏色盡量采用黑白色，較多的顏色會造成視覺層級的混亂，讓用戶迷失不知道什么是重要信息。在需要引導(dǎo)的地方采用顏色可以增強(qiáng)視覺層級，獲得用戶的更多關(guān)注。

④ 克制使用圖標(biāo)

圖標(biāo)的使用可以更形象地傳達(dá)信息，但在嚴(yán)謹(jǐn)?shù)谋砀裰幸M量減少圖標(biāo)符號的使用，因為圖標(biāo)符號可能會使你本就繁多信息的表格變得更加復(fù)雜，而且為了避免用戶對圖標(biāo)產(chǎn)生奇異還會加上文字說明，這樣一來就會更加復(fù)雜。去除不必要的視覺干擾對表格來說是十分必要的。

3）操作交互

表格的操作分三類討論：單行操作、批量操作、全局操作。

三類操作是針對操作對象范圍而命名的，單行操作是針對一行信息進(jìn)行操作，例如編輯、查看詳情等；批量操作是針對部分/全部信息進(jìn)行批量操作，例如刪除、導(dǎo)出等；全局操作是針對全部信息進(jìn)行操作，例如新增等。

針對每一種操作類型進(jìn)行不同的布局規(guī)劃是提高表格“好處理”的重要手段。

① 單行操作

單行操作這里把針對單元格的內(nèi)聯(lián)操作也納入其中。

• 內(nèi)聯(lián)操作 ：是針對單個單元格的操作，具體操作形式前面單元格已做詳細(xì)闡述。
• 單行操作： 一般操作放置在表格的最后一列。

操作項聚合

一般采用帶顏色的文字作為操作按鈕區(qū)分，當(dāng)操作項不超過3個時直接展示，4個及以上操作時操作項采用“···”進(jìn)行收起，點擊更多彈出操作。

實例展示

對于這樣的多個操作因數(shù)據(jù)不同操作不同的狀況要怎樣進(jìn)行設(shè)計呢，如下圖：

這種可以有效的提高誤操作但占用較大空間；用上述收起方案可以解決誤操作和占用空間問題，但展開后操作項各不相同會讓用戶迷茫。

如果沒有足夠空表格空間，可以把操作項都放在詳情頁處理操作的方式，如下圖單擊首項進(jìn)入表格詳情。

從開發(fā)來講迭代更加方便，節(jié)約開發(fā)成本；從用戶來講，界面認(rèn)知成本低，利于用戶學(xué)習(xí)操作；從“好處理”原則上說也可以讓用戶明顯認(rèn)知目標(biāo)操作，不會產(chǎn)生誤操作，有利于用戶對信息的獲取。

操作按鈕

可以對通俗的操作按鈕使用圖標(biāo)表示，但操作項的形式需保持一致，建議采用文字直截了當(dāng)?shù)恼故靖痈咝??！?/p>

隱藏操作項

也可以對單行操作采用hover 展示，單擊后根據(jù)業(yè)務(wù)類型展示氣泡、卡片、彈窗、抽屜、跳轉(zhuǎn)等交互（可以查看表單頁面文章了解詳情）。

② 批量操作

批量選擇

批量選擇一般在表格首列采用復(fù)選框進(jìn)行選擇，可以選擇單項/多項/全部。

復(fù)選框位置

在首列，可以在不查看表格詳細(xì)內(nèi)容的前提下進(jìn)行選擇；在尾列，需要查看所有的表格信息后決定是否進(jìn)行選擇。

復(fù)選框選擇范圍

對樹表格的選擇規(guī)范，表頭全選時父表格與子表格內(nèi)容都全選；父表格不勾選時下屬的子表格都不被選擇；也可以只勾選子表格不勾選父表格。

批量選擇范圍

可以進(jìn)行篩選選擇，表現(xiàn)為表頭復(fù)選框右側(cè)的下拉操作，常用于用于業(yè)務(wù)復(fù)雜場景。

可以篩選狀態(tài)也可以篩選當(dāng)頁或者全部頁，選擇時告知用戶是否是當(dāng)頁還是全部頁。

已選項展示

告知用戶已選項數(shù)，最好跟在復(fù)選框后方便查看。

③ 批量操作

操作按鈕位置

批量操作與批量選擇是配合使用關(guān)系，按使用場景選擇同時放于表格上方、下方或同時放置，在選中復(fù)選框后激活批量操作按鈕，符合用戶心理預(yù)期，節(jié)省操作時間。

隱藏操作

有的表格的設(shè)計會對批量操作進(jìn)行隱藏在勾選時才展示，這樣操作對新用戶不太友好，新用戶無法預(yù)知批量操作有哪些，有可能會找不到“導(dǎo)出”按鈕以為沒有上線此功能，在設(shè)計表格時要考慮這個問題。

二次確認(rèn)

需要對一些批量操作進(jìn)行二次確認(rèn)，一般采用模態(tài)彈窗對用戶進(jìn)行強(qiáng)打斷，以確保用戶不是誤點。

操作完成后提示用戶操作結(jié)果，無任何操作后15秒消失。

④ 全局操作

操作布局

全局操作一般位于表格最上方，對全部表格起到約束統(tǒng)籌作用，操作對全部表格生效。

操作樣式

• 視覺：主按鈕一般為主色填充，次按鈕為灰色描邊，突出主按鈕樣式。
• 交互：一般點擊添加類按鈕，會出現(xiàn)包含添加項目數(shù)據(jù)的表單。

表單設(shè)計注意點：

創(chuàng)建數(shù)據(jù)應(yīng)填寫最小數(shù)據(jù)項，例如Prowork只填寫項目名稱就可以創(chuàng)建新項目，讓用戶用最小成本創(chuàng)建數(shù)據(jù)可以在詳情編輯更多數(shù)據(jù)。

有連續(xù)創(chuàng)建需求的業(yè)務(wù)要為用戶提供快捷方式 。

4）搜索與篩選

① 搜索

用戶輸入搜索可以快速定位數(shù)據(jù)條目。搜索盡量采用模糊搜索，讓用戶通過少量關(guān)鍵詞進(jìn)行查找。

觸發(fā)方式有“實時篩選”和“點擊按鈕觸發(fā)篩選”。實時篩選只適合數(shù)據(jù)量較小、數(shù)據(jù)嚴(yán)謹(jǐn)?shù)谋砀耥撁?，請?jǐn)慎使用?！包c擊按鈕觸發(fā)篩選”適合大部分表格場景。

根據(jù)其表現(xiàn)形式，可以分為以下四種類型：單標(biāo)簽精確搜索、多標(biāo)簽精確搜索、多標(biāo)簽?zāi)：阉饕约岸鄻?biāo)簽組合搜索。

單標(biāo)簽精確搜索

適用場景：表格單一數(shù)據(jù)信息特征突出，可以用此數(shù)據(jù)標(biāo)簽快速定位目標(biāo)數(shù)據(jù)，通常這個數(shù)據(jù)標(biāo)簽識別性高、使用頻率高。

多標(biāo)簽精確搜索

適用場景：表格多個數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對數(shù)據(jù)的精確度較高。

多標(biāo)簽?zāi)：阉?/strong>