app图标设计规范:遵守这几点让用户第一印象产生好感

对于移动端APP 而言,图标始终还是最重要的「门面」,它直接关联着产品的品牌价值,图标是否具备良好的可用性,将会直接影响到品牌和产品本身。图标设计的讲究很多,而 APP 图标这种牵一发而动全身的东西更加讲究。今天,就分享一组图标设计的方法和技巧。

蓝色是受到最普遍喜爱的颜色。这就是为什么许多公司用蓝色作为商标颜色或者移动应用程序的图标颜色。但是,这并不意味着大多数公司都应该选择蓝色,因为这样难以在竞争对手中脱颖而出。

对于移动应用的图标来说,颜色的选择尤其重要,因为它们会同时出现在用户的手机或者其他设备屏幕上。商标图像本身是重要的,但颜色的选择也是一个需要深思熟虑的重大决策。

产品的目标用户是什么,产品的个性是什么,图标将会出现在用户设备上的什么地方,等等,这些都是在选择图标颜色时需要考虑的问题。

正如一家公司的个性可以通过其品牌颜色而定,许多老牌公司已经影响了公众对各种颜色的看法。当你看到全食公司(Whole Foods),英国石油公司( British Petroleum),和美国女童子军(Girl Scouts),你就会想到绿色,健康,自然,新鲜等。

相反,红色使人想到兴奋,青春,强烈——想想美国有线电视新闻网(CNN),维珍( Virgin),可口可乐,和红牛。在确定哪种颜色作为商标颜色时,考虑采用了该颜色的其他品牌的个性也是重要的。

那么,一个新的移动产品采用哪种颜色的图标最好?没有标准答案。但是,像Facebook 、苹果和雅虎等成功企业的商标,以及下面这些新兴企业的产品图标可以帮助我们指导决策。

红色

TapStory是iPad上的一个应用程序,它可以通过开放式的参与游戏,培养儿童的创新思维。TapStory的开发团队选择了红色作为主要颜色,因为红色代表激情、能量和年轻,它们是与其产品个性相关联的三个核心要素。

其他许多公司也选择红色作为其应用程序的图标颜色,包括耐克、ESPN和Yelp。红色是一种浓烈的颜色,它是App Store上最流行的图标颜色之一,和蓝色不相上下。

橙色

橙色是一种友好、欢快的颜色。越来越多的公司在选择图标颜色时开始避开常见的红色和蓝色,所以橙色逐渐成为一种流行的图标颜色。

Playground是一款为大学生提供活动发现和管理的应用,它选择了橙色作为其图标颜色。这是因为橙色的快乐和活力可以很好地表现激情和参与的理念,这是该公司创始人希望传达给用户的。

黄色

与橙色一样,黄色正在慢慢成为产品图标颜色的首选。虽然各种黄色色调并不十分有魅力,但其明亮和愉快的特质能向潜在用户传递一些温暖而乐观。

DHL和Sprint公司已经大胆地采用了黄色作为图标颜色。像Velloe这样的小型初创公司也采用了黄色。黄色的快乐特质可以给潜在用户一种安慰,而其鲜亮的色调也使它在蓝色和红色图标的大海中显得突出。

绿色

大多数个人理财应用是绿色的,因为大家都知道,绿色是最经常与金钱相关联的颜色。但是公司选择绿色还有其他的理由,包括绿色的和平和健康特质。与红色相比,绿色与财务的关联更恰当。

Long Weekend公司选择了绿色图标来代表其移动应用。该公司旨在帮助个人财富“像自然、有机的东西一样增长”。

蓝色

我已经提到蓝色是世界上最受欢迎的颜色,这也是为什么有这么多公司用蓝色作为公司商标颜色和移动应用图标颜色的原因之一。

Coinbolt是一个比特币钱包应用,所以蓝色对于它来说是一个明智的选择。Chase, American Express和IBM公司选择蓝色,因为它代表信任,实力和可靠性,这些正是用户对银行,或者对比特币钱包的期待。

紫色

紫色是最不常见的图标颜色之一,这或许是它由于它偏于女性化。

Jolimi是一款时尚应用,目标用户是17至25的城市女性,它选用紫色是最明智的选择,因为它需要一种代表有趣、创新、幽默的颜色和图标。紫色不但能很好地传达其实质,而且使它在其他颜色中脱颖而出。

雅虎已经选择紫色代表其身份,其他像HotelTonight和Luna这样的公司也恰到好处的运用了紫色。

想想你需要传递的信息

选择应用图标的颜色是一个新兴公司最重要的品牌决策之一,公司可以开发和推出新产品的时候做一个。每一件产品都不同,图标需要沟通的个性,使其不会丢失的手机屏幕上。

选择应用程序的图标颜色是一个公司在推出新产品时的重要品牌决策之一。每一种产品都不一样,图标需要个性化,颜色也一样,这样才不会让它在用户的移动屏幕上被别的图标淹没。

通常,用户第一次仔细审视 APP 的图标是在 App Store 和 Google Play 这样的软件商店和某些第三方推荐文章当中,相比于在界面中使用的功能性图标而言,APP 图标需要承担更加广泛的责任:不只要具备品牌本身的气质和元素,还要能够体现这个数字产品本身的功能和特质,视觉上能够在同类的设计当中脱颖而出,在手机主界面的程序列表中还得足够抓人眼球,易于识别。对于这样一个小小的图标而言,要求一点都不少,不是吗?(对于图标设计师而言,这个要求同样很高了!)

真正出彩的 APP 图标,从来都不是上手就做的,动手之前的基本工作做的有多充足,开始着手设计的时候才有底气,才有后面出彩的结果。

△ Lion 浏览器

1. 第一件事:从背景信息搜集开始

在给一个 APP 设计图标的时候,最重要的是什么事情?是图形和色彩吗?这当然重要,但不是最重要的。随后我们会讲到这个部分,但是给 APP 设计图标的时候,这不是起点。先应该了解的是产品背后公司的气质、团队的背景、产品的功能,而不是直接设计。

了解这个图标所涉及到的 APP 的业务组成和整体架构,询问团队相关的营销策略和内容,包括价值主张,目标受众,市场特征,定价策略,这些东西确定了产品本身给人的感觉,应该有的定位,这些东西都和设计息息相关。没有做足够深入的背景调研,就只能闭着眼睛画图了,这很难让 APP 图标真正贴合产品,发挥功用。

企业和产品本身的状况和数据对于设计的重要性,怎么强调都不算过分。认真搞定这种准备工作,绝对是磨刀不误砍柴工。

2. 熟悉标准:仔细研读设计规范

虽然在图标的设计上,创意和想法并不受限制,但是在任何平台上,都有着相对清晰的设计规范,它们是需要设计师严格遵守的。设计规范让图标在一个范围内和其他的图标在视觉上保持着足够的协调,设计师可以在规范范围内让图标更加「出彩」,而不是「突兀」。

在 Android 平台和 iOS 的设计规范中,对于图标的设计和使用有着非常清晰的说明,从配色到尺寸大小,包括样式和具体使用场景。请尽量遵循图标设计的技术规格和设计建议,因为许多问题和障碍是设计规范的制定者已经考虑清楚了,遵循规范能够让你的设计绕过很多坑。

3. 选对工具:大家通常用这些软件

通常情况下,最终输出的图标会使用 PNG 格式,不论你选择什么样的工具,至少要能够输出PNG 格式的图标。当然,这只是选择软件工具过程中很小的一个条件。目前,绝大多数的设计师都会选择时下最常见、接受度最高的专业软件,其中几个甚至就是行业标准本身:

  • Adobe Illustrator CC ,也就是常说的 AI,是最好的矢量设计工具之一,历史悠久。
  • Adobe Photoshop CC,是目前使用范围最广也是最好的位图编辑软件,无论是制作光影还是阴影效果,都非常的称手。
  • Sketch 是一款有着友好界面和丰富插件的矢量图形编辑和 UI设计软件,对于复杂的设计它可能不是最好的选择,但是拓展性足够强大,许多功能都是基于现代的 UI 和移动端的设计来开发的。
  • Affinity Designer 是矢量绘图软件中的新贵,有着足够干净的 UI,非常适合初学者。

4. 注意细节:简约而富有凝聚性

在设计图标的过程中,记得随时审视图标,看看是否缺少一些关键性的信息,关键性的元素是否缺失了,是否有多余的东西。众所周知,APP 的图标被设计出来之后,会出现在不同的场合,大小也不尽相同,随着大小尺寸的变化,有些信息会变得不够显著,拥有太多细节的图标会在缩小的时候显得非常混乱,所以将过多的文本和图片细节融入到 APP 图标当中,是非常没有必要的。

简约的图标设计不仅仅是一种风格上的选取,它在功能和体验上的优势也非常的明显。不要指望将大量的隐喻和内容都包含在同一个图标当中,抓住最主要的概念和想法,并且用清晰的轮廓、简单的元素来呈现它。至少绝大多数大型企业和优秀的团队都倾向于使用直截了当的设计。

5. 结合品牌:记得考虑品牌风格指南

每个品牌都有着独特的设计,从配色方案到细节元素的样式,通常都有着相对明确的定位。品牌风格指南在绝大多数的品牌当中,已经具备了非常明确的说明文档。为了让 APP 的图标和品牌的联系足够清晰,最好参考品牌风格指南来进行设计,这样确保用户在看到 APP 的第一眼就能够从视觉上与品牌本身构成关联。

△ Foxygenic app icon

6. 艰难取舍:让你的图标替APP发声

当你想到电子邮件的时候,你的脑海当中想到的第一个意象是什么?是信封,对吗?那么,当你在苹果的 App Store 中搜索邮箱的时候,会发现一大堆的信封样式的图标,各种配色和风格都有,不一而足。

一方面,使用大众所熟知的意象来设计图标,确实非常成熟,被广泛的认知,大家非常容易理解。而这种设计策略还有另外一面:类似的设计意味着激烈的竞争。这件事情可能是设计师在设计图标的时候,所面临的最大的挑战:设计师需要在原创性和功能性之间,做艰难的取舍。

△ Elephun app icon

7. 知己知彼:仔细审视竞争对手的设计

留出足够的时间来对竞争对手进行调研,了解竞争对手的功能,APP的设计,图标的构思,这样可以让设计师足以排除已有的设计,在营造独特性上获得思路,避免作出和竞争对手相似的设计,降低风险。

有些甲方喜欢使用和竞争对手相似的元素,这同样有其优势在,因为相似甚至相同的元素确实会让一些用户面对这个新的 APP 的时候,产生信任感和同理心。但是和之前所提到的很多问题一样,这需要设计师来取舍,或者控制中间的程度。看起来太过相似,用户会视之为山寨和跟随者,缺乏独特性,很容易让人在使用过程中失去信任,甚至完全放弃。

8. 开始设计:选择正确的色彩和展现形式

终于到了这个熟悉的环节了。优秀的配色和有趣的图形,确实能够让图标在视觉上脱颖而出。在选择色彩这个环节,很多设计师都很容易收不住手,许多色彩挤压在小小的图标当中,会让图标变得像现代艺术品一样。这个时候,需要在已经限定的色彩范围内(品牌用色),结合色彩心理学,来构建图标的色彩体系。

在纸上绘制图标的原型,探索基本的想法和构图,是非常有效的手段,无论你会不会手绘,这个过程都会让你的设计过程更加顺畅,很多创意和想法,会在纸和笔的摩擦中,逐渐诞生,这一点,是许多数字软件都无法替代的。

此外,运用基本的几何图形(圆形、方形、三角形等)来创建图标的基本框架,非常有用。请记住,任何复杂的图标都是在简单的图形的基础上创建出来的。

△ App icon for App Shack

9. 多做检验:绕不过的实际测试

无论你的 APP 图标出现在什么地方,你都希望它看起来是非常不错的,对吧?所以,接下来绕不过的环节,就是要在不同的场合、不同的地方测试图标的设计,是否有足够的对比度,是否看起来足够清晰,是否能够融入相应的场景,是否贴合品牌的气质,等等。

  • 检查不同尺寸的 APP 图标,主要注意看小尺寸的图标是否可以看得清,识别度如何,大尺寸的图标是否有不恰当的设计;
  • 使用不同的背景来查看APP 图标,看看图标在不同色彩、样式的背景下,是否有足够的对比度;
  • 了解图标在不同分辨率下的样子;
  • 不要只在 App Store 和 Google Play 下测试图标的外观,还可以将图标放到随机某个用户的屏幕上,看看实际的效果。

原创文章,作者:海阁,如若转载,请注明出处:http://www.pm28.com/1749.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:403567334@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息