一个表格的自我修养
表格，又称为表，即是一种可视化交流模式，又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。——百度百科
在处理一些信息时，为了更好地展示和传递数据信息，将表格作为载体来承载信息，使信息更易于阅读与理解。
在一些企业级的复杂应用里（订单系统、销售系统等），表格更是起着举足轻重的作用，它的易读性，便捷性、易操作性等对产品的体验都会产生重要影响。
问题来了，如何设计好表格呢？
一、主体构成
在写报告、文章、邮件、PPT等地方都会经常用到表格。使用时，要让表格能够“独立存在”，即每个表格除了主体内容外，还要包含标题、数据来源等内容，在被用到其它地方时，即使没有上下文，仍能够被正确的解读。普通的表格（二维表格）通常由6个部分构成：标题、行标题、列标题、数据内容、脚注，数据来源。
- 标题，对数据内容准确而清晰的描述，简明扼要。
- 行标题，位于表格第一列，用于标识表格中每一行的数据。
- 列标题，位于表格第一行，用于标识表格中每一列的数据。
- 脚注，位于表格底部，用于对表格信息的补充（例如：表格中N/A表示数据值为空）
- 数据来源，位于表格底部，表明数据的来源或数据的采集方法。
但是在企业级产品中，用的更多的是简化版表格（一维表格），本文对表格展开的相关讨论也主要是建立在一维表格的基础上。一维表格的构成很简单，主要由2个部分构成：列标题和数据内容。
常见的一维表格主要有两种，一种是完全由横向直线构成的表格（简称“单线表格”），另一种是由横向、纵向直线交叉构成的表格（简称“双线表格”）。
单线表格
适用于列标题中字段较少，且列标题中没有“数量”、“单价”、“金额”等字段。最重要的一点是，所有的字段统一进行左对齐，左对齐无形中起到了纵向分割线的作用。所以单线表格，在没有纵向直线分割的情况下，依然可以做到简洁、整齐，清楚。
双线表格
点击看大图
双线表格对列标题的字段长度和字段内容没有什么限制，使用相对更广泛一些。在企业级的产品中，涉及到表格的地方，大都会采用双线表格，其适用性更强。
下面以双线表格为样表，从视觉设计和交互体验两个方面来具体谈谈如何做好表格设计。
二、视觉设计
首先需要明确的是，这边的视觉设计，并不是指对表格进行一些花哨，炫酷的色彩修饰，而是从用户的阅读、体验角度来对表格采取的颜色设计，辅助表格更好的展示与传递数据信息。
颜色
1、列标题颜色
表格的“列标题”与“数据内容”需要使用不同的背景色块，这样建立起来的内容分区，让用户对表格的结构一目了然，更易于对数据的阅读、识别。
2、边框颜色
边框是一个比较纠结的角色，既希望它能够起到分割线的作用，将表格中每个单元格里的数据都很好的区分开来，又希望它不要表现的太强、太过抢眼，以免影响用户的阅读。一般会采用灰色的边框线，1像素的宽度，这样既能很好的分割，又不显得抢眼。（如上图）
3、数据内容颜色
表格中，数据内容的颜色一般都采用黑色，对于有操作功能的数据，或者是需要引起用户注意的关键数据，可以用不同的颜色来进行标识。科学研究表明，相比于文字，人对颜色的辨认、感知力更强。
点击看大图
对齐
1、居左对齐
列标题由一个个字段组成，因字段值的长短不一，所以通常会采用居左的对齐方式。例如“物品名称”、“规格型号”，“单位”等，同一个字段的字段值有长有短，左对齐一方面不会显得乱（相对于居中对齐），另一方面也符合人们从左往右的阅读习惯。
2、居中对齐
对于一些字段值长度相对固定的字段，如上图中的“序号”、“交货日期”等，可采用居中对齐的方式，一定程度上能起到美观、大方的作用。当然所有使用居中对齐的字段，也都可以使用居左对齐。
3、居右对齐
居右对齐只适用于一些字段值是数字类型的字段，例如“单价”、“数量”、“金额”等字段。为什么这类字段要居右对齐呢？
从上图可以看出，阅读左侧的数字时（居右对齐），轻松不费力；阅读右侧的数字时（居左对齐），阅读难度会增加。所以居右对齐的数字比居左对齐的数字更易阅读。
三、交互体验
为了提高表格的可用性，满足用户对表格使用的深层次需求，需要对表格进行适当的功能扩展，提供更好的交互体验。
操作反馈
当查阅表格数据时，很容在数据的海洋中“迷失”（容易看岔行，数据间的定位、跳跃让眼睛很疲劳），这时需要帮助用户去定位、聚焦数据。可采用通过背景色对当前定位的行和鼠标悬停的行进行标识。
点击看大图
内容扩展
1、列扩展
使用表格时，A类型用户（例如：领导）只需要看一小部分数据，而B类型用户（例如：员工）需要看更多更详细的数据，怎么兼顾A、B类型用户的需求？如果表格只展示少量数据，B的需求得不到满足；如果展示更多更全的数据，对于A来说，会带来较大的阅读负担。
比较好的方法是，让用户自己去设置表格显示的内容，只看自己需要的数据。
点击看大图
2、行扩展
因屏幕空间的限制，通常一个页面中显示10行的数据内容，更多的数据是通过翻页来查看的。但是当快速查找数据，或对比查看数据时，翻页就显得非常不方便。此时，需要提供在一个页面上查看更多数据的功能。
点击看大图
排序功能
用过Excel的人对“排序”功能一定不陌生，通过排序可以很方便的切换数据的阅读维度。例如上学时的成绩单，可以对“学号”排序，以“学号”的维度来查看成绩，也可以对“总分”排序，以“总分”的维度来查看同学的排名。
点击看大图
设计表格，并不是要将上述说的内容都加进去，而是要根据表格的数据类型，以及用户的使用需求，来做出最合适、最合理的设计。
