对齐与亲密性

打开一个界面，为什么有的"看着乱"、有的"看着舒服"，却说不出哪里不同？真相就两条：一、元素没有对齐——有的靠左、有的靠右、有的又在中间；二、相关的元素没有靠近——标题和它的内容离得老远，无关联的东西却挤在一起。前者叫对齐问题，后者叫亲密性问题。这两条，就是界面"看着舒服、信息关系清楚"的全部秘密。

界面"乱"与"舒服"的两个原因

一句"看着乱"，拆开不过两件事：对齐和亲密性。对齐管的是"位置"——谁和谁在同一条垂直或水平线上；亲密性管的是"间距大小"——谁和谁离得近、该被当成一伙。一个界面之所以乱，要么是元素各走各的线（对齐乱），要么是彼此该近的远、该远的近（亲密性乱）。看懂这两点，你就能当场说出"乱从哪来"。

对齐管"位置共线"，亲密性管"间距分组"——两条原则各管一件事，配合使用。

对齐 Alignment：元素共线

微信启动页的"微信"品牌文案，就是一列贴着同一条左边缘的文字：

左对齐内容	说明
微信	主品牌名
微信 · 8 亿人都在用	一句话定位
最新版本 8.0.x	版本信息

三条文字都贴着同一条左边缘，就是左对齐。

对齐就是让相关元素沿同一条垂直线或水平线站队。左对齐、右对齐、居中对齐——选中一条，全组都跟着它走。它为什么有效？人眼会不自觉地寻找"连贯的线"：当一排元素的边缘落在同一条直线上，视线顺着这条线快速扫过，大脑解码成本低，就"觉得整齐"；反之，边缘七零八落，视线来回跳，就"觉得乱"。所以对齐是降低认知负担的视觉手段，不是雕虫小技。

对齐三种选法：左对齐 / 右对齐 / 居中对齐，选中一条全组跟随。

亲密性 Proximity：间距分组

相关的元素间距小、靠在一起；无关的元素间距大、拉得开。人天生会把"挨得近的"当成一组，这就是下意识分组。亲密性管的是"间距大小"——谁和谁是一伙的。分组间距怎么定？引用 08 间距体系：组内间距用 --space-sm/md（8/16），组间间距用 --space-lg/xl（24/32）。核心规则只有一条：分组间距要明显大于组内间距——差得不够，分不出组；差得太多，又散架。

组内距 8~16px（--space-sm/md），组间距 24~32px（--space-lg/xl）；分组间距必须明显大于组内间距。

微信案例拆解：对齐 × 亲密性一起用

微信通讯录分组间距（以 8pt 体系推断的合理值）：

关系	间距	属于
同一组：头像与名字	约 8~12px	组内（靠得紧）
同一组：行与行	约 16px	组内（靠得紧）
分组标题与上一组	约 24~32px	组间（拉得开）

分组标题本身常用更小的字号 + 更淡的颜色区分层级，但"分组感"主要靠间距撑起来，不是靠颜色。

微信首页列表是两条原则的合体：每条消息的头像、标题、摘要全都贴着同一条左边缘（对齐）；而每条消息内部，头像、标题、摘要挨得紧（亲密），两条消息之间却留出更大间隔（分组）。再看通讯录——分组靠间距：同一组联系人挨得近，不同分组（如"常见群聊""字母区"）之间拉开距离，一眼就能分清。

微信通讯录：组内头像-名字约 8~12px、行距约 16px；组间标题间隔约 24~32px。

深度

原理：对齐为什么能降低认知负担？ 人眼会自动寻找"连贯的线"。一排元素边缘共线时，视线沿直线快速扫过，大脑无需反复判断每个元素的位置，解码成本低，于是"觉得整齐"。边缘七零八落时，视线来回跳，大脑要逐个重新定位，解码成本高，于是"觉得乱"。这就是对齐"让人舒服"的底层原因——它把"我要找信息"的成本压到最低。

边界一：什么时候可以打破对齐？

• 刻意制造焦点：用"唯一一个不守规矩"的元素制造视觉断点，把注意力集中到它身上（比如一列左对齐的链接里，把最重要的那个居中标红）。但这是有意的例外，不是随手为之。
• 居中用于短内容：标题、按钮、单个图标适合居中；而列表、正文、多行信息更适合左对齐（中文阅读方向自左向右）。

规则：先严格对齐，再当场判断"这里要不要故意破例"。破例必须有理由，没理由就是"乱"。

边界二：亲密性分组间距怎么定？ 引用 08 的间距标尺：组内间距用 --space-sm/md（8/16），组间间距用 --space-lg/xl（24/32）。判断标准：分组间距要明显大于组内间距——差得不够分不出组，差得太多又散架。

实例：微信通讯录分组是怎么撑起来的？ 同一组联系人，头像与名字间距约 8~12px、行与行约 16px（组内，靠得紧）；分组标题与上一组之间留约 24~32px 明显间隔（组间，拉得开）。分组标题用更小字号 + 更淡颜色辅助区分层级，但"分组感"主要靠间距撑起，不是靠颜色。微信 iOS 实际细节随版本微调，这里给出的是以 8pt 体系推断的合理值，用于学习"如何拆解"，而非精确工匠数据。

衔接：对齐定"站哪条线"，08 间距 Token 定"离多远"——本知识点与 08 间距体系正好配合。

误区

误解	正解
对齐是技术细节，不重要	对齐是视觉质量的核心，一乱界面立刻显得业余
所有元素间距相同就好	分组间距必须大于组内间距，否则分不出组
对齐就是都居中	居中只适合短内容；列表、正文多行信息左对齐更易扫读
破例对齐是随意的	破例对齐是为了制造焦点，必须是有意的例外
亲密性靠颜色区分	分组感主要靠间距撑起，颜色只是辅助
对齐和亲密性是一回事	对齐管"位置共线"，亲密性管"间距分组"，两者配合

练习

即时题 一个新手把微信首页每条消息的头像、标题、摘要排得左一个右一个；又把分组标题和它下面的联系人拉得老远，却把两个不同分组的联系人贴得紧紧的。请分别指出：他在"对齐"和"亲密性"上各犯了什么错，应该怎么改？

答案

对齐上：每条消息内部的头像、标题、摘要没有贴同一条左边缘，应统一左对齐。亲密性上：分组标题与它下面的第一组联系人应是"组内"紧关系，不该拉远；两个不同分组的联系人应是"组间"松关系，不该贴紧——应让组内间距小、组间间距大。

模块题 用"对齐 + 亲密性"两个原则，设计一张"联系人群组"卡片：一个群名称、一横排 5 个头像、一个"退出群聊"按钮。请说明：哪些元素要对齐、沿哪条线对齐；哪些元素要靠近、离多远（用 8pt 间距），以及为什么这样会"看着清楚"。

参考思路

对齐：群名称、5 个头像、按钮沿同一条左边缘（或居中对齐）共线排直。亲密：群名称与头像排靠在一起（8~16px），头像之间靠紧（8px），群组与按钮之间拉开（24px+）。因为共线让视线顺滑、间距分组让"名称+头像"与"操作按钮"一眼分成两组，所以清楚。

迷你案例：重建微信通讯录的分组感 在 Penpot 新建一个 375×812 画板：

1. 列 3 组联系人，每组 3 条（头像 + 名字）。
2. 组内：头像与名字间距 8px，行间距 16px——挨得近。
3. 组间：两组之间留 32px 明显间隔，并加一个分组标题——拉得开。
4. 所有头像的左边都贴同一条垂直线，所有名字也贴同一条垂直线——对齐。
5. 对比：把某一组内间距改成 32px、组间距改成 8px，你会立刻看到"同组散架、异组粘连"有多乱。

做完你会信服：对齐 + 亲密性，是界面"看着舒服"的两大支柱。

素材

• 视觉组织原则：搜索 "UI alignment proximity principles"（Robin Williams《写给大家看的设计书》四大原则中的对齐与亲密性）。
• Apple HIG：Layout 与 Spacing 章节（官方，如何通过对齐与间距组织信息）。
• Material Design 3：Layout 与 Spacing 系统（官方，间距与对齐结合布局网格）。
• 工具联动：本课用的间距来自 08 间距体系；前面的 07 布局网格已用"网格对齐"把这条线贯彻到底。

---