教你做出一款清丽脱俗的Ui图标

视觉内容的重要性

随着移动互联网的高速发展,人们往往被各类各样的信息与数量庞大的内容所淹没。因此,人们的注意力也变得极难捕捉起来,但是可以确认的是,视觉内容广告比书面内容广告更重要。为什么呢?因为它可以使信息更快的传递到大脑。

我们来分析一下用户下载应用的几种第一步骤。

1.寻找特定APP的用户。 他们会在搜索框中直接输入品牌词,通常很快就会找到。

2.寻找一个特定类别的APP。 他们通常在应用商店浏览类别,直到他们找到一个似乎很好的APP。

3.用关键字寻找APP,他们正在寻找一个特定类型的应用程序,但心中却不知道下载哪一个应用好。

我们将在这里集中讨论类型2和3。 当用户在App Store寻找应用时,会向下滚动寻找APP,试图找到一个最适合他们的期望应用。期间,他们首先看到的是APP图标。 然后,他们看到APP标题。 当然他们也会看到应用评级。

主要的困难在于真正让用户对APP进行点击,而应用图标是用户第一眼看到的APP信息,所以应用图标能否吸引用户从而促进用户进行点击就变得很重要了。那么如何利用图标获得用户的注意,然后吸引他们点击下载APP呢?

一、简单才是美

用户喜欢通过最简单的方式来获得他们想要的APP,因此,APP图标也需要易于理解。 因为APP在智能手机上显示时,图标相对较小。 如果它们太复杂,可能会混淆用户,它不应该加载太多的内容,无需使用太多的颜色,一个或两个主要的颜色应该就够了。 简单的图标往往会比比复杂的图标有更多的转换。

例如,这2个图标似乎太复杂,因为它拥有太多的内容,信息量庞大,导致用户很难理解。

二、有边框要比没边框要好

带有边框的图标比没有任何边框的APP图标更能影响用户,很简单,因为它能在APPStore中显得与众不同,此外当用户下载APP在手机桌面后,有边框图标的APP较之其它APP也更为显眼。所以,蝉大师建议您在应用程序图标周围放置一个漂亮的边框,最好使用强烈的颜色或华丽的图案。 这里有一些例子:

最后一个是特别有趣的图标,因为它的边框创建了一个3D效果。 这个效果让我想起了前不起宝马做的一个画风与上图类似的h5广告,据说宝马的那个广告引爆朋友圈了哦!

三、避免使用文本

APP图标通常不包含任何文字或单词,因为“一图片胜千文”嘛。图片相比于文字更使人容易理解,且不会产生混乱。在通过情况下,APP标题与应用图标是互补的,所以我们又何必多此一举,非要在应用图标中包含文字呢?

这里有一些负面的例子,图标中含有太多的字符所造成的混乱感:

四、慎用品牌标志

有开发者可能会认为,应用图标直接使用自己的品牌标志会是一个很好的主意,但前题是开发者的品牌已被大众所熟知,便具有很强的视觉识别性。可如果您的品牌标志不是众所周知的,蝉大师则不推荐使用。 其实这很好理解,如果图标不能影起用户的注意,那么用户有很大的可能直接跳过我们的APP。

五、平整和哑光

在iOS6上,苹果的图标有光泽效果。在开发者在APPStore提交应用时,有些开发者会选苹果自带的光泽效果,希望可以让APP在用户的手机桌面脱颖而出,可实际上,这样做反而起到反效果,因为这个闪亮的效果容易与苹果的默认图标相同,后来在ios7上,仍然有许多图标具有有光泽效果,这里蝉大师ASO优化平台建议大家对APP的图标不使用任何一种光泽效果,保持无光泽和平整就好了。

这里是iOS6和iOS7苹果的图标之间的比较。

其实现在到了ios10以后,苹果赋予了用户更多更改图标的权限,比如用户可以更改任何APP图标的具体样式,当然步骤会有点麻烦,而且ios10控制中心下方的4个图标均支持3D Touch,比如在手电筒上可以设置亮度,在时钟上设置定时器等。所以,开发者在选择应用图标时重点考虑的是其在APPStore的展现效果。

六、更新您的图标

不时更新您的图标非常重要。 例如,如果我们要为特殊场合或季节(春节,圣诞节,中秋节,夏天,冬天等等)创建特殊版本,这时我们要豪不犹豫地为APP图标提供与新版本匹配的新外观。

如果我们的应用有重要的新功能了,也应考虑更新图标,因为原来的图标可能无法清楚的表达与代表我们的新APP了。其实蝉大师认为,更新图标时不一定要完全重新设计,我们从下图的这个例子可以看出,这个APP的应用图标随着季节的变化而变化。

如果您使用重要的新功能更新应用程式,那么也请更新图标。 您可能想重新思考您的图标,因为它可能不再足够相关,无法描述或代表您的新应用。

可以看到其图标非常的简单,最重要的是,还非常的相似。 河马在每个图标上都以相同的方式运动,唯一改变的是背景风景。

七、分析和比较您的竞争对手

在创建图标之前,您可能需要检查竞争对手他们在做什么, 这是非常重要的,不同类型的APP,对于图标的选择也不一样,所以可以大量查看竞品的思路,这里记住,不要抄袭!当然,有许多蹭量的APP会使用与知名APP应用图标高度类似的图标以欺瞒用户,达到提高下载量的目的,但我们不建议大家这样做,这样做留不住用户的,而且还坏了名声。

通过查看竞争对手的图标样式,找到创意与灵感,然后提出完全不同于竞品图标的想法与改进建议,这样我们就有可能在APP的图标中领先竞争对手。

八、测试您的图标

当我们准备好图标后,不要认为我们的工作完成了,我们还需要找不同的人进行测试,让他们反馈这个应用图标是否有吸引力,是否好看。过程中,我们可以向他们展示各种应用图标,但不告诉他们哪是个是我们自己的,然后问他们最喜欢哪一个应用图标,以及为什么。(有位朋友也是位开发者,他找到一群孩子来做测试,因为他认为孩子是最天真的,不会说假话。)

在测试应用图标时,还要测试我们的APP图标在不同颜色的壁纸中会有什么样的效果,因为现在的智能手机都是允许自定义背景的,只有在大量的测试后,才能确定应用图标的使用。所以啊,虽然只是小小的一个图标,但要玩得溜,开发者是需要花费许多精力的。

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

原文发表时间:2016-12-22

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大数据钻研

11 个 HTML5 动画工具

如今,在Web开发中最为流行的语言就是HTML5了,它帮助开发者将多样化的内容展现给用户。在过去两三年中,我们共同看到了HTML5的发展,它逐渐在网络的世界中积...

5416
来自专栏HTML5学堂

了解页面重构吗?

了解页面重构吗? 正文 HTML5学堂:在HTML5的职业发展当中,存在着一种职位叫做“页面重构师”,这种职位到底是什么?又和我们的HTML5开发工程师、WEB...

39515
来自专栏IT大咖说

手淘互动动效的探索

摘要 现在的营销活动,用一张简单的图片去吸引消费者已经远远不够,必须要有能给消费者带来视觉冲击的东西,或者在动画过程中提供更好的引导部分。手淘的前端团队经历了从...

4698
来自专栏BestSDK

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

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

2729
来自专栏PHP在线

你知道了吗?2015年网页设计的9大趋势

其实在此之前已经有很多小伙伴翻译或总结过类似文章来分析优秀网页设计的趋势,不过我还是希望我总结的东西能更宏观一点并为大家带来一些新的东西。 稍后看官们可能会觉得...

4419
来自专栏ytkah

微信5.3内测 加强搜索和群,聊天记录也可以收藏

  这几天有些用户或许会收到微信5.3内测体验,朋友就是其中幸运的一位,微信5.3会有哪些新特性呢?借他的吉号来see see!(iphone版微信5.3已更新...

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

前端学习

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

1014
来自专栏it知识分享

web前端程序员需要会那些技能?

  黑马程序员为大家分享web前端学习6大技术知识点,希望可以在今后的学习中帮到找到重点,以及学习的主次之分。

1535
来自专栏杨建荣的学习笔记

React技术初识

前端框架哪家强,如果没理解错,应该是React,Angular,VUE。记得去年的时候,和我一个老同学聊天,他是一个架构师,偏向于后端开发,但是发现他已...

1053
来自专栏美团技术团队

布局编码的未来

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

4374

扫码关注云+社区

领取腾讯云代金券