激情综合五月,亚洲天堂网一级毛片,国产A片免费视频一三区

搜索

APP

起點(diǎn)課堂會(huì)員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會(huì)特權(quán)

個(gè)人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場(chǎng)職場(chǎng)軟技能直播

12場(chǎng)求職輔導(dǎo)直播

12場(chǎng)專業(yè)技能直播

會(huì)員專屬社群

榮耀標(biāo)識(shí)

發(fā)布

注冊(cè) | 登錄

數(shù)據(jù)表格的設(shè)計(jì)

旺旺旺旺旺仔

2012-05-17

0 評(píng)論 7573 瀏覽 11 收藏

14 分鐘

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

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

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

表格輕易就能用簡(jiǎn)潔和易讀的方式來(lái)組織數(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è)非常簡(jiǎn)單的表格，但在恰當(dāng)?shù)目臻g和邊框的影響下，觀之悅目。另外，這些手提電腦的圖片和重要信息的加粗，讓這表格可讀性很非常高。

macbook

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

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

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

雖然每個(gè)用戶都知道怎樣理解一個(gè)表格，但你仍然可以做一些事情來(lái)讓你的作品在可用性上達(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è)表格就比較容易了。

goplan

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

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

使用圖標(biāo)

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

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

不要留空白單元格

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

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

backboard

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

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

abc

更大更復(fù)雜的數(shù)據(jù)表格

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

讓行列可移動(dòng)

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

允許行列的重新排序

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

為大型表格提供搜索功能

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

提供不同的視圖

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

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

flex

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

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