E2.21.3read-only disabled look-alike设计

两者视觉样式相近时用户无法判断能否申请解锁

别名: 只读禁用长得像 · grey field ambiguity · 能不能申请编辑

概念解释

只读和禁用在视觉上常常都是变浅、去边框、像静态字。人分不清「这份值天生不归我改」还是「差一个前提,申请或勾选就能亮」。于是该去开权限的人放弃,该死心的人反复点。只读与禁用的外观混淆(read-only disabled look-alike)管的是这两种状态能不能被看出来,不是只读能不能复制,也不是禁用是不是从 Tab 里拿掉。

机制

浅灰是一条被过度使用的「非默认」通道,承载了禁用、只读、占位符、次要文本。没有第二通道(锁图标、「只读」字样、「先选上面一项」)时,人只能猜。猜错的代价不对称:把可申请的禁用当成永久只读,功能发现失败;把永久只读当成可申请,产生无效工单。点击测试也帮不上忙——两种都可能「点了没反应」。必须在静止外观上就能回答「我有没有一条解锁路径」。

边界

同一表单里若只有一种非编辑态,混淆不发生,浅灰可以只用一次。专家用户靠焦点行为区分(能 Tab 进去就是只读),新手不会去做这个实验。高对比主题可能把两种浅灰拉成一样,依赖色差的区分会塌。打印样式里两者更分不出,文档截图不能当证据。

怎么落地

  • 给只读和禁用两套可分离的外观:只读保留槽的形状并加「只读」或锁;禁用更空、并在旁边写前提。
  • 可申请解锁的禁用要露出申请入口,不要只靠人猜「也许点点就好」。
  • 不要让占位符的浅灰和这两种再撞车。
  • 验证:把两种状态的字段截在一起,问没见过这页的人「哪个能申请打开、哪个永远不归我改」。再让他们指出解锁该点哪。分不清或指错,外观通道就还是一条浅灰。

延伸

  • 同组E2.21.1 只读表示当前不可改但内容仍可选中复制 · E2.21.2 禁用表示功能暂不可用且通常不可交互 · E2.21.4 禁用原因应可查询,只读状态应说明何时可编辑
  • 相邻E2.01 单行输入框 · E1.02 按钮的状态
  • 站内检索read-only disabled look-alike · grey field ambiguity · unlock path

同组卡片

快捷操作

分享

分享当前页面

ios_share

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