数据表格的设计.pdf

数据表格的设计组织数据和信息是一个不可疏忽的能力组织内容和文字的方式（一般以copy的形式）会在用户怎样接收内容上有直接的影响网页设计需要找到一个方法组织内容以使其便于读者扫描和接收其中一个简洁的方法就是运用数据表格表格提供结构化的方式来展示大量的信息从web发展开始时起，表格就已被使用表格的结构至今没变，也不会变，这才让它不至于不是表格结构虽然没变动，不过样式风格却已经有了长远的发展；现在的表格仍然与早期的表格一样有可读性cleartrip数据表格的一般运用表格轻易就能用简洁和易读的方式来组织数据它们可用于保存和展示大量的数据，小量的信息，静态数据以及即使在不断地变动的数据与图表布局相似的表格用于做对比时非常有用很多网站在对比不同产品，服务，和我们将提到的价格上使用这类表格下面的表格是苹果公司在网站对比所有的麦金塔笔记本（MacBook)这个图表带有大量的信息，但仍然是便于扫描阅读的这是一个非常简单的表格，但在恰当的空间和边框的影响下，观之悦目另外，这些手提电脑的图片和重要信息的加粗，让这表格可读性很非常高macbook数据表格一般用做对比预算标价对比它们提供空间来展示预算的名字，价格以及每种预算的特点。

一般来说，预算计划显示成列，而价格显示成行这样每个单元格都标记着每个预算计划带有那些具体的特征最后，表格还常常用在电视网络网站展示节目表这类表格与一般的表格有不同的地方：单元格根据参差不齐的各个节目时间长度来决定自身的尺寸除此之外，节目表与别的表格结构无异一个高效的数据表格的组成部分虽然每个用户都知道怎样理解一个表格，但你仍然可以做一些事情来让你的作品在可用性上达到新的高度Titles + Labels + Data = Data Table很明显，一个数据表格由列的标题(Titles)和行的标签文字(Labels)，以及在数据单元格（cells)中的数据(Date)组成的不需多也不能少为表格加颜色时，你应当让那些单元格与列和行的标题形成对比让列和行的标题的背景色和数据单元格的背景色不同这样表格就更易读和减少错误下面由Goplan制作的表格在列和行的标题上使用了较暗的颜色因为辨色的对比，读这个表格就比较容易了goplan坚持使用简单的方格所有的表格都是方格的，当然这样的效果很好，所以我们不需要改动它方格之所以说是高效的是因为你的一个小的区域填写大量的信息，而浏览者还能轻易地理解里面的内容。

使用图标图标是在页面中减少烦人的文字的优秀的方法图标也可以帮助组织数据表格下面的表格非常高效地使用了图标，看起来很简洁勾和X分别代表“是“和“不是“mt不要留空白单元格表格有时会有一些单元格是没有数据的要避免简单地让这些地方空白，相反，可以在里面填一个标记，比如说X号，图标或者像下面的表格那样，破折号这个简洁的表格使用了三个破折号来表示里面的数据是空白的这样比简单地留空白看起来效果更好backboard高亮强调重要的行和列很多数据表格高亮一些提供非常重要或者有用的信息的行和列在价格图表中，你会经常看到最佳的预算计划是被高亮着看一下下面的表格，最重要的行–正在看的该天的日程安排表的那一列是用粗厚的边框和不同的背景色高亮着abc更大更复杂的数据表格至今为止，我们关注的主要是比较小和简单的表格，但怎样处理大型的复杂的数据非常多的数据吗？有不少专为大型数据表格的可用性思考：让行列可移动数据表格在很多软件应用中占有很重要的地位，无论是基于web的还是本地安装的一般来说，开发者会根据用户的需求来让那些行列可移动和可组织另外，应用程序通常允许用户删减行列允许行列的重新排序在有大量数据或者在数据经常变动的表格中，你应该给用户重新排序内容和单元格的权限和能力。

最常见的可变情况是，可以重新排序日期，字母和重要性为大型表格提供搜索功能如果数据是外延的和表格非常大，这里一个搜索框是必需的这样可改善总体的可用性，并让查找数据更快捷提供不同的视图如果你的表格的信息带有缩略图或者别的可视化内容，你能加上另一个可用性特征就是用不同的方式查看信息的能力，提供只看文本，文本和缩略图，只有缩略图几种查看的方式看一下下面基于flash数据表格它提供了很多用于大型表格的好方法，比如说搜索，重新排序以及不同视图flex数据表格和样式添加样式，或者缺少样式，都会影响到用户怎样查看一个表格和接收数据这个很重要不过数据表格也不宜过度加样式简洁和易读应是总体目标阴影和艺术边框对别的网页元素可能效果会很好，但表格最好别和他们沾边这里有一些样式元素能很好地服务表格交替颜色数据最重要的是可读一种方法就是给行和列加上交替颜色这样让它更易读和扫描下面是个铺砌得很好的表格表格的行有交替颜色，简洁，流动，高效它虽然数据大但仍保持很好的可读性mint边框用边框分隔单元格非常重要边框使数据更有可读性和减少错误在有巨大的数据的情况下，单元格的数据会看起来混合到到一块，但你要把它们分开来足够的空白就像边框，在数据之间的空白有助于确保可用性。

在每个单元格中，在数据和边框之间留下足够的内距(padding)留至少20px的空白简单的背景色好数据表格都会关注可读性（这个我们总是不厌其烦地在说）颜色和可读性总是紧密相连的表格应该是简单的，而保持简单的一个方法就是使用简单的颜色避免使用明亮的，不愉快的背景色数据表格佳作展示这里推荐一些网站的表格佳作Quantcast一个简单和基本的表格，它使用了漂亮的字体和颜色图案quancastJukeFly一个具有很多可用性特点和用户友好样式的大表格（基于flash）jukeflyeWedding样式漂亮，简洁，可读性强eweddingMedia Temple使用图标的小型表格，它提供了很好的可视化效果来代替文字mt1iTunes表格不仅在web上有，很多应用程序上也使用它itunesMosso一个很好看的表格，令人悦目的颜色和图标mossoZibler使用Flex的表格，提供搜索，移动行列以及重新排序的功能ziblerCleartrip一个复杂的信息量大的表格，不过仍易读另外还可排序和移动行列cleartripRealmac Software购物车也是建立在方格系统之上来自Realmac Software的例子realmacMT Support颜色和对比用得好mt2CBSCBS 的节目表cbsLong Term Clients一个有精彩的样式的表格，布局简洁大方，有交替颜色newspondMedia Temple来自 Media Temple另一个精彩表格dvFoxF的节目表，高亮了当天的内容foxQuommunication很多论坛首页是一个表格，这是一个例子forumViget一个结构安排和数据组织得很好表格vigetJoomla! Forum又是一个论坛的页面forum2翻译自Matt Cronin在noupe上的文章来源：。