原文地址：https://uxdesign.cc/design-better-data-tables-4ecc99d23356

數(shù)據(jù)如果不具有可讀性和可操作性，那就是沒有意義的。將來的成功的產(chǎn)業(yè)會將數(shù)據(jù)收集和更好的用戶體驗相結合，而好的數(shù)據(jù)表格會很大程度上促進這一用戶體驗。

好的數(shù)據(jù)表格允許用戶瀏覽、分析、對比、篩選、排序，并且可以操作信息以揭示數(shù)據(jù)意義.這篇文章呈現(xiàn)了一系列結構設計，交互原型和技巧來幫助你設計一個更好的數(shù)據(jù)表格。

固定表頭

固定表頭可以讓用戶在瀏覽信息的時候知道所查看的數(shù)據(jù)具體在哪一列。

水平滾動

呈現(xiàn)大量數(shù)據(jù)集時，水平滾動是不可避免的。將標識符數(shù)據(jù)放在第一列中是個好習慣。作為高級功能，可以對列進行單獨鎖定，以便用戶將數(shù)據(jù)與多個錨定標識符進行比較。

可調(diào)整大小的列

調(diào)整列大小允許用戶查看完整的縮寫數(shù)據(jù)。

行的樣式

斑馬紋、分割線和無分割樣式。

無分割線和斑馬紋對于規(guī)模較小的表格是很適用的，但是對于數(shù)據(jù)量較大的表格則有可能讓用戶失去焦點。分割線可以確保這一點，交替行（又名斑馬條紋）可幫助用戶在掃描長水平數(shù)據(jù)集時保持其位置。但是斑馬紋在較小規(guī)模的表格上使用時可能造成用戶誤以為其是hover效果。

展現(xiàn)密度

較小的行高可以讓用戶一次看到更多的數(shù)據(jù)而無需滾動。但是可能影響表格的可閱讀性。這也是為什么一些成功的數(shù)據(jù)表格可以讓用戶控制表格的顯示密度。

可視化總覽

數(shù)據(jù)可視化的總覽提供了附表的概述。它允許用戶在操作之前，大致的了解數(shù)據(jù)的基本情況和問題。

分頁

分頁通過在視圖中設置需要呈現(xiàn)的行數(shù)，具有導航到另一頁面的能力。上述示例提供了自定義每個視圖的行數(shù)的功能。這種模式經(jīng)常被無限滾動所取代。隨著用戶滾動，無限滾動逐漸加載結果。無限滾動對于探索網(wǎng)站很好，但對于優(yōu)先級應用程序通常是災難性的。

hover操作

當用戶懸停時提出額外的操作可以減少視覺雜亂。然而，它可能導致可發(fā)現(xiàn)性問題，因為用戶需要與表進行交互以暴露操作的呈現(xiàn)。

行內(nèi)編輯

行內(nèi)編輯允許用戶不用被導航到獨立的詳細頁面就可以改變數(shù)據(jù)

可擴展的行

可擴展的行能夠讓用戶在不失去對當前內(nèi)容關注的情況下看到更多詳細信息；

快速預覽

與展開行類似，快速查看可讓用戶在上下文中查看其他信息。

模態(tài)窗

能夠讓用戶不離開當前頁面，但是可以讓用戶的注意力更聚焦在額外的信息和操作上；

多個模態(tài)窗口

多模態(tài)窗口可以讓用戶通過一系列操作，對比不同條目的細節(jié)

從“行”到詳細數(shù)據(jù)

單擊行鏈接將表格轉(zhuǎn)換為左側的列表項目的視圖，右側的其他詳細信息。它使用戶能夠解析大型數(shù)據(jù)集，以及引用許多項目而不會丟失它們的位置。

可排序

能夠讓用戶排列順序

基礎的篩選功能

基本過濾允許用戶操縱表中提供的數(shù)據(jù)。

篩選列

此設計模式允許用戶對指定的列調(diào)節(jié)相應參數(shù)

可搜索列

可以讓用戶針對每一列搜索特色數(shù)據(jù)

增加列

可以讓用戶從一個數(shù)據(jù)集增加列。這是一種保持初始表格信息呈現(xiàn)簡潔且必要，也能夠讓用戶基于他們自己的使用場景添加列數(shù)據(jù)；

自定義列

這樣能夠讓用戶選擇呈現(xiàn)哪些列并如何排列。這種特殊功能還應該保證用戶可以存儲它的設置來應對之后的使用。

為什么表格重要？

數(shù)據(jù)已經(jīng)成為全球經(jīng)濟中的一種原生材料。對數(shù)據(jù)的渴求驅(qū)動了傳統(tǒng)產(chǎn)業(yè)的再創(chuàng)造。能源、媒體、制造業(yè)、物流、醫(yī)療、零售、金融甚至政府也都在進行數(shù)字化的轉(zhuǎn)變。

但是，不能可視化和可利用的數(shù)據(jù)是沒有意義的。下一個十年能夠存在的公司一定不僅是能夠擁有一流的數(shù)據(jù)，也能夠提供一流的用戶體驗。