可能是最詳細的表格設計完全手冊！
本文從表格的組成元素、優秀表格的設計技巧、表格的操作互動等，給你一份全面的設計指南。
一、表格應用
表格，是一種常見的資訊組織整理手段，常用於資訊收集（展示）、資料分析、歸納整理等活動中，在網際網路產品應用中，非常適合於：
1. 需要組織和展示大量資訊資料
表格結構簡單，分隔歸納明確，特別適合組織和展示大量的資訊內容，且易於使用者瀏覽和獲取資訊。
2. 當資訊資料需要進行多種複雜操作時
需要對資訊進行排序、搜尋、篩選、分頁、自定義選項等操作。
3. 資訊上下間的對比
表格的歸納與分類，使資訊之間易於對比，便於使用者快速查詢其中的差異與變化、關聯和區別。
二、表格組成要素
表格的基本組成：標題+表頭+單元格。
- 標題：表格資訊內容的整體概括；
- 表頭：表格資訊的屬性分類或基本概括；
- 單元格：具體資訊內容的填充區域。
三、優秀表格設計技巧
1. 行與列
表格的組成，就是行與列的組合，行與列的變化，賦予了表格多樣性的特點。
行與列構成了單元格的長與高，不同的長高會有疏密之分，充實與透氣之感。
根據目的及資訊主體的不同，可通過行與列的顯隱變化，來更好的滿足資訊的傳達。
隱藏了縱向的線，更加強調行的特性，使橫向資訊更加連續通暢，則不強調縱向上下資訊之間的對比；
顯現縱向的線，使上下行之間的資訊增加了對比性。
2. 對齊，高效的資訊獲取方式
表格內的資訊通過對齊，會更加規範易理解，給使用者視覺上的統一感，且視線流動順暢，能夠讓人快速的捕捉到所要的內容。
- 文字資訊左對齊，因為現代人的閱讀方式習慣從左到右，符合正常的心智；
- 資料資訊右對齊，更加方便數字大小的直觀對比；
- 固定內容居中對齊，更好的資訊呈現及表格空間的節省；
- 表頭與資訊內容對齊方式一致，一致性以達到簡化，降低視覺噪音。
3. 減少視覺噪音，有效傳達為本
資訊內容的有效傳達是表格的服務本質，就表格本身而言應該是隱形的，減少使用者注意力，在保證整體結構的基礎上，儘量減少或削弱所謂的視覺裝飾。
4. 精簡表頭，專業術語給予解釋
表頭在能夠概括的情況下，儘量簡練、準確，一般可根據上下文關係來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。
同樣，對於專業術語或使用者不常見的名詞應給予一定的幫助說明。
5. 減少計算，為使用者多想一步
根據當前資料，並在歷史資料的基礎上給出差值、總計等處理性的結果，可以直達使用者所需即獲取資訊的目標，從而減少使用者心算或者線下處理的麻煩。一般在資料對比中較常用到，通過當前資料和歷史資料進行比較，來獲得更多的直觀資訊，例如股票的資料變化、音樂排行榜排名變化等。
6. 空白資料，由「-」填充
表格中經常會出現空資料或無資料的情況，留白處理會給使用者造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，是用「-」來填充顯示。
7. 視覺層級
可通過背景、放大、顏色等處理，icon圖示的應用，可使重要資訊突出，不同功能模組區分（例如：表頭與資訊內容）、活躍表格氛圍，增加視覺層次感等效果。
四、表格的操作互動
1. 操作
對錶格操作大體可分為顯性操作和隱形操作。顯性操作，指操作選項顯示在行內，明顯直觀；
隱性操作，當滑鼠懸停時或勾選才顯示操作選項，使介面簡潔明快，可減輕空間壓力，減少干擾。
2. 排序，讓資訊有序起來
可以讓無序資訊內容進行有序排列，排序分為升序和降序，一般用在資料、時間、數量上。
3. 搜尋和篩選，查詢更方便
在大量的表格資訊中，一一查詢猶如大海撈針，但通過關鍵字搜尋和條件篩選能夠幫助使用者快速的找到所需要的資訊內容。
4. 固定表頭，一目瞭然
當閱讀豐富且繁多的表格時，由於螢幕有限，使用者不得不拖動橫向或縱向滾動條來閱讀資訊，固定表頭，能夠讓使用者明白當前單元格內資訊的屬性而不至於不知道該資訊的意思，固定表頭，也是一種介面友好性的體現。
5. 分頁固定
若表格是分頁處理的，分頁會放在上部、下部或上下部均有，分頁固定省去了使用者需要翻到頂部或底部進行操作的麻煩。
6. 全選操作，效率加倍
若表格是分頁，在某些情況下全選則需要考慮分為單頁全選和整表全選，瀑布流式的載入就不需要做區分了。
7. 操作即反饋
當滑鼠指標懸停在表格列或行時，給予變化提示，特別在資訊列數較多的情況下更為重要，能夠讓人捕捉到所在的位置，而不至於視覺上的錯行，能夠降低人的心理壓力和增加掌控感。
8. 調整列寬度，檢視完整資料
允許調整列的寬度來檢視更加完整的縮略資料。被截斷的資料，預設支援滑鼠懸停時 tips 顯示完整資料。
9. 水平滾動，固定首尾列
呈現大型資料集時，水平滾動是不可避免的，通過橫向滾動檢視其它資料。將首列進行固定（若包含勾選操作，則一起固定），以便使用者將資料與物件進行對應。
若尾列包含列表操作，也將其進行固定，方便使用者直接操作。
10. 右側抽屜，更多詳情
單擊行連結，右側彈出抽屜顯示其他詳細資訊。
11. 內聯操作
允許使用者在表格中直接修改資料，而無需到單獨的編輯頁面。
12. 根據所需提供相應的自定義和設定
服務於企業應用的資料表格，本身資訊專案繁多，且需要滿足不同行業不同角色的需求，預設表格一般會提供通用的欄位指標，然後使用者可根據自身所需新增或調整系統所提供的其它欄位指標或進行自定義操作，讓表格具有了彈性化的特徵，以滿足個性需求。
總結
任何優秀的表格，本質上都是以使用者所需的角度去設計服務，並有效的傳達資訊內容。
良好的資料表格允許使用者對資訊進行掃描、分析、比較、過濾、排序和操作，以獲取洞察。
歡迎關注作者的微信公眾號：「int-PD」
