表格的應用
由於工作原因，經常接觸到表格。我們發現，表格不但廣泛的運用在各類資料收集和分析，同時通過表格這樣一種二維矩陣來整理和陳列資訊時（即便最後的展示方式並非一個典型的表格樣式），能夠很好的表達資訊之間的邏輯關係，易於幫助理解橫縱資訊之間的關係。
在實際的網頁設計應用中，表格橫縱相互獨立又相互關聯的模式尤其適用於：
1.組織和展示大量的資訊
表格簡單的結構不但能包含大量的資訊，且同時保證資訊的可讀性,便於讀者快速掃描資訊、從大量的條目中找到所需的資訊。
2.展示對比性資訊
通過合理的佈局，表格能清晰的展示出同類對比資訊，便於讀者分辨不同條目資訊之間的關聯和區別，從而關注到關鍵、問題條目。
總的來說，一個構造清晰的表格佈局，將大大提升讀者對資訊的接收速度和理解程度
例如下圖中蘋果官網對不同型號mac book的資訊陳列方式，就採用了表格的結構，清晰的展示了4款不同的macbook，及各自的效能、售價等屬性，同時讀者第一眼就可以掃描到並理解表格結構，橫向是4款macbook的排列，縱向分別列出了各自的屬性，然後進一步就可以根據自己的興趣點就4款macbook的不同屬性進行對比，資訊完整且便於掃描。
如上所述，表格常用來展示大量的、對比性的資訊，因此提高表格的可讀性、便於使用者快速掃描，是表格設計的關鍵。本文僅就筆者閱讀過的幾篇關於表格設計的文章結合工作中的一些拙見，整理成文，分享如下。
表格的要素
研究如何提高表格可讀性之前，我們先簡要闡述下表格的組成要素，這裡我們暫且這麼總結：表格 = 標題 + 表頭 + 行標籤 + 單元格資料（資訊），如下圖
表格標題是對錶格整體的描述，應包含表格資料的來源及屬性，使讀者對錶格內容有所認識，例如資料收集的日期、地區及其表格資料的其他屬性。
行標籤和列標籤（表頭） 是對本行/本列資料的描述，可以理解為是表格的骨架，是使用者快速掃描並接收表格佈局的關鍵要素。
單元格資料（單元格資訊）這裡就不在多說，是表格的主體內容。
提高表格可讀性的一些技巧
1. 根據表格的用途，設計表格的佈局
如下圖，兩張表格中所包含的資料完全相同，是關於10座山峰的高度和人類登頂年份資料。不同的是他們的成列方式：表1a根據山峰的高度排序陳列，而表1b則根據人類登頂山峰的年份排序陳列，一眼之下，這兩張表無設計優劣高下之分，決定使用兩站表中的哪一張的根據是這組資料的用途，如果這張表是用於向讀者展示世界上的TOP 10山峰，則山峰的高度則是重點資訊，a表的展示方式會更加合適；反之，如果這張表意在展示10大高峰中，哪座山峰是人類最先登頂的，人類先後登頂的時間順序是讀者的主要興趣點，則表b就更加適用。
2. 減少讀者計算
其實類似上一點，表格的指標也不是永遠固定的，而是從讀者閱讀表格的目的出發，調整所需展示的指標。在原始資料的基礎上給出差值、總計等分析性的資料，可以直達使用者閱讀的目標，而儘量減少使用者心算或者線下處理的過程。例如下圖展示了2010年與2009年兩年的公司財政報表，檢視兩年的具體資料當然必要，但深入分析，讀者之所以要並列檢視兩年的資料，目的在於對比兩年的資料變化，因此將指標變化情況列出能幫助使用者更快的達成目標。
3.精簡指標，創造資訊層級
儘量減少或壓縮指標數量，避免出現使用者不需要的資料，預設只展示使用者所必須的資訊，使用者需要的非重點輔助資訊可以通過提供深入細節的入口（彈窗、下拉）等形式來解決，僅在使用者需要時進行提供。創造資訊層級，避免無主次的鋪出所有資訊，干擾使用者快速掃描定位目標條目。例如易迅的“我的訂單”列表中，就將使用者的資訊、訂單狀態跟蹤資訊進行了預設隱藏，同時通過連結色很好的提示了進一步細節資訊的入口，在使用者需要時，可以方便的查閱。
4.不留空白單元格
當表格單元格中沒有相應資料時，要避免直接留出空白單元格。空白單元格容易造成讀者的困惑甚至誤解，讀者會搞不清楚到底是沒有資料，還是根本沒有值？正確做法，沒有資料的顯示0，給沒有值的單元格劃線或者打叉。如下圖：
5.斑馬條的運用
橫向或縱向的斑馬線以及懸停高亮底色能夠很好的引導使用者的視線，避免在閱讀時出現錯行、迷失的情況：斑馬線會使得行與行的界限更為分明，尤其對資料列較多時的橫向引導得到加強，這樣看行內的內容時不容易錯行，而懸停變色行主要是配合操作互動，明確區分出游標所在的行。
6.高亮重點資訊，提高閱讀速度
通過合理的使用icon、背景色等視覺元素高亮重點資訊，能夠提高使用者的閱讀速度，幫助讀者更快定位重點資訊，例如下表中利用紅綠的上下箭頭很好的向使用者表達了年度財務的變化情況。
7.對齊，便於使用者快速瀏覽
對比的資料如果有了明確的對齊方式，會大大提升資料的瀏覽效率，增加對比的效果。通常，我們將資料右對齊，便於對比：通過數字位數的長短即可對比數字的量級和大小；文字左對齊，符合人們閱讀從左到右的習慣；而對一些固定長度的狀態文字（如已完成，待支付等）採用居中對齊，使這些狀態文字更突出。
像下面的圖中，如果資料居中對齊沒有明確的邊界，閱讀起來就會降低效率。
經過調整後的下一張圖中，我們就能看到，當資料對齊設計後，資料之間自動形成了規整的線，便於視線的流動。
8.設計視覺層級，引導讀者視線
通過調整標題、標籤的字型，邊框線的設計、底色的運用，從而計出合理的視覺層級，引導讀者的視線流動曲線。例如下圖：
9. 堅持使用簡單的矩陣佈局，儘量減少視覺噪音
講了很多通過表格style來提高表格可讀性的方法，但是我們同時需要謹記的是，表格的主體是表格中所承載的資料資訊，在進行表格的設計時，設計師們尤其要注意去除所有非必要的視覺元素，讓使用者將所有的注意力集中在資料資訊上，而不是無關的邊框、底色等。所有的視覺元素應該為更好的幫助使用者閱讀而服務，除此之外，再精美的設計都是對錶格的破壞。
下圖是個極端的例子，無謂的邊框設計，大大降低了這張表格的可讀性。
第3點中我們提高，在取捨表格的內容時，要儘量精簡指標，減少使用者一次性接收的資訊量過於龐大，尤其不要超出使用者的視覺範圍，通過拖拽的等方式查閱表格。但在實際想運用中，表格指標過多的情況，還是經常出現。但實在無法精簡指標的時候我們能怎樣提高表格的可讀性呢，以下幾個方法或許能有所幫助。
10.固定表頭、標題列
當在閱讀資料龐大的表格時，讀者不得不通過拖拽橫向或縱向滾動條來閱讀資料，固定表格的表頭或行標題列，能幫助讀者在閱讀過程中仍清晰的知曉單元格資料的屬性。比如百度的涅槃系統提供了豐富的資料列，而如果缺少表頭的說明恐怕會很快遺忘掉該列資料是什麼。
11.提供自定義選擇
由於一份資料包表，往往需要滿足各種不同的角色在不同情況下的需求，因而在資料內容上，一般採取寧多勿少的原則，即系統提供儘可能詳細的資料給使用者，由此就造成了表格指標過多，難以在一個螢幕內完整展示，導致需要橫向拉伸，極大的降低了表格的可讀性。在這個問題上，我們採取的方法是將所有的指標名稱羅列在表格上方，並提供核取方塊選擇，在預設情況下僅展示最常用、最重要的幾個指標（如下圖）。這樣做的好處是，首先，使用者能在表格上方看多所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況；其次，使用者可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。
12. 提供搜尋和篩選
提供表格搜尋和篩選是幫助讀者根據自身需求減少資料量的有效工具，使用者通過輸入自己所需的特殊條件，從而快速得到目標資料條目。
13.提供排序
通過資料排序的方式，可以快捷的發掘出關注的資訊，很好的幫助讀者發現資訊條目之間的關係，提高關鍵條目的優先順序。這個方法不但在資料行多時適用，在資料量並不那麼大時也同樣適用。
總結
1. 從使用者閱讀表格的目標出發設計表格的內容和佈局
2. 從提高使用者閱讀速度的功能角度出發進行表格的視覺設計，避免過度設計
3. 當表格指標、資料過多時，提供一些自定義的工具幫助使用者自助選擇出最需要的資料條目
自：騰訊ECD