很多人配色翻车不是审美差，而是色相与明度控制失衡，导致视觉层级被打平。

因为基础参数没设对，所以画面再好看也不耐看。常见是主色与背景明度差小于20%，按钮被背景吃掉；或者饱和度全拉满，页面像广告墙。官方教程强调“自由创作”，但实测中先锁参数更稳。

  • 主色占比60%，辅色30%，点缀色10%，避免均分。
  • 主色明度建议在35-55区间，点缀色拉到60-75做对比。

  • 文字与背景的对比度尽量≥4.5:1，按钮文字≥7:1更稳。
  • 灰阶上先拉出三档：背景、卡片、强调，差值至少15。

打开你常用的图形工具，切到色相-饱和度面板，把主色饱和度下调10-15，看信息层级是否更清晰。点开报表后，直接拉到最底部，比较“停留时长”是否回升。

元素 建议明度 目的
背景 85-95 保证内容可读
主色 35-55 建立视觉焦点
点缀色 60-75 引导行动

想快速校验色彩层级，可以参考配色基础训练清单里的对比模板。

不要用多个高饱和色做主视觉，因为注意力会被分散，转化按钮被稀释。另一个坑是只看单页，忽略全站一致性，导致用户感知割裂。

  • 核心按钮点击率提升≥10%，否则说明对比还不够。
  • 首屏停留时长提升≥15%，否则视觉层级仍混乱。
  • 配色自检：主色与背景明度差≥20，点缀色与主色明度差≥15。