前言

想写这个话题是因为很多人跟我说过，关于配色的道理我都懂，但用起来还是不会。我倒觉得，这不应该成为焦虑的来源，因为极少有人天生对配色那样敏锐，无非是看得多、练得多、想得多罢了。看和练不说了，但我想聊聊"想"这件事。 关于这点，我个人是深有体会的。市场上从来不缺教授方法和技巧的教程，想当初初涉设计界时，半年内学了9个软件，做了一堆图标、界面，甚至动效，但心里完全没底气。因为几乎没人教我该按照什么方式思考、在什么时候该干什么.......而这些问题，在工作中简直"无孔不入"。缺少这种产品思维，才是前行路上真正的阻碍，就连配色这样看似感性的方面也不例外。Here we go!

用户在面对什么样的产品？

一个APP，不论你对它熟悉还是陌生，从看到它的第一眼开始，你的心里就会层出不穷地出现一些形容词。你所感受到的这些，就是这个 APP 「调性」的一部分。不妨试一试，我把手机里的部分电商 APP 首页截图放在了一起，请你想想会用什么形容词来描述它们。 首页，我们已经不难感受到「淘宝」、「京东」的热闹非凡，「小米商场」的青春洋溢，「网易严选」、「一条」、「有品」的淡雅别致，「想去」的简洁个性、「公路商店」的大胆张扬。 我们的这些感受源自设计方方面面的传达，其中配色发挥着巨大的作用。 用户只能看到你给他们看到的。作为产品方，需要用我们的理念、特质感染同样认同我们的用户，也需要根据用户的特点来表达自己的产品。映射在配色上，第一步就是通过研究产品和用户，认真选择主题色。 主题色不仅是整个 APP 设计的灵魂之一，还往往关乎到一个公司的形象，需要有足够的逻辑支撑。设计师可以经常性拿一些熟悉的产品刻意练习，增强自己对配色的理解。用「淘宝」和「网易严选」举个例子：

  • 首先，它们都是电商品牌，当然希望用户能有购买欲。暖色系比冷色或中性色更能激发人的情绪，所以两者都选择了暖色作为主色。再看看其他 APP，主题色多数也是暖色。
  • 从产品的角度看，淘宝的 slogan 是「淘！我喜欢」。第一人称视角具有亲和感，把"我喜欢就淘"的观念传递给每一个用户，尽显活力和鲜明的个性。在所有的色彩中，橙色算是"活力"的代表了。另外，饱和度和明度高的颜色更能烘托活跃的氛围。 而网易严选的 slogan 是「以严谨的态度，为中国消费者甄选天下优品」，以第三人称突出「严谨」、「甄选」、「优品」，无处不透露着"节制"二字。对于严选而言，偏灰调的纯色更适合。
  • 不同的理念，吸引来的消费者一定是不同的。 根据淘宝的用户分析，主力用户越来越年轻化，这意味着无论从个人偏好、消费水平，还是使用场景上来说，都要更加多样。丰富的色彩和渐变都是增加多样性的方法。 相比之下，网易严选对目标用户的要求要高一些，来这里的人们追求品质生活。严选希望能传递出品质、简约、平静的感觉，所以淡色调会比较符合要求。 总结一下，看看我们从分析产品和用户中得到了哪些对配色的指导？

颜色看起来怎么样？

想象是丰满的，但现实可能是骨感的，你想要的颜色与你实际要用的颜色之间还差了十万八千里。一来，一个颜色包含无数色相，每个色相可以用不同饱和度和明度呈现，细微之处能显示大不同。二来，不同屏幕的显像效果不同，需要综合考虑。三，主题色不止会出现在按钮、背景等大色块上，还很可能用在文字、图标上，这就要考虑到显色度、普适性之类的问题。当然，还有其他一些问题，比如说视觉缺陷用户能不能快速找到他想去的地方等等。 在这个过程中，任何想象都是虚妄的，必须去试，反复去试。可以先在几个页面里调试，充分照顾到上述的一些情况，直到选出的颜色能在屏幕上传达出你想要的"味道"。 提醒一个小细节哦，关于显色度，也叫对比度，就是在背景色上一个颜色有多明显。可以借助这个网站：https://contrast-ratio.com/。一般认为对比值＞3时，对色彩缺陷用户才比较友好。

辅助色、装饰色

  • 辅助色的重要度仅次于主色，用于弥补单色搭配的缺陷。辅助色主要依据需求选择。当主色使用面积较大，辅助色要用在强调或者引起用户注意的位置时，那么它和主色之间的差别应该大一些，重点考虑主色的互补色、对比色。如果辅助色只是起到陪衬主色的作用，那视觉上应该比主色弱，这时低饱和度色会更合适。 当然，功能简单、以无色系为主、图片或文字占比多的时候，也不需要特定的辅助色，比如：「ONE一个」、石墨文档等等。
  • 装饰色主要在一些需要多种色彩的位置，比方说主入口图标、图表之类的。按照整个色彩的风格走，注意风格一致、视觉舒适即可。还有一些行业有敏感颜色，也要注意避免，像金融行业就要注意绿色系和红色系的使用。

一点想法

这篇文章篇幅很长，希望能帮你拨开一些迷雾，最后分享一篇网易资深设计师的文章----《新人设计师该如何提升设计思维？》。其中展示了一个设计思维金字塔，产品思维是自上而下的第一层。

三个层面就像一艘要开往远处的船，产品思维能帮助我们知悉最终要去的目的地，而视觉策略就是那张航海图，指导船员如何避免航行障碍物（礁石、浅滩等），保证航行的顺利。视觉驱动是舵手、水手的专业技能。要想顺利航行到目的地，三者缺一不可。