
真要在设计系统里排优先级,最该先动的通常不是按钮颜色,而是 badge、alert、tag、表单状态和表格状态这几类最容易只靠颜色传达意思的组件。
很多团队一聊色觉无障碍,第一反应都是“那我们把红色调深一点?”说实话,这往往不是最值的一刀。真正该优先改的,是那些一旦只靠颜色表达,用户就会立刻误解意思的组件。设计系统做得好不好,常常就看这里。
如果要我给设计系统排队,我会把 badge / alert / tag / form state / table status 这几类放在前面。
原因很简单,它们不是装饰,它们在界面里承担“告诉用户现在是什么情况”的职责。一个订单到底失败了还是处理中,一个字段到底报错了还是只是提示,一个名单到底是高风险还是已完成,很多产品都靠这些小组件在传达。只要颜色是唯一线索,用户就可能看错,而且是看错业务含义,不只是“看起来不舒服”。
alert 和 form state 通常排第一。因为它们直接影响操作。用户提交失败却只看到一圈红框,没有错误文案,没有错误图标,也没有字段附近的解释,这种问题最伤流程。
第二档我会给 table status。后台系统、运营台、财务台里最常见的坑,就是一整列状态全靠红黄绿。近看都费劲,更别说复杂列表里快速扫读。
badge 和 tag 也不能拖。它们看起来小,传播面却很大。设计系统里一旦把“红色 badge = 风险”“绿色 tag = 正常”定成默认写法,后面十几个业务线会一起复制,返工会越来越贵。
很多人担心,一补文字和图标,界面会不会又重又乱。其实不会,关键是补“关键差异”,不是补一整段说明。
比如 alert 里加一个明确标题,Error、Warning、Success 这类词先站出来;form state 不只改边框色,还给字段旁边一行短句;table status 除了颜色,再加文本标签,必要时加小图标;badge 和 tag 如果空间很紧,至少要让文案本身能独立说明状态,而不是只写一个模糊词。
一句话,别让用户去猜颜色。让组件自己把意思说完。
比较稳的做法,不是全量翻修,而是先从设计系统 token 和基础组件 API 下手。把状态组件的默认结构改掉,比如规定警告类组件必须支持图标位、标题位、文案位;表格状态单元格必须允许文本和图标共存;表单错误态不能只暴露颜色变量。
这样一来,业务团队以后即使偷懒,也比较难再把“只改颜色”当成完成了。设计系统的价值,本来就不是把颜色表发下去,而是帮团队把高频错误挡在上游。
如果你准备把这件事继续往产品里推,可以接着读 成功、失败、警告只用颜色区分,会带来哪些真实问题、做数据大屏时,怎样避免红绿配色把关键信息藏起来 和 色弱用户看表单报错为什么更容易漏掉关键反馈。一篇帮你看状态语义风险,一篇看大屏场景,一篇看表单这种最容易漏反馈的地方。
专注在线色觉筛查、结果解读与无障碍实践,帮助个人、家庭与团队更早发现问题并做出下一步判断。
色觉筛查笔记
订阅后可获取产品更新、无障碍实践以及色觉筛查相关的实用说明