F5.03.1Brand color设计
品牌色承担识别,功能色承担状态
别名: 品牌色 · 功能色 · identity colour · 角色分离
概念解释
银行 App 的紫出现在标志、导航栏,也出现在「转账失败」的横幅上。用户没法判断这块紫是在说「这是我们」,还是在说「出事了」。品牌色用来让产品被认出来,功能色用来报告状态。两件事可以共用一套色板技术,但不能共用一个角色。
机制
识别靠的是跨屏幕重复出现的那一小撮独特色相:看见那一抹紫,就知道进的不是另一家的壳。状态靠的是一个封闭的小集合,每个成员对应一种处置。把识别色拉进状态槽,等于让同一刺激承担两种编码——一种要「这是我」,一种要「你该做什么」。注意资源有限,两种编码会互相抢:导航栏已经把紫用成环境色之后,紫横幅不再跳;反过来,失败横幅把紫训练成警报之后,顶栏也会隐隐像在报警。
功能色需要稳定的类别边界,品牌色需要可被商标化的独特性。前者怕变,后者怕俗。拆开之后,品牌可以换季节主视觉而不改错误红,错误红也可以为深色主题改明度而不动标志。
边界
- 极简产品只有一枚彩色,识别和主操作会叠在同一色上;这时要靠位置和形状把「这是品牌」和「这是提交」分开,而不是再发明第四种紫。
- 白牌 / 多租户界面可能没有可识别的品牌色,功能色仍然要自成体系。
- 启动屏、营销页以识别为主,几乎没有状态色,不代表进了工作台就可以继续只用品牌色。
怎么落地
- 列出两张清单:出现在标志、启动、空状态吉祥物上的色,和出现在校验、徽章、系统提示上的色。有交集就改其中一侧的角色,不要各改 10%。
- 导航、侧栏、产品名附近只放识别色;状态只走功能色槽。
- 换皮肤或做节日版时,只动识别色,功能色表冻结。
- 验证办法:把界面做成灰度后再单独上色,先只上品牌色,问「这是哪家产品」;再只上功能色,问「现在是成功还是失败」。两问都能答,角色才分开了。