Android UI 设计规范 ~Material Design

Material Design是一个给视觉、动态或是跨平台互动的全面性指南，Android现在都有支援app的Material Design

安卓上严格遵循着栅格化系统，和平面设计一样。一切都是遵循8dp网格法则（见下面的DPS）,创建视觉节奏一致贯穿的APP。例如，按钮通常都是48dp高，app的栏通常是56dp，元件之间的间距通常也是8dp的整数倍。

1.　DPS(密度)在安卓定义：

1dp＝1px@1x（在一倍图的情况下，1dp＝1px，一倍图是指160dpi）

“以DPS作为单位来进行设计可以保证你的设计在不同密度的安卓设备上有一致的物理尺寸。”

从布局到图标的一切设计都适用DPS作为单位，在设计的时候使用矢量设计软件，例如sketch 或者illustrator 或者photoshop的形状工具，可以使计算大小变的更容易，而且能在不牺牲任何视觉品质的情况下，让你的光栅图像看起来正常。

当导出icons或者其他静态图像时，导出的关键分辨率转换如下：

dpi的计算方式 (d是对角英寸)

为什么我们在布局的时候最好要用dip，不要用px？

是因为这个世界上存在着很多不同屏幕密度的手机，屏幕密度是什么？就是dpi，就是单位长度里的像素数量。

想象一下，如果这些手机的尺寸一样，屏幕密度相差很大，那么是不是说一个手机水平方向上像素很少，另一个手机水平方向上像素很多？那我们画同样px数量的时候，它显示的长度不就会不一样了

当下主流屏幕尺寸

标识屏幕尺寸hdpi480 * 800xhdpi720 * 1280xxhdpi1080 * 1920

2.　图标尺寸在安卓的定义：

标识启动图标尺寸mdpi48 * 48 （160 DPI ）hdpi72 * 72（240 DPI）xhdpi96 * 96 （320 DPI）xxhdpi144 * 144（480 DPI ）xxxhdpi192 * 192 （640 DPI）

图标尺寸是px单位

3.　颜色值

Android 定义颜色color时有6位或8位值的区别，6位（如：#0470C4）就是RGB，值8位（如：#1E000000）头两位是透明度，后6位是RGB值，00是完全透明，FF是完全不透明，比较适中的透明度值是 1E,可以叫做ARGB

以后UI可以指定某某背景, 百分之多少透明度可以指定16进制告诉我们

4.　标注

当UI给我们标注的时候可以考虑不再用px单位,应该用dp

Android 设计规范中间距单位是 dp，dp 在 Android 机上不同的密度转换后的 px 是不一样的，所以按照设计图的 px 转换成 dp 也是不一样的。

UI设计者可以给我们dp尺寸的同时,告知我们它们尺寸设计的效果图(默认都是1920*1080)

但我们产品则需要考虑(M2的分辨率 1920*1200)

为了方便我们的UI, DP/PX在线转换工具：http://pixplicity.com/dp-px-converter/

!!!要注意字体大小单位是 sp , 算法和DP相同

5.　切图

几种图片的主要特点

webp：文件最小，有透明通道。

WebP格式，谷歌（google）于2010年推出的新一代图片格式, 加快图片加载速度。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook 等知名网站已经都在使用WebP格式。

jpg： 文件较小，无透明通道。png： 文件较大，有透明通道。

起因 –> 应用里的图片占了很大空间，尤其是屏幕越来越多越来越大（这对应用来说也是很占有内存的oom）。

对于小图标

小图标大多是不规则形状，显示时多会要求能看到后方背景，所以需要有透明通道，一般使用png。尺寸小，没必要转webp。如果图标后方背景为纯色且确定，那么直接用jpg就可以了。

UI给的png图应当再通过tinypng或者“智图”将图标文件大小缩小一些再放入drawable对应文件夹中。

APP的图片压缩，使APP加速5-10倍, 压缩PNG图片 http://zhitu.isux.us/

大图，背景图，默认图：

上传到“智图”或其他工具，转成webp。

UI设计图尺寸和切图：如何只切一套图就够用？

查友盟统计数据知道，市场主流屏幕为720p和1080p。UI按1080p的尺寸来做设计图，在此基础上切一套图，放于xxhdpi下即可适配大多数屏幕了。一些规则的图案，程序员能用shape画也就没必要切图。

9path的优先级最高(能用.9图则用.9的图)

Android的拉伸地方用.9图, 因为拉伸不会明显失真

苦逼的设计湿和程序猿也不用再辛苦的针对每种机型做特定适配了

使用了点九图，可以把图片做的很小，从而使应用程序的APK文件大小显著减小

图片变小了，使得程序运行和加载起来速度更快了;

APK文件大小减小了，网络传输和下载的时间也会大大减小，从而给用户的体验更好;

注意.9能用png最好是用png了，因为32位的png颜色过渡平滑且支持透明。jpg是像素化压缩过的图片，质量已经下降了，再拿来做.9的按钮和平铺拉伸的控件必然惨不忍睹，要尽量避免。

6.　字体排版的缩放和基本样式（Typographic Scale & Basic Styles）

同时使用过多的字体尺寸和样式可以很轻易的毁掉布局。

字体排版的缩放是包含了有限个字体尺寸的集合，并且他们能够良好的适应布局结构。最基本的样式集合就是基于12、14、16、20和34号的字体排版缩放。

下图尺寸和样式在经典应用场合中让内容密度和阅读舒适度取得平衡。字体尺寸是通过SP（可缩放像素数，scaleable pixels）指定的，让大尺寸字体获得更好的可接受度