光学对齐
定义
光学对齐指的是：界面元素的排布不能只满足“几何上居中”或“数值上对称”，还要满足“人眼看起来居中、平衡、稳定”。
它处理的是一种很常见但难以口头描述的问题：布局参数明明一样，界面却还是“感觉有点怪”。这说明几何中心不等于视觉中心，数学对称也不等于感知对称。
在实际 UI 中，文字、图标、按钮、留白、轮廓形状都会影响视觉重心，因此设计上经常需要做有意识的不对称微调。
在本文档中的语境
本文把 光学对齐 作为 界面打磨规则集 中的代表性规则之一，来源于 Jakub Krehel 的 /make-interfaces-feel-better 技能。
这套规则的目标不是发明新的视觉理论，而是把设计工程师长期靠经验完成的“界面微调”变成 AI 可执行的检查与修复动作，让 AI 在写前端、做 code review、优化交互细节时，能识别出“看起来不对”的布局问题。
在这套语境里，光学对齐 不是抽象审美原则，而是可直接落到代码与间距参数上的修正方法。
关键机制
几何居中不等于视觉居中
最核心的判断是：元素在数学上位于中心，不代表它在视觉上也会被感知为中心。
例如一个按钮里左边是文字、右边是图标，如果左右 padding 完全相等，结果往往不是“最平衡”，而是图标一侧看起来更挤或整体重心偏向一边。
原因在于人眼感知的不是单纯边界框，而是元素的实际形状、密度、方向性与留白关系。文字块和图标块的视觉重量通常并不相同。
图标经常需要额外微调
文中特别强调，图标是 光学对齐 中最常见的修正对象。
原因不是图标“没放中”，而是很多图标的可视轮廓天生就不是对称的。哪怕 SVG 的画板、容器、包围盒都处于几何中心，图标本体的视觉重心也可能偏左、偏右、偏上或偏下。
因此，光学修正经常不是改整个容器，而是继续深入到图标本身，在 SVG 内部做额外偏移。
左右 padding 可以不对称
在按钮、标签、列表项等“文字 + 图标”组合里，左右 padding 不必强行相等。
文中的具体修法是：当按钮左边是文字、右边是图标时，图标侧的 padding 比文字侧少 2px。这样做不是为了制造不规则，而是为了抵消图标造成的视觉偏移，让整体看起来更居中。
这说明 光学对齐 的一个重要原则是：允许参数层面的非对称，换取感知层面的对称。
典型场景
按钮中的文字与图标组合
这是文中最直接、最典型的场景。
一个按钮内，左边放文案，右边放图标。如果设计师或开发者只按“左右 padding 相同、图标框居中”来处理，结果常常会让图标一侧显得偏右，或者按钮整体重心不稳。
此时常见修法包括：
- 保持整体结构不变，但把图标侧 padding 减少约 2px；
- 如果图标本身存在明显方向性，再在 SVG 内部继续做轻微位移；
- 以最终观感为准，而不是以边界框是否绝对对称为准。
不对称图标
文中点名了三角形播放按钮这一类图标。
这类图标即使被放进一个严格居中的 SVG 画板中，人眼也常会感觉它没有真的居中，因为三角形的形状本身具有明显方向性，视觉重心不会落在几何中心上。
因此，对这类图标，仅仅做容器居中通常不够，还要在 SVG 内部额外向右微调，才能得到更稳定的视觉结果。
细节与边界
很多图标库已经做过部分光学修正
文中没有把所有偏移问题都归咎于开发实现，而是指出：不少 icon 包本身已经做过光学修正。
这意味着在实际项目里，不能机械地给所有图标都套同一组偏移值。某些图标可能已经校正过，再额外修一次反而会过头。
因此更合理的做法是：
- 先判断图标库是否已经包含光学校正；
- 再决定是否还需要在组件层或 SVG 层继续微调；
- 以实际视觉结果为准，而不是盲目套公式。
这不是严格公式，而是经验性修正
文中给出的“图标侧 padding 少 2px”是很有操作性的经验值，但它不是所有场景都必须固定执行的硬编码规则。
影响结果的因素还包括：
- 字体字重与字号；
- 图标的具体轮廓；
- 按钮高度与圆角；
- 左文右图、左图右文的组合方式；
- 图标是否已在素材层面做过修正。
所以 光学对齐 更像一种检查思路：当界面“数值对了但观感不对”时，优先怀疑视觉重心，而不是只继续追求几何对称。
目标是感知平衡，不是制造绝对不对称
光学对齐 并不意味着故意把界面做得歪斜，而是在很小范围内做补偿，让用户最终看到的是更自然的平衡。
也正因为这种调整幅度通常很小，所以它最容易被忽略；但一旦处理得当，用户会明显觉得界面更顺、更精致，只是不一定能立刻说出原因。
为什么它重要
光学对齐 重要的地方在于，它修复的不是功能错误，而是“说不清哪里不对”的体验 bug。
这类问题通常不会导致页面不可用，却会持续削弱界面的品质感，让按钮、卡片、图标组合显得业余、别扭或不稳。
对于强调细节的一套 界面打磨规则集 来说，光学对齐 正是把“差不多”推进到“明显更顺眼”的关键步骤之一。
与相关规则的关系
光学对齐 经常和其他界面微调规则一起出现，例如：
- 与 界面细节 AI 技能 摘要 一起使用时，它体现的是 AI 如何根据经验规则自动修正代码；
- 与 界面打磨规则集 的其他条目一起看，它属于视觉重心与间距层面的修正；
- 与 可打断动画 相比，它不处理时间维度，而是处理静态排布中的视觉平衡；
- 在 make-interfaces-feel-better 中，它是最典型、最容易落到具体 padding 与 SVG 微调参数上的规则之一。