2.1 分辨率与界面设计尺寸
很多读者在开始学习iOS界面设计的时候，经常问的就是怎么设定App的分辨率和尺寸。要想弄清楚分辨率和尺寸的概念，首先要了解像素和分辨率的关系。
2.1.1 像素与分辨率
很多设计师没有搞懂分辨率和像素的原因是没有明白什么是英寸。我们曾经称呼电视机为21寸大彩电、25寸大彩电、29寸大彩电等。手机也有4.7英寸、5.0英寸等。用英寸来表示一个面，导致很多人把英寸当成一个面积单位，也就是说把英寸当成平方英寸了。这会对分辨率产生完全不一样的认识。其实这里的英寸指的是屏幕对角线的长度，英寸实际上是长度单位。不同型号iPhone手机屏幕的尺寸如图2-1所示。
图2-1 不同型号iPhone手机屏幕的尺寸
分辨率分为ppi和dpi两种。
ppi：指的是每英寸所包含的像素点的数目。
dpi：指的是每英寸所包含的点的数目。
dpi和ppi区别并不大，只是像素和点的区别。像素是设计师的最小设计单位，点则是iOS开发的最小单位。设计师只需了解dpi即可，ppi才是重要的。
提示
我们日常所说的2倍图、3倍图就是指屏幕的一个点中有两个像素或三个像素。一个设备究竟要使用2倍图还是3倍图，只需看ppi和dpi的比值就可以了。
2.1.2 iOS系统界面设计尺寸
iOS设备主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸）、iPhone 11（6.1英寸）、iPhone 11 Max（6.5英寸）、iPhone 12（6.1英寸）、iPhone 12 Pro Max（6.8英寸），它们都采用了Retina视网膜屏幕。图2-2所示为部分iOS设备的尺寸。
图2-2 部分iOS设备的尺寸
这些设备的屏幕尺寸各不相同，其中iPhone 6s/7/8 Plus、iPhone X/11/12和iPhone 11/12 Max都采用的是3倍率的分辨率，其他都采用的是2倍率的分辨率。可以简单理解为在3倍率情况下，1pt=3px，在2倍率情况下，1pt=2 px。不同设备的设计像素、开发像素和倍率如表2-1所示。
表2-1 不同设备的设计像素、开发像素和倍率
为了便于适配所有设备，在为iOS系统设计App界面时，一般都会以iPhone 6的尺寸为基准，也就是750px×1334px。
提示
无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件结尾命名，程序根据不同分辨率自动加载@3x或@2x的切片。
实战练习01 使用Photoshop新建App文件
视 频：资源包\视频\第2章\2-1-2.mp4 源文件：资源包\源文件\第2章\2-1-2.psd
● 案例分析
新建文件是移动UI设计的第一步。为了方便完成App产品适配其他众多设备，通常会以iPhone 6的尺寸作为标准设计界面。本案例将使用Photoshop新建一个App项目界面，如图2-3所示。通过案例的制作，了解在Photoshop中自定义界面尺寸和设置分辨率的方法。
图2-3 新建iOS系统App文件
● 制作步骤
01 启动Photoshop软件界面，如图2-4所示。执行“文件＞新建”命令，弹出“新建文档”对话框，如图2-5所示。
图2-4 Photoshop启动界面
图2-5 “新建文档”对话框
02 在“新建文档”对话框顶部的菜单中选择“移动设备”选项，对话框效果如图2-6所示。在“空白文档预设”中选择iPhone 8/7/6选项，如图2-7所示。
图2-6 选择“移动设备”选项
图2-7 选择iPhone 8/7/6选项
03 可以在对话框右侧的“预设详细信息”中看到具体的参数，如图2-8所示。单击“创建”按钮，即可完成文件的创建，如图2-9所示。
图2-8 文档参数
图2-9 完成文件的创建
提示
本书使用Photoshop CC 2019的版本，用户可以通过Adobe官网下载试用版本免费使用。新建文档的单位为“像素”，分辨率为“72像素/英寸”，颜色模式为“RGB颜色”。