手机APP界面设计尺寸笔记

如今市场上的手机类型繁多，同种品牌的手机下面也有很多种机型。比如苹果手机，不断的研发和创新，保持着一年一款新机型的更新速度，在越来越多的国产机的夹击下，冲击着手机市场。（果粉们表要激动。）与此同时，屏幕的尺寸也越来越大，网友不禁调侃道：手机越来越像平板，平板越来越像手机。

而对于刚刚入门的UI界面设计新手，五花八门，八面玲珑的手机机型着实让人有点懵，针对不同的手机机型，该如何把握尺寸。这里我们就需要知道一个概念：像素密度（PPI），英语全称是pixels per inch， 每英寸的长度上排列的像素点数量。很多人可能会认为，像素越高，图像就越清晰。但其实这是错误的观点。正确的是“像素密度越高，代表屏幕显示效果越精细。”这也是为什么买照相机时，不要盲目的追求像素高的相机，1200万像素的相机比600万像素的相机最后拍出来的照片效果还差。这其中还牵扯到相机其他的硬件，比如CCD。有兴趣的可以去了解一下。

Retina屏，把2x2个像素压缩成一个像素来用，很明显，这符合像素密度越高，屏幕显示效果越清晰的定律。最初的iPhone4，以及iPhone4s，再到后来的iPhone5、iPhone5c、iPhone5s、iPhone6及iPhone6 Plus都使用了Retina显示技术的IPS显示屏。

改正之前错误的惯性思维定式后，我们就来了解一下设计手机APP界面时，如何设置尺寸的问题。手机机型这么多，不同手机的屏幕大小也有很大的差异，那他们的基准到底是什么呢？这里又要引入一个概念：逻辑像素；外加一个公式：

                                                              手机的实际像素÷倍率=逻辑像素尺寸。

逻辑像素相同，显示效果也相同。我们来举个例子：比如Android手机，现在市场上的Android手机碎片化严重，尺寸很多。常见的Android屏幕尺寸：①540x960，倍率为1.5；②720x1280,倍率为2；③1080x1920，倍率为3。那么，利用换算公式，就可以得到一个共同的逻辑像素：360x640。所以最后在这些不同机型的手机上，呈现出来的效果也是一样的。

同理，苹果APP上的UI设计也按照这一规律。iPhone5/5s，倍率为2，逻辑像素320x568；iPhone6，倍率为2，逻辑像素为375x667；而iPhone6 plus，倍率为3，逻辑像素为414x736。现在比较流行的做法是按照iPhone5的尺寸来设计，倍率为2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的，页面加载速度也相对更快，因为图片的尺寸可以保持在较小的水平。这也是为什么不常用iPhone6 plus的原因，虽然3的倍率，呈现效果更加清晰，但是前提是你愿意牺牲加载速度。