網頁設計應:提高網頁表格可讀性設計技巧

文章描述：提高表格可讀性的一些技巧.

表格的應用

由於工作原因，經常接觸到表格。我們發現，表格不但廣泛的運用在各類資料收集和分析，同時通過表格這樣一種二維矩陣來整理和陳列資訊時（即便最後的展示方式並非一個典型的表格樣式），能夠很好的表達資訊之間的邏輯關係，易於協助理解橫縱資訊之間的關係。

在實際的網頁設計應用中，表格橫縱相互獨立又相互關聯的模式尤其適用於：

1.組織和展示大量的資訊

表格簡單的結構不但能包含大量的資訊，且同時保證資訊的可讀性,便於讀者快速掃描資訊、從大量的條目中找到所需的資訊。

2.展示對比性資訊

通過合理的布局，表格能清晰的展示出同類對比資訊，便於讀者分辨不同條目資訊之間的關聯和區別，從而關注到關鍵、問題條目。

總的來說，一個構造清晰的表格版面配置，將大大提升讀者對資訊的接收速度和理解程度

例如下圖中蘋果官網對不同型號mac book的資訊陳列方式，就採用了表格的結構，清晰的展示了4款不同的macbook，及各自的效能、售價等屬性，同時讀者第一眼就可以掃描到並理解表格結構，橫向是4款macbook的排列，縱向分別列出了各自的屬性，然後進一步就可以根據自己的興趣點就4款macbook的不同屬性進行對比，資訊完整且便於掃描。

如上所述，表格常用來展示大量的、對比性的資訊，因此提高表格的可讀性、便於使用者快速掃描，是表格設計的關鍵。本文僅就筆者閱讀過的幾篇關於表格設計的文章結合工作中的一些拙見，整理成文，分享如下。

表格的要素

研究如何提高表格可讀性之前，我們先簡要闡述下表格的組成要素，這裡我們暫且這麼總結：表格 = 標題 + 表頭 + 列標籤 + 儲存格資料（資訊），如下圖

表格標題是對錶格整體的描述，應包含表格式資料的來源及屬性，使讀者對錶格內容有所認識，例如資料收集的日期、地區及其表格式資料的其他屬性。

列標籤和欄標籤（表頭） 是對本行/本列資料的描述，可以理解為是表格的骨架，是使用者快速掃描並接收表格版面配置的關鍵要素。

儲存格資料（儲存格資訊）這裡就不在多說，是表格的主體內容。

[1] [2] [3] [4] [5]  下一頁