一、 數(shù)據(jù)查看

讓我們先來(lái)回顧一下表格的基本構(gòu)成，最上面的為表頭，橫為行，縱為列，內(nèi)容區(qū)每一組展示數(shù)據(jù)區(qū)域?yàn)閱卧瘛?

表格的設(shè)計(jì)，雖然看似簡(jiǎn)單，但是作為用戶最常用的組件之一，我們需要對(duì)視覺和交互的精準(zhǔn)把握，才能保證用戶在使用表格時(shí)更加高效。
這里我推薦表格的"四維自檢法“，對(duì)我們?cè)O(shè)計(jì)的表格是否合理，做出一個(gè)標(biāo)準(zhǔn)的判斷。
分別是：信息降噪、呼吸適中、高效易讀、詳情查看。

信息降噪：分別對(duì)表格內(nèi)容和視覺層面進(jìn)行重要性梳理，剝離不重要的元素，使表格輕量化；
呼吸適中：保持內(nèi)容和元素之間合適的間距，使表格頁(yè)擁有一個(gè)好的呼吸感，將給用戶營(yíng)造一個(gè)舒適的操作環(huán)境；
高效易讀：通過(guò)對(duì)需求內(nèi)容的解讀，對(duì)內(nèi)容形式加以分類辨別，做出可讀性最強(qiáng)的樣式；
詳情查看：b端系統(tǒng)往往伴隨著表格數(shù)據(jù)類目龐大的問(wèn)題，通常會(huì)采用另一種形式去展示全部信息。

1.1 信息降噪1.1.1 精簡(jiǎn)表格內(nèi)容
當(dāng)表格的字段非常重要時(shí)，一定要將字段全部展示出來(lái)讓用戶更清晰的了解數(shù)據(jù)。
如果你的用戶只需要了解部分字段，那么全部展示是沒(méi)有必要的，只需在展示最重要的字段即可。

1.1.2 自定義字段展示
不同用戶想看的的信息側(cè)重不同，有時(shí)候我們無(wú)法準(zhǔn)確判斷用戶看重哪些字段，還可以讓用戶自定義展示字段。

1.1.3 精簡(jiǎn)字段名稱
當(dāng)我們?nèi)ピO(shè)計(jì)表格的時(shí)候，通常會(huì)發(fā)現(xiàn)表格需要承載的信息量是非常大的，有時(shí)候?yàn)榱吮憩F(xiàn)出字段的準(zhǔn)確含義，在定義字段名稱時(shí)往往會(huì)非常的長(zhǎng)。但是當(dāng)這些字段同時(shí)出現(xiàn)在一個(gè)表格里時(shí)，過(guò)長(zhǎng)的字段名稱，又會(huì)顯得冗余，讓本就不大的頁(yè)面空間更加雜亂。
所以當(dāng)我們?cè)O(shè)計(jì)表格的時(shí)候，我們可以分析字段名稱，對(duì)字段名稱做精簡(jiǎn)，看看是不是少一個(gè)字用戶就無(wú)法理解字段的含義。

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

1.1.5 簡(jiǎn)化表格樣式
早期表格的設(shè)計(jì)，出發(fā)點(diǎn)主要以擬物形式，以最接近現(xiàn)實(shí)表格的樣式去設(shè)計(jì)。
但是隨著互聯(lián)網(wǎng)的普及度加深，極簡(jiǎn)的表格設(shè)計(jì)，使界面更加輕盈，讓用戶更加專注于數(shù)據(jù)內(nèi)容。
去除縱向列的分割線，僅以淺色的橫向分割線區(qū)分行，但是要注意分割的顏色不能過(guò)于淺而缺乏辨識(shí)度，部分人群對(duì)顏色的辨識(shí)度會(huì)偏低，顯示器的硬件性能也會(huì)影響顏色的可辨識(shí)性。

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

1.2 呼吸適中1.2.1 如何定義單元格的高度
了解單元格的結(jié)構(gòu)，以及實(shí)現(xiàn)單元格的基本邏輯，有助于我們更好的去把控我們的設(shè)計(jì)。
單元格內(nèi)的可控尺寸包含：單元格高度、文字字號(hào)、文字/段落行高、文字上下間距。
我們基于視覺呼吸感，賦予各個(gè)元素合適的尺寸，我在這里給出一套參考方案：
文字字號(hào) = N
文字行高 = 1.5N
上下間距 = 1.2N
單元格高度 = 內(nèi)容高度 + 上間距 +下間距

1.2.2如何定義列的間距
首先我們要了解列的兩種類型，第一種是定寬列，第二種是自適應(yīng)列。a.定寬列
顧名思義就是它的寬度是固定的，比如：第一列我們?cè)O(shè)置寬度為200px，第二列我們?cè)O(shè)置為300px，五六七列分別設(shè)為100px，那么我們這個(gè)列表就的寬度就等于200 + 300 + 100*3 = 1100px，在任何分辨率尺寸下你的這個(gè)列表都會(huì)保持這個(gè)寬度不變。

b.自適應(yīng)列
就是列會(huì)隨著分辨率變化而產(chǎn)生寬度的變化，比如：列表有五列，我們定義列表的寬度為界面寬度的50%，假定界面寬度為1200px，那么列表寬度就為600px，而每一列的寬度則為120px。此時(shí)我們將界面的寬度縮小到600px時(shí)，那么列表的寬度就為300px，而每一列的寬度則為60px。

在實(shí)際設(shè)計(jì)案例中，我們往往會(huì)面臨由于每一列的內(nèi)容不同，所需要的寬度也就不同，我們希望在列不多時(shí)可以保持寬度自適應(yīng)，但是如果每一列都做成自適應(yīng)列的話，內(nèi)容多的列無(wú)法展示全內(nèi)容，內(nèi)容少的列空間又會(huì)很大。
所以，固定列 + 自適應(yīng)列的綜合運(yùn)用，可以讓我們更好的實(shí)現(xiàn)我們想要的設(shè)計(jì)方案。c.列的結(jié)構(gòu)
然后，我們一起來(lái)了解列的結(jié)構(gòu)。每一列分為內(nèi)容區(qū)和左右間距區(qū)，在固定列里面內(nèi)容區(qū)和左右間距區(qū)都是保持不變的。但是在自適應(yīng)列卻不同，它的內(nèi)容區(qū)是隨界面分辨率變化而變化的，左右間距區(qū)的寬度是保持不變的(在代碼里間距區(qū)被叫做Padding)。

d.固定列
當(dāng)表格字段數(shù)量不確定時(shí)，通常我們會(huì)為自定義列的內(nèi)容區(qū)寫一個(gè)最小值(min-width),以確保字段很少時(shí)可以自適應(yīng)寬度，字段較多時(shí)仍然能保證完整展示表格數(shù)據(jù)，不影響對(duì)內(nèi)容的閱讀。
當(dāng)表格的列過(guò)多又必須全部展示時(shí)，固定必需固定的列(如姓名、任務(wù)名稱、操作項(xiàng)等)，其他字段橫向滾動(dòng)。

1.3 呼吸適中1.3.1 列的對(duì)齊方式
基于人的慣性瀏覽順序，設(shè)計(jì)每列合理的對(duì)齊方式，能夠輔助用戶更高效的完成工作。
a.標(biāo)題和內(nèi)容：一般采用左對(duì)齊，更高效的瀏覽順序；
b.有長(zhǎng)短不一的數(shù)字時(shí)(序號(hào)除外)：右對(duì)齊，方便比較 ;
c.操作項(xiàng)一般放在尾列：右對(duì)齊；

1.3.2 不留空白格
從心理學(xué)的角度講，人對(duì)未知事物會(huì)產(chǎn)出恐懼情緒。我們?cè)谠O(shè)計(jì)表格的時(shí)候，要考慮到表格的各種展示情況，非特殊情況不出現(xiàn)單元格空白。
沒(méi)有數(shù)量用“0”表示，沒(méi)有該項(xiàng)內(nèi)容用“-”表示。

1.3.3 選擇合適的分頁(yè)器
表格是一種可以承載大量數(shù)據(jù)的組件，當(dāng)數(shù)據(jù)行數(shù)很多時(shí)我們通常會(huì)選擇分頁(yè)器，使用分頁(yè)器有哪些優(yōu)點(diǎn)：
a.快速查看：通過(guò)分頁(yè)數(shù)據(jù)加載緩解服務(wù)器壓力；
b.清晰易讀：由于界面的空間是有限的，通過(guò)分頁(yè)展示數(shù)據(jù)，有助于緩解用戶的閱讀壓力；
c.靈活便捷：如果客戶想在一頁(yè)展示很多數(shù)據(jù)，可以通過(guò)分頁(yè)器自行選擇，還可以了解到數(shù)據(jù)的總數(shù)目。

1.3.4 收起低頻的操作項(xiàng)
當(dāng)界面空間有限、表格列數(shù)很多時(shí)，如果表格的操作項(xiàng)過(guò)多，會(huì)占用很多頁(yè)面空間，需要有選擇的展示，將低頻操作項(xiàng)收起，用點(diǎn)擊更多按鈕去觸發(fā)選擇。
如果是1.0的產(chǎn)品，我們可以和產(chǎn)品經(jīng)理溝通，分析每個(gè)功能按鈕的優(yōu)先級(jí)。
如果是上線的產(chǎn)品，我們還可以通過(guò)按鈕點(diǎn)擊PV(頁(yè)面成功訪問(wèn)次數(shù))，來(lái)了解按鈕的使用頻率，做出按鈕優(yōu)化。

1.3.5 行的排序
如果產(chǎn)品沒(méi)有特殊需求，那么默認(rèn)最近創(chuàng)建的在最上面。
可以用帶有排序的表頭，讓用戶自定義排序。

1.4 查看詳情1.4.1 詳情入口
如果表格的內(nèi)容項(xiàng)很多，我們通常會(huì)在表格上只展示部分重要數(shù)據(jù)，而其余數(shù)據(jù)放在詳情頁(yè)面展示。
作為詳情頁(yè)面的入口，通常會(huì)有兩種設(shè)計(jì)方式：
a.將詳情按鈕放在操作項(xiàng)里
b.將首行的名稱做成可點(diǎn)擊樣式，點(diǎn)擊跳轉(zhuǎn)至詳情

1.4.2 詳情頁(yè)的展開形式
如果詳情內(nèi)容不多，沒(méi)有新開頁(yè)面的必要，我們可以采用展開行、彈窗、抽屜的形式，但是要注意盡量減少過(guò)多的樣式，給用戶增加疑惑感。
如果詳情的內(nèi)容很多，而且編輯的需求，建議采用新開頁(yè)的形式。
建議根據(jù)詳情頁(yè)信息量的多少，以此采用展開行、彈窗、抽屜、新開頁(yè)的形式。

二、數(shù)據(jù)過(guò)濾

數(shù)據(jù)過(guò)濾是表格頁(yè)很重要的組成部分，包含搜索、篩選、標(biāo)簽頁(yè)。
這一部分的主要作用是幫助用戶，梳理表格數(shù)據(jù)信息，精準(zhǔn)定位所需的數(shù)據(jù)項(xiàng)。

2.1 搜索2.1.1 模糊搜索
模糊搜索是指在用戶搜索意圖不明確時(shí)，搜索引擎將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配，找出與查詢相關(guān)的內(nèi)容。模糊搜索無(wú)法精確理解用戶的查詢意圖，返回的結(jié)果中可能包括了一大批用戶不想要的信息，所以在使用模糊搜索時(shí)一定要結(jié)合自己的實(shí)際場(chǎng)景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會(huì)被檢索出來(lái)，減少了精準(zhǔn)搜索帶了的記憶負(fù)擔(dān)
缺點(diǎn)：容易把相關(guān)的信息也帶出來(lái)，例如檢索手機(jī)號(hào)，把相關(guān)編碼也匹配出來(lái)

2.1.2 精確搜索
精確搜索是指用戶在搜索時(shí)，針對(duì)某一數(shù)據(jù)字段搜索，來(lái)查找所需要的數(shù)據(jù)。根據(jù)業(yè)務(wù)場(chǎng)景不同，我們會(huì)查找某一字段，或者是用標(biāo)簽切換不同字段來(lái)查找。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高
缺點(diǎn)：每次只能對(duì)單一條件進(jìn)行搜索

2.2 篩選
篩選器主要是針對(duì)內(nèi)容較少的字段進(jìn)行查找的一種方式， 通過(guò)篩選器的選擇可以快速定位所需的數(shù)據(jù)，取消用戶輸入的過(guò)程，提升查找效率。一般篩選有兩種形式，第一種是下拉篩選，第二種是平鋪式篩選。2.2.1 下拉篩選
下拉篩選就是將需要篩選的內(nèi)容放置于選擇器當(dāng)中，通過(guò)點(diǎn)擊選擇器下拉，來(lái)選擇需要篩選的內(nèi)容。
優(yōu)點(diǎn)：空間利用率高，起到了很好的收納作用
缺點(diǎn)：無(wú)法直觀看到所有的篩選項(xiàng)

2.2.2 平鋪篩選
平鋪篩選就是將篩選項(xiàng)的內(nèi)容，直接展示于頁(yè)面之上，通過(guò)點(diǎn)擊選擇的方式直接進(jìn)行篩選。或者可以通過(guò)自定義內(nèi)容的篩選。
優(yōu)點(diǎn)：操作效率高，篩選項(xiàng)一目了然，支持輸入更多篩選條件
缺點(diǎn)：空間利用率低，不適合選項(xiàng)太多的情況

2.2.3 如何合理的使用篩選項(xiàng)
當(dāng)數(shù)據(jù)內(nèi)容需要的篩選類目過(guò)多時(shí)，如何合理的擺放，才能提高用戶的使用效率。
a.信息排序：基于用戶使用場(chǎng)景，以目標(biāo)導(dǎo)向?yàn)橐罁?jù)，將高頻的篩選項(xiàng)排列到前面，低頻的篩選項(xiàng)置于后面
b.默認(rèn)折疊低頻篩選項(xiàng)：當(dāng)篩選項(xiàng)過(guò)多時(shí)，會(huì)極大的占用界面空間，使用戶在閱讀數(shù)據(jù)時(shí)產(chǎn)生非常不好的用戶體驗(yàn)，通過(guò)展示高頻篩選項(xiàng)、隱藏低頻篩選項(xiàng)，將更好的提升用戶體驗(yàn)。
c.所有篩選項(xiàng)都很低頻：以點(diǎn)擊高級(jí)篩選按鈕的形式觸發(fā)，將全部篩選項(xiàng)置于氣泡或者彈窗之中。

如何判定篩選項(xiàng)的使用頻率呢？
通常會(huì)有兩種方式：
第一種是給篩選項(xiàng)增加數(shù)據(jù)埋點(diǎn)，這樣一來(lái)就可以通過(guò)對(duì)用戶點(diǎn)擊行為的分析了解到篩選項(xiàng)的使用頻率；
第二種是用戶調(diào)研，通過(guò)問(wèn)卷或者面談，了解到用戶的真實(shí)使用需求。2.3 標(biāo)簽頁(yè)
標(biāo)簽頁(yè)又叫選項(xiàng)卡，在組件中我們通常叫Tabs，指的是分隔內(nèi)容上有關(guān)聯(lián)但屬于不同類別的數(shù)據(jù)集合。2.3.1 默認(rèn)展示常用項(xiàng)
在使用標(biāo)簽頁(yè)時(shí)，有一點(diǎn)我們要特別注意，通常在B端設(shè)計(jì)中，我們會(huì)把標(biāo)簽頁(yè)的位置定位在最常用的一個(gè)選項(xiàng)。2.3.2 增加數(shù)據(jù)條目
如果是訂單一類的分頁(yè)，我們還可以將數(shù)據(jù)條數(shù)，展示在標(biāo)簽右側(cè)，用來(lái)幫助用戶快速了解到待辦數(shù)據(jù)量。

三、數(shù)據(jù)操作

3.1 分類
數(shù)據(jù)操作即對(duì)表格的數(shù)據(jù)進(jìn)行操作，首先我們對(duì)數(shù)據(jù)操作進(jìn)行分類。
按控制范圍分:
a.單行操作
b.批量操作
c.全局操作
按操作屬性分：
a.新增數(shù)據(jù)
b.編輯數(shù)據(jù)
c.刪除數(shù)據(jù)
d.業(yè)務(wù)處理3.2 如何合理的設(shè)計(jì)數(shù)據(jù)操作
第一步，先判斷控制范圍

第二步，判斷擺放位置

第三步，優(yōu)化信息層級(jí)

以上是操作項(xiàng)和篩選項(xiàng)較多的情況，那么不多時(shí)，我們還是要合理利用空間，靈活設(shè)計(jì)

以上就是《如何設(shè)計(jì)表格？》的全部?jī)?nèi)容了，后續(xù)還會(huì)努力更新更多B端設(shè)計(jì)分享！
與君共勉

總結(jié)

以上是生活随笔為你收集整理的bootstrapt 表格自适应_一起聊B端设计 - 如何设计表格？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。