手机UI设计时像素和清晰度是多大?

1.术语和概念

　　Android手机ui设计分辨率基础知识

　　Screen size(屏幕尺寸)

　　指的是手机实际的物理尺寸，比如常用的2.8英寸，3.2英寸，3.5英寸，3.7英寸

　　摩托罗拉milestone手机是3.7英寸

　　Aspect Ratio(宽高比率)

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

　　Milestone是16：9,属于long

　　Resolution(分辨率)

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

　　Milestone是854*480

　　DPI(dot per inch)

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

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

　　Density(密度)

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

　　Density-independent pixel (dip)

　　指的是逻辑密度计算单位,dip和具体像素值的对应公式是dip/pixel=dpi值/160,也就是px = dp * (dpi / 160)

　　2. DPI值计算

　　比如：计算WVGA(800*480)分辨率，3.7英寸的密度DPI，如图1所示

　　图1

Diagonal pixel表示对角线的像素值(=

)，DPI=933/3.7=252

　　3.手机屏幕的分类

　　1)根据手机屏幕密度(DPI)或屏幕尺寸大小分为以下3类，如图2所示

　　图2

　　2)手机屏幕分类和像素密度的对应关系如表1所示：

　　Low density (120), ldpi

　　Medium density (160), mdpi

　　High density (240), hdpi

　　Small screen

　　QVGA (240×320)

　　Normal screen

　　WQVGA400 (240×400)WQVGA432 (240×432)

　　HVGA (320×480)

　　WVGA800 (480×800)WVGA854 (480×854)

　　Large screen

　　WVGA800* (480×800)WVGA854* (480×854)

　　表1

　　3)手机尺寸分布情况(http://developer.android.com/resources/dashboard/screens.html)如图3所示，目前主要是以分辨率为800*480和854*480的手机用户居多

　　图3

　　从以上的屏幕尺寸分布情况上看，其实手机只要考虑3-4.5寸之间密度为1和1.5的手机

　　4. ui设计

　　从开发角度讲，应用程序会根据3类Android手机屏幕提供3套UI布局文件，但是相应界面图标也需要提供3套，如表2所示

　　Icon Type

　　Standard Asset Sizes (in Pixels), for Generalized Screen Densities

　　Low density screen (ldpi)

　　Medium density screen (mdpi)

　　High density screen (hdpi)

　　Launcher

　　36 x 36 px

　　48 x 48 px

　　72 x 72 px

　　Menu

　　36 x 36 px

　　48 x 48 px

　　72 x 72 px

　　Status Bar

　　24 x 24 px

　　32 x 32 px

　　48 x 48 px

　　Tab

　　24 x 24 px

　　32 x 32 px

　　48 x 48 px

　　Dialog

　　24 x 24 px

　　32 x 32 px

　　48 x 48 px

　　List View

　　24 x 24 px

　　32 x 32 px

　　48 x 48 px

　　表2

　　5.如何做到自适应屏幕大小呢?

　　1)界面布局方面

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

　　2)图片资源方面

　　需要根据dpi值准备5套图片资源，drawable，drawalbe-ldpi,drawable-mdpi,drawable-hdpi,drawable-xhdpi

　　Android有个自动匹配机制去选择对应的布局和图片资源

就目前市场状况而言，各种手机的分辨率可以这样判断：
　　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的。
　3、Web
　　手机端网页就没有统一标准了，比较流行的做法是按照iPhone 5的尺寸来设计。倍率2，逻辑像素320x568。
　　这样的做法比较实在，倍率2的屏幕无论在iOS还是Android方面都是主流，而且又是2倍屏幕中逻辑像素最小的。所以图片的尺寸可以保持在较小的水平，页面加载速度快。当然，缺点就是在倍率3的设备上看，图片不是特别清晰。
　　如果追求图片质量，愿意牺牲加载速度，那么可以按照最大的屏幕来设计。也就是iPhone 6 plus的尺寸，倍率3，逻辑像素414x736。
　　总结一下：移动端的尺寸比PC端复杂，关键就在倍率。但也正因为倍率的存在，把大大小小的屏幕拉回到同一水平线，得以保证一套设计适应各种屏幕。站在这条水平线的角度看，会发现它很好理解。

手机UI设计像素为72
1、用于屏幕显示像素为72
2、用于打印，喷绘像素一般为300

　　移动端UI是近几年新兴的一个行业，吸引着设计行业以及非设计行业的众多人开始涉及这个领域。不管你是大神还是菜鸟，都得遵循UI尺寸的那一套设计规范。然而对于新手，这设计规范是神马呢？让我一起来一次手机UI尺寸之旅。
　　IOS
　　第一站、尺寸及分辨率
　　iPhone界面尺寸：320*480、640*960、640*1136（单位都是像素：px）
　　当然在设计当中我们并不需要每一种尺寸都做一套图，建议取用640*960的尺寸设计。
　　第二站、界面组成元素
　　iPhone的APP界面一般由：状态栏、导航栏/标题栏、菜单栏/工具栏以及中间的内容区域组成。以640*960尺寸为例，元素的尺寸：
　　状态栏（status）：高度为40px
　　导航栏（nav）：高度为88px
　　标签栏（tab）：高度为98px
　　内容区域：高度为734px（960-40-88-98=734）
　　至于iPhone5/5s的内容区域高度增加至910px。
　　PS：在IOS7的风格中，苹果已经在开始弱化状态栏的存在，将状态栏和导航栏合在了一起，但是尺寸高度保持不变。
　　第三站、常用字体大小
　　苹果默认中文字体为：黑体-简体
　　以IOS7为例：
　　导航栏标题：34px
　　普通按钮：34px
　　表格头部：34px
　　表格标签：28px
　　页签栏文字：20px
　　Android
　　第一站、尺寸及分辨率
　　Android常用界面尺寸：480*800、720*1280、1080*1920（单位都是像素：px）
　　由于Android的尺寸多种多样，我们只需做几套比较主流的界面尺寸设计即可。
　　第二站、界面组成元素
　　Android的APP界面尺寸与iPhone的界面基本相同：状态栏、导航栏/标题栏、菜单栏/工具栏以及中间的内容区域组成。以720*1280尺寸为例，元素的尺寸：
　　状态栏（status）：高度为50px
　　导航栏（nav）：高度为96px
　　标签栏（tab）：高度为96px
　　内容区域：高度为1038px（1280-50-96-96=1038）
　　第三站、常用字体大小
　　Android常用的字号是：26px

清析度很强