表格设计中的对齐方式

在复杂的可视化设计中，有大量的表格设计。可是我发现，前端在表单设计中很容易居中对齐。由于政府项目的原因，对于用户体验要求并不是那么高，但是却引发了我表格内容设计中，到底应该如何对齐的思考？

前端：为啥我们目前的表格对齐方式为啥都没有按照设计稿中来呢？

答：主要是没时间或没注意，需要单独对数据进行逻辑判断，总归不算太麻烦

设计：为什么我要问前端这个问题？我为什么又这么对齐？

答：一直以来，我很想主动去推进修改这个问题，不过呢，除了主观上的不好看，确实没有特别令人信服的理由。于是，这片文章来了。主要是通过查阅文章，然后总结提升一下自己。

逃不开对表格的【名词解释】

表格是一种以行和列呈现数据信息的可视化方法。主要承载数据的收集、整理、组织与分析的一种列表。按功能性和整体性原则，表格的构成主要包括：标题、表头、表体、表尾和筛选区、底栏 6 个部分。

关于表格各部分构成元素之间的设计原则，网络上的大佬们已经分享了很多很全面啦，这里分享部分个人觉得写的很好的文章，本文的讨论主要是表格主体元素中，单元格内容设计的对齐方式。只是其中很小的一部分。

1、web表格设计攻略：http://www.woshipm.com/ucd/714641.html

2、糟糕的数据表格设计，它们的问题出在哪里？http://www.woshipm.com/it/388185.html

3、Web页面中的表格设计，远没有那么简单：http://www.woshipm.com/ucd/645427.html/comment-page-1

顺便还增加了一个“旧体数字”和“等高数字”的小知识。

接下来，还是回到单元格内容的对齐原则：

一开始，我就很纠结，我到底应该用哪一种对齐的原则来规范自己，同时也规范前端，遇到情况的时候可以快速果断地选择对齐方式？

可是实际工作中，如果全部左对齐，不行。全部右对齐，不行。全部居中对齐，不行。每一次我都在想，为什么就是不行呢？这种随意的对齐方式会好看一些，但是我就是找不到充足的理由，难度就是这么随意？

现在回头想想，我咋就这么轴呢？复杂多样才是真实（的生活呀）

因为我陷入了一个思维误区，我一直在寻找一种万能的解决方案，但其实，存在本身就是合理的，我应该找的是规律，而不是想着套公式。

于是乎，我冲浪查了一些信息，总结如下，希望对我们都有用：

内容的对齐主要有两个目的，一是方便数据对比（数字），而是便于用户阅读（文字）

• 数字大部分右对齐

• 数字是从右往左读的，需要通过数值位数的长短对比数字的量级和大小

• 小数点保留位数不同的，以小数点为轴对齐方式

• 大段文字信息大部分左对齐（我对大段文字的定义就是单元格字体长度大于标题长度）

• 整齐的大段文字整齐地左对齐

• 字段长短相差巨大的，限定宽度之后左对齐

• 居中对齐：

• 小段的固定字段（单元格字体长度小于标题长度的字段），左右留白均衡，增加呼吸感

• 空数据情况：

• 不存在的数据：位置有限时，优先考虑短横线“-”；位置较多时，可以考虑对数据简单描述，如“待整改”

• 数据单元为“零”的时候，需要填上“0”，并且小数点保留位数需要与整体保持一致

• 表头与数据对齐

  如果是本案中，符合小字段的字段的对齐规则，个人还是觉得居中对齐更合适。当然啦，欢迎大家批评指正，也欢迎补充不同的特殊场景对齐方式呀

• 表头与数字对齐这件事呢，我有一点观望，因为目前我觉得我应该是没有遇到作者所讲的场景。

如本案中，符合小字段的字段的对齐规则，个人还是觉得居中对齐更合适。当然啦，欢迎大家批评指正，也欢迎补充不同的特殊场景对齐方式呀～