本专栏转载需要授权。欢迎关注作者 Twitter:https://twitter.com/shuding_。
很多人的第一反应是,对齐不就是(以像素为基准)在 “左、中、右” 与 “上、中、下” 里选择吗?
但这只是形式上的正确。但很多时候视觉上的正确要大于对规则本身的遵守。更详细地说,我们需要根据视觉重心来对齐,而非像素区域的矩形中心。
本文将举出几个常见示例和需要考虑的方面。
文字与符号
涉及到字符的对齐,需要视情况考虑到基线(baseline)对齐[1]:
![d49b2c57c1944cbfcbda47c372ab24cd.png](https://i-blog.csdnimg.cn/blog_migrate/af592ef6bdb454d98fad53c21bcd904b.jpeg)
甚至标点悬挂[2][3]等等排版考虑:
![9f48110d10f08ad58c6e2ff6c7e753f5.png](https://i-blog.csdnimg.cn/blog_migrate/b06e5729d254991a2cb1c4d847ec8628.jpeg)
按重心对齐
直接按像素对齐是一种偷懒的做法。对于大部分图形,我们需要按照 “重心” 对齐。例如一个常见的播放按钮[4]:
![a08f5f85acda635302f7e904d7769d77.png](https://i-blog.csdnimg.cn/blog_migrate/77372d3b8ceb0f9b3963cac64a89123d.jpeg)
按照三角形的重心来居中会自然得多。一个类似的例子是大部分社交平台的圆形头像:
![c6ceeca7607897438628c6ec7c555d8b.png](https://i-blog.csdnimg.cn/blog_migrate/05a8d627a8f5d2795b05f402d99f6b4f.jpeg)
动画
用户界面设计的最大问题在于,设计师产出的往往是(几乎)静态的设计。而开发者需要保证 “对齐” 在动画、不同内容下的统一与连贯。
![04dd2274584433b4572943d33518d25c.gif](https://i-blog.csdnimg.cn/blog_migrate/cafb01b5765ce295acc5f8ac2b32180d.gif)
![e0183d86f588aebcff1049d1f89f72b9.gif](https://i-blog.csdnimg.cn/blog_migrate/793cd144559b57fef4a59fd787e8ee08.gif)
如上所示,这又是一个 “像素中心 ≠ 几何重心” 的例子。
如何解决?
![ef6c59a093a7f206fd944917fde0db92.png](https://i-blog.csdnimg.cn/blog_migrate/2521334bcba9b69fcf7f18169738e934.jpeg)
在大多数排版系统中,layout 基本模型都是矩形,例如 CSS 中的盒模型。但我们依然可以人为调整图形的盒内位置、引入外部间距来解决重心的问题。例如上图是 IBM 设计语言[5]中对于 “溢出空间” 的考虑,概念上非常类似于漫画中的 “框线” 与 “出血线”(layout 布局与内容溢出)。
视觉考虑
最后,视觉上的 “整齐” 更依赖于设计师的感官,或是依据特殊情况来判断。
![5ece24153bd9566bdbc145005edc50c1.png](https://i-blog.csdnimg.cn/blog_migrate/84306aa562a1c904abc82786545b6158.jpeg)
MIT Technology Review logo 的 “T” 基于竖线对齐的考量向左移动了。
![84d59dfdbc07fddbc91b20b1a6a2f1c0.png](https://i-blog.csdnimg.cn/blog_migrate/2c9f7776de0f94880f51820bf6cdff90.jpeg)
再比如 Next.js logo。在实际应用中,我们将其向右侧偏离了 4%,为的是视觉上的左右居中(抵消 logo 中 “.JS” 的部分宽度,使重心位于 E 与 X 中间)。
![eacf0d631e704760f3ca77555b85b445.png](https://i-blog.csdnimg.cn/blog_migrate/8f21a00e22d7eddeb2c225ba4d24d2e5.jpeg)
V2EX 上面曾有一个有趣的帖子《[無聊作] 糟糕的設計師,普通的設計師,好的設計師》,很好地指出了设计中的这种 “视觉修正”:
![bd520bdb6f4c0d9e6b7df7a6fb2774f1.png](https://i-blog.csdnimg.cn/blog_migrate/2301d3252ebfbbb428250828dd87e1fe.jpeg)
因此,与其说 “对齐”,我们不妨将思考点放在 “平衡” 上。
作者知乎页面:Parabola,本专栏转载需要授权。
题图:https://unsplash.com/photos/2ecH5Lw3zSk
参考
- ^Align text baseline with a button in CSS https://stackoverflow.com/questions/7293532/align-text-baseline-with-a-button-in-css
- ^中文排版的最大迷思:标点悬挂 — The Type https://thetype.com/2017/11/13290/
- ^hanging-punctuation — CSS-Tricks https://css-tricks.com/almanac/properties/h/hanging-punctuation/
- ^The PLAY button is not optical alignment https://medium.com/@erqiudao/the-play-button-is-not-optical-alignment-4cea11bda175
- ^IBM 设计语言 https://www.ibm.com/design/language/elements/icons/design