Zi 字媒體

譯者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上次設置的那樣。 本文由 @Jimmy Wang 翻譯發佈於人人都是產品經理。未經許可，禁止轉載。