从零做一款产品的时候，需要制定产品的主色。怎么制定呢？
很多文章归纳出来这几步：
A 归纳产品特性和理念
B 提取关键词
C 建立情绪版
D 选择色相
E 制定色系
按照这个方法，使用的时候能够按步就班，且有理论依据。
但我想说点不一样的。
在这个时代，产品五花八门，想用哪一类别的产品一搜一大把，在七麦数据搜索购物类的APP榜单，光第一页单榜就有200多个。
我们模糊一下这张图，你会发现对APP的记忆，依靠色彩的比例较大。
换做在手机看也是一样的，打开你的APP列表，快速往下滑去找一个APP，你会发现它们最终只剩下色彩——“我想找爱奇艺，它在我记忆中是绿色的，刚才快速滑过的红色黄色都不是”。当然，这只是拿来举例，通移动大流量卡常你不需要这样去找一个APP。用这个例子只想强调APP主色的意义——它是区别于竞品的第一特征，是调性概括，是一种态度，甚至是你趁手的兵器。
所以当你去确定产品主色的时候，有三种思路：1、随大众；2、反着来；3、搞特殊。
随大众
不同的行业发展至今，已经“自带色相”了。比如电商购物是红黄色、医疗健康是蓝绿色、商务是蓝色…如果我们每次都用产品或者行业特性去推导色相，出来的大多数都是第一种思路。
反着来
使用和竞品色相相差大于90度（中差色、对比色、互补色）的，差别较大的就是反着来。这是逆向思维，通过差异较大的色相能让你在一堆颜色同质化的竞品中跳出来。
搞特殊
抖音和keep是我心中“搞特殊”的top，既不使移动大流量卡用行业相同的色相，也不使用相反的色相，而是双色相或双色相叠加。
以下用小易APP作为例子，说一下我制定色系时的思路和过程吧，仅作参考。步骤大纲如下：
01 基于行业与场景确认色相
02 色相偏移
03 WCAG标准验证颜色
04 色系拓展
基于行业与场景确认色相
小易是一款助力销售的CRM产品，主打销售智能化。取色就要看你立足点是“数据智能”还是“销售”了。与数据智能相关的绕不开蓝绿色，与销售系统相关的绕不开橙色（非约定俗成，只讨论大概率存在）。这个产品是内部定制化的，不存在有竞品的情况，因此随大众更容易取得方案的通过（领导的认可）。为免出现“这个颜色一点都不科技和智能”的质疑和返工，我非常科学（识相）地选移动大流量卡择了蓝色作为主要色相。
色相偏移
用HSB参数来看，正蓝色的H值（色相）是240。我在优设大课堂上态爷的手绘课时，他说过要想颜色好看，色相别太正。所以我选择偏移蓝色的色相。偏移方向有两个：往冷色偏移或者往暖色偏移。
这里加入一个空间的概念：假设我们的产品产品在一个空间里，里面主打智能和数据，又因设定了大环境偏冷光，所以里面的物体会受冷光的影响。
在冷光环境下，蓝色的色相受环境影响，会往冷色偏移。色相偏移15度是同类色，偏移45度是近似色。我在两者之间取了中间值，约25度。对市面上的产品取色进行研究的时候，会发现它们的色值一般在拾色器九宫格的右上格，所以S值（饱和度）的取值范围大致在77%-100%之间移动大流量卡，我取了中间偏下的值89%。B值（明度）一般为100%，除了黄绿色相本身明度偏高，则会适当降低明度。
WCAG标准验证颜色
WCAG是网页无障碍指南。其中关于颜色的使用标准，简单来说就是色彩要在页面中达到一定的对比度，才能让人看清。WCAG用色标准中普通文本与背景对比度不低于4.5：1，那么对于高亮文字颜色（通常是产品主色）是不是也需要达到这个标准呢。我用几个APP进行了测试，下列APP的对比度在白色页面中范围是2.3-4.5。
我估计原因有二，一是饱和度太高有点太艳了，二是现在很多APP都有暗夜模式，观察这张图上的APP颜色情况，可以发现一个颜色在白色背景对比度越低，在黑色背景对比度就越高。且高亮移动大流量卡文字使用的频次相比文本文字少，多数伴随色块按钮使用，所以3-4是较合适的对比值范围。
有个快速计算对比度的网页很好用，输入色值就可以得出结果。
contrast ratio：
https://contrast-ratio.com/#%23FF784A-on-white
还有个网站会更直观，输入色值后下面还有网页例子预览效果。
color review：
https://color.review
我选择的蓝色对比值在白色背景是3.9，黑色背景是5.2，在正常范围内。其实小易APP大概率不会有暗夜模式，因为需要投入更多的开发资源，浅色模式也不是不能用。在这个考量下，可以抛开黑色背景不考虑，但是话又说回来，做好准移动大流量卡备总是没错的。
色系拓展
色系拓展需要拓展两类：中性色和辅助色。
中性色
中性色相对来说比较简单，所以放在前面先讲。前面我已经选定主色是#1b7aff，打开拾色器，将明度调为10%，就可以得到一个深色偏蓝的颜色。用这个作为界面中性色最深的颜色，叠加白色（白色的透明度以10%作为基础依次递减），得出中性色的色阶。
辅助色
我看过很多写得不错的文章，文末会放相关参考的链接。下面的四种选色思路，是根据他们的归纳为基础，加入一点其它的角度来进行辅助色系的选定。
看到这里你应该也发现规律了：
选色离不开色彩的理论知识。在理论的基础上不断尝试搭配，组合出不一样的色板。
而且要基于目的来选择搭配，跟画画一样。如果想要画面和谐移动大流量卡，就不要出现多组互补色。画面中有一组互补色时，要取两者中间的颜色来劝架，以达到和谐的目的。如果希望画面冲击力强，则相反。基于这样的色彩理论，可以让我们不出错且有依据地搭配出界面的色系。
我的选色
我希望颜色能有更细腻的色相变化，所以我把色环按照10度作为基准细化。选择互补辅助色的时候，我没有选正互补色，偏移了10度。从黄色到绿色的亮度都很高，所以我的选色更多偏右边。以选取的这六种颜色作为小易的基础色，微调饱和度稍微降低色彩的黑白灰差值。
制作色板阶梯可使用线上的工具，比如ant design的色板生成工具。
链接：
https://ant.design/docs/spec/colors-cn
按照色彩体系移动大流量卡调整后的页面：
参考文章：
被惯性思维牢笼禁锢的产品色彩“方法”
https://www.zcool.com.cn/article/ZMTIwNzM2NA==.html
如何科学地建立色彩体系？我总结了这5个方面
https://www.uisdc.com/color-order-system
授权W3G文档，网页无障碍指南（WCAG2.1）翻译版
https://www.w3.org/Translations/WCAG21-zh/
优设态爷手绘提高班关于色彩的内容（课程链接）
https://xue.uisdc.com/detail?id=5f365ff7dbd5ea3cf97cee73
友情提醒： 请添加客服微信进行免费领取流量卡！
QQ交流群：226333560 站长微信：qgzmt2
原创文章，作者：sunyaqun，如若转载，请注明出处：https://www.dallk.cn/57515.html
