看到我们的网站主要以信息展示为主，其中涉及到很多表格及数据统计。对表格的可读性提升方面进行了学习。
原文网址：http://blog.rexsong.com/?p=10271
表格存在的目的：展示多维度大数据量内容展示，更好的对比分析数据及内容。
为了提高表格的可读性，可从语义层和表现层两个层面出发。表现层涉及到视觉表达设计，语义层涉及到表格结构。
表格可读性问题及提升方法
1、行列组织关系模糊
主要关于单元格之间的关系问题对可读性的影响。通过辅助手段可以让信息呈现更好的差异化，或突出更重要的信息。
（1）表头表尾和表体明显区分，通常表头、表尾的效果一致。如下图，表头表尾与表体的层次区分明显：
（2）用边框分隔单元格，给单元格加上边框后，可以更清晰的表达数据，并且不易看岔行。如下图，1像素灰色边框表格和黑色文字的对比：
注意：表格的边框颜色不能过于抢眼。
（3）间行换色，间行换色更适用于表格过宽的需求，一定程度上能加强避免读错。另外，间行换色常与1像素边框同时使用。注意：间行换色的两种颜色不能反差过大。
如下图，1像素表格的表体区域有不太明显的间行换色效果：
（4）间列换色，也叫隔行换色，等于是间行换色的“垂直”版本，可以更强化列与列之间的差异。如下图，分别给不同列指定背景色：
个人感觉这个颜色太亮了，容易视觉疲劳。
（5）重要数据列强调，同样使用
2、单元格内容不清晰
主要是单元格内容的展示以及数据属性对可读性的影响。根据数据特性定制显示的四种对齐方式，原则是首先是满足用户需求，其次迎合用户的阅读习惯，最后注意单元格的内容不留空。
（1）可变长度字符串左对齐，“可变长度”指长度不一定的数据列，比如产品名称。此类情况应该符合用户的视线规律，左对齐排列，也能辅助对比明确各条数据的长短。如下图，表格的Title, Company, Location三个字段数据：
（2）固定长度、较短字符串居中，“固定长度”指长度规格不会变化的数据列，比如日期2009.02.21（补0是数字书写规范）。“较短字符串”指很短也不需逻辑对比的数据列，比如操作链接，或表状态文字，放中间左右留白均等是折中的最好效果。如下图，表格的“报告、状态”两个字段数据：
（3）可比较字符串右对齐，“可比较”指需要关联对比的数据列，基本都指数字的情况，比如钱有十位的￥24.30和百位的￥452.10。注意一点，这里的“可比较”其实也是“可变长度”的，只不过“可比较”是更重要的需求。表格的数据列对比，是各种系统和平台最经常碰到的需求，此点也是最容易被忽视的问题。如下图，表格的数字纵向对比效果：
（4）合并列的单元格顶部对齐，“合并列的单元格”指需要在水平方向跨多个单元格的需求，复杂表格中一对多的关系。因为单元格默认垂直居中，如果是多行的数据表，用户从上往下的阅读开始往往搞不清楚对应的后续数据列内容。如下图，表格的“联系人、状态、价格”三个字段数据：
（5）不留空白，空白单元格容易造成用户困惑甚至误解，用户会搞不清楚到底是没有数据，还是根本没有值？正确做法，没有数据的显示0，给没有值的单元格划线或者打叉。如下图，单元格内划横杠表示不支持：
网友评论