F5.03.1Brand color设计

品牌色承担识别,功能色承担状态

别名: 品牌色 · 功能色 · identity colour · 角色分离

概念解释

银行 App 的紫出现在标志、导航栏,也出现在「转账失败」的横幅上。用户没法判断这块紫是在说「这是我们」,还是在说「出事了」。品牌色用来让产品被认出来,功能色用来报告状态。两件事可以共用一套色板技术,但不能共用一个角色。

机制

识别靠的是跨屏幕重复出现的那一小撮独特色相:看见那一抹紫,就知道进的不是另一家的壳。状态靠的是一个封闭的小集合,每个成员对应一种处置。把识别色拉进状态槽,等于让同一刺激承担两种编码——一种要「这是我」,一种要「你该做什么」。注意资源有限,两种编码会互相抢:导航栏已经把紫用成环境色之后,紫横幅不再跳;反过来,失败横幅把紫训练成警报之后,顶栏也会隐隐像在报警。

功能色需要稳定的类别边界,品牌色需要可被商标化的独特性。前者怕变,后者怕俗。拆开之后,品牌可以换季节主视觉而不改错误红,错误红也可以为深色主题改明度而不动标志。

边界

  • 极简产品只有一枚彩色,识别和主操作会叠在同一色上;这时要靠位置和形状把「这是品牌」和「这是提交」分开,而不是再发明第四种紫。
  • 白牌 / 多租户界面可能没有可识别的品牌色,功能色仍然要自成体系。
  • 启动屏、营销页以识别为主,几乎没有状态色,不代表进了工作台就可以继续只用品牌色。

怎么落地

  • 列出两张清单:出现在标志、启动、空状态吉祥物上的色,和出现在校验、徽章、系统提示上的色。有交集就改其中一侧的角色,不要各改 10%。
  • 导航、侧栏、产品名附近只放识别色;状态只走功能色槽。
  • 换皮肤或做节日版时,只动识别色,功能色表冻结。
  • 验证办法:把界面做成灰度后再单独上色,先只上品牌色,问「这是哪家产品」;再只上功能色,问「现在是成功还是失败」。两问都能答,角色才分开了。

延伸

  • 同组F5.03.2 品牌色与语义色重叠会造成误读 · F5.03.3 品牌色不应用于主要操作以外的强调
  • 相邻F5.02 语义色 · F5.11 强调色的稀缺性
  • 站内检索brand color · functional colour · identity colour

同组卡片

快捷操作

分享

分享当前页面

ios_share

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