应用图标即AppIcon，它是每个应用程序的“门面”，是用户对每个应用程序的第一印象。应用图标展示于App Store（iOS应用市场）和Google Play（Android应用市场）中，当用户下载后，它就出现在移动设备的桌面和整个系统中。图标设计的好坏直接关系到品牌价值，一个设计精美、表意直观的图标甚至能决定用户是否下载该应用。
本文不涉及图标样式设计的方法和技巧，因为网上已经有太多相关主题，我希望分享给大家的是图标设计时需注意的设计规范以及需要提供给开发的尺寸和格式，因为有很多新手设计师都面临过这样或是那样的难题：比如应用图标需要提供哪些尺寸？图标切图要不要带圆角？提供了切图给到开发后为何系统会报错？开发说的自适应图标又是什么？……而我自己在第一次跟进应用图标的迭代时也碰到了一些问题，网上也没有找到较全面的设计指南可供参考。因此，在完成图标的迭代项目后，我整理了iOS和Android的设计规范并总结了一些经验，决定写这篇文章来帮助设计师们缩减后续上线工作的成本。
一、了解iOS与Android 的图标规范
iOS与Android的图标看似相同，实际却存在很多差异。这主要表现在iOS从问世至今，都使用系统来生成应用图标的统一圆角，因此iOS上的图标样式都是相当统一的圆角矩形；而Android自由开放的理念，使得Android 8.0前图标可以是方形、圆形、圆角矩形、甚至是其他任意不规则图形，这就导致了一台手机上用户看到了千变万化的图标形状。
iOS（左）和Android（右）同一个App的图标
自适应图标支持各种蒙版，这些蒙版因设备而异
在应用图标设计规范上，iOS的Human Interface Guidelines没有特别的设计说明，只写明了需要上传的图标尺寸，而Android的Material Design中对应用图标的设计有很详细的设计规范，从尺寸、形状、框线、安全区域等都作了详尽说明。Android的设计指南可以帮助设计师快速建立对图标绘制的基本概念，因此我使用Android规范并换算成iOS最大图标尺寸进行设计，使用一套样式覆盖iOS与Android，最后导出各个尺寸时做细节调整。
二、设计方法
1、尺寸
设计尺寸
2、基于框线设计
创建好画布后的下一步便是添加框线（Keylines）。框线可以帮助图标在视觉比例上与其他应用图标保持一致。
基于框线设计图标
Material Design中详细定义了应用图标的框线形状和尺寸，将其换算成1024*1024px的尺寸后，框线参数如下：
-
圆形：740px和512px直径
-
正方形：626*626px，圆角弧度56px
-
矩形：740*512px和512*740px，圆角弧度56px
根据图标形状使用不同框线
携程logo接近圆形，所以以圆形框线作为标准
基于框线设计图标是Google十分推荐的设计手段，框线帮助设计师快速确立图形元素的位置和体量感，但这不是硬性规定，因为不是所有图标都适合使用框线设计法。比如游戏类的应用，它们把图片铺满整个画布会更有视觉冲击力，更能渲染游戏的气氛。
游戏类应用图标
因此，如果你的图形足够灵活，就可以考虑充分利用画布资源，将图片撑满画布。如果你的图形不适合做撑满设计，就可以将图形置于框线上做设计。
3、基于安全区域设计
如果你的图片需要撑满画布，或是设计中带有飘带、促销标签、文案等元素，那么就需要设定安全区域了。
前面提到了iOS与Android应用图标规范是不同的：iOS图标形状是圆角矩形，圆角由系统渲染；Android 8.0自适应图标形状支持圆形、泪珠形和三种规格的圆角矩形；Android 8.0前图标形状没有指定规范，普遍做法是使用圆角半径小于40px的圆角矩形（56px画布为基准）来覆盖主流机型，切图包含圆角，四周为透明像素。因此，我们需要设定三种规格的安全区域：
-
iOS安全区为圆角半径228px的圆角矩形（1024px画布为基准）
-
Android 8.0自适应图标安全区为圆形
-
Android 8.0前图标安全区为圆角半径40px的圆角矩形（256px画布为基准）。
注意安全区域是不同的
虽然Google Play的规范中建议应用图标不要使用促销标签，但国内电商不可避免在大促阶段利用自己的“门面”做强运营提示，因此飘带等元素是常见的广告宣传设计手法。当图标设计包含飘带时，设计师需要特别注意重要元素不可超出安全区域，以防止飘带上的文字被系统裁切。
以携程20周年图标为例
三、提供切图
在样式设计完成后，我们需要生成三套切图，其中iOS一套，Android 8.0一套，Android8.0前一套。Android需要两套切图的原因是有一部分用户仍在使用Android 8.0前的系统，所以过度阶段，我们需要为Android提供两套切图。iOS与Android的切图尺寸、格式、Alpha等属性均不同，我们需要严格遵循两个系统的规范，才能确保上传的图标不会被报错。本部分介绍设计师提供切图时应遵循的一些指南。
1、iOS图标尺寸
iOS图标需要提供6个尺寸的切图，其中官方文档中已经没有旧版iPad使用的76*76px图标，但现阶段开发上传时仍需支持旧版iPad，因此我们提供给iOS开发6个尺寸的切图。
2、Android 8.0图标尺寸
Android 8.0起引入了一种新的应用程序图标格式，称为自适应图标。上文已经介绍过，自适应图标根据手机厂商设定的蒙版生成不同的形状。
应用图标根据蒙版生成不同形状
自适应图标由前景和后景两层组成，前景可包含透明度，后景不可包含透明度。两个图层的安全区域距离四周36px，以此来支持有趣的动效（视差或脉动）。
自适应图标的动效示例
设计师必须遵循以下准则来导出切图：
-
前景和后景导出格式均为svg
-
前景和后景尺寸均为216*216px
-
安全区域尺寸为144*144px
3、Android 8.0前图标尺寸
Android 8.0前图标形状没有指定规范，图标如果设计成特殊形状，导出切图时需要注意背景为透明。我在设计时，把1024px画布缩小至256px画布后，设置40px圆角半径，然后按照规范输出总共5个尺寸。
四、检验图标效果
所有移动端的设计都可以分为两部分：设计和实现。应用图标也是如此。设计师设计完图标样式并按规范要求导出不同尺寸后，就需要提交给开发进行测试。测试环节，我们首先需要确认开发有无报错，没有报错后再查验手机上的展示效果，比如是否有足够的对比度，是否足够清晰，文字大小是否合适等等。
以下总结一些常见问题和解决方法。
问题1：iOS App提交审核时，提示应用图标不合格？
一般来说，发生这种情况的原因是图标带有Alpha通道或者切图包含了圆角导致。建议在提交给开发图标前，检查清楚切图是否带有Alpha通道。
问题2：Android自适应图标上的元素在GooglePixel上被遮挡了？
需要格外注意在设计Android自适应图标时，安全区域要设为144*144px的圆形，因为Google提供给手机厂商的蒙版有圆形、圆角矩形和泪珠形，设计时要以圆形作为安全区，才能保证在所有蒙版上都不会被裁切。
问题3：如何检验Android自适应图标的显示效果以及动效？
一般开发会有APK文件来测试图标效果，Google也给了测试工具供开发者预览图标在不同设备上是如何显示和运动的。下载地址为https://github.com/nickbutcher/AdaptiveIconPlayground/releases
问题4：某些8.0前系统的安卓机上应用图标出现白边？
参考资料：
iOS HumanInterface Guidelines: https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/app-icon/
MaterialDesign: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
AndroidDevelopers: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
GoogleDesign: https://medium.com/google-design/designing-adaptive-icons-515af294c783
本篇文章来源于微信公众号: TripDesign
