iOS Tab Bar Icon 尺寸规范和自制合规图标

目录：

1. 尺寸规范

2. 自制合规图标

一、尺寸规范

数据来源：苹果官方人机界面指南（Human Interface Guidelines）

在设备竖屏的时候，tab bar的icon都显示到tab标题到上方.  在设备横屏时候，tab bar的icon显示到tab标题的前方，根据用户的实际设备和设备朝向，系统要么显示“标准”尺寸，要么显示“压缩”尺寸，在您的App里，最好能提供两种尺寸的tab bar icon.

图片的宽度和高度(圆形)

标准 tab bars                                                  压缩 tab bars

75px × 75px (25pt × 25pt @3x)                     54px × 54px (18pt × 18pt @3x)

50px × 50px (25pt × 25pt @2x)                    36px × 36px (18pt × 18pt @2x)

图片的宽度和高度(圆形) (正方形)

标准 tab bars                                                    压缩 tab bars

69px × 69px (23pt × 23pt @3x)                        51px × 51px (17pt × 17pt @3x)

46px × 46px (23pt × 23pt @2x)                        34px × 34px (17pt × 17pt @2x)

图标宽度 (宽幅度图标)（只限制宽度）

标准 tab bars                                                    压缩 tab bars

93px (31pt @3x)                                               69px (23pt @3x)

62px (31pt @2x)                                               46px (23pt @2x)

图标高度 (高幅度图标)（只显示高度）

标准 tab bars                                                    压缩 tab bars

84px (28pt @3x)                                                60px (20pt @3x)

56px (28pt @2x)                                                40px (20pt @2x)

二、自制合规图标

对于非设计专业的同学，如果制作iOS所需的图标，可以上 https://www.iconfont.cn  查找自己的图标，按照下边的步骤制作@2x, @3x的图标

1. 下载自己所需的图标(尺寸自己决定即可），下载SVG 或者 AI 格式最好（这样扩大尺寸的时候就不会失真了）

2. 打开Sketch 软件（建议做iOS研发的同学自己能下载一个Sketch，这样如果设计同学切图不准确，你可以自己切出合适的尺寸，或者制作一些合适的@2x，@3x标，很方便）

3. 创建一个Artboard，然后把下载好的SVG图标拖动到这个Artboard上

4. 选中拖入的图标，将图标的高宽比锁定。 如图，高度 > 宽度，因此此图标我们应该限制高度，按照规范：我们要做“标准”的28pt高，和“压缩”的20pt高. 

5. 由于锁定了高宽比，因此缩放并不会导致图标变形，我们直接修改高度的数值为28pt或者20pt（我们这个教程只讲28pt的，20pt的制作方法和28pt是一样的）

6. 设置不同的导出尺寸，1x，2x，3x；然后讲图标导出，我们就得到了3张合规的@1x，@2x，@3x的图标；

7. 将三张图标分别拖入Assets.xcassets总的image sets里即可：