提高表格可读性的一些技巧.pdfVIP

提高表格可读性的一些技巧 表格的应用 由于工作原因 ，经常接触到表格。我们发现 ，表格不但 泛的运用在各类数据收集和分析 ，同时通 过表格这样一种二维矩阵来整理和陈列信息时 （即便最后的展示方式并非一个典型的表格样式 ）， 能够很好的表达信息之间的逻辑关系 ，易于帮助理解横纵信息之间的关系。 在实际的网页设计应用中 ，表格横纵相互独立又相互关联的模式尤其适用于 ： 1.组织和展示大量的信息 表格简单的结构不但能包含大量的信息 ，且同时保证信息的可读性,便于读者快速扫描信息、从大量 的条目中找到所需的信息。 2.展示对比性信息 通过合理的布局 ，表格能清晰的展示出同类对比信息 ，便于读者分辨不同条目信息之间的关联和 区别 ，从而关注到关键、问题条目。 总的来说 ，一个构造清晰的表格布局 ，将大大提 读者对信息的接收速度和理解程度 例如下图中苹果官网对不同型号mac boo k的信息陈列方式 ，就采用了表格的结构 ，清晰的展示了4 款不同的macboo k ，及各自的性能、售价等属性 ，同时读者第一眼就可以扫描到并理解表格结构 ， 横向是4款macboo k的排列 ，纵向分别列出了各自的属性 ，然后进一步就可以根据自己的兴趣点就4 款macboo k的不同属性进行对比 ，信息完整且便于扫描。 如上所述 ，表格常用来展示大量的、对比性的信息 ，因此提高表格的可读性、便于用户快速扫描 ， 是表格设计的关键。本文仅就笔者阅读过的几篇关于表格设计的文章结合工作中的一些拙见 ，整理 成文 ，分享如下。 表格的要素 研究如何提高表格可读性之前 ，我们先简要阐述下表格的组成要素 ，这里我们暂且这么总结 ：表格 = 标题 + 表头 + 行标签 + 单元格数据 （信息 ），如下图 表格标题是对表格整体的描述 ，应包含表格数据的来源及属性 ，使读者对表格内容有所认识 ，例如 数据收集的日期、地区及其表格数据的其他属性。 行标签和列标签 （表头 ） 是对本行/本列数据的描述 ，可以理解为是表格的骨架 ，是用户快速扫描 并接收表格布局的关键要素。 单元格数据 （单元格信息 ）这里就不在多说 ，是表格的主体内容。 提高表格可读性的一些技巧 1. 根据表格的用途 ，设计表格的布局 如下图 ，两张表格中所包含的数据完全相同 ，是关于10座山峰的高度和人类登顶年份数据。不同的 是他们的成列方式 ：表1a根据山峰的高度排序陈列 ，而表1b则根据人类登顶山峰的年份排序陈列 ， 一眼之下 ，这两张表无设计优劣高下之分 ，决定使用两站表中的哪一张的根据是这组数据的用途 ， 如果这张表是用于向读者展示世界上的T O P 10山峰 ，则山峰的高度则是重点信息 ，a表的展示方式 会更加合适 ；反之 ，如果这张表意在展示10大高峰中 ，哪座山峰是人类最先登顶的 ，人类先后登顶 的时间顺序是读者的主要兴趣点 ，则表b就更加适用。 2. 减少读者计算 其实类似上一点 ，表格的指标也不是永远固定的 ，而是从读者阅读表格的目的出发 ，调整所需展示 的指标。在原始数据的基础上给出差值、总计等分析性的数据 ，可以直达用户阅读的目标 ，而尽量 减少用户心算或者线下处理的过程。例如下图展示了2010年与2009年两年的公司财政报表 ，查看两 年的具体数据当然必要 ，但深入分析 ，读者之所以要并列查看两年的数据 ，目的在于对比两年的数 据变化 ，因此将指标变化情况列出能帮助用户更快的达成目标。 3.精简指标 ，创造信息层级 尽量减少或压缩指标数量 ，避免出现用户不需要的数据 ，默认只展示用户所必须的信息 ，用户需要 的非重点辅助信息可以通过提供深入细节的入口 （弹窗、下拉 ）等形式来解决 ，仅在用户需要时进 行提供。创造信息层级 ，避免无主次的铺出所有信息 ，干扰用户快速扫描定位目标条目。例如易 迅的“我的订单”列表中 ，就将用户的信息、订单状态跟踪信息进行了默认隐藏 ，同时通过链接色很好 的提示了进一步细节信息的入口 ，在用户需要时 ，可以方便的查阅。 4 .不留空白单元格 当表格单元格中没有相应数据时 ，要避免直接留出空白单元格。空白单元格容易造成读者的困惑甚 至误解 ，读者会搞不清楚到底是没有数据 ，还是根本没有值 ？正确做法 ，没有数据的显示0 ，给没有 值的单元格划线或者打叉。如下图 ： 5.斑马条的运用 横向或纵向的斑马线以及悬停高亮底色能够很好的引导用户的视线 ，避免在阅读时出现错行、迷失 的情况 ：斑马线会使得行与行的界限更为分明 ，尤其对数据列较多时的横向引导得到加强 ，这样看 行内的内容时不容易错行 ，而悬停变色行主要是配合操作交互 ，明确区分出光标所在