菜單導航

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

作者:?精裝之家 來源:?精裝之家 發布時間:?2019年10月17日 10:49:03

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

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

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

1. 固定表頭

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

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

2. 水平滾動

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

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

3. 可調整列寬度

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

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

4. 行樣式

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

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

5. 可調整數據密度

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

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

6. 提供可視化的圖表

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

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

7. 分頁

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

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

8. 鼠標懸停操作

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

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

9. 行內編輯

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

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

10. 可展開的行設計

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

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

11. 快速查看

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

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

12. 模態彈窗

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

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

13. 多模態彈窗

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

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

一定牛吉林十一选五