颜色基础
界面里九成的面积是中性色，彩色只用在需要被看见的地方。颜色越省着用，它就越有效。
你会遇到的现象
- 页面花花绿绿，但说不清重点在哪
- 想加一个新状态，发现颜色已经不够用了
- AI 生成的界面全是蓝紫渐变，跟品牌没关系
三个属性
| 属性 | 是什么 | 在界面里怎么用 |
|---|---|---|
| 色相 | 红黄蓝，颜色本身 | 用来区分不同类别。同一个页面里色相越少越干净 |
| 明度 | 亮还是暗 | 建立层级的主要手段。同一色相拉出深浅，比换色相安全 |
| 饱和度 | 鲜艳还是灰 | 大面积用低饱和，小面积可以高饱和。反过来会刺眼 |
四类角色
- 主题色。一个就够。用在主按钮、选中态、链接、品牌标识上。它出现的地方，就是你希望用户点的地方。
- 中性色。从近黑到近白拉一条灰阶，管文字、边框、底色、分隔。界面九成的面积都是它。
- 语义色。成功绿、警告黄、错误红。这三个是行业惯例，别为了差异化改掉。
- 点缀色。图表、标签分类时才需要。日常界面可以完全不用。
四类加起来控制在五种色相以内。超过之后，用户就无法从颜色里读出意义了——颜色多到一定程度，它就退化成了装饰。
怎么选主题色
| 方式 | 怎么做 | |
|---|---|---|
| 跟品牌一致 | 有 logo 就取 logo 的主色。这是最省事也最不会错的做法 | |
| 跟内容匹配 | 金融偏稳重的蓝，食品偏暖的橙红，环保偏绿 | |
| 从参考里取 | 找一个你认可的产品，取它的主色号，再往自己的方向偏一点 | |
| 用配色工具生成 | 确定主色号之后，用配色工具生成互补色、类比色，挑一个当辅助色 |
几个常见问题
- 别只靠颜色传递信息。红绿色觉障碍的人占比不低。状态除了颜色还要有文字或图标。
- 对比度要够。浅灰字配白底看着高级，但很多人读不清。正文对比度至少 4.5:1。
- 大面积渐变要慎用。它很容易让页面显得像模板，尤其是蓝紫那一套。要用就压低饱和度，作为背景而不是主角。
- 暗色模式不是把颜色反过来。纯黑底配纯白字会晃眼，通常用接近黑的深灰配接近白的浅灰，饱和度也要相应降低。