从基本上原理开始如是说呵呵终端端设计体积规范化　　初入终端端设计和开发的全校师生，基本上单厢在体积问题上苦恼好一阵子才能摸到破绽我也花了很长时间才弄明白，感觉有必要写一篇足够易懂的讲义来帮助大家从基本上原理说起，厘清关于体积的所有细节。

由于是所写新手的，因此不要嫌我罗嗦　　现像　　首先说现像，大家都知道终端端设备萤幕体积十分多，碎片化严重尤其是Android，你会听到许多种不同解析度：480x800, 480x854, 540x960, 720x1280, 1080x1920，因此还有传说中的2K屏。

近年来iPhone的碎片化也加剧了：640x960, 640x1136, 750x1334, 1242x2208好的产品设计　　不产品外观设计服务费要被这些体积击垮前述上大部分的app和终端端页面，在各式各样体积的萤幕上都能正常表明。

说明体积的问题一定有化解方法，因此有规律变易　　画素表面积　　要知道，萤幕是由许多画素点共同组成的之前提到所以多种不同解析度，都是手机萤幕的前述画素体积比如说480x800的萤幕，就是由800行、480列的画素点共同组成的。

每个点发出完全相同颜色的光，构成他们所看见的画面而手机萤幕的力学体积，和画素体积是更少的最典型的例子，iPhone 3gs的萤幕画素是320x480，iPhone 4s的萤幕画素是640x960刚好两倍，然而三款手机都是3.5寸的。

因此，他们要引入最重要的一个基本上概念：画素表面积，也就是PP好的产品设计I（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个画素的高Loupe表明导致介面元素都变成2倍大小，反而和3gs效用那样了。

解像度却更明晰　　在以前，iOS应用的资源图片中，同一张图通常有两个体积你会看见配置文件有的带2x字样，有的峭腹其中峭腹2x的用在一般屏上，带2x的用在Retina屏上如果图片准备好，iOS会他们判断用哪张，Android道理也那样。

由此可以看出，苹果公司以一般瓦霍基准，给Retina屏表述了一个2倍的放大率（iPhone 6plus除外，它达到了3倍好的产品设计）前述画素除以放大率，就得到方法论像产品外观设计服务费素体积如果两个萤幕方法论画素完全相同，它们的表明效用就是完全相同的。

　　Android的化解方法类似，但更复杂一些即使Android萤幕体积实在太多，解析度高低跨距十分大，不像苹果公司只有所以三款一般来说设备、一般来说体积因此Android把各式各样设备的画素表面积划进了好几个覆盖范围区间，给完全相同覆盖范围的设备表述了完全相同的放大率，来保证表明效用相近。

画素表面积基本上概念虽然重要，但用不着他们他们算，iOS与Android都帮他们算好了　　总的来看，画素表面积在120以内的萤幕归入ldpi，160以内的归入mdpi，以此类推这样，所有的Android萤幕都找到了他们的位置，并赋予了相应的放大率：。

ld好的产品设计pi [0.75倍]　　mdpi [1倍]　　hdp产品外观设计服务费i [1.5倍]　　xhdpi [2倍]　　xxhdpi [3倍]　　xxxhdpi [4倍]　　各型号iPhone的放大率比较简单，他们后面会讲到。

所以Android手机所以多，具体怎么分？哪些手机是几倍的放大率呢？他们先看一张表，这是友盟2014年10月到2015年03月的数据：　　就目前市场状况而言，各式各样手机的解析度可以这样粗略判断虽然不全面，但至少在1年内都还有一定的参考意义：。

ldpi 如今已绝迹，不用考虑　　mdpi [320x480]（市场份额不足5%，新手机不会有这种放大率，萤幕通常都特别小）　　hdpi [480x好的产品设计800、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作为基准画素表面积更高或者更低的设备，只需乘以相应的放大率，就能得到与基准放大率近似的表明效用。

不过需要注意的是，Andro好的产品设计id设备的方法论画素体积并不统一比如说两种常见的萤幕480x800和1080x1920，它们分别属于hdpi和xxhdp产品外观设计服务费i除以各自放大率1.5倍和3倍，得到方法论画素为320x533和360x640。

很显然，后者更宽更高，能表明更多内容因此，即使有放大率的存在，各式各样Android设备的表明效用仍然无法做到完全一致　　单位　　不难发现，真正决定表明效用的，是方法论画素体积为此，iOS和Android平台都表述了各自的方法论画素单位。

iOS的体积单位为pt，Android的体积单位为dp说实话，两者其实是一回事　　单位之间的换算关系随放大率变化：　　1倍：1pt=1dp=1px（mdpi、iPho好的产品设计ne 3gs）　　1.5倍：1pt=1dp=1.5px（hdpi）

　　2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）　　3倍产品外观设计服务费：1pt=1dp=3px（xxhdpi、iPhone 6）　　4倍：1pt=1dp=4px（xxxhdpi）

　　单位决定了他们的思考方式在设计和开发过程中，应该尽量使用方法论画素体积来思考介面设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280给出的介面元素体积就不统一了。

Android的最小点击区域体积是48x48dp，这就意味着在xhdpi的设备上，按钮体积至少是96x96px而在xxhdpi好的产品设计设备上，则是144x144px　　无论画布设成多大，他们设计的是基准放大率的介面样式，因此开发人员需要的单位都是方法论画素。

因此为了保证准确高效的沟通，双方都需要产品外观设计服务费以方法论画素体积来描述和理解介面，无论是在标注图还是在日常沟通中不要再说“底部标签栏的高度是96画素，我是按照xhdpi做的”这样的话了　　Web怎么办

　　终端端页面的绝对单位仍然是px，至少代码里这么写，但它的道理也和app那样由于画素表面积是设备本身的固有属性，它会影响到设备中的所有应用，包括浏览器前端技术可以善加利用设备的画素表面积，只需一行代码，浏览器便会使用app的表明方式来渲染页面。

根据画素表面积，按相应放大率缩放　　可以通好的产品设计过这个测试页面 来看看你的终端设备萤幕宽度，这是方法论画素宽度　　以iPhone产品外观设计服务费 5s为例，萤幕的解析度是640x1136，放大率是2浏览器会认为萤幕的解析度是320x568，仍然是基准放大率的体积。

因此在制作页面时，只需要按照基准放大率来就行了无论什么样的萤幕，放大率是多少，都按方法论画素体积和开发页面只不过在准备资源图的时候，需要准备2倍大小的图，通过代码把它缩成1倍大小表明，才能保证明晰　　前述应用

大家最关心的还是前述运用，画布该怎么设置他们就iOS、Android、Web三个平台来分别梳理呵呵不过在这之前，我要为使用PS进行设计的朋友如是说一个小技巧　　之前我说过，他们要以方法论好的产品设计画素体积来思考介面。

体现到设计过程中，就是要把单位设置成方法论画素打开PS的首选项——单产品外观设计服务费位与标尺介面，把体积和文字单位都改成点（Point）这里的点也就是pt，无论设计iOS、Android还是Web应用，单位都用它。

当然，各平台单位名称还是要记住的这里他们用的只是它的基本上原理，不用在意名称　　要调节放大率，则通过图像大小里的DPI来控制这个DPI，其实就是PPI，画素表面积有个常识大家都知道，萤幕上的设计DPI设成72，印刷品设计DPI设成300。

为什么是这两个数字？　　首先说300，这和人眼的分辨能力有关由于1寸是一般来说宽度，每1寸有多少个画素点决定了解像度明晰程度之前说过，这就是像好的产品设计素表面积，也就是DPIDPI达到300以上，其细腻程度就会给人真实感，像真实世界中的物件。

相反，产品外观设计服务费DPI只有10的话，在你一个食指叶唇柱大小的宽度内只有10个画素，这明显就是马赛克了因此印刷品要设成300，才能保证明晰　　再说72，这有一定的历史原因最早的图形设计是在mac电脑上进行的，mac本身的表明器解析度就是72。

PS中把图像DPI也设成72，就能保证萤幕上表明的体积和打印体积完全相同，便于设计72的PC表明器解析度逐渐成为一种默认的行业标准，这套规则就这么沿用下来　　现在回到正题，他们怎么通过DPI来调节放大率？既然萤幕本身的解析度是72，DPI设成72刚好是1倍体积，那设成72的好的产品设计两倍就是放大率为2的萤幕了，就这么简单。

　　下面来看看3个平台各自的画布设置：　　iPhone　　iPhone的萤幕体积各产品外观设计服务费不完全相同，我说的是方法论画素体积，这确实是让人很头疼的事情如果想用一套设计涵盖所有iPhone，就要选择方法论画素折中的机型。

　　从市场占有率数据来看，目前最多的是iPhone5/5s的萤幕放大率为2，方法论画素320x568上升势头最猛，未来有望登上第一的是iPhone 6的萤幕放大率为2，方法论画素375x667　　按照这两种体积，都是比较主流的做法。

可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷　　不过在切图的时候要注意，由于iPhone 6 p好的产品设计lus的3倍图是由2倍图放大而来，因此位图要注意保证明晰　　Android　　都说Android碎片化严重，但它现在反而比iOS好处理产品外观设计服务费。

即使如今的Android萤幕方法论画素已经趋于统一了：360x640，就看你设成几倍了想以xhdpi为准，就把DPI设成72x2=144想以xxhdpi为准，就把DPI设成72x3=216　　对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，表明内容会更少。

稍微留意呵呵，重要内容尽量保持在介面中上部分　　当然，这些机型不出一年就会被边缘化，基本上淘汰现在能运转的也是当作功能机在用，软件多了必卡无疑，用户体验无从谈起不作考虑也是OK的好的产品设计　　Web　　手机端页面就没有统一标准了，比较流行的做法是按照iPhone 5的体积。

放大率2，方法论画素320x568　　这样的做法比较实在，放大率2的产品外观设计服务费萤幕无论在iOS还是Android方面都是主流，因此又是2倍萤幕中方法论画素最小的因此图片的体积可以保持在较小的水平，页面加载速度快。

当然，缺点就是在放大率3的设备上看，图片不是特别明晰　　如果追求图片质量，愿意牺牲加载速度，所以可以按照最大的萤幕也就是iPhone 6 plus的体积，放大率3，方法论画素414x736　　总结　　终端端的体积比PC端复杂，关键就在放大率。

但也正即使放大率的存在，把大大小小的萤幕拉回到同一水平线，得好的产品设计以保证一套设计适应各式各样萤幕站在这条水平线的角度看，会发现它很好理解　　1　　6　　分享到：　　0　　喜欢他，就推荐他上首页吧^_^