知识分享

  • 首页
  • 市场分析
  • 需求分析
  • UI设计
  • 产品运营
  • 产品设计
  • 项目管理
  • 新玩意儿
不积跬步无以至千里
不要停留,欣赏沿途的风景
  1. 首页
  2. 产品设计
  3. 正文

研究完市面上主流APP图标的颜色后,我发现抖音其实是红色的

2021年10月9日 438点热度 0人点赞 0条评论

编辑导读:如果你细心观察,会发现主流的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 协议

给作者打赏,鼓励TA抓紧创作!

标签: 暂无
最后更新:2021年10月9日

小虾米

同理心,洞察力!

点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复
最新 热点 随机
最新 热点 随机
县城咖啡之战的最后赢家是谁? 字节跳动再战长视频,这次有何不一样? 网文IP的风,吹到“下饭剧”? 提升B端产品易用性:搭建帮助体系 小红书关停“自营电商平台”,作何打算? 从陌生人社交的产品演进看创新 如何快速了解一个行业? 汽车行业数字化转型_SCRM私域平台 产品用户体验升级 做一款以短视频为主的手机,市场如何? 一个严肃的问题:互联网巨头们到底创造了多少就业? 海外版妙鸭相机,“像不像”不重要 产业化思维助力招聘直播数据翻倍(下篇) 产品周报267期 | 蔚来手机NIOPhone正式亮相,妙鸭相机免费版发布 谁拿走了飞猪携程们的长假? TikTok豪赌黑五 “加速包”抢票有用?第三方平台们都玩出了哪些花样? 薄盒借周杰伦IP卖藏品,引出了元宇宙的“空城困境” 抖音越追越近,美团的反击战打到哪一步了? 用了“信息转换”后,用户点击率明显变高了! 产业化思维助力家服业务增长(上篇)
从虚拟偶像到虚拟主播,一场TO C到 TO B生意的大迁徙今天我们来聊一聊小红书电商盘点一下那些虚实结合的文本输入方式自动驾驶,又到黎明前?万亿规模能源产业互联网【能链】为何一枝独秀?经营指标层面深度解读骑手需要的不是同情,而是尊重数据更新|不只是一个更新按钮而已名实唯一性:数字与AI经济里的那些潜规则实战分享!系统可见原则在交互方案中的运用从商业模式入手,搭建一款产品的底层拆解框架小红书走到命运拐点微信的聊天记录占比,被网友玩成了新一代 MBTI ?SaaS产品数据分析之指标与标签一篇文章搞懂一个系统之 SRM 系统一个真秀才倒下去,十个假靳东站起来谈谈在B端落地第三方大模型的步骤从0开始设计产品搜索功能(一)瑞幸的“9块9”突围战,只需几滴茅台?如何从0-1建设企业微信SCRM顶流网红“秀才”翻车,“中老年收割机”易主?
万字长文|终极图标设计指南——分享篇 全额与净额结算实例解析 东风西渐:美国老铁在中国App里狂欢 无死角窥探的焦虑:AI如何反击隐私侵占? 讨厌相亲的年轻人,躲进脱单便利店、脱单剧本杀 开收“保护费”,闲鱼拒绝职业卖家吃白食 互联网大厂加码新消费,这门“副业”究竟有多香? UI/UX 案例研究:通过战略设计提升用户体验和可信度 夜经济,偷偷长成36万亿! 医美进军“私域”:增量渠道还是“黑机构”生存土壤? 从消费者心理学角度,鸿星尔克未来该走高端路线吗? 国资云后,IaaS 将何去何从 为什么中国没有男版小红书? 如何打造出让人欲罢不能的“爆款”产品,这5个秘籍你收好! 写需求文档时的注意事项 风来了,我没了:初代网红烘焙品牌消亡史 StarMaker之后,昆仑万维悄悄入局海外游戏语音社交? 赶紧收藏|ChatGPT注册教程(完整版) 我花上万学带货:3天赚3元,成交靠刷单 《如何定义APP视觉品牌》——设计流程与操作方法浅析

COPYRIGHT © 2023 知识分享. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang