image.jpeg

三、什么是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官方网站来阅读更多内容(网址:https://material.io)。

1. Material Design的隐喻

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

四、设计理念

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

1. Z轴的概念

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

2. Z轴的投影

不同投影暗示了不同元素的高度,我们可以理解为如同我们桌子上的几张纸层叠在一起,那么我们认为重要的纸在其他纸张之前,它的投影是最高的。所以在 Material Design 中投影最高的代表Z轴最高值,也是最重要的内容。
image.jpeg
△ 2dp、6dp、12dp、24dp的投影区别
image.jpeg
△ 在正面和侧面来观看,1dp和8dp海拔高度产生出阴影大小的不同

3. 界面中的Z轴应用

不同的功能使用不同的Z轴高度可以表明他们的重要性和逻辑层级关系。并且这种投影是由编程完成的并非切图,这点需要注意一下。Material Design 为第三方开发者提供了动态且真实的投影和Z轴高度设置。
image.jpeg
△ APP中不同的Z轴高度
image.jpeg
△ 顶部应用栏(A)、卡片式设计(B)和悬浮球FAB(C)高度的对比
image.jpeg
△ 界面中海拔高度对照