如何为App图标挑选合适的颜色

在之前我已经研究过了从app描述、截图、名称到国家/地区的所有东西。最能勾起我兴趣的是app的图标,但苦于不知如何去对此进行有效的研究。

最近我偶然发现了一个很酷的叫做Miro的Ruby库,它能够把一张图片的各个构成颜色提取出来。

分析一个app主要的颜色能揭露些很有意思的结果。

方法

谷歌地图的图标

接下来我参照标准web颜色(加上额外的黄色)来匹配每个图标上主要的颜色至最接近的web色。并用笼统的名称来给他们分成以下几类:

#02601e -> 绿色

#a8120c -> 栗色

#0c44de -> 蓝色

#bdbfc0 -> 银色

#f4b510 -> 黄色

#717973 -> 灰色

#24721b -> 绿色

#2d0d0e -> 黑色

谷歌地图的颜色

无视黑白灰,我把四个最常用的颜色放在了上面的色盘里。

大尺寸的图标意味着该图标内用的最多的就是那个颜色。

最受欢迎的200个免费iOS App

如果把最受欢迎的200个免费app摆在色盘上就会看到如下场景:

最受欢迎的200个免费iOS App的图标颜色

我发现一大堆的蓝色和红色app图标,还有零零散散的绿色。粉色和紫色寥寥无几,只有Snapchat是黄色。

最受欢迎的200个付费iOS App

最受欢迎的200个付费iOS App的结果和上面的免费版有些许不用。

最受欢迎的200个付费iOS App图标

虽然和免费版本的app一样也体现出类似的在蓝、红、绿上的集中,付费的app似乎在单个图标上使用了更多的颜色,这导致了更多的小icon(分身)出现在上面的色盘中。

100个最新的iOS App

接下来我挑选了截止到这一刻最新上架的100个iOS app。相较之前的两例,我估计会得出一个能代表整个应用商店更普遍的结果。

100个最新的iOS App图标颜色

结果和最受欢迎的付费app颜色分布非常相近。

最受欢迎的200个iOS社交app

所有的社交网络app估摸着都是蓝色的吧不是吗?比如Twitter, Facebook等。

最受欢迎的200个iOS社交app

最畅销的200个免费的社交iOS App的图标颜色分布,结果依然和前几例相似,绿色的表现相比更突出一些。

最受欢迎的200个iOS游戏

最受欢迎的200个iOS游戏

很多游戏都倾向于更复杂的图标设计,这也导致他们会使用更多的颜色。

最畅销的200个免费Mac Apps

我总隐约记得我的OS X dock上90%的app都是蓝色的,让我们来看看最终的结果是什么:

最畅销的200个免费Mac Apps

一如既往,蓝色占了大头,但同样也有很多图标使用了红色和绿色。

来自MacStories的Graham建议换一种色盘上的排列方式,比如使用它们主要的一个颜色而非所有颜色。对此我以前100个最受欢迎的免费app做了回应:

图标越大表示单个图标里使用该颜色的占比越大。

Google Play上最受欢迎的免费App

在发出第一稿后,有不少热心读者想让我也介绍一下Google Play的情况。我以澳大利亚的Play商店为例:

Google Play上最受欢迎的免费App

貌似没什么区别。

Google Play上最受欢迎的免费游戏

和iOS作对比

Google Play上最受欢迎的免费游戏

你应该选择什么样的颜色?

如果你在设计一款app那早晚也要面对选择颜色的问题,当然了这主要取决于它的功能定位以及你的目标用户群。然而,如果或许你符合以下三大类中的某一种:

随大流者

你喜欢随大流,那么就选择蓝色或红色吧

我想与众不同

或许你可以考虑绿色,这虽不是最流行的颜色,但也绝不奇怪。

叛逆者

你嘲笑那些墨守成规者,也对那些自认为自己不同的人抛去白眼。那就考虑一下粉色或紫色吧。

原文发布于微信公众号 - BestSDK(bestsdk)

原文发表时间:2015-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

用微妙动效改善用户体验的简单方法

应用程序中的动效具有新的改良性的意义。跟过去的华丽、混乱的网站动画不同,新的动画干净、流畅,并且易于导航。忘掉你所知的GIF、令人不愉快的广告和Flash网站吧...

3017
来自专栏无原型不设计

从iOS 11 UI Kit中谈谈iOS 11的新变化

北京时间9月20日凌晨1点,iOS 11终于迎来了正式版的推送,相信各位小伙伴已经在第一时间进行了升级。iOS 11毫无疑问是一次大规模的系统更新,UI、系统...

3419
来自专栏前端儿

不高兴的小明

小明又出问题了。妈妈认为聪明的小明应该更加用功学习而变的更加厉害,所以小明除了上学之外,还要参加妈妈为他报名的各科复习班。另外每周妈妈还会送他去学习朗诵、舞蹈和...

1191
来自专栏互联网杂技

UX 设计之——商品详情页

现如今,30%的在线购物行为发生在手机端上。 对于在线购物一事,所有用户都期望能够得到快速、流畅的体验。因此,在购物过程的每一个阶段,即使付之最小的努力都有可能...

3036
来自专栏程序人生 阅读快乐

《HTML5 canvas开发详解(第2版)》富尔顿 等(作者)epub

随着Canvas的持续升温,Flash的光芒迅速消退。本书是Canvas的畅销图书,它在上一版的基础上,通过讲解如何开发可交互式多媒体应用,引导读者学习HTML...

1482
来自专栏无原型不设计

技巧分享: 如何快速搭建一致统一的设计系统

以下内容由摹客(https://www.mockplus.cn)团队翻译整理,仅供学习交流,摹客设计系统是国内独家设计规范制作平台。

1162
来自专栏姬小光

普通程序员如何培养设计感?

你好,我是姬小光。如果你订阅这个号比较早,可能会看过我的《像素眼是怎样炼成的》。那篇文章主要是教你如何“找茬”,即如何发现设计稿或者网页上的不足之处。那么何为不...

1461
来自专栏美团技术团队

布局编码的未来

客户端布局是客户端开发最为基础也是最为重要的编程实践之一,对于一个有着良好技术架构的客户端开发团队来说,布局编码工作占业务开发工作量的80%。显然,对于布局编码...

4284
来自专栏九彩拼盘的叨叨叨

前端学习

前端主要包括 HTML,CSS,JavaScript。开始的时候,可以看熟悉下基本概念

944
来自专栏儿童编程

“心中有剑,落叶飞花,皆是兵器”-Python动画原理揭示及案例

“心中有剑,落叶飞花,皆是兵器”是武侠世界中武功的超高境界。这句话用来形容Python动画也是非常合适的。从最原始的手工动画到现在的好莱坞动画大片,动画原理都一...

2422

扫码关注云+社区

领取腾讯云代金券