手机ui设计分辨率-勤学培训网

　　初涉移动端设计和开发的同学们，基本都会在尺寸问题上纠结好一阵子才能摸到头绪。我也花了很长时间才弄明白，感觉有必要写一篇足够通俗易懂的教程来帮助大家。从原理说起，理清关于尺寸的所有细节。

　　术语和概念

　　1）Screen size（屏幕尺寸)

　　一般表示是手机的实际物理尺寸，屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米。

　　比如常见的屏幕尺寸有3.5、3.7、4.2、5.0、5.5、6.0等。

　　2）Aspect Ratio(宽高比率)

　　指的是实际的物理尺寸宽高比率,分为long和nolong

　　Milestone是16：9,属于long

　　3）Resolution(分辨率)

　　和电脑的分辨率概念一样，指手机屏幕纵、横方向像素个数

　　Milestone是854*480

　　4）DPI(dot per inch)

　　每英寸像素数，如120dpi,160dpi等,假设QVGA(320*240)分辨率的屏幕物理尺寸是（2英寸*1.5英寸），dpi=160

　　可以反映屏幕的清晰度，用于缩放UI的

　　5）Density(密度)

　　屏幕里像素值浓度，resolution/Screen size可以反映出手机密度,

　　Density-independent pixel (dip)

　　2. DPI值计算

　　比如：计算WVGA（800*480）分辨率，3.7英寸的密度DPI

　　Diagonal pixel表示对角线的像素值（=），DPI=933/3.7=252

　　3.手机屏幕的分类

　　1)根据手机屏幕密度(DPI)或屏幕尺寸大小分为以下3类

　　4、如何做到自适应屏幕大小呢？

　　1）界面布局方面

　　需要根据物理尺寸的大小准备5套布局，layout(放一些通用布局xml文件，比如界面中顶部和底部的布局，不会随着屏幕大小变化，类似windos窗口的title bar),layout-small(屏幕尺寸小于3英寸左右的布局），layout-normal(屏幕尺寸小于4.5英寸左右），layout-large(4英寸-7英寸之间），layout-xlarge(7-10英寸之间）

　　2）图片资源方面

　　需要根据dpi值图片，Android有个自动匹配机制去选择对应的布局和图片资源。

　　像素密度

　　要知道，屏幕是由很多像素点组成的。之前提到那么多种分辨率，都是手机屏幕的实际像素尺寸。比如480x800的屏幕，就是由800行、480列的像素点组成的。每个点发出不同颜色的光，构成我们所看到的画面。而手机屏幕的物理尺寸，和像素尺寸是不成比例的。典型的例子，iPhone 3gs的屏幕像素是320x480，iPhone 4s的屏幕像素是640x960。刚好两倍，然而两款手机都是3.5英寸的。所以，我们要引入重要的一个概念：像素密度，也就是PPI（pixels per inch）。这项指标是连接数字世界与物理世界的桥梁。Pixels per inch，准确的说是每英寸的长度上排列的像素点数量。1英寸是一个固定长度，等于2.54厘米，大约是食指末端那根指节的长度。像素密度越高，代表屏幕显示效果越精细。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。

　　就目前市场状况而言，各种手机的分辨率可以这样判断：

　　1、iPhone

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

　　从市场占有率数据来看，目前多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。

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

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

　　2、Android

　　都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。

　　对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。

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