对齐轴
数一数页面上有几条起始线。三条以内的页面看着整齐，五条以上就开始乱。
你会遇到的现象
- 页面说不清哪儿不对，但就是不整齐
- 每个模块单独看都还行，放一起就散
- 缩进用得很随意，有的 12 有的 20
眼睛对垂直线特别敏感。多一条起始线，就多一次视觉停顿。把元素归到少数几条轴上，页面立刻会有秩序感，这一步几乎不花时间，效果却很明显。
少几条轴
- 先数轴。把页面截图，用标尺量一遍有几条不同的左边界。这个数字通常比你以为的多。
- 能对齐的都对齐。标题、正文、按钮、图标，默认全部左对齐到同一条线。缩进要有理由。
- 缩进只用来表达层级。子项缩进一档，孙项再缩一档，用的是同一组间距里的值。
- 右边界也是一条轴。内容右端参差不齐时，页面右侧会显得毛糙。定宽的元素尽量右对齐到同一条线。
选哪种对齐
| 方式 | 适合 | 注意 |
|---|---|---|
| 左对齐 | 绝大多数内容的默认选择 | 中文和英文都是从左往右读，左边界稳定最好扫 |
| 右对齐 | 数字、金额、表格里的数值列 | 数字右对齐才能按位对比。表单标签右对齐填得更快 |
| 居中对齐 | 空状态、登录页、单个卡片内部 | 显得正式庄重，但不好扫读。整段文字别居中 |
| 两端对齐 | 基本不用 | 中文两端对齐会拉开字距，反而更难读 |
视觉对齐优先
有时候数值上对齐了，看起来却没对齐。这时候以眼睛为准。
- 圆形和三角形要略微超出。圆形按钮跟方形按钮左边缘对齐时，圆形看着会往里缩，需要往外挪一点点。
- 带引号或标点开头的文字。引号本身有空隙，严格对齐会显得凹进去，可以做悬挂处理。
- 图标和文字的中线。图标的视觉重心通常不在几何中心，垂直居中之后往往需要微调一两个像素。
- 播放按钮的三角。三角形重心偏左，几何居中会看着偏左，要往右挪。
这些微调不需要精确计算，眼睛觉得对了就是对了。这也是为什么最后一步验收要靠人看，不能只靠数值检查。