button右对齐_如何正确地对齐

本专栏转载需要授权。欢迎关注作者 Twitter：https://twitter.com/shuding_。

很多人的第一反应是，对齐不就是（以像素为基准）在 “左、中、右” 与 “上、中、下” 里选择吗？

但这只是形式上的正确。但很多时候视觉上的正确要大于对规则本身的遵守。更详细地说，我们需要根据视觉重心来对齐，而非像素区域的矩形中心。

本文将举出几个常见示例和需要考虑的方面。

文字与符号

涉及到字符的对齐，需要视情况考虑到基线（baseline）对齐^[1]：

甚至标点悬挂^[2][3]等等排版考虑：

按重心对齐

直接按像素对齐是一种偷懒的做法。对于大部分图形，我们需要按照 “重心” 对齐。例如一个常见的播放按钮^[4]：

The PLAY button is not optical alignment

按照三角形的重心来居中会自然得多。一个类似的例子是大部分社交平台的圆形头像：

例：ZEIT 的圆形 Twitter 头像（https://twitter.com/zeithq）

动画

用户界面设计的最大问题在于，设计师产出的往往是（几乎）静态的设计。而开发者需要保证 “对齐” 在动画、不同内容下的统一与连贯。

正确示例（fontawesome.com/icons/sync-alt）

错误示例（assertible.com）

如上所示，这又是一个 “像素中心 ≠ 几何重心” 的例子。

如何解决？

IBM 设计语言中亦有对于 ”溢出空间“ 的考虑

在大多数排版系统中，layout 基本模型都是矩形，例如 CSS 中的盒模型。但我们依然可以人为调整图形的盒内位置、引入外部间距来解决重心的问题。例如上图是 IBM 设计语言^[5]中对于 “溢出空间” 的考虑，概念上非常类似于漫画中的 “框线” 与 “出血线”（layout 布局与内容溢出）。

视觉考虑

最后，视觉上的 “整齐” 更依赖于设计师的感官，或是依据特殊情况来判断。

https://www.technologyreview.com

MIT Technology Review logo 的 “T” 基于竖线对齐的考量向左移动了。

Next.js logo

再比如 Next.js logo。在实际应用中，我们将其向右侧偏离了 4%，为的是视觉上的左右居中（抵消 logo 中 “.JS” 的部分宽度，使重心位于 E 与 X 中间）。

http://nextjs.org

V2EX 上面曾有一个有趣的帖子《[無聊作] 糟糕的設計師，普通的設計師，好的設計師》，很好地指出了设计中的这种 “视觉修正”：

https://www.v2ex.com/t/164838

因此，与其说 “对齐”，我们不妨将思考点放在 “平衡” 上。

---

作者知乎页面：Parabola，本专栏转载需要授权。

题图：https://unsplash.com/photos/2ecH5Lw3zSk

参考

1. ^Align text baseline with a button in CSS https://stackoverflow.com/questions/7293532/align-text-baseline-with-a-button-in-css
2. ^中文排版的最大迷思：标点悬挂 — The Type https://thetype.com/2017/11/13290/
3. ^hanging-punctuation — CSS-Tricks https://css-tricks.com/almanac/properties/h/hanging-punctuation/
4. ^The PLAY button is not optical alignment https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175
5. ^IBM 设计语言 https://www.ibm.com/design/language/elements/icons/design