状态表达：让选中、禁用与警示有区别

一个按钮往往不止一张图。图标设计还需要说明它当前处于什么状态、点击后会发生什么。本页以“稍后读”书签为例，为默认、已保存、暂不可用三种情况建立清晰的视觉与文字配合。

把状态写成可理解的句子

默认是“这篇文章还没保存”；已保存是“文章已在列表中”；暂不可用是“此条目当前无法保存”。三句话的区别要进入界面，而不只停留在设计文件的命名里。颜色可以辅助区分，但还可以结合轮廓与填充、对勾、标签变化，让含义有多个线索。

默认用空心书签加“稍后读”。点击成功后，书签填充并出现对勾，标签改为“已保存”。若再次点击会移除，界面应说明下一步动作，例如按钮提示“从稍后读移除”。本页只提供设计示意，不假装连接真实阅读账户，也不展示未经保存的成功状态。

为每个状态写触发条件、图形变化、标签、下一次操作四项。再列异常：处理中、失败、不可用原因。处理中不要过早显示成功对勾；失败应保留重试机会和可理解的说明。把这些状态在同一背景上排列，检查是否有两个状态看起来一样。

面向数字素养课程时，感叹号可以吸引注意，但正文还需写明“链接来源不明”或“先核对网址”。不要用恐吓式图像替代具体说明。需要用户作判断的提示应提供下一步，例如返回来源页或取消操作；严重程度不同的提示也不应全部使用同一种强烈颜色。

把页面临时看成灰度，确认选中仍可由对勾、填充或文字识别。用键盘移动焦点，确认焦点轮廓不会与选中状态混淆。禁用原因应是可阅读的文本，不能仅放在无法获得焦点的图标后面。

可以只靠变粉色表示选中吗？

本练习不采用这种单一线索。增加“已保存”标签或对勾，能让状态变化更明确。

禁用图标越淡越好吗？

需要在“不可操作”和“仍看得清原因”之间取舍。降低强调程度的同时，保留可读说明，并给用户可行的下一步。