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

來源:互聯網
上載者:User

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

表格的應用

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

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

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

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

2.展示對比性資訊

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

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

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

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

表格的要素

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

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

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

儲存格資料(儲存格資訊)這裡就不在多說,是表格的主體內容。

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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。