在 UI 设计和插画创作中，很多设计师会觉得自己 "天赋不够"，对色彩的敏感度不如他人。但在兰亭妙微的设计实践中我们发现，配色难往往不是天赋问题，而是缺乏系统的方法总结 —— 大多数时候大家凭感觉和运气去配色，却忽略了色彩背后有一整套可以被掌握的规律。本文不重复 RGB、HSB、CMYK 等基础概念，而是从人如何感知色彩出发，探讨在产品设计中如何将配色运用得得心应手。
为什么暖色显得靠前、冷色显得靠后？为什么暖色更醒目、冷色更容易被忽略？这要从人眼的感光细胞说起。
人眼内存在两种感光细胞：视锥细胞和视杆细胞。视杆细胞感知光线强弱但无法感知颜色，主要在黑暗环境中发挥作用；视锥细胞则负责色彩感知，其中又分为三种对不同频率光敏感的细胞 —— 低频、中频、高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感，且三者的感知范围存在重叠。低频视锥细胞对整个可见光频谱都敏感，尤其对黄色到红色的中段频谱更加敏感；而高频的紫色几乎只有蓝视锥细胞可以感知。
这就是为什么马路警示牌、机动车道标识普遍采用黄色、橙色 —— 这些颜色更容易被红视锥细胞捕捉，醒目度极高。如果警示标识改用冷色调，交通事故的发生率恐怕会大幅上升。
人对色彩边缘的对比更加敏感。 一个有趣的实验：将一个纯灰色块放在渐变背景中，多数人会觉得灰色块本身也是渐变色，但取出来单独看却是纯色。这是边缘对比造成的视觉错觉。在 UI 设计中，图片、卡片的叠加放置会产生边缘视觉对比，让原本不明显的差异变得突出。因此，如果想让两个颜色相近的元素具有识别度，最好将它们重叠摆放而非分开；卡片背景色既不能过于灰暗（显脏、对比生硬），也不能过于浅白（信息不聚焦）。被框起来的文字更有点击欲，也是同样的道理 —— 线框、背景色、箭头等方式强化了 "可交互" 的视觉信号。
1. 加深品牌印象与品牌感。 每个产品都有品牌主色，并贯穿于线上线下。闲鱼、马蜂窝的黄色传递出活泼有趣的品牌调性，从界面元素到线下包装一以贯之。但需注意：偏灰偏暗的品牌主色未必适合线上通用，严选、宜家等品牌的深色主色在线上浅色界面中会显得过于强烈、引起不适；而线上看起来合适的颜色，印刷后也会偏低饱和和偏暗。
2. 引导用户视觉、增加易读性。 色彩应当用在希望引导用户注意的地方，而非均匀铺满。高亮色能够有效引导视觉焦点，同时帮助凸显页面层级，而不是单纯依赖中性色来区分信息层级。
3. 区分信息交互的状态。 不是所有元素都需要赋予颜色。美团的价格、满减标签只做信息呈现，而淘票票的 "展开" 使用辅助蓝色，明确传递了 "可点击" 的交互语义。主色除了引导作用，还可以表示激活状态，如视频 App 中当前板块标签和正在播放剧集的高亮。
4. 营造氛围、传递热度。 导航栏、底部标签栏图标、首页营销板块等区域，常在活动时段用品牌色进行氛围打造，传递节日感和促销热度。
兰亭妙微在项目中总结了以下配色禁忌，踩中任何一个都可能让设计品质大打折扣：
定义主色。 色彩必须结合产品定位和用户画像来提炼，通过用户研究、品牌冲刺、情绪板等方法确定主色方向，同时避开上述禁忌。通过对市面上主流 App 的总结可以发现，大部分产品色在 HSB 模式中都落在一个相对固定的范围内。遵循 6:3:1 法则，主色之外还需定义辅助色及其使用场景，多数产品采用 "一个主色 + 多个辅色" 的策略，独立板块可另行定义专属配色。
定义中性色。 包括字体、线条和背景色。字体用于信息对比和层级区分，通常设置 2-3 种层级即可。兰亭妙微的经验值是：标题 / 正文文字的 HSB 中 B 值不大于 20，备注和次要文字不大于 50，默认文字不大于 80，且中性色绝不使用纯黑。
配色不是玄学，而是有规律可循的设计科学。理解人眼感知色彩的原理，明确色彩在界面中的功能角色，避开常见的配色陷阱，再通过系统的方法定义主色与中性色，每个设计师都能将配色运用得得心应手。在兰亭妙微，我们始终相信：好的配色不是靠灵感迸发，而是靠对用户感知的深刻理解和对设计规范的严谨执行。
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。