手机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的倍率,呈现效果更加清晰,但是前提是你愿意牺牲加载速度。





你可能感兴趣的:(手机APP界面设计尺寸笔记)