如何从0-1定义一套APP色彩体系
很多设计同学对于一个APP颜色如何定义没有概念,今天结合自己工作经验和大家分享下,APP设计中是怎么定义品牌色及整套色彩体系。
前言:品牌色的重要性
每个品牌都有品牌色,但是如何让用户记住你的品牌,第一眼看到某个颜色就能联想到你的品牌是非常重要的。好的品牌色能够占据用户心中的心智。
有研究表明,人在提到某个品牌时候,大多数想到的就是色彩,其次是图形。色彩在品牌领域中十分重要,这也是每年很多公司品牌升级都会优先取升级品牌色。可见,色彩真的很重要,能传表达产品的调性和情感。
之前美团为什么要把品牌色从绿色升级为黄色,很大一部分原因就是色彩变化占据用户心中这个黄色的入口,通过色彩变化将品牌传播出去,让用户认知到这个品牌正在发生变化。
品牌色如此重要,那么作为设计师如何去定义品牌色及整套色彩体系呢?今天分享一个方法,仅供大家一起交流。(个人学习总结)
如何定义品牌色
定义品牌色三个步骤,第一步了解产品定位,是让人快乐、兴奋的,还是让人放松的,第一步先把这个了解清楚。了解了产品定位后,就开始思考你的产品是为哪些人服务的,目标用户群体是80后还是90后的,还是00后,即目标用户,这些用户对颜色有什么喜好,只有了解了用户喜好,然后在色彩上做筛选和调整。第三步了解色彩心理学,不同的色彩具有不同的色彩情绪,传递着不同的品牌调性。
第一步:了解你的品牌定位
首先我们需要去确定好我们的设计目的是什么?需要给用户传达什么样的信息,是希望传达尊贵的感受,还是安全、信任感。这需要用到「品牌个性维度」度量表,这个度量表是由美国著名学着珍妮弗·阿克尔1997年第一次提出,,当时是以西方著名品牌为研究对象,发展了一个系统的品牌维度量表。
所以我们可以结合这个品牌个人维度表,来看看产品是要传达给人什么样的个性,根据这个表确定好产品品牌调性后,再根据色彩情感去选择对应的颜色。这个品牌调性要结合产品的商业模式,和用户人群去确定,如果设计师没法确定,可以找市场同事或者老板去确定品牌个性关键词。
Uber(优步)在越南推出的网路“摩托车”接送服务,在UberMOTO全新品牌形象中,因为在越南天气很炎热,所以采用了蓝色绿色配色,斜45°的色块拼接,延伸出了会反光的安全外套,还有醒目的安全帽,在一大堆的摩托车群中,一眼就能识别到司机的位置。
第二步:了解用户人群色彩喜好
不同用户对色彩的喜好不同,不同年龄的人,男性和女性喜好的色彩都有差异。下图是国外对男性和女性喜好颜色的调查,可以发现男性通常更喜欢大胆的颜色,而女性更喜欢柔和的颜色。男性更喜欢深色的颜色,而女性更容易接受明亮的颜色。
除此之外,不同的文化习俗也存在一定的差异性,比如在西方国家,红色代表恐怖和死亡、火灾、暴力战争。
在中国,红色是繁荣富强、喜庆、火热激情等联系在一起,不同国家的文化差异我们做设计的时候需要去考虑。
在西方国家,黑白代表纯洁、优雅、尊贵、高端的感觉,很多大牌的店面装修都是采用黑白,包括很多国外的APP。
在东方国家,黑色代表死亡、黑白喜事、丧礼等,文化的差异、人群差异,在设计时需要考虑。
第三步:了解色彩心理学
第一步定好的品牌调性,我们就可以根据色彩情绪表,选择对应的颜色,每个色相的色彩情感都是不一样的,要根据产品调性去确定一个品牌色色相。
红色:最富有激情、活力的,也最容易引起人注意,给人积极、活力的色彩情绪,一般会联想到火焰、喜庆、夏季。
橙色:是最暖的颜色,能引起食欲的颜色,给人香、甜略带酸味的感觉,同时充满生机与活力,让人联想到大地与秋色,一般用于餐饮、娱乐、食品。
黄色:体现娱乐、年轻、积极,给人留下明亮、辉煌、欢快、亲切、灿烂、柔和的印象,阳光、活力
绿色:可代表自然、生态、环保等,可以起保护色的作用,多应用于健康类、出行类APP。让人联想到树木、森林、草地、生鲜、环保、和平、健康、快捷。一般应用于医药、林业、饮料。
蓝色:蓝色是冷色调,让人感受到崇高、权威、科技、可靠、安全、智慧。蓝色几乎成为UI设计最泛用的颜色,国内外互联网产品如Facebook、Behance、Twitter、Paypal、支付宝等均用蓝色作为主色调,蓝色也是色盲最易辨识的颜色。
紫色:紫色给人高贵、优雅、奢华、神秘、不安的感觉。灰暗的紫色则是伤痛、疾病,容易造成心理上的忧郁、痛苦和不安的感觉。因此,紫色时而有胁迫性,时而有鼓舞性,在设计中一定要谨慎使用。
具体项目中如何落地
这里就以工作项目作案例示范,来看看如何得出品牌色及整套色彩体系。
1、了解喵喵机的品牌个性
今年2月份喵喵机进行了品牌色升级,从“错题打印”到“学习打印”,新的品牌理念需要体现出喵喵机的有颜、有趣、有用的概念。
根据整个品牌的个性定位-学习打印,所以必须满足学生群体的学习乐趣,苦中作乐,对学习的热爱、执着。这里我用到了色彩意象尺度空间示意图,从原品牌色比较稳的一个黄色,找到了2个更富活力轻快、乐趣的颜色。
将两个颜色相结合,整体色彩往黄色倾斜。
2、了解用户人群色彩喜好
在做色彩定位的时候,一定要了解目标人群色彩差异,喵喵机女性用户多于男性用户,根据用户色彩喜好模型来进一步调整色彩。
从女性角度来说,更加喜好柔一些的颜色,此外,喵喵机整体也是有颜 、有趣,用户也比较年轻,所以在此基础上进一步调整了黄色的明度和饱和度。
通过这个方法推导出来的色彩,就满足了品牌个性特征,同时满足用户人群喜好,是一个有理有据的品牌色推导过程。
3、最后如何定义一套UI色彩体系
这里应用了HSB色彩模型去定义一套配色,HSB是一种颜色模式,在HSB模式中,H代表色相,S代表饱和度,B代表亮度。
a、基于品牌色得出24色板
S和B保持不变,H值每15°取一个色,递增得到基于品牌色的24个色带,为什么是24个,24X15=360刚好围绕色环一圈,所以因此我们得到一圈基于品牌色,明度和饱和度一致的颜色。
b、筛选出12色相环
选出一些和主品牌色比较舒服的颜色搭配,根据业务的复杂度,筛出12色相环。
选取原则:
1、去掉相似的色相,颜色和颜色之间要有一定对比
2、去掉明显的荧光色,保证文字识别度高
c、调整B值(亮度)
定义同频的辅助色,也就是12色相环的辅助色。加减亮度(B)10、15进行调整强化。
选取原则:
1、增强颜色之间的对比度
2、提高文字识别度
d、调整S值(饱和度)
定义同频的辅助色,也就是12色相环的辅助色。加减饱和度(S)10、20进行调整强化。
选取原则:
这一步主要考虑产品调性,使色彩符合产品的性格。
e、拓展调色盘
https://coolors.co/,去这个网站上生成每个颜色调色盘。这里也不能完全按色板格子取色,很多接近的应该过掉,用眼睛选。
由此得出了整个产品的调色板,最后可以根据调色板去定义警告色、超链接颜色、成功提示色!
以上是此次项目品牌色升级中应用的方法总结,关于色彩搭配,其实需要我们不断去尝试、总结!













































































