iOS开发Swift日常iOS笔记

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

2019-08-27  本文已影响0人  薰衣香

目录:

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里即可:

上一篇下一篇

猜你喜欢

热点阅读