5分鐘,帶你掌握20個表格設計技巧

16 評論 28047 瀏覽 331 收藏 9 分鐘

譯者Jimmy:貌似翻譯項目走上了正軌,應該能保持一周更行一篇,或者兩周更新一篇的節奏。:)這次翻譯的是一篇關于數據報表的文章,對于沒有設計過報表的設計師來說,應該很有用!文章標題有所修改。原因自然是為了點擊量啦~ 哈哈~

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

1. 固定表頭

當用戶滾動表格時,固定表頭可以方便用戶快速獲取當前數據信息。

2. 水平滾動

對于一些比較大的表格來說,提供水平滾動非常有意義。在首列放置一些標識數據,并鎖定首列可以方便用戶去比較數據。

3. 可調整列寬度

用戶可以通過拖拽調整列寬,方便其看到格子內的完整數據。

4. 行樣式

可以通過加入斑馬線、分割線來提高數據的易讀性。用戶在面對大量數據的時候,可能會出現視覺丟失。而分割線可以方便用戶定位信息。在閱讀長的橫條數據表時,斑馬線樣式可以幫助用戶更好地集中注意力。但是在只有少量數據的報表上采取斑馬線設計,會出現可用性問題,因為用戶可能會想為啥有些行是高亮顯示的。

5. 可調整數據密度

行距更低的表格可以幫助用戶無需滾動即可查看更多數據。但是這可能會導致用戶在掃描數據的時候,看錯一些數據。這就是為何很多好的表格采用了類似的選項按鈕設計,可以讓用戶自己去選擇數據的密度。

6. 提供可視化的圖表

可視化的圖表可以讓用戶對下方的數據報表有一個初步的印象。同時,用戶在看數據報表前,就能從圖表那發現數據的問題和得出一些初步的結論。

7. 分頁

通過分頁功能,用戶可以調整單頁顯示的數據量。下方的例子,就是說明用戶可以自定義報表每頁顯示的行數。這種設計常常會被另一種設計所取代,那就是無限翻頁設計。(譯者Jimmy:就是類似 Pinterest 的自動刷新機制)當用戶滾動鼠標的時候,就會自動翻頁。無限翻頁設計對于一些「探索型」的網頁來說,特別有用,但是在一些需要表達優先級的場景就不太適合。(Jimmy:類似?Pinterest 就是一個探索型的場景,內容不分優先級。但是類似清單類的應用,就不適合了,因為清單是有先后順序且有優先級的。)

8. 鼠標懸停操作

如果需要加入更多操作,可以采用懸停操作設計。但是,這會導致可見性問題,因為用戶需要將鼠標移動到對應的位置,才知道有更多功能。

9. 行內編輯

用戶可以很方便地通過行內編輯功能編輯數據,而不需要跳轉到單獨的詳情頁面中進行編輯。

10. 可展開的行設計

提供可展開選項可以方便用戶在不丟失內容下,查看一些附加信息。

11. 快速查看

除了使用可展開的行的設計以外,還可以使用側邊欄彈出更多信息的設計。

12. 模態彈窗

模態彈窗允許用戶停留在表單視圖,同時又能讓用戶的注意力集中在更多的信息與操作上。

13. 多模態彈窗

多模態彈窗給高級用戶提供了更多的功能操作,同時還可以更方便地去比較數據的不同之處。

14. 行細節

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

15. 列支持排序

列支持按字母順序和數字大小進行排序。

16. 支持基本的過濾

基本過濾功能允許用戶快速過濾表單中的數據。

17. 篩選列功能

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

18. 可搜索列

通過快捷的搜索操作,允許用戶在每個列表中搜索特定的值。

19. 添加列

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

20. 可自定義列的位置

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

 

原文地址:Design Better Data Tables

譯者:Jimmy Wang

本文由 @Jimmy Wang 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 文章很實用

    來自廣西 回復
  2. 太棒了

    來自江蘇 回復
  3. 親這是什么軟件啊

    來自湖南 回復
  4. ??

    來自安徽 回復
  5. 很棒?。?!感謝,收藏了。

    來自廣東 回復
  6. 想知道excel上具體怎么操作。。

    來自上海 回復
  7. :mrgreen:

    來自廣東 回復
  8. 貌似不問題,閱讀時候出現內容消失啦

    回復
  9. 可視化圖用的什么軟件

    回復
  10. 請問,

    回復
  11. 請問這個原型交互圖是用什么軟件做的?

    回復
    1. 同問

      回復
    2. 同問,有沒有具體詳細的操作

      來自廣東 回復
    3. Axure 的動態面板不就可以做嗎?

      回復
  12. excel可以做到嗎

    回復
  13. 很實用,學習了

    來自浙江 回復