辑导语：图标设计是UI设计中不可缺少的元素，它看似简单，但其实内含门道。本篇文章里，作者就对icon设计的相关知识和icon绘制方法做出经验介绍。如果你对icon设计也想要有所了解的话，那就点进来看一下吧。

图标是一种抽象的、跨语言的符号，是UI设计中最不可或缺的视觉元素，在设计中看似只占一个很小的区域，但是它却是考验设计师基本功的重要标准。

了解图标相关的概念，以及正确绘制的方法，是入门 UI设计的必备条件。

不如，从这篇开始专注图标设计相关的专业知识，逐步搭建一个完整的图标知识库。

经常有同学问图标该设计多大，不同设备icon尺寸是多少，那第一篇就从图标尺寸说起吧。

在界面图标设计中最常用尺寸有：12×12、16×16、24×24、32×32、48×48等，这里的建议是以48px作为常规图标的设计尺寸，因为iOS界面中的网格大小是4的倍数，苹果规范要求最小点击面积为44pt；安卓的网格是8的倍数，最小操作热区为48dp。

另外，@2x下作图要保证是4的倍数，这样可以整除2，适配@1x的屏幕；@3x下作图就需要是12的倍数了，这个数值可以整除2、3、4，适配@1x和@2x的屏幕。

那PC端呢？

到了桌面端后，因为屏幕分辨率的不同，没有规定最小操作热区。但受到文字落地方式（Chrome浏览器中限制最小的字体为12px）的限制，12px渐渐成为大家公认图标操作热区的最小值。16px、24px、32px都是PC端常见的图标尺寸。

通常我们只需要选择一个通用的尺寸来绘制，然后让开发人员根据倍数调整可能需要的尺寸即可，这样就不用一遍又一遍的去绘制不同大小的相同图标了。

不过当我们的图标涉及一些复杂的细节时，还是需要根据尺寸大小单独绘制。比如我们的系统图标可能是24px，但是营销图标是80px，两者的使用差别会很大，那么我们就需要为那些较大的尺寸添加一些细节。

这里建议从最大的尺寸开始，然后依次绘制小一点的。因为删除和简化细节要比添加容易得多，也能最大程度的保留图标原始状态。

接着来看各平台自家的尺寸规范。

一、iOS 应用程序图标

设计师设计时，通常只用设计一个App Store的图标（1024px1024px），其他尺寸可用ios图标生成器自动输出一套，小尺寸图标单独微调下细节即可。

在苹果给我们的这套资源中，有 Template-AppIcons-iOS 这个文件。

打开这个文件，用我们自己设计的图标替换掉智能对象里的内容，就会生成我们自己的图标，把背景隐藏，切出这些图标即可。

1. Spotlight（搜索页）

2. 设置页图标

3. 消息通知

二、iOS系统图标

1. 导航栏和工具栏图标

这两处的图标大小一样都是24x24pt，最大不超过28x28pt。

注：@2x和@3x在逻辑像素单位是一样的，如果你使用如 Sketch、Adobe XD 等矢量工具设计，可以参照逻辑像素数值设计即可。

2. 标签栏图标

iOS 规范中 Tab栏一般有五个、四个、三个图标的形式，宽度平分，icon尺寸约30x30pt（60px）。

苹果给出了四种不同形状标签栏图标的尺寸参考供大家设计时参考。其意义是让不同外形的图标看上去是差不多大的，保证图标的平衡。

1）目标宽度和高度（圆形图标）

2）目标宽度和高度（方形图标）

3）目标宽度（宽图标）

4）目标高度（高图标）

iOS在这里所定义的尺寸并不是图标文件最后输出的尺寸，而是给设计师作图时，针对不同图标形状的参考尺寸，目的是为了让图标的视觉大小看上去一致。

三、Android应用程序图标

放在mipmap-*dpi下，文件名为ic_launcher.png。

• L DPI ( Low Density Screen，120 DPI )，其图标大小为 36 x 36 px；
• M DPI ( Medium Density Screen, 160 DPI )，其图标大小为 48 x 48 px；
• H DPI ( High Density Screen, 240 DPI )，其图标大小为 72 x 72 px；
• XH DPI ( Extra-high density screen, 320 DPI )，其图标大小为 96 x 96 px；
• XXH DPI( xx-high density screen, 480 DPI )，其图标大小为144 x 144 px；
• XXXH DPI( xxx-high density screen, 640 DPI )，其图标大小为192 x 192 px；

keyline(关键线)形状，以192x192dp为例：

四、Android系统图标

相比iOS，Material Design对图标尺寸有更详细的规范。默认系统图标尺寸为24x24dp，四周有2dp的活动区域。Keyline（关键线）形状提供了针对圆形、正方形、垂直矩形、水平矩形的尺寸规范，以保证一致的视觉比例。

关于Keyline线画法会在下一篇详解，敬请关注。

五、Google Play应用图标

• 设计尺寸：512 x 512 px；
• 格式：32 位 PNG；
• 颜色空间：sRGB；
• 文件大小上限：1024KB；
• 形状：正方形 – Google Play 会动态处理遮盖部分。半径相当于图标大小的 20%。
• 阴影：无 – Google Play 会动态处理阴影。

切图时不用带圆角和阴影，Google Play 会以动态方式应用圆角遮盖部分和阴影，确保所有应用/游戏图标的设计保持一致。

图标尺寸的规范主要是确保他们在物理尺寸上是一致的，至于视觉上怎么统一，还需要自己多去练习，这个后边的文章中也会讲到。

为特定的项目选择特定的尺寸， 如果你为iOS或是Android设计图标，在决定尺寸之前，你应该查看图标规范，苹果的HIG和安卓的Material Design都是你的设计指南。

另外，如果你是一个刚入行的UI设计师，建议开始从较大尺寸的图标开始，比如64或96px，因为小尺寸的图标难度更大（这包括像素对齐）。

OK，希望通过这篇文章的梳理，大家能对图标的尺寸有更全面的认识，我们下期见。

下篇预告：图标栅格及Keyline线画法。

参考资料

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协议

.什么是字体图标

可以看作一种特殊字体，其展示的是图标，而不再是文字，其拥有字体的特性，比如大小、颜色、透明效果、阴影等，字体图标加载快、不变形。也可以看作是矢量格式的图标。

2.字体图标常用免费资源

（1）iconmoon字体图标库：https://icomoon.io/app

（2）阿里iconfont字体图标库：https://www.iconfont.cn/

（3）font-awesome字体图标库：

3.字体图标使用步骤

以iconmoon为例

（1）选择需要的图标并下载

1）在fonts文件夹下有四种类型的字体文件，每种字体文件兼容浏览器的种类不同

a）.tff格式（TrueTypeFont），美国苹果公司和微软公司共同开发的，在Windows和Mac操作系统中为默认字体；IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile中的Safari4.2+等浏览器支持该字体。

b）.woff格式（Web Open Font Format-Web开放字体格式），是一种网页所采用的字体格式标准，使用zlib压缩，文件大小一般比TTF小40%；IE9+、FireFox3.6+、Chrome6+、Safari5.1+、Opera11.1+等浏览器支持该字体。

c）.eot格式（Embedded Open Type-嵌入式OpenType ）,微软设计用来在网页使用的字体格式，是OpenType字体的压缩格式，IE专用，IE4+支持该字体。

d）.svg格式（Scalable Vector Graphics-可缩放的矢量图形），它是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形；Chrome4+、Safari3.1+、Opera10+、IOS Mobile中Safari3.2+等浏览器支持该字体。

其他字体

e）.otf格式（Open Type Font），Microsoft和Adobe公司开发的，.otf格式比.ttf更为强大，可以把PostScript字体嵌入到TrueType中。

2）字体转换

https://www.fontke.com/tool/convfont/

（2）字体图标的引入

1）把字体放到项目的相应位置

将下载解压后的fonts文件夹放到项目路径下

2）在html页面中引入字体

利用CSS的@font-face属性，引入外部字体；

在style.css文件中有如下代码，为固定用法，注意url中字体路径，其它可以不变。

在html的style标签中引入如下代码：

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?8l3wc0');
  src:  url('fonts/icomoon.eot?8l3wc0#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?8l3wc0') format('truetype'),
    url('fonts/icomoon.woff?8l3wc0') format('woff'),
    url('fonts/icomoon.svg?8l3wc0#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

3）为元素用该字体

span {
        font-family: "icomoon";
    }

4）为元素添加内容

复制demo.html中需要的图标，如下，将其作为元素的内容。

<span></span> 

（3）新增字体图标的引入

当利用iconmoon选用字体图标时，如果有新增的字体图标需要加入，则需要用到.json文件，如下，在原先选择的基础上，再选择新选择的字体图标，然后再下载使用。

片格式分类

图片格式

位图图片: bmp、jpg、gif、png

矢量图图片: 以svg格式为代表, 可缩放矢量图形(ScalabelVector Graphics)。 SVG是一种使用XML格式定义的图像。

什么是传统方式的图标

图标采用图片格式, 有bmp、jpg、gif、png等文件格式

大小改变后, 可能会出现锯齿效果, 影响美观

什么是字体图标

图标全部字体格式

可以使用color、font-size..., 改变图标的颜色、大小等样式

利用CSS雪碧图处理图标

该技术的全称是: CSS Sprite, 又称css雪碧图

使用font+html实现字体图标的优缺点

优点: 轻量性、灵活性、兼容性好, 是目前被广泛使用的技术

缺点: 大多数的图标字体只能被渲染成单色

什么是svg格式?

它的英文全称为 Scalabel Vector Graphics, 意思为可缩放的矢量图形。

svg矢量图库官网有哪些?

阿里巴巴矢量图标库官网: http://www.iconfont.cn

icommoon图标库官网: https://icomoon.io/app/#/select