一个强调色

整个产品只留一个彩色。它出现的地方，就是你希望用户看的和点的地方。

整个产品只留一个彩色。它出现的地方，就是你希望用户看的和点的地方。颜色的作用是打断视觉扫描，把注意力拉过来。一个页面上能被打断的次数有限，用完就没了。把颜色分配给六个元素，等于告诉用户这六个一样重要，也就等于没有重点。这条规则对 AI 尤其重要：让它自由发挥配色时，它倾向于给每个功能一块自己的颜色，因为色彩是它手里最便宜的区分手段。你要做的是把颜色预算收紧。

你会遇到的现象：

• 页面挺花的，但用户找不到主按钮
• 每加一个状态就加一种颜色，最后自己都记不住哪个代表什么
• AI 生成的界面每个模块一个色，像调色板

强调色用在哪

一屏上强调色的面积控制在 10% 以内是个不错的直觉。超过之后，它就从「强调」退化成了「主色调」。主按钮和选中态是强调色的两个大去处，链接和关键数据是它的两个小去处。一屏上同时出现四个以上的彩色元素，就该回头数一数哪些其实可以用灰阶——每多一种彩色，都是在跟主按钮抢注意力。

语义色是例外：成功绿、警告黄、错误红不算强调色，它们承担的是信息而不是引导。但同样要克制——一屏上同时出现三种语义色，通常说明状态设计得太复杂了。语义色之间也会打架：一个报错出现在一块绿色卡片旁边，用户会先怀疑自己的眼睛。让语义色只在它该出现的地方出现，状态切换走文字和图标，不靠颜色。

其余交给灰阶

去掉彩色之后，层级要靠灰阶撑起来。一套够用的灰阶大概是这样：主文字、正文、次要、辅助、分隔线、底色，从近黑到近白六档。多数界面用这六个就够，不需要更细的分档。

验证方法：把页面转成灰度。如果层级还在，说明结构立得住；如果一片模糊，说明之前的层级全是颜色硬撑出来的。这也是「先结构后颜色」的检查方式——强调色只负责把已经存在的层级里最重要的那一点提亮，不负责创造层级。m3color

灰阶还有一个作用：它是强调色的参照系。同一屏上，灰阶决定了信息的分层，彩色只负责其中最重要的一层，灰阶越干净，彩色越值钱。选灰阶时也别只用黑和白。六档之间最好留出明显的间隔，间隔太近会让人分不清哪一档是哪一档；间隔太大，页面又会显得碎。六档里真正决定层级的是前三档：主文字、正文、次要。后面三档负责分隔和留白。灰阶设计得好，还能扛住不同屏幕的对比度差异。