web表格设计攻略(2)

正确使用分割线可以实现对表格行与列的强调。首先，做纯粹客观的数据展示时会使用同样颜色和透明度的横纵分割线或斑马线，此时不强调单个数据或者数据之间的关系，避免带来错误的引导。其次，展示独立数据时需要弱化纵向分割线，会采用斑马线和悬浮高亮底色的方式以体现一条数据的完整性。

最后，处理具有明确类别指向的数据时，在横线均匀分割的基础上，往往会用不同的纵向分隔线对数据进行分类区隔，以表达数据之间的类别关系。

合适的对齐方式能够提升数据的浏览效率。表格内信息的纵向列对齐（符合格式塔心理学中相近原则）能够很好的形成视觉引导线。通过对齐，会让表格更加规范易理解，给用户视觉上的统一感，视线流动更顺畅，让用户快速的捕捉到所需内容。

（1）按字符长度定义：

（2）按数据类型定义：

（3）其他特殊规则：

（1）数字和单位的使用

对数字字体而言，从高度上看可分为旧体数字与等高数字（旧体数字能很好匹配小写字母），从宽度上看可分为比例数字和表格数字（表格数字的每一个尺寸都相对独立，方便纵向对齐）。其中的关键区别在于数字“1”，为了更好对齐和对比，建议使用等宽的表格字体。数据的度量单位无需重复，只需要在表头标识清楚即可。

（2）减少用户计算

对于进行对比分析的数据，在原始数据的基础上给出差值、升降变化、总计值、平均值等分析性的数据处理结果，直达用户获取信息的目标（需要明确用户目标），而尽量减少用户心算或者线下处理的过程，如股票数据变化，音乐排行榜等，能显著提升信息的阅读和理解效率。

（3）空白单元格处理

一般指空数据或零数据的情况，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是数值为零。正确做法是，对于不存在的数据，单元格不能空置，要用短横线代替，表示该项数据不存在，给用户明确指示；对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下单元格保持一致。

（1）颜色的使用

颜色和可读性是密切相关的，所以要合理的使用颜色，尽量使用简单的背景色和点缀色。背景色方面，除了行/列交替颜色（可以区隔内容，引导视线）、悬停高亮底色（便于准确辨别光标所在行）等处理方法，还可以对表头表尾进行视觉区分。

（2）足够的留白

既包括保证数据单元格之间的留白，又包括单元格内部（padding）留白，以保证易读性。

（3）其他视觉突出手段

通过调整背景颜色、放大局部元素、颜色区分、icon点缀等手段，以及高亮强调重要的行和列，使重要信息突出，提高用户的阅读速度，帮助用户快速定位重点信息。

（4）层级处理方法

通过调整标题、标签的字体，边框线的设计，底色的运用等，区分不同的功能模块，从而设计出合理的视觉层级，活跃表格氛围，引导用户的视线流动。

信息内容的有效传达是表格设计的本质，就表格本身而言应该是隐型的，应该让用户注意力聚焦在核心内容上。所以，做减法设计就显得尤为可贵。

（1）减少分隔线

水平分割线能显著减轻长表格在垂直方向的视觉重量，加快大量数值的对比工作。但如果在表格中使用适合的对齐方式，竖直分隔线完全是多余的。它们最大的贡献就是缩减元素之间的距离后也能区分不同元素。即使要用，也要非常淡，不能妨碍快速浏览。

（2）不使用斑马线

使用不同底色区分指示不同类型的数据（如总和、平均值）是有必要的，但是斑马线在很多时候是没有必要的，因为它们是同一类数据，而且水平分割线就已经能够明显区隔。

（3）尽量以黑白为主

运用彩色表达组织或含义可能会增加误解，并且引发视觉障碍者的易用性问题。

（4）减少其他图形元素的使用

其他图形元素，如星号，三角，圆点，对勾，叉等，虽然能够帮助组织数据、更直观的传达信息，但物极必反，少即是多，要注意克制这些元素的使用。

（1）图表的使用

除了在单元格中引用图表之外，很多时候都会提供图表/表格视图切换，便于用户从图形角度查看、分析自己关注的数据。有时也会有“图表+表格”的形式，这时候，表格往往只作为明细放在页面底部。

（2）卡片的使用

在信息量较少或特别多的情况下可以用卡片的形式来展示信息，将信息以组的概念呈现，单张卡片内的信息按优先级进行排列。此外，卡片彼此之间又形成一个整体。

用户可以通过输入特殊条件进行搜索，从而快速定位到所需的目标数据条目。搜索输入框尽量采用模糊搜索，不要让用户去辨认、识别要输入的内容。模糊搜索一般单独使用，或者和筛选区进行明显隔离后使用。筛选为主要场景时，搜索框可以作为筛选条件之一。搜索为主要场景时，筛选区可看做高级搜索隐藏起来。个人认为搜索和筛选同时使用在大多数情况下都是多余的，因为搜出来的结果已经比较明确了，而筛选一般有比较明确的业务目的。而关键的冲突在于触发方式的不同，筛选有“实时筛选”和“点击查询按钮触发筛选”两种，而搜索大部分是“触发搜索”，实时的比较少。

编辑：cherlee