譯者Jimmy：貌似翻譯項(xiàng)目走上了正軌，應(yīng)該能保持一周更行一篇，或者兩周更新一篇的節(jié)奏。：）這次翻譯的是一篇關(guān)于數(shù)據(jù)報(bào)表的文章，對(duì)于沒有設(shè)計(jì)過報(bào)表的設(shè)計(jì)師來說，應(yīng)該很有用！文章標(biāo)題有所修改。原因自然是為了點(diǎn)擊量啦~ 哈哈~

好的數(shù)據(jù)表格允許用戶去掃描、分析、比較、篩選、分類以及調(diào)整信息從而分析出問題和得出解決方案。此篇文章主要是展示了一些設(shè)計(jì)框架、交互架構(gòu)和技術(shù)手段去幫助你設(shè)計(jì)出更好的數(shù)據(jù)表格。

1. 固定表頭

當(dāng)用戶滾動(dòng)表格時(shí)，固定表頭可以方便用戶快速獲取當(dāng)前數(shù)據(jù)信息。

2. 水平滾動(dòng)

對(duì)于一些比較大的表格來說，提供水平滾動(dòng)非常有意義。在首列放置一些標(biāo)識(shí)數(shù)據(jù)，并鎖定首列可以方便用戶去比較數(shù)據(jù)。

3. 可調(diào)整列寬度

用戶可以通過拖拽調(diào)整列寬，方便其看到格子內(nèi)的完整數(shù)據(jù)。

4. 行樣式

可以通過加入斑馬線、分割線來提高數(shù)據(jù)的易讀性。用戶在面對(duì)大量數(shù)據(jù)的時(shí)候，可能會(huì)出現(xiàn)視覺丟失。而分割線可以方便用戶定位信息。在閱讀長(zhǎng)的橫條數(shù)據(jù)表時(shí)，斑馬線樣式可以幫助用戶更好地集中注意力。但是在只有少量數(shù)據(jù)的報(bào)表上采取斑馬線設(shè)計(jì)，會(huì)出現(xiàn)可用性問題，因?yàn)橛脩艨赡軙?huì)想為啥有些行是高亮顯示的。

5. 可調(diào)整數(shù)據(jù)密度

行距更低的表格可以幫助用戶無需滾動(dòng)即可查看更多數(shù)據(jù)。但是這可能會(huì)導(dǎo)致用戶在掃描數(shù)據(jù)的時(shí)候，看錯(cuò)一些數(shù)據(jù)。這就是為何很多好的表格采用了類似的選項(xiàng)按鈕設(shè)計(jì)，可以讓用戶自己去選擇數(shù)據(jù)的密度。

6. 提供可視化的圖表

可視化的圖表可以讓用戶對(duì)下方的數(shù)據(jù)報(bào)表有一個(gè)初步的印象。同時(shí)，用戶在看數(shù)據(jù)報(bào)表前，就能從圖表那發(fā)現(xiàn)數(shù)據(jù)的問題和得出一些初步的結(jié)論。

7. 分頁

通過分頁功能，用戶可以調(diào)整單頁顯示的數(shù)據(jù)量。下方的例子，就是說明用戶可以自定義報(bào)表每頁顯示的行數(shù)。這種設(shè)計(jì)常常會(huì)被另一種設(shè)計(jì)所取代，那就是無限翻頁設(shè)計(jì)。（譯者Jimmy：就是類似 Pinterest 的自動(dòng)刷新機(jī)制）當(dāng)用戶滾動(dòng)鼠標(biāo)的時(shí)候，就會(huì)自動(dòng)翻頁。無限翻頁設(shè)計(jì)對(duì)于一些「探索型」的網(wǎng)頁來說，特別有用，但是在一些需要表達(dá)優(yōu)先級(jí)的場(chǎng)景就不太適合。（Jimmy：類似?Pinterest 就是一個(gè)探索型的場(chǎng)景，內(nèi)容不分優(yōu)先級(jí)。但是類似清單類的應(yīng)用，就不適合了，因?yàn)榍鍐问怯邢群箜樞蚯矣袃?yōu)先級(jí)的。）

8. 鼠標(biāo)懸停操作

如果需要加入更多操作，可以采用懸停操作設(shè)計(jì)。但是，這會(huì)導(dǎo)致可見性問題，因?yàn)橛脩粜枰獙⑹髽?biāo)移動(dòng)到對(duì)應(yīng)的位置，才知道有更多功能。

9. 行內(nèi)編輯

用戶可以很方便地通過行內(nèi)編輯功能編輯數(shù)據(jù)，而不需要跳轉(zhuǎn)到單獨(dú)的詳情頁面中進(jìn)行編輯。

10. 可展開的行設(shè)計(jì)

提供可展開選項(xiàng)可以方便用戶在不丟失內(nèi)容下，查看一些附加信息。

11. 快速查看

除了使用可展開的行的設(shè)計(jì)以外，還可以使用側(cè)邊欄彈出更多信息的設(shè)計(jì)。

12. 模態(tài)彈窗

模態(tài)彈窗允許用戶停留在表單視圖，同時(shí)又能讓用戶的注意力集中在更多的信息與操作上。

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

多模態(tài)彈窗給高級(jí)用戶提供了更多的功能操作，同時(shí)還可以更方便地去比較數(shù)據(jù)的不同之處。

14. 行細(xì)節(jié)

單擊行鏈接可以將表單轉(zhuǎn)換成另一種模式——左側(cè)顯示列表數(shù)據(jù)，右側(cè)顯示詳情數(shù)據(jù)。這樣用戶可以很方便地去分析一些復(fù)雜數(shù)據(jù)，還可以同時(shí)比較多組數(shù)據(jù)，且無需進(jìn)行退回或者一些復(fù)雜的操作。

15. 列支持排序

列支持按字母順序和數(shù)字大小進(jìn)行排序。

16. 支持基本的過濾

基本過濾功能允許用戶快速過濾表單中的數(shù)據(jù)。

17. 篩選列功能

允許用戶為特定的列去做篩選操作。

18. 可搜索列

通過快捷的搜索操作，允許用戶在每個(gè)列表中搜索特定的值。

19. 添加列

允許用戶添加列。這種方式可以保證在有限的空間下承載必要數(shù)據(jù)的同時(shí)，還能讓用戶按照所需添加額外的列。

20. 可自定義列的位置

允許用戶按照自己的需求，排列列的位置。此功能還要記錄用戶的操作，保證用戶下次使用時(shí)還是TA上次設(shè)置的那樣。

原文地址：Design Better Data Tables

譯者：Jimmy Wang

本文由 @Jimmy Wang 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。