表格设计 - UCD大社区

表格可读性提升分析

千鸟 — 2010-05-17 09:07:08

前边写了个大框架，好像有点笼统，因为没有各点的图文分析。最近用表格比较多，本文具体对表格可读性的提升做个系统总结，顺便把Readability Framework更新到了v1.1。如下图：

追溯表格(Table)的历史，最早设计师们喜欢用表格来布局，因为可视化简单直观，从而大大降低了web design的技术难度。在错误理解表格的基础上，不仅用错，而且模糊了表格的真正用途。到后来web standards改革，某些不实观点又把表格打入冷宫，认为

是罪恶之源。

实际上，用户会有各种复杂或简单的多维度大数据量内容展示需求，为了更好的对比分析因此才用到表格（比如Excel），因为表格可以让内容能更清晰易读。比如，在记事本上用Tab也可以排出具有良好可读性的“序列”效果，但毕竟不是直观且有语义的组织模式，因此我认为表格就是为可读性而生的。

表格是web上最常用的内容表现形式，所以多年来，关于表格的设计和代码一直是考验web designer基础的经典题目。在表现层如何让表格传达更好，考验视觉传达设计的功力；在语义层如何让表格结构更灵活，考验结构表现结合的功力。二者相辅相成，共同影响表格在表现层的可读性。那么哪些因素会影响表格的传达？应该如何做具体的传达提升？看下文例子。

行列组织关系模糊

主要关于单元格之间的关系问题对可读性的影响。通过辅助手段可以让信息呈现更好的差异化，或突出更重要的信息。从需求角度再次印证，HTML结构代码与表现效果紧密相关，语义化表格是我们进一步提升用户体验的核心基础。

表头表尾和表体明显区分，表头是

，表尾是，表体是，三个结构性代码组合使用。其目地是为了更好的用样式表控制视觉表现，以起到明显区分的作用（通常表头、表尾的效果一致）。区分了表头和表尾更容易控制，某些浏览器直接支持只滚动表身。如下图，表头表尾与表体的层次区分明显，截图有裁切：

用边框分隔单元格，使用定义{border-collapse}来合并边框，早期CSS不受重视的年代，做1像素细线表格还是挺不容易的事。给单元格加上边框后，可以更清晰的表达数据，并且不易看岔行。但是得注意，表格的边框颜色不能过于抢眼，否则看起来会很糟糕。如下图，1像素灰色边框表格和黑色文字的对比：

间行换色，其实与“用边框分隔单元格”是解决同一类问题，间行换色更适用于表格过宽的需求，一定程度上能加强避免读错。同样，间行换色的两种颜色不能反差过大，否则看来太“跳跃”。另外，间行换色也常与1像素边框同时使用，如果不定义边框颜色，此时的1像素边框是背景色的间隙效果。如下图，1像素表格的表体区域有不太明显的间行换色效果：

间列换色，也叫隔行换色，使用 & 组合标签对列进行格式化，等于是间行换色的“垂直”版本，可以更强化列与列之间的差异。虽然看起来用处有限，但往往在应对实际需求时，就是这样的简单改动可以避免使用JS再开发。如下图，分别给不同列指定背景色：

重要数据列强调，同样使用 & 来控制，可以任意指定数据列强调显示，表示当前的操作结果。如下图，表格的Visits字段，表示目前正在降序排列：

单元格内容不清晰

主要是单元格内容的展示以及数据属性对可读性的影响。分别阐述了根据数据特性定制显示的四种对齐方式，首先是满足用户需求，其次才是迎合用户的阅读习惯。最后一点，应该注意单元格的内容不留空。

可变长度字符串左对齐，“可变长度”指长度不一定的数据列，比如商品名称。此类情况应该符合用户的视线规律，左对齐排列，也能辅助对比明确各条数据的长短。如下图，表格的Title, Company, Location三个字段数据：

固定长度、较短字符串居中，“固定长度”指长度规格不会变化的数据列，比如日期2009.02.21（补0是数字书写规范）。“较短字符串”指很短也不需逻辑对比的数据列，比如操作链接，或表状态文字，放中间左右留白均等是折中的最好效果。如下图，表格的“报告、状态”两个字段数据：

可比较字符串右对齐，“可比较”指需要关联对比的数据列，基本都指数字的情况，比如钱有十位的￥24.30和百位的￥452.10。注意一点，这里的“可比较”其实也是“可变长度”的，只不过“可比较”是更重要的需求。表格的数据列对比，是各种系统和平台最经常碰到的需求，此点也是最容易被忽视的问题。如下图，表格的数字纵向对比效果：

合并列的单元格顶部对齐，“合并列的单元格”指使用了rowspan这个跨行属性，指需要在水平方向跨多个单元格的需求，复杂表格中一对多的关系。此时已经rowspan的单元格应该定义valign=”top”靠顶，以保证所有数据在第一行能显示完整。因为单元格默认垂直居中，如果是多行的数据表，用户从上往下的阅读开始往往搞不清楚对应的后续数据列内容。如下图，表格的“联系人、状态、价格”三个字段数据：

不留空白，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？正确做法，没有数据的显示0，给没有值的单元格划线或者打叉。如下图，单元格内划横杠表示不支持：

相关话题：表格设计源地址：http://blog.rexsong.com/?p=10271

表格的UI交互模式指南

mey99 — 2010-05-31 20:27:57

许多人都认同这样一个现象：表格虽然是用户界面设计中的一个重要部分，但是它们却经常会被忽视。表格应该显示让用户更易读，更易扫视，更易比较的结构化数据，但在很多情况下，表格数据却显得模糊不清。这就是很多人不喜欢表格的原因。

用户的日常工作经常使用表格，但是谁会需要让他们崩溃的东西呢。要改变这样的现状，下面给出一些使表格易用的指南。

行交替样式Alternating rows styling

这是很明显的，但是事实如此吗？看看今天的WEB应用，你就会发现很多并不适用。因此，行交替样式并不明显，这就是把他列为第一个来阐述的原因。

在数据较多的多行多列表格里用不同样式交替显示不同的行，这会提高用户区分数据的能力。可以采用背景色或者背景图片，如果采用背景色，背景颜色应该比页面颜色浅或者深一点。图像背景应该选择和符合整体配色方案的图片。也可以把背景色和背景图组合应用于表格边框。表格的header和footer部分应该易于识别，可以采用比表格行深或者浅的颜色。

BlinkCampaign的表格行采用了浅一点的亮绿色，header采用了稍微暗一点的绿色。

整行选择Full row selection

如果需要对某一行的局部做操作，让整行都可被单击选中。这种做法增大了点击区域减少了界面的混乱。一个应用的实例是，每一行只有“查看详情”可操作，鼠标悬停到这一行的时候整行样式都应该不同。有好几种方法可以实现这个效果，推荐jQuery插件的RowSelect 。

CrazyEgg应用了整行选择的方法展开当前选中行的详情（稍后我们会谈及该模式），鼠标悬停的行会高亮显示。我很喜欢他们对这块区域以及其他的应用的设计。
表格组节Table sections

当你想把相关的行组合在一起的时候可以考虑使用表格组节，组节把相关数据组合在一起，是表格的一部分。所有组节应用同样的列设置。举个例子，在一个显示国家列表的表格里，地区就是行组合的自然方式。所有的表格组节样式要有差别，并且能够收缩和展开。如果有需要，在每个组节里可以显示数据概要。

PulseApp用表格组节显示一级和二级的收支详情，每一级都可以再展开。

排序Sorting

如果不知道关键字，用户需要从大数据量的表格里查询某行时会很困难。用户在比较相近信息的时候通常会对表格列进行升降序排列。

对表格排序常用的是让表格标题可点击。排序的列应该有标记，通常是在列标题文字边放置一个三角箭头，指明当前列的顺序（升序或降序）。每次单击顺序会相反。

排序的列和不排序的列应该有明显区分。对某个重要列进行默认的排序。

TableSorter是个简单易用的插件。该插件可以对多种类型数据进行分类，你也可以自定义。该插件还支持多列排序，不过我对此不是很感冒。

OneHub应用清晰地标明了排序的列和顺序。我喜欢这个设计的原因是，即使是在如此小的区域，细节部分也做得很具体。
过滤 Filtering

当有大量数据要处理的时候过滤就很有用。使用下拉列表，单选按钮或者复选框进行过滤选择。在下面的例子里， builditwith.me使用下拉列表来对用户的职业兴趣和当前状态进行过滤。

然而这种过滤只能事先定义好过滤值。例如，你可以对工作类型按全职/兼职，设计/开发分类，你就不能按照姓/名来分类，因为这个值有无限多。在这种情况下可以应用关键字对数据进行过滤。输入任意关键字会得到按照关键字进行过滤的结果。

Builditwith.me提供了好几种过滤方式，每一种过滤方式有对应的列表显示。

分页显示Pagination

表格有大量数据的时候应该采用分页显示。分页很常见，但有时候效果并不好。分页适用于搜索引擎，但是并不意味着在任何情况下都适用。

Product Planner 采用了标准的分页显示，有页码数字，有上一页下一页。但是，你能告诉我第2页是什么？第3页？当然你不能。不用担心，标准分页可以得到改善。如下所示，通讯录很庞大，他们使用了数字和字母来分页。在这个例子里显示所有的页和隐藏页一样好。你可以以此类推应用到其他条件相似的表格。如果表格以日期来分类，你可以以日期范围来替代传统的分页数字（如第1页可以写成2.10-2.12，等等）

如果这样的分页链接太宽，那就采用标准分页（如上一个例子），同时在鼠标悬停的时候显示提示信息。

连续滚动Continiuos scrolling

与分页相反，连续滚动是一种新型的数据显示方式。这种方式不需要选择特定的数据类型，新的数据被加到列表里。在加载的时候显示进度，如下例所示，在dzone.com里，进度条显示有多少项已经被加载。

这种方式的易用性和可用性需要进行测试，以证明对你的用户是否合适。你可以在 UI Patterns里查看更多关于连续滚动的信息。

这种方式有一种变异版（或者说另外一种方式）。与不间断的滚动显示数据不同，在列表的最后，用户可以选择点击更多按钮浏览数据。Twitter就是这样的一个好范例。

固定表头 Fixed table header

这是一个不错的简单技巧，你可以用它来保持表头始终可见。数据列表相当庞大而复杂的时候，使用它可以帮助用户区分多列。 FixedHeaderTable插件是一个很好的例子。

不需要表头Headerless table

如果表格数据可以自我解释，表头就可以不需要。email表格是一个好例子，email的主题，发送者，发送日期都是不言自明不会混淆的。当然有的情况表头是不能去掉的，例如有两个不明确的日期，这时候你就需要定义一个表头。

Rivalmap公告栏是一个没有表头的好案例，表格里的数据一目了然而且格式固定，这种情况就不需要表头了。

展开行Expandable rows

关于这种模式我写过一篇文章，也建了一个可以轻松实现的jQuery小插件。这种模式的关键点就是可以给表格增加更多相关信息功能。以BuySellAds为例，展开行显示了出版商的广告详细信息，同时始终显示主行里的重要信息。

行的操作Row actions

对于海量数据来说，表格远比一个普通的占位符所能展现的多。表格内可以进行一些特定的交互操作。可以对某一行（或多行）进行操作。操作在行内显示，以鼠标悬停或者菜单的形式表现出来。

行内操作
把操作放在每一行数据的开头或结尾，是个简单方法。如下所示，Mixx把操作放在了每一行的末尾，这样很容易进行投票的操作。

鼠标悬停操作
如果有多重操作，可以采取鼠标悬停操作方式，该方式是由行内操作引申而来。鼠标悬停和鼠标离开分别显示和隐藏操作，通过这种方式可以节省界面空间。Project Estimator by Astuteo 对每一行都有编辑和删除操作，鼠标悬停到某一行的时候则显示操作按钮图标，离开则不显示。

菜单操作
如果每一行里都有多种操作，可以通过鼠标悬停或者单击行的时候显示这些操作。DropBox通过一个二级菜单展示了每个文件的多种操作，有效地使用了这种方式。

多行操作Actions on multiple rows
这种方式可以很好地让用户批量完成多行的操作。选中每一行前面的复选框，点击批量操作链接或按钮，用户可以选中多行进行操作。还是以DropBox为例，用户可以选中多条文件，点击菜单进行批量操作。

选项提供全选和全不选功能。

结束语

本文基本包括了常见的表格形式，并且辅以实例。建议阅读另外两篇关于表格的文章：Big Table issue试图为庞大的表格找到能适应视图的方法；15 Tips for Designing Terrific Tables揭示了表格可以应用的不同分层。

感谢Theresa Neil，Designing Web Interfaces的作者之一，你可以从她的书里看到表格的三种模式：行内编辑，超宽表格和按列过滤。

相关话题：表格设计源地址：http://article.yeeyan.org/view/155461/107291

表格设计你要知道的(下)

hardwear — 2011-11-15 22:23:21

接上篇，看似简单的表格真要设计好还是需要花些气力的，看看下面这些细节设计点，你是否也知道？

5.重点在于行或者列

表格是由最简单的行、列、单元格构成的，根据浏览的目的和希望突出的信息不同，行、列、单元格都可以通过一些变化进行强调，这是将信息通过表格传达出去的最为根本的使用方式。

邮箱产品就是强调行的表格设计的典范，像Gmail、Yahoo Mail、126邮箱，这些表格没有纵向的线条，用横线构架出行的视觉，数据信息均匀分布，更强调每一行内的信息连续性，不强调行与行的数据对比情况。同时，辅助于背景线条和底色，能够很好的提升阅读的连续性和效率。

而将横向的行内信息再次扩充就成了如同淘宝商品页一样的，行区分弱化的表格形式，既满足了丰富信息的呈现，也能很快速的进行与行之间的如同价格等关键信息的对比。

像GA、百度涅槃这种强调列的表也同样广泛使用，尤其这种纵列的强化是配合表格列排序功能而使用的，数据列多时需要根据某一列数据进行排序，作为主键进行提示强化。

6.条理的对齐

表格内的信息纵向列对齐是能够很好的形成视觉引导线，符合格式塔心理学中相近原则，一般常见的是文本信息左对齐，数字左对齐，金额右对齐，同时表格最右一列右对齐，这样的表格纵向列即使没有分割线也能很好的起到分隔作用。

对比的数据如果有了明确的对齐方式，会大大提升数据的浏览效率，增加对比的效果，像下面的图中，如果数据居中对齐没有明确的边界，阅读起来就会降低效率。

7.表头固定提升使用

随着表格的行和列都增加，这时候用户的瞬时记忆会遭遇阈限，根据7±2的原则超过这个范围时，用户需要增加信息来帮助浏览表格内的数据，比如百度的涅槃系统提供了丰富的数据列，而如果缺少表头的说明恐怕会很快遗忘掉该列数据是什么。

表头固定的另一种用途是可以将操作和表格的信息更好的进行联系，选择了表格内的数据行就可以进行相应的操作，提升了使用效率，不用再耗时耗力的寻找操作区域。

除了表头行的固定，表格的列进行固定也经常被采用，像就是百度统计这样，第一列是时间需要进行对比，固定了第一列使得阅读起来存在一个基础。

8.减少用户心算

对于进行对比分析的数据，给出差值、总计便于用户阅读，而尽量减少用户心算或者线下处理的过程，当前很多表格都会提示升降变化或者总计值提升，信息的理解和阅读效率。

表格的细节需要考虑的地方不少，是一种形式需要灵活的根据实际需求来进行设计，最大程度的突出用户关注的信息，对其他信息进行弱化，同时考虑用户的行为预期给予引导和帮助才能最大化的发挥表格的优势

相关话题：表格设计源地址：http://ued.baidu.com/?p=763