设计师在进行界面设计的工作以前，了解到设计的规范是必须要掌握的。熟悉手机尺寸，分辨率则是进行设计的第一步。首先就需要区分dpi和ppi分别是什么。dpi在平面设计中经常会用到，一般用来表示打印机的性能，为每英寸的点个数。当每英寸的点的个数越多，则表示打印的图像越清晰。当这个点多到一定的数量时，人的眼睛已经识别不出来了，此时图像接近了矢量的效果。而ppi通常用在界面设计当中，用来表示每英寸可以放置多少个像素。每个像素就是一个发光的点。当这个点在一定的尺寸当中越多，表示图像显示越清晰。
像素在设备生产的时候就已经确定好了。例如iPhone 8，其手机为4.7英寸，它的分辨率是750*1334，即在横向拥有750个像素点，纵向有1334个像素点。总点数与英寸相除，则是每英寸的像素点的个数，也就是像素密度。像素密度越高，画面越细腻清晰。
iPhone 常见机型的尺寸
一个像素的大小通常不是固定的。这取决于其显示设备的大小。你可以将1920*1080的尺寸放置在普通的电脑显示器中，也可以放置在60寸的电视上，还可以只显示在某些手机上。
因为手机设备的分辨率差别太大，我们在设计工作中不可能为每一套尺寸设计一套界面，这就需要我们在设计的时候，做一套能够适应所有设备的界面。这也就是我们为什么会在sketch中通常以375pt宽度进行设计。设计完成后，我们通常导出三套不同倍数的图片即可。这里的375单位是pt而不是px，是因为这里表示的是逻辑像素，也是开发尺寸。
iPhoneX的特殊设计
导出的1倍图最早用于iPhone 3GS等设备，由于现在市面上基本没人使用了，也就仅是作为开发使用。而@2x则是适用于iPhone 8等设备中，@3x则是用于iPhone 8 Plus，iPhone 11 Pro等设备中。这样才能使设计的界面应用在不同的手机设备中显示效果的一致。而安卓设备，由于设备太过繁杂，其尺寸也各式各样，在界面设计中，通常以iPhone的375尺寸进行适配。
有一种情况比较特殊，这就是iPhone X等系列的机型。其逻辑像素为375*812，而普通机型则是375*667，高度增加了145像素。苹果官方给出了刘海区域的高度是44像素，底部的虚拟home键给出了34像素的高度。除此之外的区域则是界面设计中的安全区域。
多了刘海部分 显示区域更大了
iPhone 8的时间条为20pt，iPhone X的时间条为44pt，高度增加了24pt，这就需要在设计时，将iPhone 8的导航栏下移24pt，在其顶部增加24pt的内容使得和导航栏的背景色一致。如果顶部为图片时，则需要额外对图片的顶部增加24pt的高度进行设计。底部的虚拟home键部分，增加了34pt的高度。在设计时，若底部有按钮，可以在底部增添34pt的内容，使其背景色和底部按钮背景色一致即可，也可以正常显示home键。而进行如APP的启动页等内容时，本人建议尽量将主要内容靠上方的位置放置进行适配或者单独进行设计，防止页面在不同设备下的变形。
此外补充一点，新上市的iPhone12系列，其尺寸分别为：
iPhone 12，6.1英寸，2532*1170(@3x);
iPhone 12 mini，5.4英寸，2340*1080(@3x);
iPhone 12 Pro ，6.1英寸, 2532*1170(@3x) ;
iPhone 12 Pro Max，6.7英寸，2778*1284(@3x)。
在设计中依然采用375*667一稿适配即可。
途傲科技为中小企业提供网站制作、网站建设、微信H5、微信小程序，多商户平台，多级分销系统，APP开发，手机网站，HTML5多端自适应网站，营销型企业站建设，及对技术人才的培养等都积累与沉淀了丰富的心得和实战经验。
如果您有想法，可以将需求提交给我们【免费提交需求，获取解决方案】
免责声明：文章部分内容收集于互联网，不代表本站的观点和立场，如有侵权请联系删除。
