移动端设计尺寸规范.pdf

从原理开始介绍一下移动端设计尺寸规范 初涉移动端设计和开发的同学们， 基本都会在尺寸问题上纠结好一阵子才能 摸到头绪。 我也花了很长时间才弄明白， 感觉有必要写一篇足够通俗易懂的教程 来帮助大家。从原理说起，理清关于尺寸的所有细节。由于是写给初学者的，所 以不要嫌我啰嗦。 现象 首先说现象， 大家都知道移动端设备屏幕尺寸非常多， 碎片化严重。 尤其是 Android ，你 会 听 到 很 多 种 分 辨 率 ： 480x800, 480x854, 540x960, 720x1280, 1080x1920，而且还有传说中的 2K 屏。近年来 iPhone 的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208。 不要被这些尺寸吓倒。 实际上大部分的 app 和移动端网页， 在各种尺寸的屏 幕上都能正常显示。说明尺寸的问题一定有解决方法，而且有规律可循。 像素密度 要知道， 屏幕是由很多像素点组成的。 之前提到那么多种分辨率， 都是手机 屏幕的实际像素尺寸。比如 480x800 的屏幕，就是由 800 行、480 列的像素点组 成的。每个点发出不同颜色的光， 构成我们所看到的画面。 而手机屏幕的物理尺 寸，和像素尺寸是不成比例的。 最典型的例子，iPhone 3gs的屏幕像素是 320x480， iPhone 4s 的屏幕像素是 640x960。刚好两倍，然而两款手机都是 3.5 英寸的。 所以，我们要引入最重要的一个概念： 像素密度，也就是 PPI（pixels per inch）。 这项指标是连接数字世界与物理世界的桥梁。 Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。 1 英寸是一 个固定长度，等于 2.54 厘米，大约是食指最末端那根指节的长度。像素密度越 高，代表屏幕显示效果越精细。 Retina 屏比普通屏清晰很多，就是因为它的像素 密度翻了一倍。 倍率与逻辑像素 再用 iPhone 3gs和 4s 来举例。假设有个邮件列表界面， 我们不妨按照 PC 端 网页设计的思维来想象。 3gs 上大概只能显示 4-5 行，4s 就能显示 9-10 行，而且 每行会变得特别宽。但两款手机其实是一样大的。如果照这种方式显示， 3gs 上 刚刚好的效果，在 4s 上就会小到根本看不清字。 在现实中， 这两者效果却是一样的。 这是因为 Retina 屏幕把 2x2 个像素当 1 个像素使用。比如原本 44 像素高的顶部导航栏，在 Retina 屏上用了 88 个像素 的高度来显示。导致界面元素都变成 2 倍大小，反而和 3gs 效果一样了。画质却 更清晰。 在以前， iOS 应用的资源图片中，同一张图通常有两个尺寸。你会看到文件 名有的带 @2x 字样，有的不带。其中不带 @2x 的用在普通屏上，带 @2x 的用在 Retina 屏上。只要图片准备好， iOS 会自己判断用哪张， Android 道理也一样。 由此可以看出，苹果以普通屏为基准，给 Retina 屏定义了一个 2 倍的倍率 （iPhone 6plus除外，它达到了 3 倍）。实际像素除以倍率， 就得到逻辑像素尺寸。 只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 Android 的解决方法类似，但更复杂一些。 因为 Android 屏幕尺寸实在太多， 分辨率高低跨度非常大，不像苹果只有那么几款固定设备、