移动端尺寸问题

　　

　　移动端尺寸的现状

　　首先说现象，大家都知道移动端设备屏幕尺寸非常多，碎片化严重。尤其是Android，你会听到很多种

　　分辨率：480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的2K屏。近年

　　来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208

　　

　　不要被这些尺寸吓倒，实际上大部分的app和移动端网页，在各种尺寸的屏幕上都能正常显示。说明尺

　　寸的问题一定有解决方法，而且有规律可循

 

　　像素密度（PPI）

　　要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，虽然说是分辨率，但和图片的分辨率

　　不是一回事，实际上都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像

　　素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。之所以大家都称为手机屏幕的分辨率，

　　也是一个默认的错误而已

 

　　而手机屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320x480

　　iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。

 

　　所以，我们要引入最重要的一个概念：像素密度，也就是PPI(pixels per inch)。这项指标是连接数字世

　　界与物理世界的桥梁。Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固

　　定长度，等于2.54厘米。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是

　　因为它的像素密度翻了一倍。可以看出，实际上PPI和平时所说的图片的分辨率才是相近的

 

　　引发的问题

　　接下来考虑这样一个问题，有如下两种机型

　　iPhone 3gs ： 320x480

　　iPhone  4s  ： 640x960

　　如果我们有一张 320x480 px 大小的图片，要在两种手机中都满屏显示，结果会怎么样呢？

 

　　可以肯定的是，在 iPhone 3gs 上这张图能够正好的清晰的显示，物理器件上的一个物理像素光源点，正

　　好用来显示图片上的一个像素

 

　　而另一方面，对于 iPhone  4s ，如果满屏显示的话，那么实际上是物理器件上的640x960个物理像素光

　　源点来显示 320x480 个图片像素；这意味着，4个物理像素光源点要用来显示一个图片像素，那么整体效

　　果是图片被拉伸，肯定会模糊

　　

　　 倍率和逻辑尺寸

　   在以前，iOS应用的资源图片中，同一张图通常有两个尺寸。你会看到文件名有的带@2x字样，有的不带。

　   其中不带@2x的用在普通屏上，带@2x的用在Retina屏上。只要图片准备好，iOS会自己判断用哪张，

　　Android道理也一样。

　　

　　由此可以看出，苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率(iPhone 6plus除外，它达到了3倍)。

　　实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。

 

　　

　　Android的解决方法类似，但更复杂一些。因为Android屏幕尺寸实在太多，分辨率高低跨度非常大，不像苹果

　　只有那么几款固定设备、固定尺寸。所以Android把各种设备的像素密度划成了好几个范围区间，给不同范围的

　　设备定义了不同的倍率，来保证显示效果相近。像素密度概念虽然重要，但用不着我们自己算，iOS与Android

　　都帮我们算好了。

 

　　如图所示，像素密度在120左右的屏幕归为ldpi，160左右的归为mdpi，以此类推。这样，所有的Android屏幕

　　都找到了自己的位置，并赋予了相应的倍率：

　　ldpi [0.75倍]

　　mdpi [1倍]

　　hdpi [1.5倍]

　　xhdpi [2倍]

　　xxhdpi [3倍]

　　xxxhdpi [4倍]

　　

 

　　

　　就目前市场状况而言，各种手机的分辨率可以这样粗略判断。虽然不全面，但至少在1年内都还有一定的参考意义：

　　ldpi 如今已绝迹，不用考虑

　　mdpi [320x480](市场份额不足5%，新手机不会有这种倍率，屏幕通常都特别小)

　　hdpi [480x800、480x854、540x960](早年的低端机，屏幕在3.5英寸档位;如今的低端机，屏幕在4.7-5.0英寸档位)

　　xhdpi [720x1280](早年的中端机，屏幕在4.7-5.0英寸档位;如今的中低端机，屏幕在5.0-5.5英寸档位)

　　xxhdpi [1080x1920](早年的高端机，如今的中高端机，屏幕通常都在5.0英寸以上)

　　xxxhdpi [1440x2560](极少数2K屏手机，比如Google Nexus 6)

 

　　自然地，以1倍的mdpi作为基准。像素密度更高或者更低的设备，只需乘以相应的倍率，就能得到与基准倍率近似的显示效果。

　　不过需要注意的是，Android设备的逻辑像素尺寸并不统一。比如两种常见的屏幕480x800和1080x1920，它们分别属于

　　hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到逻辑像素为320x533和360x640。很显然，后者更宽更高，能显示更多内容。

　　所以，即使有倍率的存在，各种Android设备的显示效果仍然无法做到完全一致。

 

　　单位

　　不难发现，真正决定显示效果的，是逻辑像素尺寸。为此，iOS和Android平台都定义了各自的逻辑像素单位。iOS的尺寸单位

　　为pt，Android的尺寸单位为dp。说实话，两者其实是一回事。

　　单位之间的换算关系随倍率变化：

　　1倍：1pt=1dp=1px(mdpi、iPhone 3gs)

　　1.5倍：1pt=1dp=1.5px(hdpi)

　　2倍：1pt=1dp=2px(xhdpi、iPhone 4s/5/6)

　　3倍：1pt=1dp=3px(xxhdpi、iPhone 6s)

　　4倍：1pt=1dp=4px(xxxhdpi)

 

　　单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师

　　喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。所以为了消除"底部标签栏的高度是

　　96像素，我是按照xhdpi做的"这样别扭的话，我们应该遵循下面的原则

 

　　无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，

　　双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我

　　是按照xhdpi做的”这样的话了。

 

　　无论什么样的屏幕，倍率是多少，都按逻辑像素尺寸来设计和开发页面。只不过在准备资源图的时候，需要准备2倍大小的图，通

　　过代码把它缩成1倍大小显示，才能保证清晰。

 

　　但是，就像上面的说的一样，有的设计师喜欢将画布设置成750，有的设置成1080的，那么在PS中怎样才能够方便的将尺寸单位

　　转换为逻辑像素，也就是 点 呢？实际上非常的简单，PS中已经为我们提供了特别简单的转换方式，不用你再除2、除3，自己算了

　　方法如下

 

　　实际应用

　　在用PS进行设计的时候，画布大小随意设置，可以是360/720/1080，单位还是用像素，该怎么做还是怎么做，做完之后就要进

　　行尺寸标注和切图了，这个时候，我们可以将画布的尺寸和文字单位都改成 点(Point) 也就是pt

 

　　

 

　　之后我们打开 图像大小 窗口，更改分辨率，窗口中的 分辨率 虽然叫分辨率，实际上这个就是 设备像素密度 DPI，或者PPI

　　只不过沿用了分辨率这个叫法，可以看到默认值是 72 ，这个就是1倍率的像素密度了，至于为什么是72，这个是有历史原因

　　的，最早的图形设计是在mac电脑上进行的，mac本身的显示器分辨率就是72。PS中把图像DPI也设成72，就能保证屏幕上

　　显示的尺寸和打印尺寸相同，便于设计。72的PC显示器分辨率逐渐成为一种默认的行业标准，这套规则就这么沿用下来。

　　

　　所以，如果你的画布大小是 720 的话，那么就将 DPI 设为 144 ，如果是1080的话，就将 DPI 设为 216；设定完成之后，

　　回到设计的图像页面，会发现标尺的单位是 点，画布大小变成了逻辑尺寸 360 ，说明PS已经自动除了相应的倍率，转换成

　　了逻辑尺寸，单位是 pt 。这个时候你就直接在PS中查看各个位置的尺寸，进行标注就行了，非常的简单。

 

　　

 

　　下面来看看3个平台各自的画布设置：

 

　　iPhone

　　iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就

　　要选择逻辑像素折中的机型。从市场占有率数据来看，目前最多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上

　　升势头最猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。

 

　　按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。

　　不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意保证清晰。

 

　　Android

　　都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，

　　就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。

　   其他的机型不出一年就会被边缘化，基本淘汰。现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从

　　谈起，不作考虑也是OK的。

 

　　Web

　　手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。

　　这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图

　　片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。

 

　　如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像

　　素414x736。

 

　　总结

　　移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套

　　设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

 

　　由于最近在研究交互设计，就顺便将Pixate中的设备信息贴出来