將復(fù)雜數(shù)據(jù)表格的設(shè)計(jì)點(diǎn)一點(diǎn)點(diǎn)理清，可能會(huì)使得表格更加趨于明朗。

上一篇文章提到了數(shù)據(jù)表格設(shè)計(jì)的一些注意點(diǎn)，這一篇對(duì)這些注意點(diǎn)繼續(xù)進(jìn)行補(bǔ)充。同時(shí)結(jié)合最近看到的一些復(fù)雜表格的規(guī)范與例子分享一些個(gè)人的觀點(diǎn)。

1. 懸浮操作

表格中如果需要編輯，一般都會(huì)有相應(yīng)的操作按鈕，而按鈕有時(shí)候如果直接展示的話，整個(gè)表格就會(huì)出現(xiàn)一列重復(fù)的操作按鈕，這樣在界面上就有點(diǎn)冗余，如果將表格操作改為懸浮按鈕的形式，在懸浮的時(shí)候才出現(xiàn)按鈕，這樣一方面可以集中操作，另一方面可以使得頁(yè)面更加簡(jiǎn)潔。但是也是要看情況考慮，如果按鈕懸浮出現(xiàn)的話，界面上的位置會(huì)出現(xiàn)一些空白，空白太多也會(huì)造成界面浪費(fèi)，所以可能要把握好度。

（懸浮操作示例）

2. 多模態(tài)彈窗

如果表格的信息輸入或者修改需要包含的信息較多，完全展現(xiàn)的話，視覺(jué)上負(fù)擔(dān)會(huì)太重，因此也有可能要使用多層彈窗進(jìn)行展示，模態(tài)彈窗展現(xiàn)的一個(gè)好處是可以將信息填寫時(shí)候的其他區(qū)域弱化，使得填寫更加集中。

（多個(gè)彈窗的操作）

3. 分頁(yè)

分頁(yè)的操作可以帶給表格更多的展示空間。用戶在這個(gè)場(chǎng)景下可以選擇表格進(jìn)行不同行數(shù)的展示，這樣用戶就可以根據(jù)個(gè)人習(xí)慣調(diào)整表格的展示方式。

（分頁(yè)示例）

4. 編輯屬性面板

表格項(xiàng)屬性的展示，除了模態(tài)的彈框展示，還有右端面板拉出的形式。兩種其實(shí)都可以采用，但是具體使用就要看場(chǎng)景區(qū)分，需要整體聯(lián)系整個(gè)產(chǎn)品進(jìn)行考慮，例如右端如果做成屬性面板的話，產(chǎn)品全局就要規(guī)定相應(yīng)的屬性面板區(qū)域，這樣才能培養(yǎng)起用戶查看屬性的一些路徑。

（屬性面板彈出示例）

5. 可調(diào)整寬度表格

表格的數(shù)據(jù)如果很長(zhǎng)的話，經(jīng)常會(huì)被隱藏，不能完全展示，如果將表格每一列的寬度做成可以調(diào)整的形式，用戶就可以根據(jù)需要調(diào)整，以展示全量的信息，方便閱讀。

（可調(diào)整表格示例）

6. 帶斑馬紋表格

表格的形式可以說(shuō)是統(tǒng)一，也可以說(shuō)是單一，因此有時(shí)候需要緩解一下單一的印象，如果加上斑馬紋的顏色區(qū)分，就可以使得整體行與行之間的界限更加明顯，這樣也能增加表格的可讀性。

（帶斑馬紋表格示例）

7. 表格詳情查看

同樣是查看表格詳情的操作，那么與上文第四項(xiàng)，除了內(nèi)容以外，交互上有什么不同呢？其實(shí)仔細(xì)看的話會(huì)看到此處關(guān)閉的操作在左上角，而不是經(jīng)常見(jiàn)到的右上角，這樣的話，用戶從點(diǎn)擊到展開(kāi)的路徑就縮短了，這對(duì)于需要展開(kāi)多項(xiàng)的操作來(lái)看，會(huì)提升用戶的使用效率。

（表格詳情查看示例）

8. 可分類表頭

對(duì)于表格來(lái)說(shuō)，由于信息很多，所以用戶會(huì)需要將需要的信息挑出來(lái)，因此有時(shí)候會(huì)用到搜索、篩選和過(guò)濾等操作，而不同的操作一般會(huì)分布在不同的區(qū)域，這樣子操作的時(shí)候就有點(diǎn)割裂。但下圖的設(shè)計(jì)是將搜索與表頭結(jié)合的一種設(shè)計(jì)，這樣操作就會(huì)相對(duì)集中。但不好點(diǎn)就是比較占空間。

（可分類表頭示例）

9. 可排序表格

表格排序也是挑選表格信息的一種方法，一般會(huì)以一個(gè)表頭小箭頭的形式出現(xiàn)。例如說(shuō)日期表頭，就可以通過(guò)排序來(lái)進(jìn)行日期的排序。

（可排序表格示例）

10. 視覺(jué)化表格

上文也提到，表格的信息統(tǒng)一且單一，那么圖像化的數(shù)據(jù)展示就是一個(gè)很好切入點(diǎn)，可以讓人對(duì)于表格的數(shù)據(jù)有一個(gè)整體的印象，讓人可以一目了然。當(dāng)然數(shù)據(jù)可視化也不是說(shuō)到就能做到的事情，需要和開(kāi)發(fā)溝通，得到他們的支持與配合。在做之前也可以用excel盡量真實(shí)地模擬一下效果，以使得最后效果最為貼近，也增加說(shuō)服力。

（表格的視覺(jué)化示例）

當(dāng)然有時(shí)候由于技術(shù)的限制，不是每個(gè)屬性都可以照顧到，但是如果能盡量考慮，表格的設(shè)計(jì)會(huì)更加趨向于完美。

一些思考與示例

1、完善的空間還有很多

而且盡管這些屬性看似已經(jīng)很全，有時(shí)候看一些規(guī)范網(wǎng)站，表格的設(shè)計(jì)還是有很多可以完善的地方，例如說(shuō)Ant Design中提到表格批量選擇。如果我們進(jìn)行跨頁(yè)信息的選擇，如何可以將已選的信息傳遞給用戶呢？Ant Design中就作出了下圖的設(shè)計(jì)改良：

（Ant Design對(duì)于已選信息展示的設(shè)計(jì)）

只要用戶進(jìn)行了選擇，已選的信息便會(huì)以“標(biāo)簽”的形式出現(xiàn)在列表上方，方便用戶瀏覽已選信息，而且這種設(shè)計(jì)也使得跨頁(yè)的信息選擇的”增刪查改“更加快速。

2、即使是企業(yè)級(jí)的成熟設(shè)計(jì)，也會(huì)有缺陷

舉一個(gè)最近看到的小例子為參考，Salesforce Lightning，作為一個(gè)全球排名靠前的云CRM平臺(tái)，他們的表格設(shè)計(jì)雖然在視覺(jué)上還是很統(tǒng)一，但是細(xì)化到表格設(shè)計(jì)的一條條屬性，也是有著很大的優(yōu)化空間。例如說(shuō)下圖是對(duì)表格多選之后，進(jìn)行批量操作的流程圖。

（Salesforce Lightning表格批量操作）

首先，選擇區(qū)域與操作區(qū)域之間的移動(dòng)距離在頁(yè)面上是呈對(duì)角線的，距離較長(zhǎng)。另外表格操作區(qū)域的功能群組劃分，在批量操作這個(gè)層面來(lái)看，是將”無(wú)關(guān)操作“與”相關(guān)操作“放在了一起，那么用戶在進(jìn)行批量選擇之后，可能會(huì)比較難聯(lián)想到”批量“與”按鈕組“的相關(guān)性，從而中斷操作。

（Salesforce Lightning表格操作按鈕）

但，畢竟一個(gè)系統(tǒng)的設(shè)計(jì)不能總是每個(gè)方面都考慮到，因?yàn)樾畔⒌恼故疽彩怯胁煌木S度可以考慮。所以我個(gè)人理解看來(lái)，即便是領(lǐng)先的系統(tǒng)，為了維持整個(gè)體系的功能平衡，也會(huì)站在一個(gè)全局的角度思考，避免撿了芝麻丟了西瓜，因此有些細(xì)節(jié)會(huì)放到次要的地位去考慮，所以才會(huì)出現(xiàn)剛剛我提到的一些問(wèn)題。最近在看佐藤可士和一本關(guān)于整理術(shù)的一本書(shū)，里面也提到了關(guān)于“梳理”，“排序”，“分類”等可以將復(fù)雜問(wèn)題分解與解決的辦法，我覺(jué)得這種思想與“設(shè)計(jì)時(shí)考慮方方面面”是相似的。

盡管結(jié)果不一定是最完美的，我想作為設(shè)計(jì)師，將能考慮的細(xì)節(jié)都考慮，將能思考的問(wèn)題盡量思考，對(duì)于自身的積累總是有幫助的吧。共勉。

參考鏈接

1. https://uxdesign.cc/design-better-data-tables-4ecc99d23356
2. https://www.salesforce.com/blog/2015/08/future-of-crm-salesforce-lightning.html
3. https://ant.design/docs/pattern/table

相關(guān)閱讀

復(fù)雜中見(jiàn)條理 —— 數(shù)據(jù)表格設(shè)計(jì)點(diǎn)集合（上）

本文由 @交互小怪獸 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。