UI设计师必须知道的 iOS和Android的APP图标设计指南

尽管图标非常小，但图标会在App Store和Google Play中显示，向用户传达app的信息，并且安装后能在主屏幕上找到它，因此图标非常重要。

当第一次面临绘制应用程序图标的挑战时，我遇到了很多问题。我在完成几个项目后之后才找到了一些答案。我决定写这篇文章来帮助和我一样的初学者，但我希望经验丰富的设计师也会觉得它很有用。好吧，让我们开始吧！

为什么每个app都需要一个图标？

app的图标是为每个移动应用程序添加的唯一图像。这是新用户在App Store和Google Play上找到应用时看到的内容。在此阶段，用户决定是否要查找有关应用程序的更多信息，如果没有， 他会无视这个应用程序。一个好的图标会让用户产生兴趣，提供信心，向用户保证应用可能对他有用。当用户安装应用程序时，图标的目标会发生变化。此时它有助于让用户在主屏幕上的其他图标中找到自己，但是什么能使应用程序图标脱颖而出呢？

关于这个主题有很多文章，其中大部分都与保罗兰德的设计原则有关。这并不奇怪！应用程序图标是一个品牌。但是，它不仅仅只是一个徽标。

徽标和应用程序图标分别具有不同的目标，使用方式和要求。这并不意味着徽标不能与图标重叠。流行的应用程序通常在图标中使用徽标：比如Twitter，Medium，Reddit等。但他们不会无缘无故地这样做。它们是我们需要考虑的许多方面。让我通过借鉴经验和使用好看的头条新闻来告诉你。

1，可扩展性

应用图标必须很小。这就是重点，用户无法对其进行拉伸检查。因此无论大小如何，图标都必须保持其易读性。比如，设置中的应用程序图标多小啊！

iOS和Android设置中的应用程序图标

用户不需要试图理解设计师的想法。设计师确保在多种尺寸的实际设备上试用图标，并在必要时最终确定。由于像素数量的减少而导致细节的损失是不可避免的。这将我们带到了应用程序图标的第二个方面。

2，可识别性

如果用户无法理解你的想法，你就无法留住他，他将转到下一个应用程序。设计师建议简化应用程序图标以提高可识别性。理解它是正确的。简化并不意味着使原始。下图这些图标不详细吗？

Hello Neighbor, Tiny wings, Prune, Pandora Music, Silly Sausage in Meat Land, Old Man’s Journey

简化意味着专注于一个想法，摆脱不必要的和重复的元素。一切都应该适用于这个想法，并帮助用户理解它。但是，用户不仅要了解还必须对它感兴趣。

3，唯一性

App Store中有近200万个应用程序，Google Play中有2,100万个应用程序，每个应用程序都有一个应用程序图标。所有这些图标都在争夺用户的注意力。大品牌使用他们的标识吸引注意力，但是如何做不太知名品牌的应用程序呢？我们需要展示新的和不寻常的东西！

Todoist使用标准为任务管理员勾选一个有趣的组合，在开始绘制之前花一些时间进行研究搜索主要竞争对手以及来自同一类别的应用程序。想想如何脱颖而出！如果大多数图标都是彩色的，请考虑使用单色调色板。如果有一个特定项目的图像很多 – 放弃它并显示更有特色的东西。设计师需要一直寻找解决问题的方法！

有一些新的东西很难想出来。制作情绪板，创建思维导图，向朋友和同事寻求建议。你永远不知道你会在哪里找到一个好主意。但重要的是不要在追求原创性时与应用程序失去联系。

4，一致性

图标是应用程序的一部分，它们必须携手合作。图标应描述应用程序并显示其主要功能。因为只有一个游戏机制，所以应用程序在哪里可以获得100万次下载尤为重要。

Slack是一个关于一致性的好例子

如果他得到的申请与预期不同，肯定会不开心。不要在图标中包含屏幕截图和界面元素 – 它可能会误导用户。相反，暗示应用程序的功能，使用相同的样式和颜色。对于哪个应用与图标相关，不应该有任何疑问。指南可以帮助您实现这一目标！

遵守指南

尽管iOS和Android开始看起来相同，但仍存在很多差异，这使我们无法在两个操作系统上使用相同的应用程序图标：比例，视觉技术和特殊功能。用户习惯了他们的操作系统。我们与它的距离越小，对应用程序的信任就越多。

iOS（左侧）和Android（右侧）相同应用的图标

这并不意味着您需要绘制不同的应用程序图标; 相反，巨大的差异会降低应用识别率。有时它足以调整大小，但在某些情况下，最好进行更多更改。这是我们在开发应用程序图标时应该注意的事项。现在是时候创造了！当然，如果你在路上没有更多的问题……画布的尺寸应该是多少？如何使用网格？如何导出图标？是时候深入了解技术部分并找到答案。让我们从iOS开始吧。

iOS应用程序图标

iOS人机界面指南中有许多有用的信息，但我们将重点关注Apple图标部分，其中Apple描述了技术要求并对设计提出了建议。我们将遵循创建图标的路径并深入了解这一点。我使用Sketch，但任何其他图形编辑器也可以使用。

绘制iOS应用程序图标

有许多用于创建图标的模板，但我们暂时不会使用它们。假设我们已经研究了市场，也许确定了这个想法，甚至手工制作了草图。当然，在编辑器中创建了一个新文档。我们先选择一个画布尺寸。在iOS中，可以找到不同大小的图标，从40px×40px到1024px×1024px。因为减小图像大小总是比较容易，所以我们将创建一个更大的画布。在Sketch中工作的设计师可以作弊并创建两倍较小的画布（512px×512px）并在以后导出时增加它。下一步是添加网格。您可以下载它，在模板中查找甚至绘制。网格有助于保持组合物的统一性和完整性，控制尺寸和间距。尝试将主要对象放在一个大圆圈内。如果一个网格干扰并限制你的创作冲动 – 打破它。甚至结构也应该受到限制。

最后，我们可以开始画了！我不会对细节感到枯燥，但我的图标经过了经理审核，并向客户反馈了几次。

为了更好呈现图标，我做了一个简单的动画：

这个和我在Dribbble上分享的其他东西图标都准备好了！我们把它导出吧。导出iOS应用程序图标在导出之前，我们需要删除圆角和笔划，因为系统会自动添加它。别忘了隐藏网格。

图标应导出为png并设置为没有透明度。但各种尺寸呢？我们真的需要手动完成吗？我们可以使用Sketch插件AEIconizer来乘以它。此外，还有很多网站，如MakeAppIcon，App Icon Maker和App Icon Generator，可以做同样的事情。当然还有模板！例如每个交互模板不仅会导出各种大小的图标，还会显示它在主屏幕和App Store中的外观。它没有看起来那么难。接下来是Android应用程序图标！

Android应用程序

图标在材料设计规范中，Google将有关Android应用程序图标的信息分为两部分：关于样式和技术要求。

绘制Android应用程序图标

在Android中，应用程序图标也以各种尺寸使用，最大的与iOS相同：1024px×1024px。添加网格，注意安全区域。根据设备的不同，Android会应用不同形状的蒙版。将图像放在安全区域内，这样就不会被剪裁。网格本身显示系统中使用的所有基本形状：圆形，方形，垂直和水平矩形。

图标的最终版本：

在导出Android应用图标之前，我们还需要删除圆角，笔划和网格。

Android Studio可以将所有必需尺寸的图标相乘，因此我们只需要一个没有透明度的png图像。

Android Oreo推出了具有视差和缩放效果的新应用图标格式。您可以将前景与背景分开，然后这些图层将在应用效果的设备上独立移动。因此，前景可以包括透明度。在坚固的背景下无法看到视差效果，但如果您的构图复杂，它可以为您的设计带来动态效果。在这种情况下，您需要为两个图层提供两个png图像。请准备好并非所有用户都能看到效果。在撰写本文时，只有12％的Android用户使用Android Oreo。

用户从图标开始了解一个应用程序，该图标伴随着他的旅程一直到最后。图标的作用很重要且多方面，这就是设计师应该强调它的原因。但永远不要忘记应用程序本身！毕竟，只需轻点几下即可删除应用。无论您的图标有多酷，如果某个应用无效，用户都会把它删除。

原文出处：http://suo.im/4ZDW41

作者：UIbaba