android app界面设计规范(dpi,dp,px等)
PPI(Pixels per inch)：每英寸所拥有的像素数，即像素密度。
DPI(dots per inch)：即每英寸上，所能印刷的网点数，一般称为像素密度。ppi计算公式：ppi = 屏幕对角线像素数/屏幕对角线英寸数，通过勾股定理计算屏幕对角线像素数。
Screen Size(屏幕尺寸)：手机屏幕尺寸大小，如3英寸、4英寸、4.3英寸、5.7英寸，指的是对角线的长度。
DIP（device independent pixel）：即dip/dp，设备独立像素。 1px = 1dp density(由dpi决定)
Resolution(分辨率)：指手机屏幕垂直和水平方向上的像素个数。eg分辨率480 800，指该设备垂直方向有800个像素点，水平方向有480个像素点。
px(Pixel像素)：相同像素的ui，在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真，大分辨率上被缩小。
Android Design里把主流设备的 dpi 归成了四个档次： 120 dpi、160 dpi、240 dpi、320 dpi ，具体见如下表格。
实际开发当中，我们经常需要对这几个尺寸进行相互转换（比如先在某个分辨率下完成设计，然后缩放到其他尺寸微调后输出），一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。
也就是说如果以 160 dpi 作为基准的话，只要尺寸的 DP 是 4 的公倍数，XHDPI 下乘以 2，HDPI 下乘以 1.5，LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准，那需要 DP 是 3 的公倍数，XHDPI 下乘以 1.333，MDPI 下乘以 0.666 ，LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备（HTC的T-Mobile G1）是属于160dpi的。鉴于以上各种原因， 标准dpi=160
谷歌官方对dp的解释如下：
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.
简单来说，以160dpi的设备为准，该设备上1dp = 1px；如果屏幕密度大，1dip代表的px就多，比如在320dpi的屏幕上，1dip=2px(即1dp代表2个像素)。在app开发时，最好用dp来做界面的布局，以保证适配不同屏幕密度的手机。
dp和px的换算公式：
我的理解，该公式表示px的数值等于dp的数值*（设备dpi/160）
注意，px、dp是单位，但density没单位。
applyDimension的源码如下，可参考：
android的尺寸众多，建议使用分辨率为 720x1280 的尺寸设计。这个尺寸 720x1280中显示完美，在 1080x1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。
app启动图标为48*48dp，对应各dpi设备，图像资源像素如下：
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|48 48px|72 72px|94 96px|144px 144px|
操作栏图标为32*32dp，对应各dpi设备，图像资源像素如下：其中图形区域尺寸是24*24dp，可参考平时ui切图会有部分留白。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|32 32px|48 48px|64 64px|96px 96px|
通知栏图标为24*24dp，对应各dpi设备，图标像素如下：
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|24 24px|36 36px|48 48px|72px 72px|
某些场景需要用到小图标，大小应当是16*16dp，其中图形区域尺寸12*12dp。
| mdpi | hdpi | xhdpi | xxhdpi |
| ---:| ---: | ---:| ---:| ---:|
|16 16px|24 24px|32 32px|48px 48px|
目前，很多UI设计师的UI设计稿是先做iPhone6(750×1334)的，目的是向上适配iPhone6Plus，同时向下适配iPhone5和iPhone4的尺寸。这一节课也算是25学堂为大家精心整理的iPhone6界面设计尺寸规范大全。
iOS篇
————————————————————————————————————
界面尺寸
☆ 状态栏(status bar)：就是电量条，其高度为：40px；
☆ 导航栏(navigation)：就是顶部条，其高度为：88px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；
☆ 内容区域(content)：就是屏幕中间的区域，其高度为：1334px-40px-88px-98px=1108px
| 设备|App Store|程序应用|主屏幕|spotlight搜索|标签栏|工具栏和导航栏|
| :-------------:|:-------------:| :-----:|:-----:|:-----:|
|iPhone6 plus（@3x）|1024 1024px|180 180px|144×144px|87×87 px|75 75px|66 66px|
|iPhone6（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPhone5 - 5s - 5c（@2x） |1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPhone4 - 4s（@2x）|1024 1024px|120 120px|144×144px|58 58px|75 75px|44 44px|
|iPad3 - 4 - Air - Air2 - mini2|1024 1024px|180 180px|144×144px|100 100px|50 50px|44 44px|
|iPad1 - 2|1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|
|iPad mini |1024 1024px|90 90px|72 72px|50 50px|25 25px|22 22px|
字体
iPhone 上的字体英文为： HelveticaNeue 至于中文，Mac下用的是黑体-简，Win下则为华文黑体，所有字体要用双数字号。
百度用户体验部做过一个小调查， 对于app字体大小的调查结论如下：
☆ 状态栏(status bar)：就是电量条，其高度为：20px；
☆ 导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；
☆ 信号格：5 * 5
☆ wifi 图片：11 * 9
☆ 锁：11 * 11
☆ 导航：8 * 8
☆ 电量：22 * 9
☆ 闪电：5 * 8
☆ 状态栏中的文字：10px
☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。
☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是：10px, 12px，14px，16px。
① 文字黑色：#282828
② 文字深灰色：#656565
③ 文字浅灰色：#989898
④ 边框浅灰色：#C3C3C3
⑤ 背景淡灰色：#f2f2f2
⑥ 按钮背景纯白色：#ffffff
A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。
B、亲密距离：比如，左边图标与右边文字之间的距离。
1、iPhone6手机模型尺寸：429x881px
2、界面尺寸布局：满屏尺寸375x667px
3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；
4、各区域图标大小导航栏图标16px，底部标签栏图标23px；
5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；
6、常用的文字大小：16px，14px，12px，10px；
7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色： #323232，边框色深灰：#CCCCCC；
8、常用可点击区域的高度（比如搜索区域）：28px；
9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；
10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；
1.平面设计师： 限于2d广告设计，比如名片、海报、宣传画册、单页等等，做出来的UI可执行性很低，很多和原生系统相斥，工程师会很头疼。无规范可言。
2.UI设计师：限于软件UI的设计，一般的工程师拿到设计文件执行起来没有很大难度，但是做出来的平面没有创意，从技术上来看一般，想要让人眼前一亮或是加上营销的想法很难。无规范可言。
3.视觉设计师：有很好的审美观念，有平面设计大作，针对不同场所，不同功能的设计有自己独特的见解与经验；有3D设计经验，一般都有家居、建筑设计经验；对于不同系统的软件UI与UE都有研究，并针对不同功能的应用规划其功能流程让UI的不仅美观并且易于上手。 对于每一个公司或项目群都有其规范文档。
然而我就遇到过第一种，请不起第二种和第三种，平面压力很大导致辞职的较多，交接工作时我是来一个又要和他重新说一遍，一直觉得应该出个文档，看完之后能够马上上手的那种，现在才知道原来是叫做视觉设计规范文档
注明使用版本、设计操作系统、与开发时要说明的
1.指导分工协作
2.避免重复工作
3.视觉统一 ，形象加分
4.让思路更加清晰，工作更加高效
视觉设计师、平面设计师、交互设计师、产品经理、程序员、市场运营人员、前端开发、软件测试
色调：确认主题色、组件色
字号：根据实际用途与场景适配，以实际效果良好为准，确定一个适合值即可。
通用组件样式：将整个UI设计中能够通用的组件统一风格，比如：对话框，提示框，确认信息框等
不同状态下组件样式：不同状态下的组件样式一般为相同的，针对使用场景以实际效果为准
间距：框架中的间距、元素与元素之间的间距
图片规范：不同页面、位置、图片的尺寸、颜色等等参数要求
不同适用版本：平板、手机、电脑等不同版本
整体框架修饰：将整体框架固定，作为模板往里填，有利于掌控整体风格
不同级别子页面风格：不同子界面的设计可以完全放给下个设计师，有需要也可以进行限制
第一步确定清晰的流程与思路
第二步：
适配尺寸 ：android、ios不同系统、不同设备 表格或结构图表现
可参考 android尺寸等规范参考
要注意的是：
anrdoid 要切图，将图标和图片元素切为hdpi、xhdpi、xxhdpi三套，放入三个文件夹中打包
ios要切图，将图标和图片元素切为@2x,@3x两套，放入两个文件夹中打包
第三步：
确认主题色与元素色
在appstyle系统统一默认配色中设置为主题色
在其他元素比如：分割线颜色、卡片阴影颜色深度、重要颜色文字深度等等
第四步：
文字
苹果常用字体 点这里！
不同地方、用途中文字的字体、字号
第五步：
图标
统一的尺寸，特殊用途的注明、不同状态的请附加
第六步：
按钮
按钮的样式与不同状态的样式、尺寸
悬浮按钮56dp，普通按钮48dp
第七步：
公共控件
比如对话框
第八步：
模块
确定某个模块的风格
第九步：
布局
确定大致布局风格
一次性不能将规范全都覆盖到位，可以不断的添加并注明添加人和时间，经过设计部审核才能生效发布。
