起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識復雜中見條理 —— 數據表格設計點集合（上）
數據表格中也包含著很多易忽略的設計點。
數據表格是很常見的設計元素。常見，以至于自己設計時會欠缺更加深入的理解與思考。
尤其是工作后接觸到了很多后臺系統，企業級系統等，更發現數據表格作為數據的載體，其實占據了比較重要的位置。它可以把數據，任務，有條理地歸類。可能對于面向消費者的產品來說，數據表格的重要性沒那么明顯，但對于復雜系統來說，它們的背后，是成千上萬的數據，而這些數據都需要一一呈現給用戶，所以數據表格的存在，則是大大簡化了數據的呈現與使用難度的。今天看到一篇文章介紹了數據表格的各種設計點，覺得很受用，因而希望分享一下。
1. 頂部固定滑動
頂部固定滑動是表格設計容易忽略的一個設計點，如果表格高度比屏幕高度高，就會需要使用滾動條來進行下拉查看數據，而這個時候表頭就會被隱藏。雖然說有時候光憑借數據就可以推斷出表格的表頭，例如說日期的格式，對于大多數人都是熟知的，但是對于一些后臺頁面，里面可能會包含更加復雜的數據，例如專業技術名詞，序列號等。因此在復雜情況下，表頭對于數據的理解和展示又是十分重要的部分，而且表頭中也包括了排序等操作。所以如果使用固定表頭的形式進行設計，就可以保證表頭一直展現，對于用戶理解整個表格也是有幫助的。
（頂部滑動示例）
2. 橫向固定滑動
這個設計適用于表頭項比較多的場景，由于有時候表格需要展示不同類目的數據，所以數據會橫向超出屏幕，這個時候就需要用戶橫向滑動的來展示更多數據。而如果表格的首列一般是數據的名字，滑動時如果消失了，就很難讓人辨認數據屬于哪個項，（這個時候我一般會用很笨的辦法，用眼睛死盯著屏幕滑回去看），如果首項可以固定，對于信息的辨別也是很有幫助的。
（橫向滑動示例）
3. 篩選彈窗
數據一復雜，篩選就更加是重要的模塊，圖中的篩選主要以表頭為中心，將表頭作為可以篩選的條件，這樣用戶在選擇的時候就可以選擇自己需要的表頭進行篩選。不過這種彈出篩選比起直接展示在外面的篩選操作步驟會多一些，而且一個弊端是不能實時進行表格的數據篩選展現。個人會覺得這個模塊如果展現在外面，會形成更加直接的操作。
（篩選彈窗示例）
4. 可展開表格
一個處理復雜數據的方式，是理清數據之間的關系，并進行分類，組合。下圖的表格就是將信息進行優先級區分，有一些次要的信息就折疊在表格內隱藏，需要的時候再展現。這樣的話，在一定程度也可以緩和數據項太多，超過屏幕，需要滑動展示的問題。
（展開表格示例）
5. 表格調整疏密
不同于列數的展示，疏密的調整更著重于數據視覺布局的呈現。那么為什么要這么麻煩不直接改列數呢？改疏密的一個好處是，數據的展示高度可以限定，那么用戶查看數據的時候也可以集中一些，避免滑動等操作引起的干擾。
（調整疏密示例）
6. 可自定義條列
給予用戶自定義展示表格的權利。即使是同一個表格，使用的用戶也是多樣的，可能是運營人員，可能是開發人員，可能是開發不同組的人員，那么對于不同的用戶，就需要去展示不同的表格信息。如果可以加上自定義功能，用戶就可以按照自己的需求去展示不同的表格內容。
（自定義條列示例）
7. 可篩選表格
這里的篩選與上文針對表頭的篩選類似，只是展示在了外面，如果技術能達到的話，數據也可以根據篩選條件實時展示。
（篩選示例）
8. 添加條目
添加條目的場景，一般用于一些工具類的軟件，這些軟件給予用戶創建表格，定制表格的能力，簡化了代碼的編寫。
（添加示例）
9. 表格內編輯
表格內的數據編輯，更為直接的方式就是鼠標懸浮，出現編輯選擇。這樣一個好處是避免編輯操作占據表格的一列，也可以使得操作更加集中與直接。當然這也需要一定的技術支撐，對于web化的界面是有可能的，但是對于一些離線軟件，例如依賴java swing編寫的界面，hover出現編輯的能力可能會弱一些。
（表內編輯示例）
10. 瀏覽詳情彈窗
列表的信息如果不能完全展現，也可以通過彈窗的形式承載，與下拉展現的不同在于，這種形式信息的展現需要離開頁面，以模態的方式展現，但對于需要用戶集中精力閱讀的信息，這種彈窗也是有一定優勢的。另外如果用戶需要集中編輯，使用彈窗也可以減少其他數據項的干擾。
（瀏覽詳情示例）
這些屬性雖然很全面，但要真正全面設計好一個表格，每一點都還是有需要仔細推敲的地方。下一篇里面，會繼續補充這些不同的屬性并嘗試分析。
參考鏈接
https://uxdesign.cc/design-better-data-tables-4ecc99d23356
本文由 @交互小怪獸 原創發布于人人都是產品經理。未經許可，禁止轉載。
謝謝提問哈。那不知道你那邊設計的是網頁端還是手機端的呢？是網頁端的話，可能不同情況有不同的考慮呢，可能有不同的處理方法，我這邊也大概說一下之前的一些方法哈，例如說我們之前做過tob產品的設計，就會有很多信息需要填，
1. 如果這些信息有先后順序的話，可以考慮導航式填寫
2. 然后關于頁簽多的問題，會考慮將類似的頁簽聚合到一個頁簽，然后分組將信息進行展示
希望對你有幫助哈。
有個問題請教一下
在一個詳情的頁面有很多表格和輸入框需要填寫，如果分頁簽，多的有十幾個，橫向頁簽太多體驗肯定不好，
縱向頁簽定位也會占用橫向空間
而且很多信息希望能放在同一個頁面操作起來也方便
有沒有什么更好的解決方法
這些交互細節基本都做過，但沒有細心地總結過，樓主辛苦了
謝謝天牛會長：），那有什么經驗也請隨時指正呢哈哈