手机APP UI设计尺寸基础知识教案.pdfVIP

手机A PP U I设计尺寸基础知识 推荐语 ：初入开发和设计的同学的福利 ，移动端详细的设计干 。 初涉移动端设计和开发的同学们 ，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很 长时间才弄明白 ，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起 ，理清关于尺寸 的所有细节。由于是写给初学者的 ，所以不要嫌我啰嗦。 现象 首先说现象 ，大家都知道移动端设备屏幕尺寸非常多 ，碎片化严重。尤其是A ndro id ，你会听到很 多种分辨率 ：4 80×800, 4 80×854 , 54 0×960, 720×1280, 1080×1920 ，而且还有传说中的2K屏。近 年来iPho ne的碎片化也加剧了 ：64 0×960, 64 0×1136, 750×1334 , 1242×2208。 不要被这些尺寸吓倒。实际上大部分的app和移动端网页 ，在各种尺寸的屏幕上都能正常显示。说 明尺寸的问题一定有解决方法 ，而且有规律可循。 像素密度 　　要知道 ，屏幕是由很多像素点组成的。之前提到那么多种分辨率 ，都是手机屏幕的实际像素 尺寸。比如4 80×800的屏幕 ，就是由800行、4 80列的像素点组成的。每个点发出不同颜色的光 ， 构成我们所看到的画面。而手机屏幕的物理尺寸 ，和像素尺寸是不成比例的。最典型的 例子 ，iPho ne 3gs的屏幕像素是320×4 80 ，iPho ne 4s的屏幕像素是64 0×960。刚好两倍 ，然而两 款手机都是3.5英寸的。 所以 ，我们要引入最重要的一个概念 ：像素密度 ，也就是PPI(pi els per inch)。这项指标是连接数 字世界与物理世界的桥梁。 　　Pi els per inch ，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度 ，等 于2.54厘米 ，大约是食指最末端那根指节的长度。像素密度越高 ，代表屏幕显示效果越精细。 Ret ina屏比普通屏清晰很多 ，就是因为它的像素密度翻了一倍。 倍率与逻辑像素 　　再用iPho ne 3gs和4s来举例。假设有个邮件列表界面 ，我们不妨按照PC端网页设计的思维来 想象。3gs上大概只能显示4 -5行 ，4s就能显示9- 10行 ，而且每行会变得特别宽。但两款手机其实是 一样大的。如果照这种方式显示 ，3gs上刚刚好的效果 ，在4s上就会小到根本看不清字。 　　在现实中 ，这两者效果却是一样的。这是因为Ret ina屏幕把2×2个像素当1个像素使用。比如原 本44像素高的顶部导航栏 ，在Ret ina屏上用了88个像素的高度来显示。导致界面元素都变成2倍 大小 ，反而和3gs效果一样了。画质却更清晰。 在以前 ，iO S应用的资源图片中 ，同一张图通常有两个尺寸。你会看到文件名有的带@2 字样 ，有 的不带。其中不带@2 的用在普通屏上 ，带@2 的用在Ret ina屏上。只要图片准备好 ，iO S会自己 判断用哪张 ，A ndro id道理也一样。 由此可以看出 ，苹果以普通屏为基准 ，给Ret ina屏定义了一个2倍的倍率(iPho ne 6plus除外 ，它达 到了3倍)。实际像素除以倍率 ，就得到逻辑像素尺寸。只要两个屏幕逻辑像素相同 ，它们的显示效 果就是相同的。 　　A ndro id的解决方法类似 ，但更复杂一些。因为A ndro id屏幕尺寸实在太多 ，分辨率高低跨度非 常大 ，不像苹果只有那么几款固定设备、固定尺寸。所以A ndro id把各种设备的像素密度划成了好 几个范围区间 ，给不同范围的设备定义了不同的倍率 ，来保证显示效果相近。像素密度概念虽然 重要 ，但用不着我们自己算 ，iO S与A ndro id都帮我们算好了。 　　如图所示 ，像素密度在120左右的屏幕归为ldpi ，160左右的归为mdpi ，以此类推。这样 ，所有 的A ndro id屏幕都找到了自己的位置 ，并赋予了相应的倍率 ： ldpi [0.75倍] mdpi [1倍] hdpi [1.5倍] hdpi [2倍] hdpi [3倍] hdpi [4倍] 各型号iPho ne的倍率比较简单 ，我们后面会讲到。那么A ndro id手机那么多 ，具体怎么分?哪些手机 是几倍的倍率呢?我们先看一张表 ，这是友盟2014年10月到2015年03月的数据 ： 　　就目前市场状况而言 ，各种手机的分辨率可以这样粗略判断。虽然不全面 ，但至少在1年内都还 有一定的参考意义 ： ldpi 如今已绝迹 ，不用考虑