E1.11.2disabled icon-button fading设计研究
图标按钮的禁用态需同时降低图标与文字的可见度
别名: 禁用图标仍可点 · 图标禁用不完整 · disabled glyph
概念解释
带图标的按钮被禁用时,如果只把文字变灰、图标仍是满饱和,或只把图标变灰、文字仍像可点,整枚控件会读成「半禁用」。人会去点那个还醒着的部分。禁用态必须把图标与文字(若有)一起拉到同一可见度,必要时连外轮廓也一起降,让整枚控件退出可点集合。
机制
注意会被仍然高对比的那一块吸走。图标面积往往比字大、颜色更满,只淡文字等于留了一枚看起来完好的图标按钮。只淡图标则留下可点的字,像一条还活着的文字按钮。两种半残都在说「这里还有一条通路」。光标若仍是手型,或点击仍有按下动画,半残会被理解成「试试就有了」。完整禁用是一次分类变化:整枚退出可交互集,而不是内部两个元素各走各的透明度。纯图标按钮没有文字可淡,若禁用只降低容器底、字形保持原色,失败模式相同。
怎么研究
做残缺禁用对照:只淡字、只淡图标、两者同淡。任务是找出哪些动作当前不可用。
自变量:淡化对象(字 / 图标 / 两者 / 外盒)、是否保留指针手型、有无按下动画。 因变量:对半残控件的尝试点击、把半残报成可用、漏报真禁用。
告诉被试「有些是禁用的」会让他们刻意找灰。更接近现场的是给一个真实任务,当前步骤里那枚本应禁用的「发布」混在工具栏里。
边界
双色图标(品牌多色)按整体透明度淡化可能变成脏色,需要准备独立的禁用调色,而不是套一层灰滤镜。选中且禁用(已开的选项暂时不可关)要同时表达「开着」和「不能改」,只一起变灰会丢掉开着;可用描边保留值、降低可点线索。加载不是禁用:图标换成转圈时不要再叠一层禁用灰,否则像坏掉。
怎么落地
- 禁用样式绑在控件根上,图标与文字继承同一透明度或同一套禁用色,禁止只改
span里的字。 - 纯图标按钮的字形、描边、填充一起降;不要只改圆形底。
- 去掉禁用时的手型光标和按下动画。
- 验证:把一枚图文按钮设为禁用,分别遮住字或遮住图标。剩下那一半仍像可点,禁用就不完整。