F2.05.1alignment as an invisible spine设计研究
对齐建立隐形的视觉引导线
别名: 对齐线 · visual spine · 隐形网格
概念解释
左对齐的一叠标题、价格、按钮,即使中间没有画竖线,眼睛也会顺着那条看不见的边往下走。这条边就是对齐建立的引导线。个人资料页把头像放中间、名字跟着居中、简介却从页面左缘起排,脊梁断了,视线要左右折一次才能读完三行。
引导线是扫视的轨道,不是「整齐好看」的别称。差 2 px 的错位,用户说不出对齐两个字,却能感到「有什么不对」。
机制
视觉系统对共线极其敏感:几个左缘落在同一条 x 上,会被编成一条客体,下一项被预期还在这条线上。搜索因此变便宜——不用全屏找下一个标题,沿轨道滑就行。
错位等于轨道上出现道岔。每一次道岔都要重新捕获左缘,工作记忆里刚建立的「这一列是什么」会被打断。栅格提供跨页的合法 x,对齐则是这一屏上实际有没有把对象停在那些 x 上。一屏里若出现七八个不同的文字起点,等于同时铺了七八条轨道,没有一条能被当成默认。
怎么研究
可用找目标任务:在对齐干净与故意错开 4–8 px 的两种列表里找指定项,记录搜索时间和首次注视是否落在左缘轨道上。自变量是左缘是否共线、错开幅度;因变量是时间、错误、眼动是否沿一条竖线走。
实验室的错位是整列平移,产品里更常见的是某一行因为图标宽度不同把文字推偏。生态效度取决于刺激是否包含这种「局部被挤开」而不是整块平移。
边界
装饰性海报、杂志封面靠故意错位制造停顿,轨道断是手法。手写风格、不规则拼贴也不靠脊梁。数据图的轴对齐是另一套坐标,不能用界面文字左缘那套去审。
从右到左的界面,脊梁在右缘;居中标题在窄屏上可以是唯一轨道,但一进入表单,通常仍要交回起始边,否则字段没有可跟随的线。
怎么落地
- 选定这一区域的主轨道(通常是内容起始边),标题、正文、主按钮、列表文字都停在上面;图标和头像可以在轨道外侧,但文字不要跟着图标的宽度漂。
- 把因图标、徽章宽度不同造成的文字挤偏,改成固定文字起点(图标占固定槽)。
- 验证:在截图上沿每一处文字起点画竖线。手机一屏若出现超过三条明显不同的 x,列出多出来的那些模块,把它们的文字拉回主轨道,再看搜索「下一行标题」是否还要左右扫。