一口吃掉 Material Design

什么是Material Design？

Material Design不仅仅是安卓阵营产品的设计规范和风格，甚至它鼓励设计师和开发者把这种风格用在苹果设备和windows设备上。作为设计规范，它很包容，却有时又非常严格。使用了Material Design的产品给人很强的统一感和秩序感。如果从历史来看的话，Google的产品从来没有一个正式严格的视觉规范。甚至每个产品线都有自己的设计风格和自己的品牌。但2011年后，拉里佩奇掌握了Google的控制权后，他改变了那种过去"程序员主导一切"的情况，他召集了谷歌最好的设计师一起重新设计了所有产品的语言，终于在2014年的Google I/O上推出了Material Design，宣告Google重视设计的时代来了。Google旗下的电脑、穿戴设备、电视等设备都可以使用Material Design作为视觉规范，甚至Google鼓励开发者在iOS平台也使用Material Design。Google的Material Design并不是简单的扁平设计，而是一种注重卡片式设计、纸张的模拟、使用了强烈对比色彩的设计风格。这种风格形成了独一无二的Material Design。Material Design的目标是创建一种优秀的设计原则和科学技术融合的可能性（Create）、并给不同平台带来一致性的体验（Unify）、并且可以在规范的基础上突出设计者自己的品牌性（Customize）。以下的内容根据Material Design最新规范（2018）来进行分析和阐述，如果大家感兴趣也可以移步到Material Design官方网站来阅读更多内容（网址：http://material.io）。

Material Design的隐喻

Material Design并不是完全的抽象扁平风格，它从物理现实中学习了诸如质感、投影、加速度、纸张的模拟等隐喻方法，这些都会让Material Design更容易被用户理解。其实我们知道Google一直在尝试不同的设计风格，比如很早之前的长投影设计风格、后来的扁平化设计实验等。扁平化设计的优势就是信息噪音少，而缺点就是情感传递不足，而Material Design似乎是一个很好的解决方案，在最大限度保证可读性的基础上有一些我们熟悉的物理现实的影子。所以一定程度上它既是拟物的也是扁平的。

设计理念

Material Design的设计中有很多设计理念是需要我们深度学习的，我们要学习这套理论的思维模式，其实就算我们不准备使用Material Design，对我们的设计思维提高也是一个很有益处的思考过程。

Z轴的概念

我们都知道什么是三维：三维就是X轴（左右）、Y轴（上下）、Z轴（前后）组成的立体世界，而二维就是只有X和Y轴的平面世界。据科学家说宇宙有十一个维度，人类能体验到的是四维，除了三维还有一个时间的维度。好啦，扯远了，回到Material Design中，我们知道手机界面是一个平面二维的空间，而Material Design通过二维的一些表达手段，比如投影、动效等构建出了Z轴（前后）的概念。

Material Design中的Z轴

Z轴的投影

不同投影暗示了不同元素的高度，我们可以理解为如同我们桌子上的几张纸层叠在一起，那么我们认为重要的纸在其他纸张之前，它的投影是最高的。所以在Material Design中投影最高的代表Z轴最高值，也是最重要的内容。

2dp、6dp、12dp、24dp的投影区别

在正面和侧面来观看，1dp和8dp海拔高度产生出阴影大小的不同

界面中的Z轴应用

不同的功能使用不同的Z轴高度可以表明他们的重要性和逻辑层级关系。并且这种投影是由编程完成的并非切图，这点需要注意一下。Material Design为第三方开发者提供了动态且真实的投影和Z轴高度设置。

APP中不同的Z轴高度

顶部应用栏（A）、卡片式设计（B）和悬浮球FAB（C）高度的对比

界面中海拔高度对照

组件

组件是Material Design区别于iOS等其他设计的重要标识，当我们看到FAB时我们就知道这是Material Design；当我们看到底部栏的独特设计时我们也能知道这是Material Design。想做一款原汁原味地Material Design就要了解组件的特征。让我们开始吧！

悬浮球 FAB（Buttons: floating action button）

悬浮球可能是Material Design中最明显的标志了。一个圆圆的小球固定在屏幕的某个位置，它特别显眼，让你无法忽视它。同时它也是当前页面最重要的主线操作，比如在邮箱的页面中，FAB很可能是发邮件的按钮。并且一个页面中只有一个FAB，这让这个小球更加显眼了。

FAB在APP的右下角位置并且常驻屏幕