研究完市面上主流APP图标的颜色后,我发现抖音其实是红色的
编辑导读:如果你细心观察,会发现主流的APP图标可以分成八种颜色。APP 图标的设计是最显眼的存在,也是能长期影响用户认知的存在。本文作者对市面上的主流APP图标进行了整理分析,希望对你有帮助。
各大互联网企业热衷修改logo、APP图标,似乎换个颜色、换个符号,把直角换成圆角,就能实现逆天改命。
在一个手机不离身的时代,App图标的设计有时候比企业logo的作用来得大。不信回家问问爸妈,他们可能知道微信、淘宝的图标什么样,但是不知道腾讯、阿里的logo是什么。
理论上来说,logo或者slogan的变化能反映企业文化或经营理念的一些动向。而手机上App图标则是一种好看的时候无人问津,不好看就会非常显眼的存在。
我把应用商店排名较为靠前的app中按主色调做了一个分类,并且附上十六进制代码和RGB分布图。[这里建议不知道三基色(RGB)是什么的同学,先花一分钟百度一下。]
应用商店里下载排名靠前的App中,红、蓝作主题色的最多,其次是黄和橙,此外还有一些绿色、黑色、白色为主要背景的App。
说明:熟悉ps的同学应该知道,即使同一个色块,不同地方取色的数值也有所差异,因此以下数值只作为参考。此外,渐变色取相对中间位置。
一、RED
红色主题的App主要选了以下(按灰度排列):
图示App的灰度大约在60%~75%
红色作为经典色深受中国设计者的喜爱,单纯为了让用户感到醒目(也可能是辣目),设计者也会选红色。
通过对这些红色RGB值的分析可以发现,显色度更高的App图标,R值都在250以上,也就是会更红。而R值低于250的图标,通常有种厚重感,即深红,如果在深红的基础上再叠加蓝色(B),就容易红得发黑。
制图@科技复联汪
当然最后的成色效果还要看G和B的数值,其中G(绿)基色用得较多的图标是网易云和京东,因此看起来更活泼。学习强国G和B值几乎没有,红得很彻底。蓝色用得最多的是小红书的图标,所以它最后呈现出偏洋红的效果来。
在色彩心理学中,红色等暖色有促进食欲的作用(排除红色恐惧症患者),但是也会让人联想到死亡和血腥。可以说,大多数要消耗能量的事都与红色有关,消耗你的钱包也是消耗。
红色logo的色彩选择远比选口红色号复杂,口红中同一种颜色涂到不同的人身上会有不同效果,即便效果不行还可以叠涂拯救。但基于三基色的调色板不一样,普通人大概率会越叠越丑。
完全可以理解设计者对于红色的钟爱,但万事万物都讲究一个宁缺毋滥。原本象征热情的红色,在互联网产品过度滥用的情况下,可能也只会让人反感,回想单位领导的图纸修改意见:变红,加粗,放大……
你要问我什么红最好看呐?当然是毛爷爷的红啊!
二、BLUE
蓝色主题的App主要选了以下(按灰度排列):
图示App的灰度大约在53%~81%
敏锐的读者可能也发现了,蓝色系的图标,无论深浅色调,都不会像红色系一样,带来冲击感:这种冲击感可能是正向的,也可能是负向的。
蓝色的最佳拍档是白色,正好映照蓝天白云的自然景观,给人以辽阔感,12306倘若把红色和蓝色位置对调,一定会有非常不同的观感。同时,蓝色也是更容易显得严肃的颜色,参考国家反诈中心、交管12123以及公安系统通用的蓝色,尤其是国家反诈中心的App,B项数值偏低灰度又高,更显严肃。
制图@科技复联汪
蓝色组App中,蓝得最彻底的要数知乎,因为知乎的R值为0,主题色完全由蓝和绿组成。汽车之家由于R和G指数都低,也显现出了格外蓝的效果,而12306含G(绿)太多,已经脱离了蓝天本色。
所谓自古红蓝出cp,原因只不过是因为人们爱用红蓝,红蓝两色在各种场合出现的频率也最高,App设计自然不例外。
蓝色有红色所没有的冷静,也象征着自由、辽阔和智慧(可以理解知乎为什么那么蓝了)。另外,英语里blue本来就含有忧郁的意思,蓝色用得不慎,可能就会给人过于冷静之感,甚至忧郁。
在App图标的设计中,蓝色可能并不像红色那样一眼就能让人注意到,但它能够让你及时冷静下来,钉钉这类办公软件就绝对不会考虑用红色。试想如果钉钉是红色的图标,那员工和老板吵架的概率会大大增加,毕竟红色能量十足。
三、YELLOW
黄色主题的App主要选了以下(按灰度排列):
图示App的灰度大约在14%~26%
黄色作为光谱中最容易被吸收的颜色,也是人出生最先看到的色彩,天然带有积极健康的暗示。但黄色是把双刃剑,情绪稳定的人看到它会促进情绪稳定,悲伤的人看到又会加强这种悲伤。
制图@科技复联汪
到了黄色主题这一组App,红色和绿色的占比相差都不是很大,G值越高的颜色越偏向柠檬黄,反之相对暗沉,比如七猫小说和懂车帝。RGB分布存在较大差别的是含蓝量,可以看到,QQ音乐和美团含蓝量为0,只由红绿混合而成。
英语中,有一个短语yellow press / journalism, 即黄色新闻编辑作风,意思指低级渲染、耸人听闻且不负责任的报道。所以头条宁愿用红色也不会用黄色作为App图标,倒是微博的底色,似乎从某个角度印证了它现在的社区氛围。
尽管黄色有诸多积极暗示,但它也有消极的一面,英语中所谓yellow-belly,指的是胆小鬼和懦夫。
总体而言,黄色并不如红蓝那么有存在感,饱和度过高显得土气,饱和度太低又不够显眼,是个并不好操控的颜色。
四、ORANGE
橙色主题的App主要选了以下(按灰度排列):
图示App的灰度大约在45%~60%
橙色糅合了红色与黄色的特点,所谓活力橙,比红色更温柔,又比黄色更热烈。除了芒果TV,这些APP用色中R值都在250以上,然而芒果TV依旧显示出了偏红的效果,主要是因为它蓝和绿都用得少,探探、快手等同理。
蓝色数值最高的要数大众点评,如果细心观察就会发现,大众点评的图标颜色是所有橙色中看起来最不扎眼的,橙得比较和谐。
制图@科技复联汪
多数时候,RGB都占一点的色彩看起来最舒服,只含其中两种基色甚至一种基色的色彩会由于纯度过高带有厚重感。
橙色是欢快活泼的光辉色彩,作为暖色系中最温暖的色,容易与居家、生活、安稳等关键词联系起来。在一众生活娱乐、消费App中,探探的用色其实挺耐人寻味,偏红的橙容易给人一种很暧昧的感觉。
如果有一天微博logo色要换,蛮建议换橙色的。这样一来不会显得变化过大让用户不适应(原本黄+红),二来又可以增加更多温暖和谐的理念,再有就是淘宝色或许有赚钱的好运。
五、GREEN
绿色系主题的App主要选了以下(按灰度排列):
图示App的灰度大约在35%~51%
绿色属于冷色系,人们乐意将一切与大自然有关的词汇都放到绿色身上、energy、growth、harmony、freshness……其功效也最广为人知:譬如放松、舒缓、镇静,乃至保护视力。
不知道是不是微信坐着移动App王座的原因,绿色图标的App寥寥无几。一个豆瓣胜在年纪够大,估计也懒得花心思再动logo,毕竟老板阿北已经够佛。
爱奇艺用绿色大约与奇异果的象征有关,航旅纵横不必多言,绿色总能代表一路通畅的意思。为了凸显稳重感,航旅纵横的G值设置在了不到200的范围,灰度略高。
制图@科技复联汪
以上4个App中,爱奇艺和豆瓣的绿最为接近,他们同样属于R值和B值偏低,绿得更纯粹一点。而微信和航旅纵横的绿,一个绿中泛蓝,一个绿得很混合。
绿色并非一个很贴近中国传统文化的颜色,古时以黄色为正色,绿为闲色,所谓绿衣黄里,说的正是尊卑反置。可见在传统文化里,绿色并非那么好的颜色,日常用语中也有形容一个人脸都“绿”了的说法。
可是绿色又是大自然的颜色,与生长和春天有关。如果希望和豆瓣、微信一样拥有长久的生命力,设计logo是或许考虑以下绿色。
绿色虽然不是那么有层次和可操作空间的颜色,但看在市场缺乏的份上,以后做App图标设计,其实可以考虑用绿色。毕竟还有那么多绿没有人用,柠檬绿、牛油果绿、马卡龙绿、抹茶绿、孔雀绿、薄荷绿、嘉陵水绿(这个真的好看)、原谅绿……
六、BLACK
黑色系主题的App主要选了以下(按灰度排列):
图示App的灰度大约在85%~100%
过高的灰度使得黑色的RGB数值呈现异常统一的状态。黑色感相对不重的要数讯飞文档,它的RGB值均为58,红绿调和下,厚重感减少了许多。soul(深色部分)的RGB值也处于均分状态,均为27。剪映和得物用的是一样的黑色,RGB均为1。
有趣的发现在抖音的图标上,很多人都以为抖音是黑色背景,但当把它放到PS里拆开RGB来看,才发现,人家是红色,只不过红得太深,就黑了。
抖音不仅大胆用了黑色图标,还把这黑色搞得五彩斑斓。当年被领导要求五彩斑斓黑的设计师,看到了吗?抖音——现成的五彩斑斓黑。
黑色的负面词相对其他颜色更多,所以除了跟拍照、相机有关的软件,用作主体色的App并不多。
黑色在现代审美的流变中也许变成了更为高级时尚的选择,但人类千万年进化出来的色彩心理暗示并不会轻易消散。黑色,神秘,且令人恐惧。
黑色用得好还是可以出彩,只是它并不适合作为占据更大面积的背景色,它更适合在浅色的衬托下作为logo基准线,如下——黑白配的很多App。
七、WHITE
白色系主题的App主要选了以下(RGB值均为255 255 255):
百度、优酷、58同城、顺丰速运、虎嗅、QQ、轻颜相机
图示App的灰度大约在0~1%
白色系的RGB几乎一样(除了58同城有点跳脱),所以就这里就不再一一列出16进制代码以及RGB分布表。
白色能反射全部的光线,具有洁净和膨胀感。用白色做背景色的App图标应该是所有图标里面用色最丰富的,没有背景色的感染之后,用户的视线对logo本身的注意力则会加强。
研究表示,空间较小时,白色对易动怒的人可起调节作用,这样有助于保持血压正常。需要注意的是,本身抑郁的人,最好不要生活在白色过多的环境,因此,为你的App多设置一点颜色,或许能让你开心一点。
一个小tips,采用白色元素,其实不见得都要用纯白的ffffff(代码),也可以考虑在个位数以内增加RGB的值,可能会有不一样的收获。
八、PINK OROTHER
粉色系主题的App有B站、美柚、韩剧tv等,这是一个一看就很年轻且女性化的色彩,除了B站,另外两个App的女性用户都占大多数。
还有就是紫色、灰色等冷门选色,这些颜色要么正向暗示太少,要么不够鲜明,所以很难成为多数设计者的心头好。
当我们将颜色一一拆解就会发现,有些App是精心设计,而有的大概不太对得起造物主赐予眼球分辨三基色的锥体细胞。
所以,不要觉得App图标的设计可以敷衍了事,有那么一拨人,会纯粹因为图标丑而不想打开那个软件,比如作者本人。
作者:风千语,微信公众号:科技复联汪
本文由 @科技复联汪 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自Unsplash,基于 CC0 协议
有几个App不那么主流
大概是颜色比较典型……所以选了它
哦吼,哈哈哈哈,不过这些图标颜色的设计还真的挺让人上头的,我也是经常点错,这该死的颜色,这该死的APP,学问太深,又可以让我拿来卖弄了
笑死,原来抖音的LOGO是五彩斑斓的黑哈哈哈,这怕不是甲方爸爸要求的?
就是这些颜色相似的APP让我经常点错!!比如拼多多和网易云和喜马拉雅。。。
APP图标得设计看似简单,实则背后也蕴藏着很多巧思,自己以前怎么没发现哈哈哈
伪需求下聊icon无意义 「微笑」
此话有理
原来app图标设计也有学问,产品同学在设计时要好好考量这个方面,图标太丑的app可能就此丧失了一批看颜用户哈哈哈。
我手机里的app就是按照图标颜色分类的耶,这篇文章让我了解了原来图标颜色也有这么大的学问呢
又学到了一招,按颜色分类
图标好看与否真的蛮重要的,不好看或者看上去就比较低级的就真的非常有影响。