1、一、Android 设计常识开始介绍之前先帮大家梳理一下 Android 常用单位，方便各位亲们更好的掌握并了解 Android 端设计规范。1.1 Android 常用单位1.1.1.PPI(pixels per inch)：数字影像的解析度，也就是每英寸所拥有的像素数，即像素密度；PPI 计算公式：ppi=（长度像素数 2 + 宽度像素数 2）/屏幕对角线英寸数1.1.2.DPI(dots per inch)：是指印刷上的计量单位，也就是每英寸上能印刷的网点数，我们设计用于显示器的默认为（72 像素/英寸）就好了；1.1.3.屏幕尺寸（Screen Size）：一般我们所说的手机屏幕尺寸，
2、比如 3 英寸、5.5 英寸等，都是指对角线的长度，而不是手机的面积；1.1.4.分辨率（Resolution）：是指手机屏幕垂直和水平方向上的像素个数，比如分辨率为：720*1280，是指设备水平方向有 720 个像素点，垂直方向有 1280个像素点1.1.5.px( pixels)： 像素，不同设备显示效果相同1.1.6.pt（ point）：一个标准的长度单位，ios 的逻辑单位，1Pt=1/72 英寸，用于印刷业，非常简单易用；标注字体大小（72 是早期台式机的 DPI）1.1.7.sp（Scaled-independentpixels）：放大像素， 安卓的字体单位；1.1.8.Dp（
3、Density-independentpixels ）：是指设备的独立像素，不同的设备有不同的显示效果，它与设备硬件有关系；sp 和 dp 基本一样，是 android 开发里特有的单位，都是为了保证文字在不同密度的显示屏上显示相同的效果；dp 与设备硬件有关，与屏幕密度无关，sp与屏幕密度和设备硬件均无关；1.2 换算关系android 开发中，文字大小的单位是 sp，非文字的尺寸单位用 dp，但是我们在设计稿用的单位是 px。这些单位如何换算，是设计师、开发者需要了解的关键。* dp：以 160PPI 屏幕为标准，则 1dp=1px。dp 和 px 的换算公式 ：dp*ppi/160 =
4、px。对于 320ppi 的屏幕，1dp x 320ppi/160= 2px。* sp：它是安卓的字体单位，以 160PPI 屏幕为标准，当字体大小为 100%时， 1sp=1px。sp 与 px 的换算公式： sp*ppi/160= px。对于 320ppi 的屏幕， 1sp x 320ppi/160 = 2px。简单理解的话，px（像素）是我们 UI 设计师在 PS 里使用的，同时也是手机屏幕上所显示的，dp 是开发写 layout 的时候使用的尺寸单位。dp 和 px 的换算公式 ：dp*ppi/160 =px 或者 px=dp*ppi/160。为什么要把 sp 和 dp 代替 px？原
5、因是他们不会因为 ppi 的变化而变化，在相同物理尺寸和不同 ppi 下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而 px 则不行。根据单位换算方法，可总结出：当运行在 mdpi 模式下时，1dp=1px ：也就是说设计师在 PS 里定义一个item 高 48px，开发就会定义该 item 高 48dp ；当运行在 hdpi 模式下时，1dp=1.5px ：也就是说设计师在 PS 里定义一个item 高 72px，开发就会定义该 item 高 48dp ；当运行在 xhdpi 模式下时， 1dp=2px ：也就是说设计师在 PS 里定义一个item 高 96px，开发就会定义该 it
6、em 高 48dp ；具体换算关系如下：ldpi 模式下 1dp=0.75pxmdpi 模式下(baseline) 1dp=1pxhdpi 模式下 1dp=1.5pxxhdpi 模式下 1dp=2pxxxhdpi 模式下 1dp=3pxXxxhdpi 模式下 1dp=4px小结：其实对于我们设计师来讲，我们做效果图的单位仍然是 px，那些sp、dp、pt 单位都是 Android 开发中所使用到的单位，但是我们必须要了解每种单位的含义以及它们之间的关系，这样才能使我们的设计更加统一和完美。1.3 Android 屏幕分辨率Android 按照 DPI 分为了 LDP、MDPI 、HDPI、 X
7、HDP 和 XXHDPI 五类，Android 4.3 还添加了 XXXHDPI 这个新的 DPI 分类。下面是 Android 界面尺寸详细总结：目前主流的安卓手机分辨率有以下 3 种：hdpi，对应 480*800 的手机。主流机型：小米 1 ，1s 三星 htc 等xdpi，对应 720*1280 的手机。主流机型：三星 Galaxy 系列和华为 p6 等xxdpi，对应 1080*1920 的手机。主流机型：小米手机，华为荣耀手机系列为主加上 htc one下面是当面流行的安卓手机的屏幕尺寸和分辨率：1.4 设计稿基本元素的尺寸设置Android 手机那么多，具体怎么分？哪些手机是几倍
8、的倍率呢？我们设计人员需要按照哪个尺寸进行设计？我们先看一张表，这是友盟 2014 年 10 月到2015 年 03 月的数据：从友盟的分辨率占比数据来看：720*1280 的手机占比最高为31.9%，800*480 的手机占比为 18.5%位居第二，而 540*960 的手机占比最少为 9.8% ，xxdhpi 模式的高分辨率 1080 * 1920 手机占比也越来越高，目前为 10.2% 。所以我没可以得出结论：目前 Android 主流手机屏幕分辨率为：xdhpi 模式的高分辨率 720*1280。在目前我们的安卓 APP 设计项目当中，我们并不会去为每一种分辨率去设计一套 UI 界面。
9、为每一种分辨率单独设计一套 UI 界面，这是一种追求完美和理想的状态。所以，这个时候我们需要学会变通，为了适应多分辨率，我们一般选择一个较合适的分辨率最为基准，以下 3 种方法分别是我经常用到的方式，仅供大家参考：方法 1以中间尺寸（xdpi：720*1280px）作为基准，然后放大或缩小，以适应到其他尺寸；不足之处是，对于更高分辨率的手机，图标被放大后会导致质量不高。方法 2以较大尺寸（xxdpi ：1080*1920px）作为基准，然后缩小，并适应到所需的最小屏幕尺寸；缺点是，图标等若都是最大尺寸，加载时速度慢且耗费流量较多，对于小分辨率的用户也不够好。方法 3有些时候我们也会在实际开发过
10、程中，Android 和 ios 的设计稿若无太大差异，也可从 ios 的分辨率（750*1334px ）开始，再调整设计稿的比例，适应其他分辨率；不足之处：在切图的时候需要做一些图片的调整，如果不是矢量图的原件，需要重新按照 720*1280 的尺寸设计下。结合友盟的分辨率占比数据、也为了方便换算到 android 开发中的尺寸单位，推荐设计稿的画布尺寸选用 720X1280px，分辨率为 72ppi（像素/ 英寸）。一、Android 设计规范2.1 界面基本组成元素Android 的 APP 界面和 iphone 的界面基本相同：状态栏+导航栏+主菜单栏+内容区域具体大小请参照 1.3
11、中 Android 界面尺寸2.2 字体设计规范安卓 4.0 之后用的字体是 Roboto。中文字体：方正兰亭黑体，是谷歌自己的字体，与微软雅黑很像。2.3 界面图标规范界面中图形的实现由两种，一种是用图片，另一种是代码画出来。代码画的方式比较耗费程序员脑力和代码量，图片则耗费空间，增加 APP 的体积。一般是偏重使用图片，但是一些简单形状的按钮可以直接让程序员画出来即可。2.3.1 切图要点1.有一些小的 icon 式按钮，不能只切到 icon 边缘，而是要考虑到最终实现的时候，是把这个图片做成按钮，和用户交互。所以必须要多留一些透明的边，让能点击的图片在 8888 以上，这样用户才保证比较
12、好点到。2.对于不改变可见图形而又需要加大点击区域的图。那么切图的时候建议在可见图形的四周都加上 1 像素的透明，这是为了放大拉伸而不产生可见区域的图像失真。3.切图的高度。对于一个通用的背景图，如文字圆角边框背景，那么切图的时候并不是效果图上有多高就切多高，为了通用而是只需切一行文字的高度就可以了。不过这也不是绝对的，准确的说应该切的高度为H=paddingTop+textHeight+paddingBottom，及文字相对背景的上边距+一行文字的高度+文字相对背景的下边距。4.切图的宽度。如果是一个通用的背景图，那么他的宽度应该是他在效果图中的最小宽度，也就是说这个背景可能在多处使用到了，
13、就取最小的那个宽度就可以了。比较麻烦的是铺满全屏的时候，这就需要看看你做的效果图的宽屏宽度，所以说做效果图的时候最好是做小屏幕的效果图。有人可能会问点 9 的图不是可以拉伸、压缩吗，为什么需要参考最小的宽度呢？根据个人经验发现，一个大图在屏幕小的情况下点 9 图中拉伸的部分会变得颜色更深。5.以每个模块分开创建文件夹存放切图资源；这样更有助于程序员在每个模块的时候找到相应的图片；6.所有切图尺寸必须是偶数，一般是 png-24 格式；2.3.2 底部工具栏 icon 切图（有两种方法）方法 1：icon 单独切，有默认和选中两种状态方法 2：icon + 文字一起切，有默认和选中两种状态2.3
14、.3 切图命名规范：下面是常用的一些命名缩写：导航栏：nav 主菜单栏： tab 背景：bg 按钮：btn按钮常态：nor 按钮选中：sel 按钮按下：down 图标：icon搜索：search 个人资料： proflie 用户：user 弹出：pop返回：back 刷新： refresh 删除： delete 编辑：edit例如：nav_bg、tab_btn_sel2.3.4 点九切图：首先我们要知道什么是点 9 图：点九图是 andriod 平台的应用软件开发里的一种特殊的图片形式，是一种可拉抻而不失真的图，文件扩展名为：.9.png。其实相当于把一张 png 图分成了 9 个部分（九宫格
15、），分别为 4 个角（图中：1、3、6、8），4 条边（图中： 2、4、5、7），以及一个中间区域（图中：9）。比如我们的微信、QQ 的聊天气泡就是典型的点 9 图，因为聊天气泡需要随文字的多少进行拉抻。一般图在整体放大时会出现失真的情况，而点 9 图是把图中某些部分进行拉抻，而不重复的地方，比如圆角和光泽等部分都不做变化，以此来实现图片的放大，不会出现失真的情况。接着我们来说一下点 9 图的绘制方法：当然点 9 图的绘制方法也有很多种，直接用点 9 切图的软件，譬如：draw9patch 、cutterman 等，安卓开发中的SDK 里有 tools 文件夹，里面有一个 draw9patch
16、.bat，或者直接用 ps 绘制点 9 切图；我个人还是习惯用 ps 直接绘制点 9 图，因为软件有时候自己把握不好尺寸导致点 9 图在程序中识别出现问题。Ps 绘制点 9 图的步骤：确定切图后直接改变图片的画布大小；手动将上下左右各增加 1px 留白；使用铅笔工具，手动绘制拉伸区域，色值必须为黑色（#000000），透明度 100%；左上为拉伸区域，右下为内容显示区域存储为 web 所用格式，选择 png-24，储存时手动将后缀名改为xxx.9.png；2.4 48dp 规律48dp 规律：通常把 48dp 作为可触摸的 UI 元件的标准。为什么要用 48dp 呢？一般来说，48dp 转化为
17、一个物理尺寸约 9 毫米。建议的目标大小为 7-10毫米的范围，这是一个用户手指能准确并且舒适触摸的区域。如果你设计的元素高和宽至少 48dp，你就可以保证：（1）触摸目标绝不会比建议的最低目标（7mm ）小，无论在什么屏幕上显示。（2）在整体信息密度和触摸目标大小之间取得了一个很好的平衡。而每个 UI元素之间的空白通常是 8dp。2.5 标注规范通常 APP 设计都会涉及到多个分辨率兼容开发的问题，因此设计的时候，要定好规范。最好建立相关文档，记录使用的字体、颜色，常用的字号和间距，给出编号 A1 A2 A3 B1 B2 B3，不同分辨率下换算的结果，便于技术人员进行开发。如需对设计稿进行后期的标注，则可使用该套规范，对设计稿中的字号、颜色、间距进行标注。Ps:如果想做一个好的 UI 设计师，一定要从规范入手。很多都是细节的东西，在于积累。
