組織數(shù)據(jù)和信息是一個不可疏忽的能力。組織內(nèi)容和文字的方式(一般以copy的形式)會在用戶怎樣接收內(nèi)容上有直接的影響。網(wǎng)頁設(shè)計需要找到一個方法組織內(nèi)容以使其便于讀者掃描和接收。其中一個簡潔的方法就是運用數(shù)據(jù)表格。表格提供結(jié)構(gòu)化的方式來展示大量的信息。

從web發(fā)展開始時起，表格就已被使用。表格的結(jié)構(gòu)至今沒變，也不會變，這才讓它不至于不是表格。結(jié)構(gòu)雖然沒變動，不過樣式風(fēng)格卻已經(jīng)有了長遠(yuǎn)的發(fā)展;現(xiàn)在的表格仍然與早期的表格一樣有可讀性。

數(shù)據(jù)表格的一般運用

表格輕易就能用簡潔和易讀的方式來組織數(shù)據(jù)。它們可用于保存和展示大量的數(shù)據(jù)，小量的信息，靜態(tài)數(shù)據(jù)以及即使在不斷地變動的數(shù)據(jù)。

與圖表布局相似的表格用于做對比時非常有用。很多網(wǎng)站在對比不同產(chǎn)品，服務(wù)，和我們將提到的價格上使用這類表格。

下面的表格是蘋果公司在網(wǎng)站對比所有的麥金塔筆記本(MacBook)。這個圖表帶有大量的信息，但仍然是便于掃描閱讀的。這是一個非常簡單的表格，但在恰當(dāng)?shù)目臻g和邊框的影響下，觀之悅目。另外，這些手提電腦的圖片和重要信息的加粗，讓這表格可讀性很非常高。

數(shù)據(jù)表格一般用做對比預(yù)算標(biāo)價對比。它們提供空間來展示預(yù)算的名字，價格以及每種預(yù)算的特點。一般來說，預(yù)算計劃顯示成列，而價格顯示成行。這樣每個單元格都標(biāo)記著每個預(yù)算計劃帶有那些具體的特征。

最后，表格還常常用在電視網(wǎng)絡(luò)網(wǎng)站展示節(jié)目表。這類表格與一般的表格有不同的地方：單元格根據(jù)參差不齊的各個節(jié)目時間長度來決定自身的尺寸。除此之外，節(jié)目表與別的表格結(jié)構(gòu)無異。

一個高效的數(shù)據(jù)表格的組成部分

雖然每個用戶都知道怎樣理解一個表格，但你仍然可以做一些事情來讓你的作品在可用性上達(dá)到新的高度。

Titles + Labels + Data = Data Table

很明顯，一個數(shù)據(jù)表格由列的標(biāo)題(Titles)和行的標(biāo)簽文字(Labels)，以及在數(shù)據(jù)單元格(cells)中的數(shù)據(jù)(Date)組成的。不需多也不能少。

為表格加顏色時，你應(yīng)當(dāng)讓那些單元格與列和行的標(biāo)題形成對比。讓列和行的標(biāo)題的背景色和數(shù)據(jù)單元格的背景色不同。這樣表格就更易讀和減少錯誤。

下面由Goplan制作的表格在列和行的標(biāo)題上使用了較暗的顏色。因為辨色的對比，讀這個表格就比較容易了。

堅持使用簡單的方格

所有的表格都是方格的，當(dāng)然這樣的效果很好，所以我們不需要改動它。方格之所以說是高效的是因為你的一個小的區(qū)域填寫大量的信息，而瀏覽者還能輕易地理解里面的內(nèi)容。

使用圖標(biāo)

圖標(biāo)是在頁面中減少煩人的文字的優(yōu)秀的方法。圖標(biāo)也可以幫助組織數(shù)據(jù)表格。

下面的表格非常高效地使用了圖標(biāo)，看起來很簡潔。勾和X分別代表“是“和“不是“。

不要留空白單元格

表格有時會有一些單元格是沒有數(shù)據(jù)的。要避免簡單地讓這些地方空白，相反，可以在里面填一個標(biāo)記，比如說X號，圖標(biāo)或者像下面的表格那樣，破折號。

這個簡潔的表格使用了三個破折號來表示里面的數(shù)據(jù)是空白的。這樣比簡單地留空白看起來效果更好。

高亮強調(diào)重要的行和列

很多數(shù)據(jù)表格高亮一些提供非常重要或者有用的信息的行和列。在價格圖表中，你會經(jīng)?？吹阶罴训念A(yù)算計劃是被高亮著?？匆幌孪旅娴谋砀?，最重要的行–正在看的該天的日程安排表的那一列是用粗厚的邊框和不同的背景色高亮著。 更大更復(fù)雜的數(shù)據(jù)表格

至今為止，我們關(guān)注的主要是比較小和簡單的表格，但怎樣處理大型的復(fù)雜的數(shù)據(jù)非常多的數(shù)據(jù)嗎?有不少專為大型數(shù)據(jù)表格的可用性思考：

讓行列可移動

數(shù)據(jù)表格在很多軟件應(yīng)用中占有很重要的地位，無論是基于web的還是本地安裝的。一般來說，開發(fā)者會根據(jù)用戶的需求來讓那些行列可移動和可組織。另外，應(yīng)用程序通常允許用戶刪減行列。

允許行列的重新排序

在有大量數(shù)據(jù)或者在數(shù)據(jù)經(jīng)常變動的表格中，你應(yīng)該給用戶重新排序內(nèi)容和單元格的權(quán)限和能力。最常見的可變情況是，可以重新排序日期，字母和重要性。

為大型表格提供搜索功能

如果數(shù)據(jù)是外延的和表格非常大，這里一個搜索框是必需的。這樣可改善總體的可用性，并讓查找數(shù)據(jù)更快捷。

提供不同的視圖

如果你的表格的信息帶有縮略圖或者別的可視化內(nèi)容，你能加上另一個可用性特征就是用不同的方式查看信息的能力，提供只看文本，文本和縮略圖，只有縮略圖幾種查看的方式。

看一下下面基于flash數(shù)據(jù)表格。它提供了很多用于大型表格的好方法，比如說搜索，重新排序以及不同視圖。

數(shù)據(jù)表格和樣式

添加樣式，或者缺少樣式，都會影響到用戶怎樣查看一個表格和接收數(shù)據(jù)。這個很重要。不過數(shù)據(jù)表格也不宜過度加樣式。簡潔和易讀應(yīng)是總體目標(biāo)。陰影和藝術(shù)邊框?qū)e的網(wǎng)頁元素可能效果會很好，但表格最好別和他們沾邊。這里有一些樣式元素能很好地服務(wù)表格。

交替顏色

數(shù)據(jù)最重要的是可讀。一種方法就是給行和列加上交替顏色。這樣讓它更易讀和掃描。

下面是個鋪砌得很好的表格。表格的行有交替顏色，簡潔，流動，高效。它雖然數(shù)據(jù)大但仍保持很好的可讀性。

邊框

用邊框分隔單元格非常重要。邊框使數(shù)據(jù)更有可讀性和減少錯誤。在有巨大的數(shù)據(jù)的情況下，單元格的數(shù)據(jù)會看起來混合到到一塊，但你要把它們分開來。

足夠的空白

就像邊框，在數(shù)據(jù)之間的空白有助于確?？捎眯浴Ｔ诿總€單元格中，在數(shù)據(jù)和邊框之間留下足夠的內(nèi)距(padding)。留至少20px的空白。

簡單的背景色

好數(shù)據(jù)表格都會關(guān)注可讀性(這個我們總是不厭其煩地在說)。顏色和可讀性總是緊密相連的。表格應(yīng)該是簡單的，而保持簡單的一個方法就是使用簡單的顏色。避免使用明亮的，不愉快的背景色。

數(shù)據(jù)表格佳作展示

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

本文題目：探討網(wǎng)頁制作中的數(shù)據(jù)表格設(shè)計
標(biāo)題來源：http://jinyejixie.com/news34/318384.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計公司、網(wǎng)站營銷、網(wǎng)站維護(hù)、全網(wǎng)營銷推廣、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)