將復雜數據表格的設計點一點點理清，可能會使得表格更加趨于明朗。

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

1. 懸浮操作

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

（懸浮操作示例）

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

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

（多個彈窗的操作）

3. 分頁

分頁的操作可以帶給表格更多的展示空間。用戶在這個場景下可以選擇表格進行不同行數的展示，這樣用戶就可以根據個人習慣調整表格的展示方式。

（分頁示例）

4. 編輯屬性面板

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

（屬性面板彈出示例）

5. 可調整寬度表格

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

（可調整表格示例）

6. 帶斑馬紋表格

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

（帶斑馬紋表格示例）

7. 表格詳情查看

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

（表格詳情查看示例）

8. 可分類表頭

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

（可分類表頭示例）

9. 可排序表格

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

（可排序表格示例）

10. 視覺化表格

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

（表格的視覺化示例）

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

一些思考與示例

1、完善的空間還有很多

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

（Ant Design對于已選信息展示的設計）

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

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

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

（Salesforce Lightning表格批量操作）

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

（Salesforce Lightning表格操作按鈕）

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

盡管結果不一定是最完美的，我想作為設計師，將能考慮的細節(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

相關閱讀

復雜中見條理 —— 數據表格設計點集合（上）

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