複雜數據表的設計方式探究

複雜數據表的設計方式探究

來自專欄 線框仔的日常

我們平時經常可以在dribbble上看到很多好看的數據表(table)設計，然而這些設計具有一個共同點，那就是數據量比較小，充足的空間和留白讓整個界面顯得美觀。但是在自己的實際工作中，to B產品的數據量往往非常龐大，欄位非常多，如何將數據表設計得簡潔易用成為了更首要的任務。

我們先隨便畫一個比較常規的數據表（上圖），符合我們所說的數據量大欄位多的特點，在當前屏幕尺寸下剛好佔滿了主要視圖區域。如果我們繼續分割屏幕區域，繼續增加欄位呢？比如我們有一個12列的數據表，如果我們按百分比分配列寬，展示出來的效果會是每一個超出寬度的列都自動換行，整個數據表會丑得無法直視。那麼，根據以往的經驗，我總結出3種改進辦法：

1. 為數據表添加橫向滾動條

增加橫向滾動條是最簡單的方法。缺點是當用戶想要查看每個條目的時候要來回拖動滾動條，操作比較不便。

稍微改進的版本：為數據表增加固定列的設計，類似於Excel中固定單元格的功能（參考Philipp Sporrer的文章Advanced Data Tables in React）

點擊查看動圖（來源：Advanced Data Tables in React by Philipp Sporrer）

2. 隱藏次要信息：

當一張數據表大到超出顯示範圍的時候，其實我們更應該問自己一個問題：這些信息是否都有必要在第一時間展示給用戶？如果答案是否定的，我們可以考慮對信息進行整理。

第一種方法，我們可以將欄位設計成可篩選，默認隱藏次要信息，用戶可根據需求自行設置：

點擊查看demo

第二種方法，利用FooTable，將次要列摺疊。此方法尤其適合響應式設計。

點擊查看動圖

3. 改變數據展現形式：

第2點中我們談到對信息的整理，區分重要性只是一個最簡單的整理方式。只是單純地把一個龐大的數據表展示給用戶，這讓我聯想到作為數據分析師時整天與Excel打交道的經歷，但是把這種設計應用到網頁中是不是真的合適呢？以我們自身的產品為例，用戶的身份有管理者、工程師、銷售人員等等，成分複雜，每個人的需求不盡相同。多數用戶在網站上直接查看數據表更多是想直觀地獲取他想要結論，並非利用網站的數據表進行計算和數據處理。因此，我們其實可以進行一些大膽的改進，拋棄數據表的展現形式，將信息進行更細緻的分類、重組，用其他方式展現出來，比如：

點擊查看動圖
推薦閱讀：