E1.11.2disabled icon-button fading设计研究

图标按钮的禁用态需同时降低图标与文字的可见度

别名: 禁用图标仍可点 · 图标禁用不完整 · disabled glyph

概念解释

带图标的按钮被禁用时,如果只把文字变灰、图标仍是满饱和,或只把图标变灰、文字仍像可点,整枚控件会读成「半禁用」。人会去点那个还醒着的部分。禁用态必须把图标与文字(若有)一起拉到同一可见度,必要时连外轮廓也一起降,让整枚控件退出可点集合。

机制

注意会被仍然高对比的那一块吸走。图标面积往往比字大、颜色更满,只淡文字等于留了一枚看起来完好的图标按钮。只淡图标则留下可点的字,像一条还活着的文字按钮。两种半残都在说「这里还有一条通路」。光标若仍是手型,或点击仍有按下动画,半残会被理解成「试试就有了」。完整禁用是一次分类变化:整枚退出可交互集,而不是内部两个元素各走各的透明度。纯图标按钮没有文字可淡,若禁用只降低容器底、字形保持原色,失败模式相同。

怎么研究

做残缺禁用对照:只淡字、只淡图标、两者同淡。任务是找出哪些动作当前不可用。

自变量:淡化对象(字 / 图标 / 两者 / 外盒)、是否保留指针手型、有无按下动画。 因变量:对半残控件的尝试点击、把半残报成可用、漏报真禁用。

告诉被试「有些是禁用的」会让他们刻意找灰。更接近现场的是给一个真实任务,当前步骤里那枚本应禁用的「发布」混在工具栏里。

边界

双色图标(品牌多色)按整体透明度淡化可能变成脏色,需要准备独立的禁用调色,而不是套一层灰滤镜。选中且禁用(已开的选项暂时不可关)要同时表达「开着」和「不能改」,只一起变灰会丢掉开着;可用描边保留值、降低可点线索。加载不是禁用:图标换成转圈时不要再叠一层禁用灰,否则像坏掉。

怎么落地

  • 禁用样式绑在控件根上,图标与文字继承同一透明度或同一套禁用色,禁止只改 span 里的字。
  • 纯图标按钮的字形、描边、填充一起降;不要只改圆形底。
  • 去掉禁用时的手型光标和按下动画。
  • 验证:把一枚图文按钮设为禁用,分别遮住字或遮住图标。剩下那一半仍像可点,禁用就不完整。

延伸

  • 同组E1.11.1 多主题或暗色模式下五态需分别校验而非直接映射 · E1.11.3 同一按钮出现在不同背景容器上时状态对比需重新核实 · E1.11.4 状态组合中悬停与禁用不应同时出现
  • 相邻D1.07 禁用态 · E1.13 图标加文字按钮 · E1.04 图标按钮的歧义
  • 站内检索disabled button · icon button · disabled affordance

同组卡片

快捷操作

分享

分享当前页面

ios_share

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