移动UI设计尺寸

移动端一堆分辨率的设备？碎片化？没接触过？

莫慌，跟着老司机走。

概念

1.像素密度-PPI

每英寸面积的像素数量。

iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。都是3.5寸的手机。

尺寸没变，变的是像素的个数。

2.倍率与逻辑像素

苹果以普通屏为基准，给Retina屏定义了一个2倍的倍率（iPhone 6plus除外，它达到了3倍）。

实际像素除以倍率，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。（可能原始素材图不一样）

3.实战解决

以iPhone 5s为例，屏幕的分辨率是640x1136，倍率是2。

浏览器会认为屏幕的分辨率是320x568，仍然是基准倍率的尺寸。

所以在制作页面时，只需要按照基准倍率来就行了。

在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小显示，保证清晰。

4.一些逻辑像素

ios

iPhone5s 逻辑像素320x568 倍率为2

iPhone 6 逻辑像素375x667  倍率为2

安卓

都说Android碎片化严重，但它现在反而比iOS好处理。

因为如今的Android屏幕逻辑像素已经趋于统一了：360x640。

wap

比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。

这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。

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

总结

移动端的尺寸比PC端复杂，关键就在倍率。

但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

原文链接：http://www.jianshu.com/p/d1c6b78fe9e3