对齐轴
整页元素归到少数几条轴线上，页面立刻干净。
数一数页面上有几条起始线。三条以内的页面看着整齐，五条以上就开始乱。
你会遇到的现象：
- 页面说不清哪儿不对，但就是不整齐
- 每个模块单独看都还行，放一起就散
- 缩进用得很随意，有的 12 有的 20
少几条轴
眼睛对垂直线特别敏感。多一条起始线，就多一次视觉停顿。把元素归到少数几条轴上，页面立刻会有秩序感，这一步几乎不花时间，效果却很明显。传统上网格系统把版面拆成若干竖直的栏，元素从栏里取坐标，对齐是它的副产品——但多数页面不需要严格的网格，只需要少数几条轴，就足以把版面归拢住。grid-wiki
- **先数轴。**把页面截图，用标尺量一遍有几条不同的左边界。这个数字通常比你以为的多。
- **能对齐的都对齐。**标题、正文、按钮、图标，默认全部左对齐到同一条线。缩进要有理由。
- **缩进只用来表达层级。**子项缩进一档，孙项再缩一档，用的是同一组间距里的值。
- **右边界也是一条轴。**内容右端参差不齐时，页面右侧会显得毛糙。定宽的元素尽量右对齐到同一条线。
选哪种对齐
同一个区块内只用一种对齐方式。左边一列左对齐、右边一列居中，这两列就永远对不上。
| 方式 | 适合 | 注意 |
|---|---|---|
| 左对齐 | 绝大多数内容的默认选择 | 中文和英文都是从左往右读，左边界稳定最好扫 |
| 右对齐 | 数字、金额、表格里的数值列 | 数字右对齐才能按位对比。表单标签右对齐填得更快 |
| 居中对齐 | 空状态、登录页、单个卡片内部 | 显得正式庄重，但不好扫读。整段文字别居中 |
| 两端对齐 | 基本不用 | 中文两端对齐会拉开字距，反而更难读 |
判断用哪种，先问「这一列的内容是给人扫的还是给人对比的」——扫描靠左，对比靠右，其余情况默认左对齐就不会错。
视觉对齐优先
有时候数值上对齐了，看起来却没对齐。这时候以眼睛为准。
- **圆形和三角形要略微超出。**圆形按钮跟方形按钮左边缘对齐时，圆形看着会往里缩，需要往外挪一点点。
- **带引号或标点开头的文字。**引号本身有空隙，严格对齐会显得凹进去，可以做悬挂处理。
- **图标和文字的中线。**图标的视觉重心通常不在几何中心，垂直居中之后往往需要微调一两个像素。
- **播放按钮的三角。**三角形重心偏左，几何居中会看着偏左，要往右挪。
这些微调不需要精确计算，眼睛觉得对了就是对了。这也是为什么最后一步验收要靠人看，不能只靠数值检查。
**怎么验收对齐。**把页面截图缩小到 50%，眯起眼睛看。缩小的图会抹掉文字细节，剩下的就是纯结构——轴线的数量、间距的节奏一眼就能看出来。如果缩小后页面仍然乱，问题多半在轴太多；如果缩小后很整齐、放大了却别扭，再去查视觉对齐那一类微调。对不齐的页面改起来几乎不花成本，值得在你每次说「页面不干净」的时候先做这一步。