做产品 PMaker
到处是彩色
设计 紧急 进行中
品牌升级项目
共 12 笔改稿记录
导出 发送 归档
六种颜色,主按钮反而不突出
只留一个
设计 紧急 进行中
品牌升级项目
共 12 笔改稿记录
发送 导出 归档
唯一的彩色落在唯一该点的地方

颜色是一种稀缺资源。用在所有地方,等于哪儿都没用。

一个强调色

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

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

颜色的作用是打断视觉扫描,把注意力拉过来。一个页面上能被打断的次数有限,用完就没了。把颜色分配给六个元素,等于告诉用户这六个一样重要,也就等于没有重点。

强调色用在哪

该用不该用原因
主按钮次要按钮次要按钮用幽灵样式或纯文字链接
选中态、当前位置所有可点的东西可点不等于重要,鼠标形状已经在暗示了
链接正文里的强调正文强调用加粗,别用彩色
关键数据所有数字只给那个最该被看到的数上色
品牌标识装饰性图形装饰用中性色,别抢主体
一屏上强调色的面积控制在 10% 以内是个不错的直觉。超过之后,它就从「强调」退化成了「主色调」。

语义色是例外:成功绿、警告黄、错误红不算强调色,它们承担的是信息而不是引导。但同样要克制——一屏上同时出现三种语义色,通常说明状态设计得太复杂了。

其余交给灰阶

去掉彩色之后,层级要靠灰阶撑起来。一套够用的灰阶大概是这样。

主文字
正文
次要
辅助
分隔线
底色
六档从近黑到近白。多数界面用这六个就够,不需要更细的分档。
验证方法:把页面转成灰度,如果层级还在,说明结构立得住;如果一片模糊,说明之前的层级全是颜色硬撑出来的。