F5.03.2Color-code interference设计研究

品牌色与语义色重叠会造成误读

别名: 品牌色撞车 · 红即错误 · hue collision

概念解释

健康类产品选了一枚接近医疗十字的红做主色,错误提示也是红。顶栏、活动运营位、校验失败排在同一屏时,用户会把顶栏当成警报,或把真错误看成品牌装饰。角色清单上可以写「品牌归品牌、错误归错误」,只要两枚色相落在同一个可分篮子里,读出来的仍是一种颜色

机制

范畴判断工作在篮子上,不在 token 名字上。CIELAB 里距离很近的两枚红,会被收进同一个「暖、警觉」类;一边叫 brand、一边叫 danger 改变不了分类器。于是出现双向误读:品牌表面被当成状态,状态表面被当成品牌。面积大的那边会赢——顶栏比一行校验更抢,结果是「满屏都在报警」,或者反过来「那行红字不过是品牌色」。

重叠不一定是一模一样的 hex。明度不同但色相相同,在余光里仍然合流。加一条细描边或换个图标,救的是已经在看那一块的人,救不了扫视阶段的误分类。

怎么研究

Stroop 式干扰:品牌红的顶栏与错误红的内联提示同屏,测「有没有错误」的判断和反应时。自变量:品牌色与错误色的 ΔE / 色相角差、品牌色面积、是否提供非颜色线索。因变量:虚报、漏报、第一眼注视。

把「这是不是你们品牌」也问一遍。重叠不仅制造假警报,也会让真品牌在错误密集的页面里被当成噪声。

边界

  • 行业惯例本身就是红(急救、停止),完全避开会显得不像那个行业;这时要靠形状、位置和文案把品牌红和错误红拉开,而不是假装可以换成绿。
  • 单色打印、电子墨水、严重色弱会把重叠从「有点像」变成「就是一个色」,误读率上升。
  • 用户如果从未见过该品牌,顶栏红不会被读成品牌,只会参与状态判断——对新用户更危险。

怎么落地

  • 量品牌主色和错误 / 成功 / 警告之间的色相角;落在同一暖色或同一绿篮子里就改品牌辅色或改状态槽,不要只改名字。
  • 若行业必须保留那枚红,把错误改成「红 + 图标 + 文案位置固定」,并把品牌红从横幅、徽章里撤走,只留在标志。
  • 不要用品牌红做促销条——那会把重叠从顶栏扩散到内容区。
  • 验证办法:把品牌色和错误色做成两张色票,请没看过设计稿的人在一米外指出哪张是「出事了」;指错或指不出来,就还没分开。

延伸

  • 同组F5.03.1 品牌色承担识别,功能色承担状态 · F5.03.3 品牌色不应用于主要操作以外的强调
  • 相邻F5.02 语义色 · F5.10 颜色的文化语义
  • 站内检索color-code interference · hue collision · brand color

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F5.03.2