網(wǎng)站制作現(xiàn)代網(wǎng)頁設(shè)計(jì)數(shù)據(jù)表
能夠組織數(shù)據(jù)和信息是不可忽視的技巧。組織內(nèi)容和文本的方式，通常稱為復(fù)制，直接影響到用戶如何接收內(nèi)容。你必須找到一種方式來組織信息，它可掃描可以迅速被讀者。以干凈的方式組織信息的一種方法是使用數(shù)據(jù)表。數(shù)據(jù)表提供了顯示大量信息的結(jié)構(gòu)化方式。

自從Web開發(fā)開始以來，數(shù)據(jù)表一直在使用。桌子的結(jié)構(gòu)沒有改變，也不會(huì)改變，因?yàn)椋且粡堊雷印５?，盡管結(jié)構(gòu)保持不變，樣式已經(jīng)有了很長(zhǎng)的路；最近的表和早期的表一樣易讀。

數(shù)據(jù)表的常用用法

表以簡(jiǎn)潔易讀的方式組織信息非常容易。它們可以用來存儲(chǔ)和顯示大量的信息、少量的信息、靜態(tài)數(shù)據(jù)，甚至是不斷變化的數(shù)據(jù)。

由于表的類似圖表的布局，它們對(duì)于進(jìn)行比較非常有用。許多網(wǎng)站用它們來比較產(chǎn)品、服務(wù)以及如上所述的定價(jià)計(jì)劃。

下表對(duì)蘋果的網(wǎng)站比較所有的MacBook。該圖表包含大量信息，但仍有組織，易于閱讀。這是一個(gè)非常簡(jiǎn)單的表，但看起來不錯(cuò)，因?yàn)榱己玫拈g距和邊界。同時(shí)，注意筆記本電腦的圖像如何包含重要的信息是粗體。這使得表很可。

數(shù)據(jù)表通常用來比較定價(jià)計(jì)劃。它們提供空間來顯示計(jì)劃的名稱、價(jià)格和每個(gè)計(jì)劃的獨(dú)特之處。通常情況下，顯示定價(jià)計(jì)劃的表包含每個(gè)計(jì)劃的列和每個(gè)特性的行。然后，每個(gè)單元格內(nèi)部都有一個(gè)標(biāo)記，指示計(jì)劃是否具有該特定功能。

最后，表格經(jīng)常出現(xiàn)在電視網(wǎng)絡(luò)網(wǎng)站上以顯示日程安排。它們與典型的表有點(diǎn)不同，由于交錯(cuò)的觀察周期，細(xì)胞大小不同。除此之外，進(jìn)度表遵循完全相同的結(jié)構(gòu)。

有用數(shù)據(jù)表的組件

雖然幾乎每個(gè)用戶都知道如何理解一個(gè)表，但仍然可以做一些事情使您的可用性更高一級(jí)。

標(biāo)題+標(biāo)簽+數(shù)據(jù)=數(shù)據(jù)表

顯然，數(shù)據(jù)表由列標(biāo)題、行標(biāo)簽和單元格中的實(shí)際數(shù)據(jù)組成。一張桌子應(yīng)該是什么也沒有少了。

添加顏色時(shí)，應(yīng)使單元格與標(biāo)簽和標(biāo)題形成對(duì)比。使標(biāo)簽和標(biāo)題的背景顏色比用于核心數(shù)據(jù)的顏色不同。這使表格更容易閱讀和消除混亂。

下面的表goplan使用深色的列標(biāo)題和行標(biāo)簽。請(qǐng)注意，由于對(duì)比度，閱讀這張表要容易得多。

堅(jiān)持簡(jiǎn)單的網(wǎng)格

所有的表都是網(wǎng)格，它們的工作方式很好，那么為什么不同呢？網(wǎng)格是有效的，因?yàn)槟梢栽谝粋€(gè)小范圍內(nèi)容納大量的信息，并且查看器仍然能夠輕松地讀取內(nèi)容。

使用圖標(biāo)

圖標(biāo)是減少頁面上枯燥文本的好方法。圖標(biāo)還可以幫助組織數(shù)據(jù)表。

下面的表格可以很好地使用圖標(biāo)，看起來非常干凈。檢查標(biāo)記和交叉使用代替“是”和“否”。

不要留下空白空間

表通常有數(shù)據(jù)不適用的單元格。避免簡(jiǎn)單地將這些空格留空，而是用一個(gè)標(biāo)記填充它們，如十字（x）、圖標(biāo)或如下表中的破折號(hào)。

這個(gè)干凈的表使用三個(gè)破折號(hào)表示數(shù)據(jù)不適用于一個(gè)單元格；這看起來比離開一個(gè)空白的空間要好得多。

突出顯示重要列和行

許多數(shù)據(jù)表突出顯示提供重要信息或有用信息的列和行。在定價(jià)圖表中，您通常會(huì)看到突出顯示的最佳方案?？纯聪旅娴淖雷印Ｗ钪匾囊恍?mdash;—餐桌被觀看的日程安排——用粗邊框和不同背景色突出顯示。

使用更大和更復(fù)雜的數(shù)據(jù)表

到目前為止，我們主要集中在小型和簡(jiǎn)單的數(shù)據(jù)表上，但對(duì)于大型、復(fù)雜和數(shù)據(jù)重的表又如何呢？對(duì)于大型數(shù)據(jù)表，有許多可用性考慮事項(xiàng)。

使可移動(dòng)列

數(shù)據(jù)表在許多基于Web和安裝的軟件應(yīng)用程序中占重要地位。通常，開發(fā)人員將創(chuàng)建表，以便用戶可以按任何方式移動(dòng)和組織列。此外，應(yīng)用程序通常允許用戶添加和刪除列。

允許列重新排序

在具有頻繁變化的大量數(shù)據(jù)或數(shù)據(jù)的表中，應(yīng)該給用戶重新排序內(nèi)容和單元格的能力。您可以訂購數(shù)據(jù)的最常見的變量包括日期、字母表和重要性。

提供大表的搜索

如果數(shù)據(jù)廣泛且表很大，則應(yīng)提供一個(gè)搜索框。這將提高大表的整體可用性，并使查找數(shù)據(jù)更快。

提供不同的觀點(diǎn)

如果您的表包含有縮略圖或其他視覺內(nèi)容的信息，您可以使用的另一個(gè)可用性功能是以不同方式查看該信息的能力。提供查看所有文本、文本和縮略圖或僅縮略圖的選項(xiàng)。

看看這個(gè)基于flash的數(shù)據(jù)表。它提供了許多與大表有效的特性，如上所述，包括搜索、重新排序選項(xiàng)和不同視圖。

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

造型，或缺乏造型，在用戶如何看待表格和吸收數(shù)據(jù)方面起著重要作用。但是請(qǐng)記住，它仍然只是一個(gè)數(shù)據(jù)表，不應(yīng)該被重載。保持簡(jiǎn)潔易讀是你的總體目標(biāo)。陰影和藝術(shù)邊框可以與布局中的其他元素協(xié)同工作，但要遠(yuǎn)離數(shù)據(jù)表。下面是一些對(duì)數(shù)據(jù)表更有效的樣式元素。

交替的顏色

任何數(shù)據(jù)表最重要的特性是可讀性。實(shí)現(xiàn)這一點(diǎn)的一種方法是對(duì)列和行交替使用顏色。這使得它更容易閱讀和瀏覽。

下面的數(shù)據(jù)表布置得很好。表的行交替顏色，提供干凈、流暢、高效的布局。它有很多信息，但仍然可讀。

邊界
用邊界分離細(xì)胞是非常重要的。邊界使數(shù)據(jù)更易讀，可以消除混亂。有了大量的信息，不同單元格中的數(shù)據(jù)可以像一個(gè)一樣混合在一起，但是你想把它們分開。

充足的間距
和邊界一樣，數(shù)據(jù)之間的距離也有助于可用性。在每個(gè)單元格中，在邊界和數(shù)據(jù)之間留出足夠的填充。使用至少20像素的空間。

簡(jiǎn)單的背景顏色
正如我們一直說的，良好的數(shù)據(jù)表都是關(guān)于可讀性的。色彩和可讀性往往是齊頭并進(jìn)的。數(shù)據(jù)表應(yīng)該總是簡(jiǎn)單的，簡(jiǎn)單的方法之一是使用簡(jiǎn)單的顏色。避免使用明亮、令人討厭的背景顏色，因?yàn)檫@些顏色反映的數(shù)據(jù)不好。

數(shù)據(jù)表的展示
深圳網(wǎng)站制作正如所承諾的，下面是一些數(shù)據(jù)表正確的網(wǎng)站。
一個(gè)干凈和基本的表格，有不錯(cuò)的字體和良好的調(diào)色板。