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