Material Design（一）介绍

为您准备了最新的 Material Design设计规范，请伴随笔记一口吃掉。

一、安卓是什么？

想象一下，过年同学聚会上，大家把手机都放在饭桌前，除了各种型号的 iPhone 之外，你还能看到什么品牌的手机呢？我猜一定会有 OPPO、VIVO、魅族、小米、华为、三星对吗？也许还有一加、锤子、联想等手机品牌。这些手机全部都是使用了 Android底层构架的设备，也就是我们所说的安卓手机。它们和苹果手机似乎没什么共同点：硬件的外观、桌面系统设计、价格都不一样，怎么可能是一种系统呢？这个要从安卓的诞生说起了。有一个极客名叫安迪·鲁宾（Andy Rubin），他曾经在苹果工作过，后来他离开苹果开始了漫长的创业之路，可他的项目似乎从来都不怎么顺利。直到2003年，他创立了安卓公司，安卓是一个基于 Linux 的开放源代码的操作系统，他当时的计划是免费把安卓系统提供给手机生产商，然后在预装了安卓系统的手机上提供增值服务。由于免费开源加上性能出众，在2014年搭载安卓系统的设备就超过了100亿部。当时诺基亚的塞班系统和很多其他的手机操作系统称霸着手机操作系统市场，而安卓像一匹黑马一样杀了个突然袭击。后来大家都知道了，诺基亚销声匿迹，连微软的 windowsphone 操作系统现在也很少听到了。再后来，谷歌收购了安卓，有了谷歌母公司的资源，安卓的发展就更加顺风顺水，在2017年全球智能手机市场有85%的设备都使用了安卓系统。可以说当今世界除了苹果的 iOS操作系统之外，几乎全部都是安卓的天下。就连我们周围的一些智能设备、银行的手写签名系统、ATM机等都大量采用了安卓操作系统。需要注意的是安卓是一套像 Windows 的操作系统而并非像苹果一样的软硬件打包产品。

1. 在我国的飞速发展

由于安卓是一套性能非常好的底层框架，但是用户体验和设计上都是白纸，于是很多开发商会基于安卓系统的底层系统开发交互良好、视觉设计更佳的表现层部分，这种开发被叫做安卓rom开发。在中国，很多公司抓住了安卓的免费午餐发展出了自己的手机品牌，比如小米就是通过优化安卓底层框架，加上自身研发的、用户体验非常好的交互和视觉，完成了 MIUI—— 一款基于安卓的手机操作系统包。没错，最早小米并不是靠硬件取胜，而是靠 MIUI 创业的。当时手机市场上的操作系统都不太注重用户体验，MIUI 无疑让大家打开了新世界的大门，于是很多人开始把自己的三星或者其他手机刷成 MIUI系统，由于刷机会让手机发烫，他们也自嘲是「发烧友」，就产生了发烧友文化。后来小米自己开始生产手机就更加有粉丝基础了。与此同时国内MP3大厂魅族也开始了自己的手机研发，搭载了优化性能和体验的flyme，同样基于安卓底层框架开发。几乎每一个国内手机品牌都会有一套自身的 rom系统，比如小米有MIUI，魅族有flyme，锤子有Smartisan，联想有联想乐OS，华为有华为rom等。基于免费的安卓底层框架要比自己开发操作系统节省巨大的经费和资源，所以这些公司可以迅速崛起。所以我们中很多人都是安卓手机的用户。

二、安卓的尺寸

由于安卓是一个野蛮生长的市场，没有如苹果一样严格的硬件生产规范，造成了安卓屏幕尺寸非常杂乱。从下图我们就可以看到，市场上的安卓屏幕尺寸简直是一场噩梦。大小不一的屏幕中，但使用率最高的是720P和1080P。

△ 主流安卓设备分辨率占比 数据图表来自友盟
要想让我们的 APP 同时在这么多种屏幕下都显示完美，在上图中我们可以看到，用户量目前最高的是720P和1080P。我们建图时一般使用1080P的分辨率来进行设计。在以下五个尺寸中我们使用切图进行适配：

△ 安卓主流分辨率表
其他的分辨率我们可以使用自适应的方法进行适配。这就是目前安卓设备的主流适配方式。为了方便大家查询每个设备大小的 dp值和 px值，Material Design 为我们准备了一个网站来查询主流安卓设备的尺寸（网址：https://material.io/tools/devices/）。

1. DP单位

Dp 是独立密度像素的简称（Density-independent pixels）。是安卓设备上的基本单位，如同苹果设备上的 pt 一样，dp 与我们建图时的 px单位需要通过分析设备的 PPI值来换算。大家还记得 PPI公式吗？

△ PPI计算公式
那如果我们有了一个设备的 ppi值，然后使用公式即可知道这个设备里1dp等于多少像素了：

 dp*ppi/160 = px

比如这个设备的 PPI值是320，那么：1dp x 320ppi/160 = 2px。则，这个设备上1dp等于2像素。（也就是和iPhone 6类似的高清屏）。在给安卓设计稿做标注时，我们可以在像素大厨等标注软件中选择我们做图的分辨率（如：xxhdpi），然后标注单位中可以选择 dp单位，这样我们标注的单位数值和安卓开发工程师使用的单位就一致了。否则安卓工程师要进行二次换算把我们标注的 px单位换算成 dp单位才可以进行工作。在下文中，我写到的大部分设计尺寸的单位都是dp，也就是说我们要针对不同的屏幕进行换算，比如在 hdpi下，1dp经过换算等于1.5px；而在 xhdpi下，1dp=2px。

2. SP单位

SP 是独立缩放像素的简称（Scale-independent Pixel）。Android平台允许用户自定义文字大小（小、正常、大、超大等等），当文字尺寸是「正常」状态时，1sp=1dp=0.00625英寸，而当文字尺寸是「大」或「超大」时，1sp就大于1dp。就好比我们在电脑中调整桌面字体后，只有字体大小发生改变，而窗口和图标不会改变一样。默认情况下1SP=1DP。所以我们在设计安卓界面时，标记字体的单位选用SP单位。很多标注软件诸如蓝湖和像素大厨都支持SP单位标记字体。

3. 三大金刚键

安卓本来底部应该有三个金刚键：「返回」、「HOME」、「任务列表」。这三个金刚键是安卓交互的一部分，安卓平台上的应用程序交互基于三大金刚键。这三个键一般都在底部，方便手指点击，也就是说这三个按键应该是最常用的操作。但是由于很多用户比较青睐 iPhone 的单独 home键设计，所以很多厂商会在硬件上隐藏掉三大金刚键或仅仅像 iPhone 一样保留 home键。其实安卓还可以开启三大金刚键的虚拟键，也就是在底部会常驻半透明的三个按键（也因此安卓本来不鼓励第三方APP设计底部TAB栏，因为这样会出现两个底部常驻区域，显得很臃肿）可是很多厂商想让产品接近 iPhone 的样子，不仅手机上有 home键，而且也不展开虚拟三大金刚键。所以本来安卓APP 是不需要自己设计返回键的，但是由于厂商硬件的问题，保险起见在安卓平台上的 APP 也都会像在苹果平台一样在左上角加上返回图标。

△ 三大金刚键

4. 切图方法

安卓没有@3x和@2x的文件后缀来区分每套切图，而是采用文件夹的区分方式。比如我们切出五套不同分辨率的切图，那么不同的分辨率应该按照：drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi的文件夹来存放各套切图。

5. .9切图

.9是 andriod平台开发里的一种特殊的图片形式，文件扩展名为：.9.png。比如有一个气泡bubble，那么它的.9切图命名格式就是：bubble.9.png。这种图片能告诉程序这个图片哪部分可以被拉伸，哪部分不要拉伸。我们要做的就是使用 Photoshop 的铅笔工具，把铅笔设置成1px大小，透明度100%，颜色选择#000000纯黑色，然后在我们的切图边缘画出1像素的横竖线，然后把这张图命名后缀加上.9，就和系统打好了暗号了。后续，开发人员在开发环境就可以设置哪些部分可以拉伸哪些需要保留了。噢对了，我们画的黑色「暗号」是不会显示给用户的。

△ 不固定位置的切图需要.9来规定拉伸范围

△ 画四条线规定内容（比如文字）和可拉伸区域（无圆角方便拉伸）的位置

6. 设计方法

由于安卓设备ROM设计不相同、屏幕尺寸不相同、而且三大金刚键也不一定存在，所以在这种情况下做设计让设计师很头大。一般来说，目前主流采取的设计方法有三种：
第一，直接延续 iOS平台上的设计。直接用给iPhone准备的设计稿更改切图的大小即可最快速地得到安卓切图了，这种方法太简单太粗暴，但是目前是最快的。如果我们在使用 Photoshop 设计界面，可以使用 Cutterman 直接切出五套安卓切图。连设计稿尺寸都无需修改。不过如果使用 sketch 或 XD工具则需要按照安卓尺寸进行设计稿的调整才能输出正确的切图。这种适配方式很常用，比如微信、支付宝在安卓平台上的版本都是和苹果端一致的。
第二，为安卓提供专属的设计稿。这种方式会花一定的时间，其实也是根据 iPhone设计稿以安卓的特点：比如尺寸（1920x1080px）、直角、字体（中文为思源字体）、信息条的样式等进行微调，然后切出相应的切图来即可。比如网易云音乐等 APP 在 iOS 和安卓平台上有一些细微的差距。
第三，按照安卓最新的 Material Design规范来进行单独的安卓版界面设计。这个是最花时间的，但是是最规范的。Google 为旗下全线产品提供了一个类似苹果HIG 的设计规范，并且有独特的设计语言。如果公司允许，使用 Material Design来设计安卓版是最好的。比如知乎、印象笔记等产品采用了 Material Design 的设计方式。下面的部分我将为您详细介绍 Material Design设计规范和如何使用这种设计风格构建我们的产品界面。