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

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

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

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

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

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

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

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

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

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

Titles + Labels + Data = Data Table

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

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

下面由Goplan制作的表格在列和行的標(biāo)題上使用了較暗的顏色。因?yàn)楸嫔膶?duì)比，讀這個(gè)表格就比較容易了。

堅(jiān)持使用簡單的方格

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

使用圖標(biāo)

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

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

不要留空白單元格

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

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

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

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

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

讓行列可移動(dòng)

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

允許行列的重新排序

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

為大型表格提供搜索功能

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

提供不同的視圖

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

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

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

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

交替顏色

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

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

邊框

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

足夠的空白

就像邊框，在數(shù)據(jù)之間的空白有助于確保可用性。在每個(gè)單元格中，在數(shù)據(jù)和邊框之間留下足夠的內(nèi)距(padding)。留至少20px的空白。

簡單的背景色

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

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

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

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

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

廣告

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