數(shù)據(jù)表格中也包含著很多易忽略的設(shè)計(jì)點(diǎn)。

數(shù)據(jù)表格是很常見的設(shè)計(jì)元素。常見，以至于自己設(shè)計(jì)時(shí)會欠缺更加深入的理解與思考。

尤其是工作后接觸到了很多后臺系統(tǒng)，企業(yè)級系統(tǒng)等，更發(fā)現(xiàn)數(shù)據(jù)表格作為數(shù)據(jù)的載體，其實(shí)占據(jù)了比較重要的位置。它可以把數(shù)據(jù)，任務(wù)，有條理地歸類。可能對于面向消費(fèi)者的產(chǎn)品來說，數(shù)據(jù)表格的重要性沒那么明顯，但對于復(fù)雜系統(tǒng)來說，它們的背后，是成千上萬的數(shù)據(jù)，而這些數(shù)據(jù)都需要一一呈現(xiàn)給用戶，所以數(shù)據(jù)表格的存在，則是大大簡化了數(shù)據(jù)的呈現(xiàn)與使用難度的。今天看到一篇文章介紹了數(shù)據(jù)表格的各種設(shè)計(jì)點(diǎn)，覺得很受用，因而希望分享一下。

1. 頂部固定滑動

頂部固定滑動是表格設(shè)計(jì)容易忽略的一個(gè)設(shè)計(jì)點(diǎn)，如果表格高度比屏幕高度高，就會需要使用滾動條來進(jìn)行下拉查看數(shù)據(jù)，而這個(gè)時(shí)候表頭就會被隱藏。雖然說有時(shí)候光憑借數(shù)據(jù)就可以推斷出表格的表頭，例如說日期的格式，對于大多數(shù)人都是熟知的，但是對于一些后臺頁面，里面可能會包含更加復(fù)雜的數(shù)據(jù)，例如專業(yè)技術(shù)名詞，序列號等。因此在復(fù)雜情況下，表頭對于數(shù)據(jù)的理解和展示又是十分重要的部分，而且表頭中也包括了排序等操作。所以如果使用固定表頭的形式進(jìn)行設(shè)計(jì)，就可以保證表頭一直展現(xiàn)，對于用戶理解整個(gè)表格也是有幫助的。

（頂部滑動示例）

2. 橫向固定滑動

這個(gè)設(shè)計(jì)適用于表頭項(xiàng)比較多的場景，由于有時(shí)候表格需要展示不同類目的數(shù)據(jù)，所以數(shù)據(jù)會橫向超出屏幕，這個(gè)時(shí)候就需要用戶橫向滑動的來展示更多數(shù)據(jù)。而如果表格的首列一般是數(shù)據(jù)的名字，滑動時(shí)如果消失了，就很難讓人辨認(rèn)數(shù)據(jù)屬于哪個(gè)項(xiàng)，（這個(gè)時(shí)候我一般會用很笨的辦法，用眼睛死盯著屏幕滑回去看），如果首項(xiàng)可以固定，對于信息的辨別也是很有幫助的。

（橫向滑動示例）

3. 篩選彈窗

數(shù)據(jù)一復(fù)雜，篩選就更加是重要的模塊，圖中的篩選主要以表頭為中心，將表頭作為可以篩選的條件，這樣用戶在選擇的時(shí)候就可以選擇自己需要的表頭進(jìn)行篩選。不過這種彈出篩選比起直接展示在外面的篩選操作步驟會多一些，而且一個(gè)弊端是不能實(shí)時(shí)進(jìn)行表格的數(shù)據(jù)篩選展現(xiàn)。個(gè)人會覺得這個(gè)模塊如果展現(xiàn)在外面，會形成更加直接的操作。

（篩選彈窗示例）

4. 可展開表格

一個(gè)處理復(fù)雜數(shù)據(jù)的方式，是理清數(shù)據(jù)之間的關(guān)系，并進(jìn)行分類，組合。下圖的表格就是將信息進(jìn)行優(yōu)先級區(qū)分，有一些次要的信息就折疊在表格內(nèi)隱藏，需要的時(shí)候再展現(xiàn)。這樣的話，在一定程度也可以緩和數(shù)據(jù)項(xiàng)太多，超過屏幕，需要滑動展示的問題。

（展開表格示例）

5. 表格調(diào)整疏密

不同于列數(shù)的展示，疏密的調(diào)整更著重于數(shù)據(jù)視覺布局的呈現(xiàn)。那么為什么要這么麻煩不直接改列數(shù)呢？改疏密的一個(gè)好處是，數(shù)據(jù)的展示高度可以限定，那么用戶查看數(shù)據(jù)的時(shí)候也可以集中一些，避免滑動等操作引起的干擾。

（調(diào)整疏密示例）

6. 可自定義條列

給予用戶自定義展示表格的權(quán)利。即使是同一個(gè)表格，使用的用戶也是多樣的，可能是運(yùn)營人員，可能是開發(fā)人員，可能是開發(fā)不同組的人員，那么對于不同的用戶，就需要去展示不同的表格信息。如果可以加上自定義功能，用戶就可以按照自己的需求去展示不同的表格內(nèi)容。

（自定義條列示例）

7. 可篩選表格

這里的篩選與上文針對表頭的篩選類似，只是展示在了外面，如果技術(shù)能達(dá)到的話，數(shù)據(jù)也可以根據(jù)篩選條件實(shí)時(shí)展示。

（篩選示例）

8. 添加條目

添加條目的場景，一般用于一些工具類的軟件，這些軟件給予用戶創(chuàng)建表格，定制表格的能力，簡化了代碼的編寫。

（添加示例）

9. 表格內(nèi)編輯

表格內(nèi)的數(shù)據(jù)編輯，更為直接的方式就是鼠標(biāo)懸浮，出現(xiàn)編輯選擇。這樣一個(gè)好處是避免編輯操作占據(jù)表格的一列，也可以使得操作更加集中與直接。當(dāng)然這也需要一定的技術(shù)支撐，對于web化的界面是有可能的，但是對于一些離線軟件，例如依賴java swing編寫的界面，hover出現(xiàn)編輯的能力可能會弱一些。

（表內(nèi)編輯示例）

10. 瀏覽詳情彈窗

列表的信息如果不能完全展現(xiàn)，也可以通過彈窗的形式承載，與下拉展現(xiàn)的不同在于，這種形式信息的展現(xiàn)需要離開頁面，以模態(tài)的方式展現(xiàn)，但對于需要用戶集中精力閱讀的信息，這種彈窗也是有一定優(yōu)勢的。另外如果用戶需要集中編輯，使用彈窗也可以減少其他數(shù)據(jù)項(xiàng)的干擾。

（瀏覽詳情示例）

這些屬性雖然很全面，但要真正全面設(shè)計(jì)好一個(gè)表格，每一點(diǎn)都還是有需要仔細(xì)推敲的地方。下一篇里面，會繼續(xù)補(bǔ)充這些不同的屬性并嘗試分析。

參考鏈接

https://uxdesign.cc/design-better-data-tables-4ecc99d23356

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