表格的設(shè)計(jì)，雖然看似簡單，但是作為用戶最常用的組件之一，我們需要對(duì)視覺和交互的精準(zhǔn)把握，才能保證用戶在使用表格時(shí)更加高效表格被公認(rèn)是展現(xiàn)結(jié)構(gòu)化數(shù)據(jù)最為清晰、高效的形式。常和按鈕、搜索、篩選、分頁等其他元素一起協(xié)同，構(gòu)成表格頁。表格的設(shè)計(jì)，雖然看似簡單，但是作為用戶最常用的組件之一，我們需要對(duì)視覺和交互的精準(zhǔn)把握，才能保證用戶在使用表格時(shí)更加高效。

設(shè)計(jì)背景與目標(biāo)

1. 現(xiàn)狀
   交付業(yè)務(wù)場(chǎng)景中需要大量的表格，雖然我們組件庫對(duì)表格枚舉眾多，在實(shí)際應(yīng)用中，快速拓展效率低，增列行、匹配寬度等耗時(shí)3長，普適性低，團(tuán)隊(duì)使用情況不統(tǒng)一。根據(jù)這個(gè)需求，通過對(duì)業(yè)務(wù)屬性的深入研究，基于基礎(chǔ)組件建設(shè)表單高級(jí)組件，對(duì)組件進(jìn)行補(bǔ)充和賦能，從設(shè)計(jì)側(cè)推動(dòng)業(yè)務(wù)進(jìn)行體驗(yàn)優(yōu)化，促進(jìn)產(chǎn)品質(zhì)量的提升。
2. 目標(biāo)
   組件專業(yè)度、通用性、業(yè)務(wù)性得以提升1. 業(yè)務(wù)性：組件庫和業(yè)務(wù)進(jìn)行深度綁定，設(shè)計(jì)沉淀來源于實(shí)踐并賦能于實(shí)踐。2. 專業(yè)性：區(qū)塊化搭建，組件的設(shè)計(jì)質(zhì)量和研究深度可以得到一定的保證。3. 通用性：普適性強(qiáng)，增加團(tuán)隊(duì)之間的聯(lián)系。

探索過程

1. 表格頁的構(gòu)成
   在B端表格頁中，由導(dǎo)航、篩選、表格幾大模塊構(gòu)成，因?yàn)楸砀衩娣e占比最大，頁面呈現(xiàn)最為重要，會(huì)直接影響用戶的使用體驗(yàn)。

說完表格的組成，接下來，我會(huì)對(duì)每一個(gè)部分進(jìn)行分解，探討表格設(shè)計(jì)要點(diǎn)。

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

3. 篩選
   模糊搜索
   是指在用戶搜索意圖不明確時(shí)，搜索引擎將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配，找出與查詢相關(guān)的內(nèi)容。模糊搜索無法精確理解用戶的查詢意圖，返回的結(jié)果中可能包括了一大批用戶不想要的信息，所以在使用模糊搜索時(shí)一定要結(jié)合自己的實(shí)際場(chǎng)景，慎重使用。

優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來，減少了精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)
缺點(diǎn)：容易把相關(guān)的信息也帶出來，例如檢索手機(jī)號(hào)，把相關(guān)編碼也匹配出來

下拉篩選
下拉篩選就是將需要篩選的內(nèi)容放置于選擇器當(dāng)中，通過點(diǎn)擊選擇器下拉，來選擇需要篩選的內(nèi)容。

優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用
缺點(diǎn)：無法直觀看到所有的篩選項(xiàng)

平鋪篩選
平鋪篩選就是將篩選項(xiàng)的內(nèi)容，直接展示于頁面之上，通過點(diǎn)擊選擇的方式直接進(jìn)行篩選?；蛘呖梢酝ㄟ^自定義內(nèi)容的篩選。

優(yōu)點(diǎn)：操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件
缺點(diǎn)：空間利用率低，不適合選項(xiàng)太多的情況

4. 表格的類型
   基礎(chǔ)表格
   基礎(chǔ)表格是根基，是由行與列的單元格組成。在使用層面上能滿足用戶多維度查看數(shù)據(jù)的需求。因?yàn)榇蠹叶己苁熘?br>樹形表格 - 包含關(guān)系
   當(dāng)表格中的數(shù)據(jù)為包含與被包含的結(jié)構(gòu)時(shí)，可采取樹形表格。通過逐級(jí)大綱的形式來展現(xiàn)數(shù)據(jù)間的層級(jí)關(guān)系，讓整個(gè)信息結(jié)構(gòu)變得一目了然。這一表格形式常出現(xiàn)于項(xiàng)目管理工具中。

子表格 - 嵌套關(guān)系
當(dāng)一條主數(shù)據(jù)下有多條數(shù)據(jù)結(jié)構(gòu)不同的關(guān)聯(lián)數(shù)據(jù)進(jìn)行嵌套時(shí)，這時(shí)候就可以用子表格進(jìn)行創(chuàng)建。它能夠?qū)χ鲾?shù)據(jù)進(jìn)行更加細(xì)致的解釋，詳細(xì)的了解主數(shù)據(jù)中數(shù)據(jù)的含義。從表象上看，就是在一個(gè)表格中還能嵌套另一個(gè)表格。比如在對(duì)某集團(tuán)對(duì)旗下子公司的銷售表格中，它能夠通過嵌套子表格的形式，將每一個(gè)子公司下的銷售人員的銷售記錄進(jìn)行記錄，從而能夠更加細(xì)致的了解到每一個(gè)公司、每一個(gè)人員的具體情況。在國外報(bào)表中，這類表格很少出現(xiàn)，而在中國的報(bào)表中，嵌套子表格算是一種不折不扣的中國式報(bào)表。當(dāng)然這里我們依舊可以深入理解，比如在兩個(gè)表格之間，用戶是通過什么樣的方式建立一個(gè)父子的關(guān)系？表格中當(dāng)父數(shù)據(jù)刪除時(shí)，子數(shù)據(jù)如何處理？設(shè)計(jì)上對(duì)父子之間的關(guān)聯(lián)有著何種限制，這都是我們需要思考的，因?yàn)檫@里牽涉到業(yè)務(wù)實(shí)在太多，我也無法抽象出一個(gè)規(guī)律供大家學(xué)習(xí)，因此只有具體問題具體分析。

交叉表格/表頭分組 - 兩條數(shù)據(jù)在形式上有交叉
當(dāng)一個(gè)表格里面有多條數(shù)據(jù)在同一個(gè)小范圍的維度進(jìn)行展示時(shí)，它就是交叉表格。從表象上看，就是表頭有很多分組進(jìn)行區(qū)分，因此它也叫做表頭分組。它能夠通過硬拆分將數(shù)據(jù)進(jìn)行切割，但是這樣數(shù)據(jù)的易讀性就是有很大的差距，比如在2010-2020公司年度收支表格中，需要同時(shí)展示每一年份的收入、支出與利潤，使用交叉報(bào)表能夠讓用戶一眼就是看清數(shù)據(jù)，而基礎(chǔ)表格卻不行。交叉表格也算是中國式表格中的一種，能夠滿足具體業(yè)務(wù)上的需求。

5. 表格設(shè)計(jì)原則
   在我們對(duì)表格的設(shè)計(jì)思考過程中，需要注意兩項(xiàng)原則：易讀與易用前者是提升使用者在表格瀏覽時(shí)的體驗(yàn)，主要是從信息密度、色彩分隔、以及視覺節(jié)奏三個(gè)方面去理解；后者是使用表格時(shí)的操作感受，比如快捷操作、多數(shù)據(jù)編輯等方面去理解。無論是B端的任何頁面，表格都是必不可少的部分。

添加字段說明
當(dāng)字段名稱過長，又必須展示，才能有效的理解字段含義時(shí)。我們可以定義一個(gè)專有名詞代替，并且在字段名稱后使用添加字段說明的形式，來對(duì)字段加以說明。這樣一來用戶既可以清晰的理解字段含義，又可以在有限的頁面空間下獲取到更多的數(shù)據(jù)信息。

減少不必要的顏色區(qū)分
表格設(shè)計(jì)中一定不要使用過多的顏色區(qū)做狀態(tài)或操作的區(qū)分，過多的顏色細(xì)分會(huì)使表格變得更加混亂，影響用戶體驗(yàn)。對(duì)狀態(tài)的區(qū)分，僅用輕量的顏色區(qū)分即可，操作欄保持主色按鈕色。

單元格高度
在開發(fā)同學(xué)的眼中，單元格高度=內(nèi)容高度+上間距+下間距，在實(shí)現(xiàn)設(shè)計(jì)稿時(shí)，通常也是按照這個(gè)方式來寫的，而不是像設(shè)計(jì)同學(xué)一樣按照文字的尺寸來計(jì)算間距。其中，文字行高建議設(shè)為字號(hào)的1.5倍，上下間距設(shè)為字號(hào)的1.2倍。

收起低頻操作

合適的列間距
合適的填充和邊距對(duì)于視覺設(shè)計(jì)至關(guān)重要，以保證易讀性。定義列的間距時(shí)，我通常的做法是N1保持不變，將N2定義一個(gè)最小值，N2再根據(jù)表格的寬度自適應(yīng)變化。表格主要適配到這個(gè)最小寬度，這一步驟通常的設(shè)計(jì)系統(tǒng)的初期就要完成，一方面可根據(jù)自己項(xiàng)目目前情況，按照導(dǎo)航寬度等固定尺寸確定最小的表格寬度，這樣在處理最小尺寸時(shí)，可以有一個(gè)明確的邊界，同時(shí)能與開發(fā)同學(xué)進(jìn)行理解溝通。當(dāng)表格寬度大于頁面寬度，固定首尾列，左右滑動(dòng)。

控制列數(shù)
基于對(duì)實(shí)際業(yè)務(wù)需求、目標(biāo)用戶訴求及其行為的理解，列數(shù)盡量控制在7±2，列舉用戶更為關(guān)注的數(shù)據(jù)，用戶需要的非重點(diǎn)、輔助性信息可以在詳情中展示。

自定義列
如果不同用戶想看到的信息側(cè)重不同，可以讓用戶自定義列的展示。在默認(rèn)情況下僅展示最常用、最重要的幾個(gè)指標(biāo)（如下圖）。這樣做的好處是：首先，用戶能在表格上方看到所有的指標(biāo)名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標(biāo)的情況；其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)，減少干擾。但需注意系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復(fù)操作。

合適的對(duì)齊方式
合適的對(duì)齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對(duì)齊（符合格式塔心理學(xué)中相近原則）能夠很好的形成視覺引導(dǎo)線。通過對(duì)齊，會(huì)讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動(dòng)更順暢，讓用戶快速的捕捉到所需內(nèi)容。

文本左對(duì)齊：更高效的閱讀瀏覽順序，包括非比較型和固定長度的數(shù)字，如日期2020-12-04（補(bǔ)0是數(shù)字書寫規(guī)范）、編號(hào)1948696等；
數(shù)值右對(duì)齊：金額、長度、高度等，數(shù)字是從右往左讀的，通過數(shù)值位數(shù)的長短即可對(duì)比數(shù)值的量級(jí)和大小，方便數(shù)值的比對(duì)。這是因?yàn)樵趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等；
操作右對(duì)齊：操作即使沒有縱向分割線也能很好的起到分隔的作用，視覺上看表格是一個(gè)方方正正的格子，比較整齊

6. 搭建思路

對(duì)表單頁的模塊，布局進(jìn)行一些場(chǎng)景提取，通過對(duì)基礎(chǔ)組件的內(nèi)容拼接形成區(qū)塊化高級(jí)組件，表格組件化，實(shí)現(xiàn)自適應(yīng)、可填充，提高組內(nèi)協(xié)作。

自適應(yīng)

可填充

組建易用性考慮
組件的命名就是為了方便切換

字體顏色替換

7.不足

作者：cheny米魚
鏈接：https://www.zcool.com.cn/article/ZMTU4MDI5Mg==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)加藍(lán)小助，微信號(hào):ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢～希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司