E2.03.2left-aligned label设计研究

左置标签节省高度但增加视线跳转

别名: 标签在左 · horizontal label · 字段名左列

概念解释

左置标签(left-aligned label)把字段名排成一列,输入槽排在右侧,两项共享一行高度。一屏能放下更多字段,滚动减少。代价是每填一格都要做一次水平眼跳:先读左列的名称,再落到右槽,名称长短不一时,跳跃距离还在变。它管的是高度与扫视之间的交换,不是顶置那条垂直短路径,也不是读屏器能不能读到名称。

机制

左列名称对齐时,眼睛可以很快扫完「这页有哪些项」,这是它省高度之外的第二个好处。但填写不是扫目录:每答一题都要把刚读到的名称带着跳过中间的空白,落到槽里。标签右对齐、槽左缘靠近时,跳跃缩短,Penzo 一类眼动里这种「右对齐左置」往往比左对齐左置更快,可名称列会变成参差的右缘,目录感变差。标签左对齐时目录整齐,名称和槽之间的鸿沟随最长标签被撑开,短名称对面是一大块空,眼跳被拉长,人会回视。双列在宽屏上的密度优势,就是用这条不稳定的水平路径换来的。

怎么研究

同一表单做成左对齐左置、右对齐左置、顶置三套,用眼动计从标签到槽的眼跳幅度、回视、完成时间,并用视口高度记录一屏字段数。自变量:标签长度方差、列间距、是否有必填星号挤在名称旁。因变量:眼跳距离、错槽、滚动次数。熟练用户、内部工具上左置的时间惩罚会缩小,因为名称已被记住,人直接点槽;实验应分开生手与熟手,不要把管理员的完成时间当成公众表单的证据。

边界

窄屏上左置会把名称和槽挤成两截,或把槽压得无法显示预期长度,此时省高度的前提消失。长标签在左列会强制换行,行高被撑乱,邻行的名称和槽对不齐,跳跃变成找行。屏幕阅读器用户不走眼跳,左置的视觉代价与他们无关。翻译成德文、芬兰文后左列暴涨,原来在英文里可接受的鸿沟会变得不可用。数字、短代码这类槽本身很窄时,左置把大量空白留在中间,跳跃被放大。

怎么落地

  • 只在宽桌面、标签短且长度接近、用户会反复填的内部表上用左置,用省下的高度换一屏密度。
  • 若采用左置,让名称右对齐、槽左缘靠近,把水平鸿沟缩到能一眼跨过;不要为了左列齐整把槽推到屏幕另一头。
  • 规定左列最大宽度,超长名称换行后仍与本行的槽垂直居中对齐,避免邻行错位。
  • 验证:用目光追踪或逐项放声「读名称、指槽」。跳跃中途停顿、回看名称或指到邻行,就缩短列间距或改回顶置。

延伸

  • 同组E2.03.1 顶置标签垂直占用大但扫描最快 · E2.03.3 标签与输入框的关联必须在语义上建立
  • 相邻E2.01 单行输入框 · F1.03 就近原则与视线跳转
  • 站内检索left-aligned label · horizontal label · saccade path

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.03.2