web应用中表格的可读性提升分析

在PC端的网页设计中中表格使用比较多，web宽阔的大屏幕上通常会把全部信息铺开，因此混合的大量多类型多维度变量的信息统计和操作，这时使用表格可以将信息进行整理归类，易读易操作。

本文具体对表格可读性的提升做个系统总结，实际上，用户会有各种复杂或简单的多维度大数据量内容展示需求，为了方便整理归类进行对比，因此才用到表格的排列样式应当方便对比、清晰易读。下图展示了表格的可视规则：

表格规则 针对规则的详解

知其然，更要知其所已然。

上图只是告诉我们如何处理行列区分以及单元格表头的对齐方式，下面开始碎碎念。

行和列的处理方式：

如果是横向对比为主的话，用间隔换色。表头和文字的背景色颜色需要着重区分出来，让用户清晰有规律的进行比对，避免串行。

横向对比

如果是竖向比对为主的话，间隔换色或者border分隔都可以，最重要的是给出竖向的分割，让用户清晰有规律的进行比对。

竖向对比

当然横向竖向做出区分后，单元格的对齐方式就是最重要的了，可以让视觉线更清晰规整。

表头和纵向单元格内容的对齐方式

通常表头左对齐还是右对齐通常是由单元格的对齐方式决定的，单元格左对齐则表头左对齐；单元格右对齐则表头右对齐；下边我们具体讲一下，单元格的对齐方式。

单元格居中对齐&表头标题居中对齐：

居中对齐 1.字数较少且字数接近，这种情况其实无论怎样的对齐方式都没问题，比如操作或状态，且纵向无需比对。

单元格&表头居中对齐

单元格左对齐&表头标题左对齐：

单元格左对齐 ：一般文字较多都会采用左对齐，比如长短不一的标题或者描述，通过左对齐来统一视觉线，so，表头单元格一同左对齐。

单元格右对齐&表头标题右对齐：

右对齐：一般数字会采用右对齐，特别是金额差距较大，从万元到一元，可以通过右对齐的比对一眼看出来是几位数，判断金额大小。出于视觉线的统一，so，表头单元格一同左对齐。

表头左对齐&右对齐

表头标题居中对齐&单元格任意对齐方式：通常表头标题默认居中对齐，因为标题字数既有2个字也有8个字不等，居中显示更平衡，视觉跨度也较小。这是最常用的表头对齐方式。

表头居中

这是几种常规的表现方式，希望大家能由浅入深的去去考量，当无可避免的涉及到大量多类型多变量的信息，表格的样式规则也变得复杂多样，不能以偏概全，需要设计者心中有考量、规则。

so，就到这里吧，下期见。