E1.13.3keep text when narrowing labeled buttons设计研究

窄空间优先保留文字而非仅保留图标

别名: 窄屏去文字 · 响应式按钮 · collapse to icon

概念解释

宽度不够时,图文按钮常被做成只剩图标。优先该丢掉的是图标,不是文字。文字是名称,图标是加速器;窄空间里加速器最先失去价值,名称不能先没。仅保留图标等于在最需要看清动作的拥挤界面上,把按钮降级成无标签图标。

机制

拥挤时搜索本来就难,图标的定位优势被一排同样大小的方块抵消,区别全靠隐喻——而隐喻在无标签时识别率差。文字即使缩小或缩成短动词,仍走精确通道。响应式里「先去字留图」往往因为图标是正方形好排、文字会撑破栅格,这是在为网格牺牲名称。结果是窄屏、工具栏溢出、本地化变长之后,最不熟悉这些图标的用户(也常常是最需要文字的用户)碰上最难认的形态。保留文字、去掉图标,按钮会变窄得少一些,但每个键仍可读;去字留图,每个键都变谜。

怎么研究

同一组动作在宽、中、窄三种宽度下,比较「去图标留字」「去字留图」「缩字号仍图文」。任务是首次找到指定动作。

自变量:折叠策略、用户对该图标集的经验、语言长度。 因变量:首次命中时间、错按、放弃。

用已经背下图标的内部员工测,会得出「留图标更好」。要找没见过这套工具栏的人。

边界

已经进入跨产品共识的那几枚(搜索、关闭)可以在极窄时去字。导航栏的品牌标不是动作名称,另算。手表等微屏可能两字都放不下,应改信息架构(减少同屏动作),而不是默认去字。文字保留后若被截成无法区分的「…」,等于没有保留,应改换行策略或减少同排按钮。

怎么落地

  • 宽度预算先保证短动词完整出现,图标作为可选项在更宽时再加入。
  • 溢出时把次要动作收进带文字的菜单,不要把一排图文全部收成图标。
  • 为最长语言检查窄断点,而不是只看英文短词。
  • 验证:在最窄目标宽度上找未使用过产品的人指出每一枚按钮会做什么。若一排都是猜,折叠策略去错了东西。

延伸

  • 同组E1.13.1 图标与文字并存时图标起辅助识别而非独立表意的作用 · E1.13.2 图标与文字含义冲突时用户会以文字为准 · E1.13.4 图文按钮的间距与对齐需要统一的规范
  • 相邻E1.04 图标按钮的歧义 · E1.15 按钮的宽度与自适应 · K4 手表与微屏
  • 站内检索responsive toolbar · icon-only collapse · keep the label

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.13.3