UI设计的探索-颜色篇

设计经验 4年前 (2020) 互联网
592 0

本文首发于微信公众号:胖小魚设计小栈,欢迎关注

色彩在设计中非常重要,无论是推广运营,还是app设计,是产品与用户建立第一印象的重要因素之一。它是一把双刃剑,运用得当能给产品带来很大的宣传效益,反之,也会给产品大大减分,甚至会丢失用户。我们作为UI设计师,在给一个App定义颜色时,其实并不是凭感觉去选择的,不会单纯只考虑产品表面的视觉效果,也需要充分考虑到特定人群所处的社会环境与文化特性的影响,会分别从心理学、消费学、文化学等不同维度去分析什么颜色适合哪一类产品,什么颜色带来的宣传效果会更好一些。好的,我们进入正题,一个App的主色通常都会体现在logo上,所以我们以logo为例来做一个分析:

1、购物类/新闻类

UI设计的探索-颜色篇

首先可以看到,排行靠前的购物类App大多数会用红色或是偏红的橙色作为主色。为什么会选择这类颜色呢?而不是冷色呢? 根据文化背景,红色是中国的传统色,由于传统节日的传承,红色代表着吉祥、喜庆、红火的象征,无论是结婚、生子、生日宴等喜庆节日,都会贴红幅、穿红色衣服来表达心里的喜悦与幸福。所以对于购物类App,温暖的红色会让消费者增加喜悦感、亲切感,非常容易提升购买欲望。 另外,还有一个原因就是红色在中国自古以来也象征着权威,古代是皇帝批阅文书的专用颜色,在现代,则是国旗的颜色;虽然网上购物非常方便快捷,但是受到传统消费习惯的制约,消费者对网上消费仍会有一些担忧的心理存在,对网络消费缺乏一定的信任感,因此产品就要从视觉感官上给用户营造信任、权威感,所以其主色使用红色(比如天猫、京东等走质量路线的App),也是希望让用户直观感受到产品质量的可靠与服务的保障。

橙色作为红色的邻近色,既含有红色所带来的温暖、喜悦,又相对于红色多了一份轻快、活泼的感觉,没有危险的氛围,增加了一份友好,所以淘宝避开红色,选择了符合年轻、时尚定位的橙色。

2、导航/商务工具/天气类

UI设计的探索-颜色篇

从Appstore免费排行前几名,我们可以看出这几类App多数倾向于使用蓝色,据心理学实验证明,蓝色在冷色中是很招人喜欢的颜色,几乎没有什么人会讨厌蓝色。

看到蓝色,我们通常会想到天空、海洋,所以就会给人宁静、广阔、平和、理智、希望的感觉,用户焦躁的心很容易恢复平静、理智,所以非常符合导航、工具类应用的特性。

像是天气类应用的功能就是关于气候变化的预报,与天空、雨水有密切的联系,所以蓝色便自然成了默认的选择,而如果选用其他色系作为主色,往往会降低其辨识度,增加用户认知负担,也就违背了应用设计的初衷。

3、儿童产品

UI设计的探索-颜色篇

通过应用商店排名前15的截图,可以发现儿童类使用的颜色比较偏多样化,都是较高饱和度、高明度、高对比的蓝、绿、橙、黄、紫、红等。

在发展心理学中,研究表明儿童喜爱鲜艳明快的色彩,尤其是对比明显的色彩。美国的研究报告中提到:婴儿期,其喜欢的顺序为红、黄、绿、青;到了少儿期,顺序则变为青、绿、紫、橙、黄;而到了成人期,其顺序为青、红、绿、紫、黄。我们可以发现,随年龄的增长对色彩的爱好表现出由暖色向冷色推移的偏向。因此,低幼产品颜色选择上会偏向以暖色为主,冷色为辅,如叽里呱啦、凯叔讲故事、喜马拉雅儿童、宝宝巴士等;小学初中阶段的就会倾向于冷色为主,暖色为辅,如斑马英语、考拉阅读、作业帮、洋葱数学、一起学等

4、社交

UI设计的探索-颜色篇

我们可以看到这类产品并没有固定倾向的色系,多是根据产品核心功能及用户群体来选择颜色。例如微信是绿色,QQ是黑+红+黄,小红书是红色,微博是橙色。

社交应用的本质是通过某种媒介实现人与人之间的交流,不同的媒介对应的用户群体不同,如微信是高效通信应用,用户群体针对的是熟人之间的连接,小到小学生、大到老人都是用户。而绿色来源于大自然,是所有颜色中最有活力的颜色,蕴含健康、舒适、平静的心理象征,是最友好,最贴近生活的一个颜色,所以比较符合微信的定位,很容易增加人与人之间的信任程度。

知乎是近年来比较火的一款知识社交平台,专注于问答社区,用户通过一问一答来产生互动与连接,平台上聚集了中国互联网科技、商业、文化等众多领域最具创造力的人群,其用户群体偏向于精英阶层。关于蓝色,上文中,我们有提到蓝色具备海洋、天空的心理感受,具有抚平心灵焦躁、忧郁的疗效,是具有理智、科技、未来特征的颜色。知乎运用了蓝色背景+白色文字的组合,给人增加一种精炼、纯粹的视觉感受,也高效的传达出知乎知识的专业性与精准的定位。

5、生活娱乐类

UI设计的探索-颜色篇

视频、直播、音乐因为颜色无特定划分,所以在这里我都分类在生活娱乐中。

视频播放这类应用主要给用户提供感官体验和精神体验,色彩上大多使用高饱和、高对比的配色,搭配充满张力的图形,更加容易体现活泼、兴奋的视觉感受。

以优酷为例,众所周知,2019年优酷更换过两次logo,其配色都引起一小波轰动,最后一次改版,由低饱和度的颜色最终更新为高饱和度的粉红和粉蓝,色彩上更饱满,差异较大的色相对比更加充满活力,使logo紧跟潮流,越来越符合品牌形象的定位。

UI设计的探索-颜色篇

直播类最有代表的就是抖音,应该说其logo的设计在产品前期带来很大的宣传效果,是非常成功的案例。

UI设计的探索-颜色篇

来源于网络

首先我们看下抖音的定位:以音乐为主题的短视频拍摄应用,据移动观象台分析,26-35岁的用户占多数,使用区域多为中东部的一二线城市。

UI设计的探索-颜色篇

所以整体用户偏向于追求个性和自我的年轻人。其颜色搭配:黑色+紫红色+白色+青绿色,结合图形抖动的错位感,犹如闹夜中的霓虹灯一样,让logo节奏感更强,更好地凸显出抖音的音乐感和年轻个性化。试想,如果抖音logo用的是一个同色系的颜色组合,或许带来的效应就不会这么大了。

6、生活服务类

服务类应用近年来发展迅速,如美团、饿了么、美团外卖、京东到家、每日优鲜,这些App逐渐融入我们日常生活中,让用户在不知不觉中越来越依赖它们。

UI设计的探索-颜色篇诸如美团,大众点评这类专注于多样服务的平台,我们可以看出在用色上比较倾向于暖色的橙、黄,包括美团外卖也是选择偏橙的暖黄色。在心理学上,看到橙色会联想到温暖的太阳、鲜活的橙汁,不自觉就会给人温暖、舒适、亲切、愉快、活泼的感觉,介于红色与黄色之间,既不会像红色那样咄咄逼人,也不会像亮黄色那样刺眼,它温暖亲切,是会令身心感到舒适愉悦的理想颜色,这也就解释了为何这几种app会如此青睐这类颜色的原因。

饿了么用的是偏深的蓝色,为什么会选择蓝色,而没有使用易引起食欲的暖色系呢?我们来具体分析一下,app初创时核心是主打订餐与快速配速服务,根本上是想通过科技去解决线下吃饭问题,从这个层面来看蓝色的科技、速度、稳定的特点正符合饿了么的定位;

另外,从数据上来看,适用人群集中在19-35岁年轻人,

UI设计的探索-颜色篇

使用区域分布在中东部沿海发达地区,

UI设计的探索-颜色篇

用户的特点是生活压力大、工作时间忙碌、时间紧迫,针对这类人群的痛点就是便捷、高效的送达,所以蓝色的心理特征使之自然而然成为颜色首选。

社区零售类App——京东到家和每日优鲜

我们以京东到家和每日优鲜为例来做一个分析。京东到家使用的是充满生机的绿色,每日优鲜选择的是清爽的粉红色,同为配送App,为何颜色差别如此之大呢?我们具体分析一下:

UI设计的探索-颜色篇

京东到家是将线下店铺聚集在线上给用户提供配送服务,配送的都是超市的东西,讲究的是安心的配送服务,绿色是蔬菜、水果的颜色,代表着清新、自然、健康、安全,所以选择绿色也是比较直观。

而每日优鲜,为什么没有选择传统的绿色呢?我们来看下它的核心功能就会知道原因,它的定位是让用户线上买菜又好又快,特点是优质、速度,从产品名称“每日优鲜”就可以看出优、鲜是产品着重宣传点。优,引申为优质、上品、出色、精品,绿色虽然包含着清新、健康的意思,但是缺乏优质、精品的意味,这个粉红色虽然不会直接表达出产品的特点,不过相对比其他颜色,多了几份含蓄、精致的感觉,并且看起来非常像火龙果的颜色,搭配白色,显得非常清爽,我们再来看下使用人群:

UI设计的探索-颜色篇

相对于其他同类App,其女性用户群体所占比重较大一些,

UI设计的探索-颜色篇

多为29-45岁的东部沿海地区女性,这部分人群的共性:时尚、精致、爱生活、懂生活,通过用户群体的特点可以看出粉红色是相对其他颜色来说比较符合的颜色。

好啦,今天我们粗略的分析了几款不同类型App的颜色选择的原因,由于篇幅问题暂时先分享到这,后面有时间会给大家出篇《色彩·下》讲讲如何在页面中去运用和选择颜色,希望大家随时关注~

版权声明:互联网 发表于 2020-10-16 9:06:20。
转载请注明:UI设计的探索-颜色篇 | 前端印记
数据库云大使

暂无评论

暂无评论...