眾所周知，表格是一種可以清晰、全面、高效地將數(shù)據(jù)展示出來(lái)的組件，作為B端產(chǎn)品，表格一定是產(chǎn)品設(shè)計(jì)工作中接觸最多的組件，今天我就以一個(gè)小場(chǎng)景來(lái)說(shuō)說(shuō)B端表格的應(yīng)該如何入門。

關(guān)于本系列文章，有幾點(diǎn)需要提前告訴你：

1. 無(wú)特別說(shuō)明的業(yè)務(wù)案例，都是虛構(gòu)案例，邏輯合理，但可能過(guò)于簡(jiǎn)潔，不符合業(yè)務(wù)的復(fù)雜性；
2. 使用的解決方案更像是一個(gè)臨時(shí)方案；
3. 簡(jiǎn)單的業(yè)務(wù)、臨時(shí)的方案是為了將你快速地帶入到場(chǎng)景中來(lái)，無(wú)需深究；

我是個(gè)野路子出身的產(chǎn)品經(jīng)理，做過(guò)Java研發(fā)，后來(lái)轉(zhuǎn)做過(guò)2G、2B的產(chǎn)品經(jīng)理，我的學(xué)習(xí)歷程是先看別人怎么做，想想為什么，然后嘗試自己做一下，最后再想辦法去學(xué)習(xí)怎么做，慢慢去提升。所以，我的文章通常會(huì)分為三個(gè)部分，本次B端表格設(shè)計(jì)入門指南將分為如下幾個(gè)部分：

1. 上篇：表格常見(jiàn)的樣式、組件配合（看看別人怎么做的，為什么這么做，然后自己試一下）
2. 中篇：表格的概念和設(shè)計(jì)原理（想辦法去學(xué)習(xí)）
3. 下篇：只能幫你到入門了（慢慢去提升）

當(dāng)數(shù)據(jù)的逐漸增多，在一屏中展示大量的數(shù)據(jù)會(huì)讓用戶感到疲憊和無(wú)力，這時(shí)就可以引入分頁(yè)，來(lái)減少用戶的視覺(jué)疲勞，同時(shí)再使用精準(zhǔn)搜索+篩選這兩種組件，來(lái)幫助用戶更快、更舒適的查看和查找表格數(shù)據(jù)。

為了減少用戶的記憶成本，我們也可以使用模糊搜索；同時(shí)，基于用戶的習(xí)慣，或者說(shuō)是視覺(jué)能力，我們也可以讓用戶來(lái)決定在每頁(yè)展示更多（也可能是更少）的數(shù)據(jù)量；最后，加入一個(gè)簡(jiǎn)單的排序功能，一定能幫助用戶更快的去找到那些關(guān)鍵人物，如年齡最小的那個(gè)人、工號(hào)最靠前的那個(gè)人。

隨著產(chǎn)品的使用，用戶可能不在要求數(shù)據(jù)內(nèi)容的展示程度（數(shù)據(jù)維度），而更希望能在數(shù)據(jù)結(jié)構(gòu)上、視覺(jué)體驗(yàn)上有一個(gè)更好的呈現(xiàn)方式，對(duì)于本次的人員信息，我們以部門為區(qū)分依據(jù)，對(duì)人員進(jìn)行樹(shù)結(jié)構(gòu)調(diào)整。這里為了增加每行數(shù)據(jù)的辨識(shí)度，減少用戶的閱讀成本，還是用了一個(gè)隔行變色的設(shè)計(jì)。

表格設(shè)計(jì)中可以用到的思路當(dāng)然不止這些，比如表頭可以使用合并列來(lái)對(duì)數(shù)據(jù)進(jìn)行一個(gè)分類，可以實(shí)現(xiàn)鼠標(biāo)指向的那一行高亮，可以使用氣泡來(lái)增加隱藏字段的顯示，可以使用標(biāo)注信息來(lái)增加表頭的內(nèi)容等等，這些我會(huì)在下一篇中給大家講到，但我認(rèn)為，最基礎(chǔ)的部分就是第一篇中介紹的這些內(nèi)容，這些功能熟悉后，將決定你設(shè)計(jì)表的一個(gè)能力下限達(dá)到一個(gè)及格水平，及格水平意味著你設(shè)計(jì)出來(lái)的表格可能不美觀、不好用，但一定是能用的，能滿足用戶需求的。

最后需要重提一下，第一篇中的業(yè)務(wù)場(chǎng)景和解決方案略微偏離實(shí)際，而且還有些理想主義在里面，但這并不影響，因?yàn)槟阈枰私獾氖牵?/span>表格設(shè)計(jì)常用的手段有哪些，有固定行列位置、展開(kāi)行、分頁(yè)、搜索/篩選等等，而不是糾結(jié)于我當(dāng)前的解決方式是否合理。