web表格设计攻略

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

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

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

（1）按字符长度定义：

（2）按数据类型定义：

（3）其他特殊规则：

（1）数字和单位的使用

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

（2）减少用户计算

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

（3）空白单元格处理

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

（1）颜色的使用

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

（2）足够的留白

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

（3）其他视觉突出手段

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

（4）层级处理方法

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

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

（1）减少分隔线

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!