2. 正负组搭配核心逻辑：视觉权重分配与明度纯度对比
正负组搭配，说白了就是解决一个问题：谁该跳出来，谁该退回去。
我做UI那几年，见过太多配色翻车的案例。最典型的就是——主色和背景色打起来了。你想想看，如果正组（主色）和负组（辅色/背景色）在视觉上势均力敌，用户的眼睛就会无所适从。嗯，这就像两个人同时跟你说话，你听谁的？
所以这一章，我们来拆解正负组搭配的核心逻辑。说白了就两件事：视觉权重分配和明度与纯度对比。
2.1 视觉权重分配：谁主谁次
正组，就是你要强调的内容。按钮、标题、关键图标、操作入口——这些属于正组。负组，就是背景、分割线、次要文字、装饰元素——这些属于负组。
我个人习惯，正组和负组的视觉权重比例，大致遵循 20:80 或 30:70 的黄金法则。正组占小头，但必须足够突出。
核心原则：正组是「焦点」，负组是「画布」。画布不能抢焦点的戏。
我在项目中遇到过这样一个情况：设计师把主按钮做成了浅蓝色，背景也是浅灰色，结果用户根本找不到「提交」按钮在哪。这就是典型的正组权重不够。
怎么分配？我总结了三个维度：
- 面积权重：正组元素占界面总面积通常不超过 30%。负组占 70% 以上。
- 层级权重：正组在视觉层级中排第一梯队，负组排第二甚至第三梯队。
- 色彩权重：正组用高纯度、高明度色彩；负组用低纯度、低明度或中性色。
| 维度 | 正组（主色） | 负组（辅色/背景色） |
|---|---|---|
| 面积占比 | 10% - 30% | 70% - 90% |
| 视觉层级 | 第一梯队（高） | 第二/三梯队（低） |
| 色彩纯度 | 高纯度（60% - 100%） | 低纯度（0% - 30%） |
| 色彩明度 | 高明度或低明度（极端） | 中明度（柔和） |
| 典型用途 | 按钮、标题、图标、链接 | 背景、分割线、次要文字 |
小技巧：如果你不确定正组够不够突出，试试把界面缩成拇指大小。还能一眼看到正组元素吗？能，就对了。
2.2 明度对比：拉开层次的关键
明度，就是颜色的亮度。从黑到白，中间有无数个灰度层级。正组和负组之间，明度差越大，层次感越强。
我曾经犯过一个错：用深蓝色文字放在深灰色背景上。当时觉得「都是深色系，很高级」。结果用户反馈说「眼睛快瞎了，根本看不清」。嗯，这就是明度对比不够的典型。
我建议，正组和负组的明度差至少保持在 3 个层级以上。怎么衡量？
- 明度差 1-2 级：柔和，适合装饰性元素，不适合关键信息。
- 明度差 3-4 级：清晰，适合正文和次要按钮。
- 明度差 5 级以上：强烈，适合主按钮、标题、警告信息。
举个例子：
// 明度对比示例
// 正组（主按钮）：#1a73e8（明度约 45%）
// 负组（背景）： #f5f5f5（明度约 96%）
// 明度差：51% → 足够清晰
// 反面案例
// 正组（文字）： #666666（明度约 40%）
// 负组（背景）： #888888（明度约 53%）
// 明度差：13% → 几乎看不清注意：明度对比不是越高越好。纯黑配纯白虽然清晰，但看久了眼睛容易疲劳。我一般推荐正组明度在 30%-70% 之间，负组明度在 80%-95% 之间（浅色背景）或 5%-20% 之间（深色背景）。
2.3 纯度对比：控制情绪的开关
纯度，就是颜色的鲜艳程度。纯度越高，颜色越「跳」；纯度越低，颜色越「灰」。
正组用高纯度，负组用低纯度——这是基本法则。但这里有个坑：高纯度不等于高可视性。
我记得有一次，我用高纯度的黄色做按钮，放在白色背景上。黄色纯度很高，但明度也高，结果在白底上几乎「消失」了。为什么？因为黄色和白色明度太接近，纯度再高也救不了。
所以纯度要和明度配合使用：
- 正组：高纯度 + 与背景形成明度差
- 负组：低纯度 + 中高明度（浅色背景）或中低明度（深色背景）
纯度对比的典型场景：
| 场景 | 正组纯度 | 负组纯度 | 效果 |
|---|---|---|---|
| 主按钮 | 80% - 100% | 0% - 10% | 强烈吸引点击 |
| 次要按钮 | 40% - 60% | 0% - 10% | 清晰但不抢眼 |
| 标题文字 | 60% - 80% | 0% - 5% | 突出但不刺眼 |
| 装饰元素 | 20% - 40% | 0% - 5% | 柔和点缀 |
经验之谈：如果你想让界面看起来「高级」，负组纯度尽量往 0% 靠。灰色背景永远不会出错。正组纯度控制在 60%-80% 之间，既醒目又不廉价。
2.4 正负组搭配的四种模式
根据明度和纯度的不同组合，我总结了四种常见的搭配模式。你可以在项目中直接套用：
- 高对比模式：正组高明度+高纯度，负组低明度+低纯度。适合深色模式、强调场景。
- 柔和模式：正组中明度+中纯度，负组高明度+低纯度。适合阅读型界面、内容型产品。
- 清新模式：正组高明度+中纯度，负组极高明度+极低纯度。适合工具型产品、后台系统。
- 沉稳模式：正组低明度+高纯度，负组中明度+低纯度。适合品牌型页面、高端产品。
我个人最常用的是「清新模式」。说白了，就是白色背景 + 一点彩色点缀。干净、清晰、不容易出错。
2.5 实战避坑指南
说了这么多理论，最后分享几个我踩过的坑：
坑一：正组和负组纯度都太高。
我曾经做过一个活动页面，主色是亮红色，背景是亮蓝色。结果整个页面像「圣诞树」一样，用户根本不知道该看哪里。后来我把背景纯度降到 10%，瞬间清爽了。
坑二：明度差不够，正组「隐身」。
这个前面提过。深蓝文字配深灰背景，你以为很高级，用户只觉得费眼。记住：明度差至少 3 级，最好 5 级以上。
坑三：正组面积太大，喧宾夺主。
有些设计师喜欢把主色铺满整个页面。结果呢？用户找不到重点。正组面积控制在 30% 以内，剩下的交给负组去「呼吸」。
我的习惯：每次做完配色，我都会把界面截图转成灰度图。如果灰度图里正组和负组还能清晰区分，说明明度对比过关了。如果变成灰度后一片模糊，那就得调整。
好了，正负组搭配的核心逻辑就这些。说白了就是三件事：权重分配、明度拉开、纯度控制。记住这三点，你的配色至少不会翻车。