icon图标设计步骤(苹果icon尺寸规范)

编辑导语：图标设计是UI设计中不可或缺的元素。看似简单，实则蕴含门道。在本文中，作者介绍了图标设计的相关知识和图标的绘制方法。如果你想了解图标设计，请点击这里看看。
图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素。看似在设计中只占很小的面积，却是检验设计师基本功的重要标准。
了解图标相关的概念和正确的绘制方法是UI设计入门的必要条件。
不如从这篇文章开始重点学习图标设计相关的专业知识，逐步建立一个完整的图标知识库。
经常有同学问图标应该有多大，不同设备的图标大小是多少。先从第一篇文章的图标尺寸说起。
界面图标设计中最常用的尺寸有：1212、1616、2424、3232、4848等。这里的建议是使用48px作为常规图标的设计尺寸，因为iOS界面中的网格尺寸是4的倍数，苹果规范要求的最小点击面积是44pt;安卓的网格是8的倍数，最小运行热点是48dp。
另外@2x下的画图要保证是4的倍数，这样2才能平分，适合@1x的屏幕；@3x下的图需要是12的倍数。该值可被2、3、4整除，适用于@1x和@2x屏幕。
PC端呢？
到达桌面后，由于屏幕分辨率不同，不存在最小操作热区。但由于文本登陆方式的限制(Chrome浏览器最小字体为12px)，12px逐渐成为图标操作热点的最小值。16px、24px和32px是电脑上常见的图标尺寸。
通常我们只需要选择一个常用的尺寸来绘制，然后让开发人员根据倍数来调整可能需要的尺寸，这样我们就不用一遍又一遍的绘制不同尺寸的同一个图标了。
但是当我们的图标涉及到一些复杂的细节时，还是需要按照大小分别绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用会有很大的不同，所以对于那些大一点的尺寸我们需要补充一些细节。
建议从最大的尺寸开始，然后依次画较小的。因为删除和简化细节比添加要容易得多，也能最大程度的保持图标的原始状态。
然后再看各个平台的尺寸规格。
一、设计ios应用图标时，设计师通常只需要设计一个App Store的图标(1024px1024px)。其他尺寸可以通过iOS图标生成器自动输出，小尺寸图标可以单独微调。
在苹果给我们的这组资源中，有文件模板-AppIcons-iOS。
打开这个文件，用我们自己设计的图标替换智能对象的内容，我们将生成我们自己的图标，隐藏背景，并剪切掉这些图标。
1.聚光灯2。设置页面图标。
3.消息通知
二。iOS系统图标1。导航栏图标和工具栏图标的大小都是24x24pt，最大不超过28x28pt。
注意：@2x和@3x在逻辑像素单位上是一样的。如果使用Sketch、Adobe XD等矢量工具进行设计，可以参考逻辑像素数值设计。
2.标签栏图标在iOS规范中，标签栏一般是五、四、三图标形式，宽度平分。图标大小约为30x30pt(60px)。
苹果给出了四种不同形状的标签条图标的尺寸参考，供你设计时参考。它的意思是让不同形状的图标看起来几乎一样大，保证图标的平衡。
1)目标宽度和高度(圆形图标)
2)目标宽度和高度(方形图标)
3)目标宽度(宽图标)
4)目标高度(高图标)
iOS这里定义的大小并不是图标文件最后输出的大小，而是为设计师绘图时不同图标形状的参考大小，为了让图标的视觉大小看起来一样。
三。Android应用图标放在mipmap-*dpi下，文件名为ic_launcher.png
l(低密度屏幕，120 DPI)，图标尺寸为36 x 36 px;m(中密度屏幕，160 dpi)，其图标尺寸为48 x 48 px;H DPI(高密度屏，240 DPI)，图标尺寸为72 x 72 px;Xhdpi(超高密度屏，320 dpi)，其图标尺寸为96 x 96 px;xxhdpi(xx-高密度屏，480dpi)，图标尺寸为144x144pxXXXH DPI(XXX-高密度屏，640 DPI)，图标尺寸192 x 192 px;线条(keyline)形状，以192x192dp为例：
四。Android系统图标相比iOS，Material Design对图标尺寸有更详细的规范。默认系统图标大小为24x24dp，周围有2dp活动区域。关键线形状提供了圆形、正方形、垂直矩形和水平矩形的尺寸规格，以确保一致的视觉比例。
下一篇文章会详细讲解Keyline绘制，敬请期待。
动词（verb的缩写）Google Play应用图标设计尺寸：512x512px格式：32位PNG;颜色：sRGB；最大文件大小：1024KB;形状：正方形Google Play将动态处理被覆盖的部分。半径等于图标大小的20%。阴影：无Google Play将动态处理阴影。剪图的时候不需要拍圆角和阴影。Google Play将应用圆角以动态方式覆盖部分和阴影，以确保所有应用/游戏图标的设计一致。
图标尺寸的规范主要是保证它们在物理尺寸上的一致。至于视觉上如何统一，还需要自己多加练习，这个后面的文章也会提到。
为特定项目选择特定尺寸。如果你为iOS或Android设计图标，你应该在决定尺寸之前检查图标规格。苹果的HIG和安卓的材质设计是你的设计指南。
另外，如果你是一个新的UI设计师，建议从更大的图标开始，比如64或者96px，因为更小的图标难度更大(这包括像素对齐)。
好了，希望通过这篇文章的梳理，让大家对图标的大小有一个更全面的了解。下次见。
下一个预览：图标网格和关键线绘制。
参考数据
https://developer . apple . com/design/human-interface-guidelines/IOs/overview/themes/
https://developer . Android . com/Google-play/resources/icon-design-specifications HL=zh-cn
https://material . io/design/iconography/system-icons . html # design-principles
作者：Fyin印记；微信官方账号：印记与拾光
本文由@Fyin印记原创发布。大家都是产品经理，未经作者允许，禁止转载。
来自Unsplash的图像，基于CC0协议。