对于刚入行的UI
设计师，往往会遇到一个基础问题，就是设计移动APP时，是用什么尺寸或者用哪种屏幕的尺寸是适当的？有的同学花了很长时间也不知道怎么做，为了解决这个问题，今天设计师”十萬個為什麼”为大家从原理开始介绍一下移动端设计尺寸规范。和一些需要注意的问题理解什么是像素密度。
像素密度（pixels per inch）：
也称PPi，即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。折叠计算方法像素密度={1+√[(长度像素数-1)^2+(宽度像素数-1)^2]}/屏幕尺寸
iPhone尺寸篇：
iPhone的屏幕尺寸各不相同，我说的是逻辑像素尺寸，这确实是让人很头疼的事情。如果想用一套设计涵盖所有iPhone，就要选择逻辑像素折中的机型。
从市场占有率数据来看，目前多的是iPhone5/5s的屏幕。倍率为2，逻辑像素320x568。上升势头猛，未来有望登上第一的是iPhone 6的屏幕。倍率为2，逻辑像素375x667。
按照这两种尺寸来设计，都是比较主流的做法。可以兼顾短一些的iPhone 4s，大一点的6 plus也不会过于空旷。
不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意确保清晰。
一、尺寸及分辨率
iPhone界面尺寸：320*480、640*960、640*1136
iPad界面尺寸：1024*768、2048*1536
单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。
二、界面基本组成元素
iPhone的app界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏、内容区域。
这里取用640*960的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。
状态栏：就是我们经常说的信号、运营商、电量等显示手机状态的区域，其高度为：40px
导航栏：显示当前界面的名称，包含相应的功能或者页面间的跳转按钮，其高度为：88px
主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98px
内容区域：展示应用提供的相应内容，整个应用中布局变更为频繁，其高度为：734px
不过在切图的时候要注意，由于iPhone 6 plus的3倍图是由2倍图放大而来，所以位图要注意确保清晰。
从iPhone 6 开始 iOS 的 UI 设计方式更像 web 而不是 app，不同尺寸的 iPhone 上 UI 的结构是一样的，各 UIView 的位置尺寸会有所不同。比如同样的一段文本，iPhone 5S 上要显示5行， iPhone 6 Plus 上可能只要三行，显示它们的 UITextView 的尺寸就会不同。苹果从 iOS 6 开始提供了 Auto Layout ，（Auto Layout Guide: Introduction），他的作用类似 web 中的 CSS，可以用排版语言对 UIView 进行布局，我们只要表达出 UIView 应该靠左、靠右、居中、边距多少等信息，Auto Layout 根据设备尺寸自动计算各 UIView 的 frame。以前 UI 设计喜欢用定位，因为 iPhone 6 之前所有 iPhone 的宽度都是 320 points（注意，不是 pixels），从 iPhone 6 开始将有不同的尺寸（所以叫 Resizeable iPhone），如果用定位就需要针对每种设备做调整，设计师会骂娘的。
还有就是 app 的 Launch Image，因为设备尺寸增多，再结合横屏竖屏，导致的结果是一个 app 要有 n 多个 Launch Image，iOS 8 开始提供了 Launch Screen 的概念，现在可以用一个 xib 文件来作为 Launch Screen，然后用 Interface Builder 对 Launch Screen 进行设计，因为可以使用 Auto Layout，所以我们只需要一个 xib 文件都可以应对所有尺寸的 iPhone。
以前一直觉得 iOS 的 UI 开发不如 Android，通过手工计算 frame 位置来布局简直是石器时代的做法，现在 iPhone 虽然尺寸变多了，不过因为有了成熟的 Auto Layout， UI 的设计和开发变的反而比以前更容易。
Android尺寸篇
都说Android碎片化严重，但它现在反而比iOS好处理。因为如今的Android屏幕逻辑像素已经趋于统一了：360x640，就看你设成几倍了。想以xhdpi为准，就把DPI设成72x2=144。想以xxhdpi为准，就把DPI设成72x3=216。
对于那些比较老的低端机，宽度是480px的那批，画面确实会小一些，显示内容会更少。稍微留意一下，重要内容尽量保持在界面中上部分。
一、尺寸及分辨率
Android界面尺寸：480*800、720*1280、1080*1920。[单位：像素]
Android比iPhone的寸尺多了很多套，建议取用720*1280这个尺寸，这个尺寸720*1280中显示完美，在1080*1920中看起来比较清晰，切图后的图片文件大小也适中，应用的内存消耗也不会过高。
二、界面基本组成元素
Android的app界面和iPhone的基本相同：状态栏、导航栏、主菜单、内容区域。
Android中我们取用的720*1280的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸。状态栏高度为：50px
导航栏高度为：96px
主菜单栏高度为：96px
内容区域高度为：1038px(1280-50-96-96=1038)
Android近出的手机都几乎去掉了实体键，把功能键移到了屏幕中，当然高度也是和菜单栏一样的：96px
Android为了在界面上区别于iOS，Android4.0开始提出的一套HOLO的UI风格一些app的新版本都采用了这一风格，这一风格明显的变化就是将下方的主菜单移到了导航栏下面，这样的方式解决了现在很多手机去除实体键后再屏幕中显示而出现的双底栏的尴尬情景。
在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080x1920，有的喜欢设成720x1280。给出的界面元素尺寸就不统一了。Android的小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。
无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了确保准确高效的
沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。
单位之间的换算关系随倍率变化：
1倍：1pt=1dp=1px（mdpi、iPhone 3gs）
1.5倍：1pt=1dp=1.5px（hdpi）
2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）
3倍：1pt=1dp=3px（xxhdpi、iPhone 6 plus）
4倍：1pt=1dp=4px（xxxhdpi）
一点疑问供探讨
在720 x 1280 px 的设计稿上，有两个按钮（比如登录、注册）并排一行放置，尺寸均为320 x 80 px ，换算为android开发单位就是 160 x 40 dp 。
根据前面的计算方式，如果显示在 480 x 800的手机上，反过来换算为px尺寸就是 240 x 60 px ，此时两个按钮排放在一行，刚好是480px=屏幕横向尺寸，铺满了整行，显然显示效果并不合适。
如果遇到这种情况，如何做呢？咨询android开发工程师，得到的答案是可能需要做自适应处理，不过目前他们都是写固定的dp值。所以我想设计师是否也需要考虑--在基准分辨率下设置的尺寸换算在其他分辨率下，是否也能优雅显示？
