设计总结丨品牌色推导过程

一.前言

在面试的过程中，经常会被问到，为什么选择这个颜色做为品牌色？而大多数的回答都是：因为红色代表热情，绿色代表安全，蓝色的代表科技。如果继续深问，这么多红色，绿色或者蓝色，为什么偏偏选择了这个颜色呢？这时候，往往就不知道如何去作答了。

二.为什么改？

线下和线上的颜色不统一，颜色色差明显，视觉感受混乱。具体效果如下：

为什么不直接使用线下的品牌色呢？是因为我们针对的群体是大学生，大学生是充满阳光、热情和活力的。线下的品牌色过于沉稳，不够活泼。

为什么不让线下去更改品牌色呢？首先是因为跨部门沟通协作的成本巨大；二是由于线下的品牌色已经投入使用，更改起来，资金成本巨大。而线上的颜色饱和度和明度过高，长时间观看，眼睛容易疲劳。

于是，在不改变线下颜色的情况下，需要将线上的颜色向线下靠近的同时，尽可能的体现出大学生的调性。

三.如何去改？

要想让自己的产品更加贴近于自己的用户，竞品调研是免不了的。在做竞品分析的过程中，我并没有局限于纵向的产品的调研，也进行了横向产品的调研。包括但不限于娱乐、医疗的、学习等。

通过百度指数，找到了一系列年龄在18-24之间的用户常用的以绿色为主题色的产品有：旅行青蛙、爱奇艺、QQ音乐、扇贝单词、飞书、百度文库、中国大学MOOC、沪江网校、医鹿、豆瓣、咔咔、百度知道、微信等产品。

为了确定自己找到的产品的正确性以及频繁使用率。通过游戏和读书平台，添加了一些大学生做为调研对象，有南方大学就读的学生，也有北方大学就读的学生，有本科也有专科。通过沟通发现，他们的学习软件并不单一，都是老师用什么软件他们就安装什么软件。而除了和学习相关的竞品，出场率比较高的是爱奇艺、QQ音乐等。最终确定竞品分析对象如下：微信，爱奇艺、QQ音乐、扇贝英语及中国慕课。

四.竞品分析

通过吸取他们产品内的主色调分析发现，社交属性饱和度取值范围分别是94；娱乐属性的饱和度取值为100；而学习属性的饱和度为63；三种属性的明度都在75—85之间。

而我们渴望传达的是盎然生机的大学生活，对未来有无限美好憧憬的品牌色调，所以，在饱和度上，选择接近娱乐属性多一些，介于85—100之间；在明度上，取值范围67—85之间。

为什么分析HSB而不是RGB呢？

因为HSB模式，分别对应的是色相、饱和度和明度。可以完美的固定到某一个参数，确定要色相之后，我们可以通过调整明度和饱和度就能合理的选到合适的颜色。

而RGB分别对应的是色相：红、绿、蓝，调整一个数值，其它的属性都会跟着变动，牵一发而动全身，尤其是在做运营活动图的时候，很难做到色彩统一，也就是为什么无论怎么调颜色都怪怪的原因。

五.品牌色推导

根据竞品分析，确定好饱和度和明度的取值范围；在360度色环中，15度夹角内的颜色为同类色来确定色相取值范围。基于品牌调性、易读性，确定最终数值。

品牌色根据Ant design的建议，在第六位；确定好品牌色后，就要开始确定延展渐变色。

延展渐变色做了两种方案：

1.根据Ant design的色板生成工具生成；

2.H色相不变。浅色系生成方式：S值S/5递减、B值(100-B)/5递增；深色系生成方式：S值(100-S)/5递增，B值B/5递减的方式生成。

通过两种方式得出的延展渐变色发现，通过计算公式得出来的颜色，更加干净清爽，更加符合大学生的单纯，干净美好的品质。所以，最终决定，延展渐变色使用计算公式得出来的色值。

六.辅助色推导

辅助色目前已经有了一套可以直接使用的色板，无需重新推导。

七.小结

通过这次推导，让我对色彩有了更深刻的印象。在其它工作上也有很大的帮助，比如以前在做运营图的时候无论怎么做，都很不协调，但是经历了这次系统的研究和学习，在关于颜色的部分场景使用上，工作效率大大的提高了。