由于長時間主導后臺產品的設計服務，表格的大量應用，總結了些許經驗，通過半個月的斷斷續續的整理歸納，希望對你有所幫助，歡迎閱讀！

表格應用

表格，是一種常見的信息組織整理手段，常用于信息收集（展示）、數據分析、歸納整理等活動中，在互聯網產品應用中，非常適合于：

1.需要組織和展示大量信息數據

表格結構簡單，分隔歸納明確，特別適合組織和展示大量的信息內容，且易于用戶瀏覽和信息獲取。

2.當信息數據需要進行多種復雜操作時

需要對信息進行排序、搜索、篩選、分頁、自定義選項等操作。

3.信息上下間的對比

表格的歸納與分類，使信息之間易于對比，便于用戶快速查詢其中的差異與變化、關聯和區別。

表格組成要素

表格的基本組成：標題+表頭+單元格

標題：表格信息內容的整體概括；

表頭：表格信息的屬性分類或基本概括；

單元格：具體信息內容的填充區域。

優秀表格設計技巧

1.行與列

表格的組成，就是行與列的組合，行與列的變化，賦予了表格多樣性的特點。
行與列構成了單元格的長與高，不同的長高會有疏密之分，充實與透氣之感。
根據目的及信息主體的不同，可通過行與列的顯隱變化，來更好的滿足信息的傳達。
隱藏了縱向的線，更加強調行的特性，使橫向信息更加連續通暢，則不強調縱向上下信息之間的對比；

顯現縱向的線，使上下行之間的信息增加了對比性。

2.對齊，高效的信息獲取方式
表格內的信息通過對齊，會更加規范易理解，給用戶視覺上的統一感，且視線流動順暢，能夠讓人快速的捕捉到所要的內容。
文本信息左對齊，因為現代人的閱讀方式習慣從左到右，符合正常的心智；
數據信息右對齊，更加方便數字大小的直觀對比；
固定內容居中對齊，更好的信息呈現及表格空間的節??；
表頭與信息內容對齊方式一致，一致性以達到簡化，降低視覺噪音。

3.減少視覺噪音，有效傳達為本
信息內容的有效傳達是表格的服務本質，就表格本身而言應該是隱型的，減少用戶注意力，在保證整體結構的基礎上，盡量減少或削弱所謂的視覺裝飾。

4.精簡表頭
表頭在能夠概括的情況下，盡量簡煉、準確，一般可根據上下文關系來進行減短簡化，以達到節省表格頭部空間和減輕視覺壓力的作用。

5.減少計算，為用戶多想一步

根據當前數據，并在歷史數據的基礎上給出差值、總計等處理性的結果，可以直達用戶所需即獲取信息的目標，從而減少用戶心算或者線下處理的麻煩。一般在數據對比中較常用到，通過當前數據和歷史數據進行比較，來獲得更多的直觀信息，例如股票的數據變化、音樂排行榜排名變化等。

6.空白數據，由“-”填充

表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎？明智的做法，是用“-”來填充顯示。

7.視覺層級
可通過背景、放大、顏色等處理，icon圖標的應用，可使重要信息突出，不同功能模塊區分（例如：表頭與信息內容）、活躍表格氛圍，增加視覺層次感等效果。

表格的操作交互

1.操作
對表格操作大體可分為顯性操作和隱形操作。顯性操作，指操作選項顯示在行內，直觀明顯；

隱形操作，當鼠標懸停時或勾選才顯示操作選項，使界面簡潔明快，可減輕空間壓力，減少干擾。

2.排序，讓信息有序起來
可以讓無序信息內容進行有序排列，排序分為升序和降序，一般用在數據、時間、數量上。

3.搜索和篩選，查找更方便
在大量的表格信息中，一一查找猶如大海撈針，但通過關鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內容。

4.固定表頭，一目了然
當閱讀豐富且繁多的表格時，由于屏幕有限，用戶不得不拖動橫向或縱向滾動條來閱讀信息，固定表頭，能過讓用戶明白當前單元格內信息的屬性而不至于不知道該信息的意思，固定表頭，也是一種界面友好性的體現。

5.分頁固定
若表格是分頁處理的，分頁會放在上部、下部或上下部均有，分頁固定省去了用戶需要翻到頂部或底部進行操作的麻煩。

6.全選操作，效率加倍
若表格是分頁，在某些情況下全選則需要考慮分為單頁全選和整表全選，瀑布流式的加載則就不需要做區分了。

7.操作即反饋
當鼠標指針懸停在表格列或行時，給予變化提示，特別在信息列數較多的情況下更為重要，能夠讓人捕捉到所在的位置，而不至于視覺上的錯行，能夠降低人的心里壓力和增加掌控感。

8.根據所需提供相應的自定義和設置
服務于企業應用的數據表格，本身信息項目繁多，且需要滿足不同行業不同角色的需求，默認表格一般會提供通用的字段指標，然后用戶可根據自身所需添加或調整系統所提供的其它字段指標或進行自定義操作，讓表格具有了彈性化的特征，以滿足個性需求。

總結

任何優秀的表格，本質上都是以用戶所需的角度去設計服務，并有效的傳達信息內容。

本文為作者@Wing Hu原創發布于人人都是產品經理，未經許可，禁止轉載。