Alignment Axes
Count the starting lines on a page. Three or fewer looks tidy; five or more starts to look messy.
What you will run into
- 页面说不清哪儿不对，但就是不整齐
- 每个模块单独看都还行，放一起就散
- 缩进用得很随意，有的 12 有的 20
The eye is highly sensitive to vertical lines. Each extra starting line adds another visual pause. Snap elements to a few axes and the page gains a sense of order — this step takes almost no time but the effect is obvious.
Fewer Axes
- Count the axes first. Screenshot the page, use a ruler to measure how many distinct left edges there are. The number is usually higher than you think.
- Align everything that can be aligned. Titles, body text, buttons, icons—default all of them to the same left line. Indentation needs a reason.
- Indentation is only for hierarchy. A child item indents one step, a grandchild another step, using values from the same spacing scale.
- The right edge is also an axis. When the right ends of content are ragged, the page looks rough on the right. Keep fixed-width elements right-aligned to the same line where possible.
Which Alignment to Pick
| 方式 | 适合 | 注意 |
|---|---|---|
| 左对齐 | 绝大多数内容的默认选择 | 中文和英文都是从左往右读，左边界稳定最好扫 |
| 右对齐 | 数字、金额、表格里的数值列 | 数字右对齐才能按位对比。表单标签右对齐填得更快 |
| 居中对齐 | 空状态、登录页、单个卡片内部 | 显得正式庄重，但不好扫读。整段文字别居中 |
| 两端对齐 | 基本不用 | 中文两端对齐会拉开字距，反而更难读 |
Optical Alignment First
Sometimes the numbers line up but it doesn't look aligned. When that happens, trust your eye.
- 圆形和三角形要略微超出。圆形按钮跟方形按钮左边缘对齐时，圆形看着会往里缩，需要往外挪一点点。
- 带引号或标点开头的文字。引号本身有空隙，严格对齐会显得凹进去，可以做悬挂处理。
- 图标和文字的中线。图标的视觉重心通常不在几何中心，垂直居中之后往往需要微调一两个像素。
- 播放按钮的三角。三角形重心偏左，几何居中会看着偏左，要往右挪。
These fine adjustments don't need exact math — if it looks right, it's right. This is also why the final walkthrough has to be done by a person, not by a numeric check.