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