虽然市面上写Material design的文章已经多如牛毛了，但是作为设计师，我看到的文章要么就是隔靴搔痒没有点到主题，要么就是翻译原版却没有经过消化，空有一堆干货，在这里我觉得有必要从另一个视觉，去看MATERIAL DESIGN的世界。

背景资料

（之前的Google Now）

Material design（内部代号『量子纸』）是Google开发的设计语言并在2014年6月25日的Google I/O大会上推出，是基于首次在Google Now上面出现的『card motifs』（直译过来叫做『卡片式图案』）扩展设计出来的。这种设计大量的增加了栅格化图层、响应式动画，以及一些赋予光影变化的变形、叠化、深度等效果。设计师Matías Duarte解释这种设计风格『我们不是在做真实的纸张，但是我们的虚拟设计元素却能智能的拓展和变形（大意就是各种设计元素并没有遵守拟物设计，但是却有一定的实体物理性质，可以理解为物理性质拟物）。真实物质是有物理表面和边缘的，接缝和阴影又能够揭示你触摸的是什么，Material设计来源也就是这个道理』。Google说他们这个设计语言思路是来源于纸和墨，所以充满了物质性。

Material design能在Android2.1到v7中都能使用，2009年以后出品的所有Android实体设备都可以。Material design会用Google一贯以来的做法，通过网页端以及移动设备产品的扩张，来逐渐扩展影响力，Google也发行了Application programming interfaces (APIs)给第三方开发者去了解和把他们的应用做成这种风格。

在2015年，Material design已经占领了大多数Google Android移动设备APP的界面了，包括Gmail, YouTube, Google Drive, Google Docs, Sheets and Slides, Google Maps, Inbox,还有所有Google Play旗下直属App，以及Chrome浏览器和Google Keep外设，还包括了网页端一些应用界面，例如Google Drive, Docs, Sheets, Slides and Inbox。

Material design的UI设计规范被称为『Polymer paper elements叠纸元素』（暂且这么翻译），它包括『层叠元素库』，在浏览器中它会用一个『垫片』来显示网页端外加的API组件，表示它并不是该软件本身携带的控件。

设计详解

这一部分的内容是Material Design中文版的部分摘要和总结，在此表示感谢。

1.动画

在真实世界里面，由于重力等有加速度存在的力场里面，物体运动速度大多数时候不是线性增加的，斜率改变也许更接近二次函数，所以在Material里面，动画首先要遵守『物理』，偶尔比如你要做出虚拟的上抛运动，这时候你的初速度要设定到最高才符合真实世界的规律。还有就是要考虑一下惯性，想象一下你要赋予这个物体的质量和初速度，有助于你做更好的动画。

同样的就是在真实世界里面你试着和水面互动，你会扔石头，或者用手指触摸水面，结果有不同但是效果是相近的，水面会泛起涟漪。在Material里面你点击设计交互元素产生的响应也应该和这个一样，产生『涟漪』，下一步也应该以你的点击的地方为中心打开一个新界面。

对于转场，也是类似，永远想象观众在翻书，而不是看电影那样硬切。在元素变化不大的界面切换中，想象要新进来的元素、要走出去的元素、要保留的元素都是要沿着怎样的路线和动画去走，规划出来的东西都要井然有序，即便是要加入『物理』的动画了，也不可以乱了阵脚。

以上的做好了的话大体能把UI动画做到90分，最后的10分就是来源于细节了。但是也要保证『简单却动人』，如果复杂又违和，宁可不要。

2.样式

大胆使用鲜艳的颜色，一般情况下饱和度达到色彩图中500为佳。糖果色和撞色也是Material的一个重要特色，选好两个对比强烈的颜色，各自选取三个饱和度纬度的颜色，这样就基本上把一个画面的主要颜色都定下来了（优秀的设计需要有一个强而有力的VI制定守则），其中一个色系作为强调色，在关键的控件设计上起到吸引视觉重视的作用，谨慎使用。

从Android诞生伊始，全部Google平台中Roboto就是最标准的字体，在历次改版之后Roboto显得更加清晰特征明显了。比例一般都是按12、14、16、20和34号的字体排版缩放，层级要非常清晰明了。在Material的设计标准里面还有一个更加进步的规则就是不同字号颜色以及间隔和换行都需要有部分修改，以防止对比度过大而引起注意力分散。对于阅读长度，『要得到良好的阅读效果，每行应当包含60个字符左右』。

对于图标而言，整个设计里面有相对固定的栅格规范，圆角处理和避免过于锐利的直线角，还有就是在各种场合下都有很强的大小和颜色适配性。

作为一套UI，也要经常处理图像和设计元素的搭配。虽然图像本身的质量永远是处于不可控制的范畴，在可控的范围内（比如APP背景、登陆界面、专辑缩略图等），增强和周围图层及控件的关联度、巧妙使用遮罩都能让设计更具『人性化』。插画和摄影常常混搭，能加强戏剧性，但是非常避免只有照片甚至是只用图片库的图片。还有就是像素要满篇幅，留白处理会让其他设计和图片格格不入。分辨率也要保持足够大，不要随意添加滤镜，甚至不要加很强的灰色半透明，这些都是降低画面质感的行为。

3.图层

由于整个设计的本质是想模仿『纸墨』，所以在Material Design处处要遵守的就是印刷时代的栅格化设计，这样能最大化带来『纸质』体验（虽然我觉得这只是针对欧美印刷业）。图层之间有非常明确的相互关系，同级的『纸张』只能相互『推动』（并且永远保持一个『接缝』），不能忽然窜到别的层级的纸张上。另外『纸张』都是有弹性的，但是却有一定的阈值，设计的时候也同时考虑之前说的物理学原理。

在Material Design中所有衬线都是有意义的不可以滥用，只是为了使得图层互相之间的逻辑非常严密。于是在有些界面不再有标题栏的时候，这些衬线就变成了非常重要的图层要素。