[精品译文] 如何为移动应用设计出色的图标

APP产品营销的其中很重要一环 ，就是图标设计。它的重要性很明显，即图标将影响用户的第一印象，这是吸引用户注意力的一种重要方式。特别是一些需要基于应用程序进行创业的公司，图标设计直接关系到您在应用程序市场中的知名度。

本文将重点介绍Android和iOS应用程序的设计。我将总结设计中一些最重要的方面，例如外形尺寸和颜色选择。

01. 颜色问题

为图标选一个合适的颜色是设计师面临的一大困难之一。尝试A / B测试来检查设计效果始终是一个不错的选择。这不仅适用于配色方案，而且适用于整个UI设计。

一个好的建议，是在图标中使用您的应用配色方案。最好使用一种商标颜色作为主要颜色，例如在背景中。尼克·萨波里托（Nick Saporito）为我们提供了在其图标设计中使用品牌颜色的一个很好的例子。让我们看看这种常见做法的其他示例：

Google Play应用商店中的著名图标

我们可以从上面显示的图标中学到很多优秀案例。如我们所见，所有这些图标的背景颜色都使用了其主要的品牌颜色。其中一半使用该背景的某种颜色渐变或阴影，最明显的情况是Tinder和Glovo。这使图标看起来不平淡，甚至可能更有趣。除了主要颜色外，Just Eat和Glovo还在图标中使用了其他公司的颜色。但是，请注意，文本和徽标通常为白色且居中。一般情况下，我们要使用干净的背景色和一些白色的标志性图形或文字来营造对比和清洁度。

如何选择让用户过目不忘的颜色

这不仅是设计师设计图标时的选择，还是品牌和营销决策。通常，您选择公司的公司颜色作为图标中的主要颜色，并且该颜色需要与您的总体营销策略和定位相匹配。互联网上有很多有关常规应用程序颜色的信息。此外，在选择一种或另一种之前，最好先了解色彩心理学的基础知识。下面我们为不同的颜色提炼了关键词，方便各位读者参考。

而另一个研究是热门应用图标的颜色在色轮中的分布情况统计。虽然这个研究比较早了，但仍具有不少参考意义。

结果与Android的Play商店相似。大多数知名应用程序使用蓝色或红色作为主要颜色，其中一些倾向于使用不同的绿色或黄色阴影。明显缺少粉红色和紫色，所以，在之后，Instagram就重新设计了他们的图标。

Instagram使用紫色图标引领了趋势。但请注意：Instagram在市场上已经具有足够的力量来引领潮流。不常见的颜色会使您的应用与众不同，但用户可能会觉得您的应用不是他们想要的。因此，Instagram的重新设计仍然遵循一些典型的模式：带有渐变和一些简单且居中的白色对比形状的一般彩色背景。

下面我们来总结一下诀窍：

• 使用与您的品牌颜色相对应的背景色。
• 使用颜色渐变和阴影以避免过于平淡。
• 使用白色或使用品牌调色板为图标内的徽标，文本或形状创建对比度。
• 阅读有关颜色心理学的知识，以使您的颜色与您的应用目的保持一致。
• 使用A / B测试帮助您检查颜色选择是否正确。
• 选择不常见的颜色（例如紫色或青绿色的阴影）时要小心：它将区分您的应用，无论是好是坏。

02.使用多变的形状设计图标

在iOS和安卓的设计手册中，它们都为我们制定了图标设计模板。一般情况下，Google希望设计师以原始的方式使用形状和颜色；而苹果更倾向于为应用设计标准化的图标。

Apple Store和Google Play图标。

iOS官方图标模板

Apple 在其人机界面指南中提供了多种格式的图标模板（Adobe Photoshop，Adobe Xd，Sketch，Keynote）作为官方Apple Design资源的一部分。

iOS图标形状形式官方模板

Apple只是为您提供了一个模板来测试图标的不同大小，并为您提供遮罩形状。但是在指南中，他们建议您将图标设计为完全正方形，因为系统会自动遮盖圆角。建议为Apple Store创建正方形图标，因为该图标将始终按照蒙版形状显示轮廓。因此，在Apple Store中，只有少数图标具有圆形或不规则形式。

谷歌物料设计模板

Android为Play商店图标提供了不同的形状。他们的所有准则都包含在“ Material Design”文档中。

具有Material Design推荐形状的自适应蒙版图标。

此外，Android 8.0引入了自适应图标，如先前的图像所示，该图标可以针对不同的设备进行屏蔽。因此，设计一个以后可以掩盖的方形图标并不是一个坏主意。与Apple为其App Store推荐的内容非常相似。

最佳做法是寻找与您的应用匹配的形状。例如，矩形形状适合Gmail图标的信封设计，圆形形状可能类似于相机应用程序的目标。探索使用其他类似应用程序的形状也是个好主意。

请记住，推荐的形状只是帮助设计人员的工具，但并非一成不变。您可以自由探索自己喜欢的任何自定义形状，有时将图标中的元素直接使用会很好。甚至谷歌也这么做了。

Play商店中不规则图标示例

下面我们来总结一下诀窍：

• 遵循Google和Apple的官方指南，并从“人机界面指南”和“物料设计文档”中查看其资源。
• 设计一个基本的方形图标通常是第一个选择。您可以稍后对其进行掩盖，以使您的设计适应不同的市场。
• 原始形状可以帮助您理解应用程序的用途。Google Play的三角形就是一个很好的例子。
• 您可以自由尝试自定义形状和添加现成的元素。CCleaner图标或Google地图就是很好的例子。
• 同样，A / B测试将帮助您检查哪种形状是您的最佳选择。

03.文本,格式和图像

这些是您图标的核心。虽然形状和颜色是设计的基础，但您的图标还需要其他一些东西才能变得独特和可识别。回到本文的第一张图片，我们会注意到每个图标都使用简单的徽标形式或文本来标识其应用程序。它通常是公司的徽标或至少是简化版本。

由于可伸缩性问题，将文本用作图标的核心可能不是一个好主意：以较小的尺寸显示图标时，文本可能不可读。但是，使用单个字母或其他形式通常可以避免此问题。对于复杂的表单和图形，也会发生相同的可伸缩性问题，这就是大多数图标设计简单的原因。

如果这些表单与特定的徽标或公司图片没有关联，至少它们应该与应用的功能相关。例如，通常具有我们在Instagram图标中看到的任何类似相机的形式。Notes应用程序通常包括对笔记本，钢笔或粘性标签的一些引用。语言应用可能会使用旗帜，地图和字母。数学应用程序将显示数字和数学符号。等等。

下面我们来总结一下诀窍：

• 尽可能避免在图标中使用文字。缩放图标时会出现问题。
• 在设计中使用简单易识别形式或徽标。
• 如果不是与您公司的品牌直接相关，那么至少图标中的表格，字母或图像应与应用程序的目的相似。
• 使用纹理和深度，但不要创建非常复杂的图像。简单的渐变和阴影即可完成工作。

游戏图标-例外中的例外

我们在上文所写的，几乎所有内容都不适合游戏图标。如果您查看了App Store或Google Play中下载次数最多的游戏，就会发现带有从游戏中提取的许多颜色，字符和其他元素的复杂图标。这是有原因的。游戏的目的是娱乐，其图标应更具侵略性和直截了当，一遍吸引用户的注意力。游戏图标使用描述性极强的图像来显示游戏中的关键元素和角色特写图。

Play商店中的游戏图标

从上一张图像来看，只有一个图标遵循典型的设计模式。那是因为《崛起》是一款极简风格的游戏。但是，其他所有东西都使用醒目的纹理和颜色。

总结

设计优秀的图标并不是一件简单的事情。

图标设计的三个核心方面：配色方案，图标形状和形状。如果刚开始做图标，则应使用带有一些渐变或阴影的基本彩色背景，然后放置居中的元素以清楚地显示应用程序的用途。

但是，如果要为游戏设计图标，请不要单单考虑简单性。使用游戏元素来吸引观众更加明智。尝试一些有趣，引人入胜的事物，并使用深度和纹理。

原文：https://medium.com/swlh/designing-great-icons-for-mobile-apps-a515f254eb31 作者：Telmo Subira Rodriguez 翻译：静电