F2.05.1alignment as an invisible spine设计研究

对齐建立隐形的视觉引导线

别名: 对齐线 · visual spine · 隐形网格

概念解释

左对齐的一叠标题、价格、按钮,即使中间没有画竖线,眼睛也会顺着那条看不见的边往下走。这条边就是对齐建立的引导线。个人资料页把头像放中间、名字跟着居中、简介却从页面左缘起排,脊梁断了,视线要左右折一次才能读完三行。

引导线是扫视的轨道,不是「整齐好看」的别称。差 2 px 的错位,用户说不出对齐两个字,却能感到「有什么不对」。

机制

视觉系统对共线极其敏感:几个左缘落在同一条 x 上,会被编成一条客体,下一项被预期还在这条线上。搜索因此变便宜——不用全屏找下一个标题,沿轨道滑就行。

错位等于轨道上出现道岔。每一次道岔都要重新捕获左缘,工作记忆里刚建立的「这一列是什么」会被打断。栅格提供跨页的合法 x,对齐则是这一屏上实际有没有把对象停在那些 x 上。一屏里若出现七八个不同的文字起点,等于同时铺了七八条轨道,没有一条能被当成默认。

怎么研究

可用找目标任务:在对齐干净与故意错开 4–8 px 的两种列表里找指定项,记录搜索时间和首次注视是否落在左缘轨道上。自变量是左缘是否共线、错开幅度;因变量是时间、错误、眼动是否沿一条竖线走。

实验室的错位是整列平移,产品里更常见的是某一行因为图标宽度不同把文字推偏。生态效度取决于刺激是否包含这种「局部被挤开」而不是整块平移。

边界

装饰性海报、杂志封面靠故意错位制造停顿,轨道断是手法。手写风格、不规则拼贴也不靠脊梁。数据图的轴对齐是另一套坐标,不能用界面文字左缘那套去审。

从右到左的界面,脊梁在右缘;居中标题在窄屏上可以是唯一轨道,但一进入表单,通常仍要交回起始边,否则字段没有可跟随的线。

怎么落地

  • 选定这一区域的主轨道(通常是内容起始边),标题、正文、主按钮、列表文字都停在上面;图标和头像可以在轨道外侧,但文字不要跟着图标的宽度漂。
  • 把因图标、徽章宽度不同造成的文字挤偏,改成固定文字起点(图标占固定槽)。
  • 验证:在截图上沿每一处文字起点画竖线。手机一屏若出现超过三条明显不同的 x,列出多出来的那些模块,把它们的文字拉回主轨道,再看搜索「下一行标题」是否还要左右扫。

延伸

  • 同组F2.05.2 对齐方式数量越少结构越清晰 · F2.05.3 局部居中会打断整体对齐线
  • 相邻F2.01 栅格系统 · F4.05 对齐方式 · F3.05 视觉动线
  • 站内检索alignment spine · collinearity · left edge · visual search

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F2.05.1