1.2　手机型号、尺寸及分辨率

1.2.1　了解主流手机分辨率

要想从零开始APP设计工作，有必要了解一下市场主流的手机分辨率。

Android设备分辨率趋势（2014年12月-2015年4月，来自友盟指数）如图1-2-2所示。

iOS设备分辨率趋势（2014年12月-2015年4月，来自友盟指数）如图1-2-3所示。

操作平台上，毫无疑问，Android与iOS占据几乎全部市场份额，iOS设备以iPhone 4S、iPhone 5S为主，由于iPhone设备更新稳定，分辨率变化不大，但最新的iPhone 6及Plus设备也必须在设计上加以考虑了。Android系统的手机品牌数不胜数，但占据前几位的依然是三星、小米、华为、联想、OPPO等有影响力的厂商。在设计及开发APP时，除了市场占有率因素，应用自身的定位所带来的品牌占有率的偏差也必须考虑进去。例如，在使用某奢侈品电商APP的用户中，iPhone及三星占据较大份额。但在手机阅读类软件（网络文学）用户中，较低端的Android型号更为普遍。这点需要区别对待，在设计时有所偏向。

接着说分辨率，分辨率是我们在设计APP界面的时候第一要考虑的事情，手机分辨率千差万别，我们不可能针对每一种分辨率单独来做设计，所以使用哪种分辨率来设计最合适，这是设计师必须要做出的选择。主流手机的分辨率如图1-2-4所示。

在假设手机ppi（精度）一致的情况下，物理面积如图1-2-5所示。

1.2.2　用哪种分辨率作为设计稿的标准尺寸？

那我们选择哪种画布尺寸来开始设计工作呢？这里有几个原则：

1.手头有哪些手机可以选择，或者具体为哪种手机（Android、iOS或者都有）设计界面。

2.最方便、最有效率地适配各种尺寸和型号的手机（图片处理起来最方便、最省时间，同时保证效果最好）。

3.保证屏幕中的UI元素显示效果最佳，不出现虚边、模糊等现象。

4.确保可以适配当今主流机型，同时兼顾手机日新月异的进化趋势（设计稿是否可以快速适配越来越大的分辨率）。

了解这几个原则后，分析上文提到的分辨率，我们发现，720×1 280、640×960、480×800、640×1 136、加上最新的iPhone 6及Plus的750×1 334、1 080×1 920等几种分辨率最为常见。另外，联想一下网页的浏览习惯，APP的浏览习惯和前者有点相似，上下滚动最为主流，也就是说整个内容中，高度是一项较为不固定的因素。现在进一步简化上边提到的几个分辨率，将高度省去后得到几个数字：480、640、720、750、1 080。请注意中间一个数字720，480的1.5倍即为720，720的1.5倍为1 080。这时再次将数值简化为480、720、1 080。 有读者可能会有疑问，640、750、1 242几个宽度为什么要省去呢。由于现在手机ppi普遍大于300，已经高于人眼可以识别的范畴，所以几十个像素的差别可以忽略不计（我们可以拿一张640宽的图片分别放在iPhone 4S与iPhone 6上，将宽度撑满进行观察，虚吗？抛开设计师的“像素眼”，一般人看来区别很小）。另一个原因，在iOS与Android的图像处理机制的设计中，为了便于快速适配，工程师将不同大小的素材区分为几个不同等级。也就是我们平时会接触到的iOS素材中的以@2x和@3x结尾的图片，Android图片素材中放入hdpi、xhdpi、xxhdpi中的素材。程序在不同ppi的手机设备上运行的时候，会根据某种算法来判断读取哪个文件夹或者哪个后缀的图片文件，确保图片素材在不同手机上呈现一致的设计效果。

当你为iOS设计时，需要准备两套素材，分别对应iPhone 4、iPhone 4S、iPhone 5、iPhone 5S、iPhone 6的@2x图片，以及为iPhone 6 Plus设计的@3x倍图片。

当你为Android设备设计时，至少需准备对应1 080p分辨率（放在xxhdpi文件夹中）的素材，还需要一套对应720p分辨率（放在xhdpi文件夹）的素材。如果你追求完美，甚至需要设计针对480p分辨率（放在hdpi文件夹）的素材，当然不放也没有关系，Android大部分情况下会自动将图片进行缩小或者放大处理，所以选择一套缩放不虚的图，也就是对应1 080p分辨率的图即可。

唠叨了那么多，我们到底用哪种分辨率作为基准分辨率更合适呢？在这里推荐720宽的分辨率，它的突出特点是能上能下，设计稿直接切图即为@2x图或者对应xhdpi的素材，图片放大1.5倍即为@3x或者对应xxhdpi的素材。

到这里原理解释完毕，但有人会问，可是我没有iPhone 6或者这个分辨率的Android手机怎么办呢？没关系，可以根据自己手头的设备，选择合适的分辨率即可，最后无非是根据宽度进行等比放大长宽的操作。继续举例，如果用320×480的分辨率做设计稿，那么只需要把素材尺寸宽高等比放大2倍、3倍即可。这里为什么强调要根据手头的手机来设定尺寸呢，毕竟我们要做的是移动设备UI，在显示器查看设计稿的感觉与在手机上查看差别很大，建议大家最好将设计稿导入手机进行查看，最好是手头设备分辨率与设计稿完全对应，在手机上可以点对点地显示，这时你会看到最接近于开发后的效果。Sketch为我们提供了非常方便的预览软件Mirror，在计算机中完成的设计稿，通过无线网络连接，可随时在手机中查看，非常方便，此功能将会在随后的章节中讲解。

1.2.3　手机分辨率与输出素材对应速查表

简易的图片尺寸与手机分辨率对照表如图1-2-8所示（此表只列举大部分手机的适配情况，某些特殊尺寸的机型可能不适用，请注意）。