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

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
1255 0 1 2022-05-25
一.前言


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

2022年4月份的时候,我接到了一个新需求:重新定义一下品牌色及辅助色相关规范,在制作的过程中,我对色彩有了新的认识和系统的思考。

 

二.为什么改?


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

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

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

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

三.如何去改?


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

通过百度指数,找到了一系列年龄在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递减的方式生成。

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

六.辅助色推导


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


七.小结


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

Powered by Froala Editor

全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票