E3.07.2too many segments crush labels设计研究

段数增加会压缩标签至不可读

别名: 分段过多 · compressed segment labels · 段数上限

概念解释

分段的宽度是一条轨道上均分出来的。段数增加,每一段分到的宽度下降,标签被截断、缩小或改成无人能认的缩写。压到不可读(label crush)发生时,分段还在互斥,但用户已经无法从文字判断各面是什么,只能靠记忆或试探点击。六个以上的中文两字词在手机宽上几乎必撞墙;英文长词更早。这是几何失败,不是文案写得不够机智。

机制

轨道宽度由容器决定,段数是除数。商小于「字号 × 字数 + 内边距」时,布局只能牺牲字。先牺牲的是两端内边距,然后是字距,然后是截断。截断把区分度集中在词头,近义标签(「已完成 / 已关闭」)会变成看不出差别的「已…」。缩写若不是事先约定的符号(D / W / M 对日周月),就是把阅读变成解码。

横滑看起来能加段,但滑走的段不再与可见段形成一条完整轨道,并列感消失,用户不知道总共几段、当前在第几。那已经不是分段,是未标明的页签滚动。

怎么研究

在固定容器宽度下增加段数,记录标签从完整到截断到缩写的各档,做识别任务:在短暂呈现后选出刚才高亮的是哪一段。

自变量:段数、容器宽度、语言(中文双字 / 英文长词)、是否允许横滑。 因变量:识别正确率、误认成相邻段的比例、主动横滑才发现隐藏段的人数。

用真实产品标签,不要用「一段 / 二段」这种人工可区分材料。近义标签才能暴露截断伤害。

边界

图标加文字可以让两三段在窄屏上活下来,但图标必须是已学会的符号;六套新图标不会比六个截断词更好。大屏把阈值往后推,同一组件在桌面可用、在手机不可用,需要断点上改成下拉或页签,而不是两端共用一套段数。用户每天都用的三四个段,缩写可以被学会;偶尔出现的筛选条不行。把标签改成数字 1–8 能避免截断,但把视图名抹掉了,除非数字本身就是维度(评级)。

怎么落地

  • 在最窄目标宽度下排真实标签;任何一段出现省略号或小于可读字号,就减段或换控件。
  • 需要更多面时,改用可滚动页签、下拉或列表,不要在分段里加横滑当扩容。
  • 允许的缩写仅限该领域已有共识的符号,并在首次出现时给完整名。
  • 验证:截最窄屏,遮住内容,让人读出每一段。读错或读不出的段,就是被压缩杀掉的。

延伸

  • 同组E3.07.1 分段适合少量并列且互斥的视图切换 · E3.07.3 分段不适合承载动作
  • 相邻E5.11 页签 · E3.10 选项数量与控件匹配
  • 站内检索segment label truncation · too many segments · compact view switcher

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.07.2