編輯導(dǎo)語(yǔ)：表格是信息的一種常見(jiàn)呈現(xiàn)方式，提供數(shù)據(jù)支撐，也是B端產(chǎn)品設(shè)計(jì)的重要部分。本文作者將從表格設(shè)計(jì)的底層思維來(lái)看，經(jīng)常做表格的小伙伴一起來(lái)學(xué)習(xí)下吧。

書接上回，上一篇B端表格指南向大家展示了一些常見(jiàn)的表格樣式，在產(chǎn)品設(shè)計(jì)能力中，一個(gè)人的眼界往往決定了這個(gè)人的產(chǎn)品設(shè)計(jì)下限，所以我將常見(jiàn)表格樣式的介紹放在了第一篇，那么第二篇將從底層思維上給大家提供一個(gè)可行的提升方案。

與第一篇不靠譜的業(yè)務(wù)場(chǎng)景和解決方案相比，第二篇會(huì)減少業(yè)務(wù)的部分，而是一些枯燥的理論知識(shí)。

一、表格的意義

首先，通過(guò)上一篇文章，可以大致了解到，表格由兩個(gè)部分組成：

1. 展示：表格本身
2. 控制：工具欄

這是我們最直觀能夠看到的兩個(gè)部分，而這兩個(gè)部分又由多個(gè)小部分組成。

由此，表格的意義就已經(jīng)比較清晰了。

1. 向用戶展示數(shù)據(jù)

1. • 告訴用戶，這個(gè)表格是展示的什么數(shù)據(jù)（標(biāo)題）
   • 向用戶展示每一條數(shù)據(jù)的內(nèi)容（表頭、單元格、分頁(yè)）

2. 提供便捷的數(shù)據(jù)操作

1. • 更快、更準(zhǔn)確地搜索到想要查找的數(shù)據(jù)（搜索欄、排序）
   • 更快、更準(zhǔn)確的編輯數(shù)據(jù)（行編輯、工具欄）

3. 其他（特殊設(shè)計(jì)），既是為了查看，也是為了操作

通過(guò)了這一輪的思考與總結(jié)，可以將表格的概念內(nèi)容深化到設(shè)計(jì)原則，并由此衍生、具化出設(shè)計(jì)思路。

二、表格的設(shè)計(jì)原則

設(shè)計(jì)原則很簡(jiǎn)單，一是易讀，二是易用，雖然只是簡(jiǎn)單的幾個(gè)字，這其實(shí)不止是表格的設(shè)計(jì)原則，也是在做產(chǎn)品時(shí)需要時(shí)刻考慮的。

三、易讀性設(shè)計(jì)思路

首先，用戶讀的肯定是單元格里的內(nèi)容，而單元格實(shí)際上是由行和列組成的，為了便于閱讀，可以先考慮行高、列寬的問(wèn)題，其次是行順序/列順序、合并行/合并列、固定行/固定列，最后，再考慮單元格內(nèi)的內(nèi)容是否合適，這個(gè)合適包括超出的部分如何顯示、缺失值如何顯示、是否有其他顯示的方式等。

其次，可以使用一些小統(tǒng)計(jì)功能，來(lái)減少大統(tǒng)計(jì)的功能，這是一個(gè)我在日常工作中的一個(gè)小經(jīng)驗(yàn)，所以多說(shuō)幾句，在B端產(chǎn)品中，不論是哪個(gè)級(jí)別的使用者（普通職員、部門管理者、總監(jiān)等），他們都有一個(gè)統(tǒng)計(jì)功能的需求（誰(shuí)不想站在全局看問(wèn)題呢？），然而，數(shù)據(jù)是有權(quán)限區(qū)分的，不同的人看到的數(shù)據(jù)統(tǒng)計(jì)肯定是不同的，但我們是否需要為每一類用戶都做一個(gè)數(shù)據(jù)統(tǒng)計(jì)頁(yè)呢？非用戶的要求下，我個(gè)人認(rèn)為是不需要的，我們可以通過(guò)在操作中，將一些小的統(tǒng)計(jì)功能植入進(jìn)去，就比如上一篇文章中介紹的合并列的例子。

這里有兩個(gè)小統(tǒng)計(jì)，第一個(gè)是部門統(tǒng)計(jì)，通過(guò)兩個(gè)小統(tǒng)計(jì)功能，幫助行政人員了解到各部門的人數(shù)情況，其次，在分頁(yè)器的位置，告訴了用戶一共有50條數(shù)據(jù)，這就意味著，一共有50個(gè)員工，這樣就解決了行政人員的一個(gè)統(tǒng)計(jì)需求，而不是要做一個(gè)儀表盤頁(yè)面來(lái)展示公司的人員情況。

最后，是一個(gè)最簡(jiǎn)單，最有效的方法，其實(shí)應(yīng)該放在第一個(gè)介紹，可是這個(gè)手段更應(yīng)該是UI設(shè)計(jì)或者交互設(shè)計(jì)來(lái)提，但誰(shuí)讓咱是小廠的B端產(chǎn)品經(jīng)理呢，所以我還是把這個(gè)方法歸納進(jìn)來(lái)了，這就是斑馬線設(shè)計(jì)，在上一篇文章里，我也介紹了這個(gè)方法，其實(shí)就是一個(gè)簡(jiǎn)單的隔行變色的設(shè)計(jì)，選擇兩種顏色，然后相鄰的兩行用不同的顏色交替出現(xiàn)就可以了（聽(tīng)上去很多行都要設(shè)置顏色，但其實(shí)前端開發(fā)使用的組件，只需要一個(gè)單詞，一個(gè)命令就可以實(shí)現(xiàn)了）。

這里，除了叫做隔行變色的靜態(tài)斑馬線設(shè)計(jì)，還有一種動(dòng)態(tài)的斑馬線設(shè)計(jì)叫做高亮行，這是一種當(dāng)鼠標(biāo)掠過(guò)每行數(shù)據(jù)時(shí)，劃過(guò)的那一行會(huì)有一個(gè)強(qiáng)對(duì)比度的變色效果，能夠幫助用戶更專注于鼠標(biāo)指向的那一行數(shù)據(jù)（這個(gè)聽(tīng)著好像也很復(fù)雜，還要知道鼠標(biāo)的位置，但其實(shí)前端開發(fā)使用的組件，也是一個(gè)單詞的配置就搞定的）

四、易用性設(shè)計(jì)思路

易用性與易讀性在設(shè)計(jì)上是有本質(zhì)區(qū)別的，易讀性是為了讓用戶閱讀數(shù)據(jù)更輕松，更直接，這是易讀性的目的，這也讓易讀性的設(shè)計(jì)有跡可循，而易用性是為了讓用戶操作起來(lái)更簡(jiǎn)單，更快捷，但在設(shè)計(jì)的時(shí)候，你會(huì)很容易的發(fā)現(xiàn)，怎么才能讓用戶操作更方便呢？

似乎并沒(méi)有一個(gè)有跡可循的設(shè)計(jì)思路，這是因?yàn)椋磾?shù)據(jù)只需要?jiǎng)友劬?，你只需要看?jiàn)、看明白就行了，而操作數(shù)據(jù)是需要?jiǎng)幽X子的，你得思考，為什么操作，怎么操作，要得到什么結(jié)果，至少要這三步，你才能進(jìn)行操作。

顯而易見(jiàn)，得到結(jié)果其實(shí)就是易讀性上的問(wèn)題，而為什么操作，怎么操作才是易用性的問(wèn)題，那么這么推論下來(lái)，要想提高易用性，你得先知道用戶為什么要操作。（用戶的為什么有很多，這里跟易讀性一樣，我舉其中三個(gè)例子來(lái)說(shuō)明）

1. 為了易讀性而操作

是的，你沒(méi)有看錯(cuò)，為了提高易讀性，我們可以引入一些操作，因?yàn)橛脩舻囊曈X(jué)能力、視覺(jué)習(xí)慣是有區(qū)別的，比如在財(cái)務(wù)系統(tǒng)中，假設(shè)會(huì)計(jì)更?？吹氖鞘湛罘?，打款金額，打款時(shí)間，以此來(lái)推算某時(shí)間段內(nèi)的總成本問(wèn)題，這樣她好做公司的財(cái)務(wù)匯報(bào)，那么她在看財(cái)務(wù)表的時(shí)候，肯定更希望這三列數(shù)據(jù)排在前面，這樣她能最先看到。

而項(xiàng)目管理的人，可能更希望看到項(xiàng)目名稱，打款金額，打款時(shí)間，這樣他能把控各項(xiàng)目在某時(shí)間段的一個(gè)成本問(wèn)題，所以他看財(cái)務(wù)表的時(shí)候，肯定希望他想看的數(shù)據(jù)在前三列（在實(shí)際產(chǎn)品中，我們大概率會(huì)把他們拆開，做一個(gè)項(xiàng)目管理的模塊，做一個(gè)財(cái)務(wù)管理的模塊。）。那么為了讓兩個(gè)人都能更好的查看這個(gè)數(shù)據(jù)，我們可以提供一個(gè)列拖拽的功能，這樣用戶可以按自己的需求，對(duì)列順序進(jìn)行控制。

2. 為了減少錄入工作而操作

有一些數(shù)據(jù)可能需要經(jīng)常進(jìn)行修改，并且是大量的數(shù)據(jù)需要修改，比如某個(gè)公司的財(cái)務(wù)系統(tǒng)和項(xiàng)目管理系統(tǒng)還沒(méi)有打通，那么項(xiàng)目管理人員要在系統(tǒng)里把控項(xiàng)目成本的話，他需要每個(gè)月底找財(cái)務(wù)要一次數(shù)據(jù)，然后錄入到他的項(xiàng)目管理系統(tǒng)中去，那么這里有至少三種方法來(lái)幫他減少這個(gè)數(shù)據(jù)錄入的工作量：

1. 首先，最簡(jiǎn)單直接的就是把財(cái)務(wù)系統(tǒng)和項(xiàng)目管理系統(tǒng)打通，然后每個(gè)月，甚至每天將財(cái)務(wù)數(shù)據(jù)推送到管理系統(tǒng)就可以了；
2. 其次，你可以做一個(gè)自動(dòng)導(dǎo)入的功能，因?yàn)樨?cái)務(wù)表都有特定格式的excel表，你可以做一些數(shù)據(jù)轉(zhuǎn)換的模塊，然后項(xiàng)目經(jīng)理拿到財(cái)務(wù)表之后，在項(xiàng)目管理系統(tǒng)里點(diǎn)擊導(dǎo)入提交就可以了；
3. 最后，你可把項(xiàng)目管理的表格做成可編輯的表格，讓項(xiàng)目經(jīng)理可以直接在表格上編輯數(shù)據(jù)內(nèi)容，直接修改每個(gè)項(xiàng)目當(dāng)前的一個(gè)成本金額，而不需要點(diǎn)到每個(gè)項(xiàng)目里去一個(gè)一個(gè)編輯。（這里放個(gè)簡(jiǎn)單的實(shí)例，年齡這列是可以雙擊進(jìn)行編輯的）

3. 為了更快、更準(zhǔn)地搜索到數(shù)據(jù)而操作

其實(shí)標(biāo)題已經(jīng)很清楚了，就是查找數(shù)據(jù)，說(shuō)白了就是模糊搜索、精準(zhǔn)搜索、篩選的組合，這個(gè)其實(shí)不用單獨(dú)說(shuō)，誰(shuí)都會(huì)設(shè)計(jì)，而且隨便設(shè)計(jì)一下，都能對(duì)用戶的搜索效率產(chǎn)生一定的提高效果，但我們更應(yīng)該追求一種高效的搜索設(shè)計(jì)，而不是隨意地、肆意地去使用搜索功能，這里我一直沿用的設(shè)計(jì)思路是簡(jiǎn)潔為輔，業(yè)務(wù)為主，為什么為主的業(yè)務(wù)放在卻放在這句話的后面呢，等介紹完之后我再做解釋。

簡(jiǎn)潔：大家可以看下淘寶的搜索功能，雖然他是C端的產(chǎn)品，但他值得我們借鑒，淘寶的搜索很簡(jiǎn)潔，只有一個(gè)模糊搜索的搜索框，就能讓用戶搜索到想要找的商品（數(shù)據(jù)）。

業(yè)務(wù)：不同的業(yè)務(wù)有不同的搜索方式，這往往體現(xiàn)了使用者的使用場(chǎng)景、表達(dá)方式、做事風(fēng)格、思維方式等，比如現(xiàn)在要查一個(gè)交易訂單：

1. 1. A場(chǎng)景，剛剛有個(gè)人要退貨，他說(shuō)他昨天買了個(gè)XXX，你去處理一下，那么A可能是去訂單系統(tǒng)里，輸入時(shí)間是昨天，然后輸入商品名稱，這樣來(lái)查到這個(gè)訂單，然后去操作，這里日期是個(gè)精確的時(shí)間范圍，昨天00:00點(diǎn)到昨天23:59，然后商品名稱可能是個(gè)模糊搜索
   2. B場(chǎng)景，剛剛有個(gè)人要退貨，這是他的電話號(hào)碼，你跟他對(duì)接處理一下，那么B可能直接去系統(tǒng)里查這個(gè)電話號(hào)碼，看看最近有幾筆訂單，如果只有一筆訂單，可能就直接給他關(guān)閉了，如果有多個(gè)訂單，可能就會(huì)做個(gè)電話回訪，然后再關(guān)閉相應(yīng)的訂單。
   3. C場(chǎng)景，剛剛有個(gè)人要退貨，他說(shuō)他買了個(gè)XXX，然后他說(shuō)我們的商品XXX，他想要XXX…….，吧啦吧啦說(shuō)了一堆（遇到這樣的人，能打住他就打住他，盡說(shuō)些題外話），那么這時(shí)，你的信息量可能就只有商品名稱了，最近買的人比較少還好，能夠搜索的到，如果商品只是模糊搜索，最近出貨量還比較大，想通過(guò)一個(gè)名字搜索到，那是根本不可能的。

搜索需要深入了解用戶的使用場(chǎng)景才能更高效的設(shè)計(jì)，這里再說(shuō)說(shuō)，為什么業(yè)務(wù)為主，要放在后面說(shuō)，不要一上來(lái)就為用戶設(shè)計(jì)一大堆的搜索條目，除非你很懂使用者的使用邏輯，比如行政管理中的人員管理，我們可以知道，用戶肯定是會(huì)基于員工的姓名、工號(hào)、部門來(lái)查找相應(yīng)的人的，所以我們可以先把這三個(gè)放上去，但用戶不一定通過(guò)手機(jī)尾號(hào)、學(xué)歷、職位來(lái)搜索，這時(shí)就先別放上去。

那么有的人說(shuō)，我先放上去，要是用戶不用，我再刪掉不就行了嗎？相信我，用戶的心里永遠(yuǎn)是“我可以不用，但你不能沒(méi)有”。除非你設(shè)計(jì)的搜索條目實(shí)在太多，用戶已經(jīng)吃力了，否則，他們是不會(huì)讓你減少搜索條目的，但他們會(huì)在心中暗暗的說(shuō)，這破產(chǎn)品，設(shè)計(jì)一大堆沒(méi)用的。

五、小結(jié)

好了，這就是表格設(shè)計(jì)的一些底層邏輯，關(guān)于思維導(dǎo)圖里的表格設(shè)計(jì)手段，因?yàn)槠?，我還有很多沒(méi)有介紹到，但是，我想已經(jīng)足夠?yàn)榇蠹掖蜷_一扇窗了。其次，我羅列的手段肯定還有遺漏，如果你發(fā)現(xiàn)了，也歡迎你給我留言。

最后，謝謝你的閱讀。

本文由 @何海不擇細(xì)流 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash ，基于 CC0 協(xié)議。