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

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

1. 懸浮操作

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

（懸浮操作示例）

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

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

（多個彈窗的操作）

3. 分頁

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

（分頁示例）

4. 編輯屬性面板

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

（屬性面板彈出示例）

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

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

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

6. 帶斑馬紋表格

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

（帶斑馬紋表格示例）

7. 表格詳情查看

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

（表格詳情查看示例）

8. 可分類表頭

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

（可分類表頭示例）

9. 可排序表格

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

（可排序表格示例）

10. 視覺化表格

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

（表格的視覺化示例）

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

一些思考與示例

1、完善的空間還有很多

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

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

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

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

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

（Salesforce Lightning表格批量操作）

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

（Salesforce Lightning表格操作按鈕）

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

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

參考鏈接

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ù)雜中見條理 —— 數(shù)據(jù)表格設(shè)計點集合（上）

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