Material Design 初接触（一）

---

相关链接：
http://www.uisdc.com/comprehensive-material-design-note
http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html
http://www.shejidaren.com/17-apps-using-material-design.html
https://developer.android.google.cn/design/index.html
https://material.io/guidelines/material-design/introduction.html

---

1、概述

Material Design 实质化设计，

不仅仅是Android设计支持库里面的那几个控件，它是一种设计规范、一种设计思想。

1.1、核心思想

Material Design的核心思想，就是把物理世界的体验带进屏幕。去掉现实中的杂质和随机性，保留其最原始纯净的形态、空间关系、变化与过渡，配合虚拟世界的灵活特性，还原最贴近真实的体验，达到简洁与直观的效果。

1.2、设计原则

根据用户行为凸显核心功能，进而为用户提供操作指引。

• 实体感

  光效、表面质感、运动感这三点是解释物体运动规律、交互方式、空间关系的关键。真实的光效可以解释物体之间的交合关系、空间关系，以及单个物体的运动。

• 鲜明、形象、深思熟虑

  在基本元素的处理上，借鉴了传统的印刷设计——排版、网格、空间、比例、配色、图像使用——这些基础的平面设计规范。
  构建出视觉层级、视觉意义以及视觉聚焦。精心选择色彩、图像、选择合乎比例的字体、留白，力求构建出鲜明、形象的用户界面，让用户沉浸其中。

• 有意义的动画效果

  动画效果(简称动效)可以有效地暗示、指引用户。动效的设计要根据用户行为而定，能够改变整体设计的触感。

  动效应当在独立的场景呈现。通过动效，让物体的变化以更连续、更平滑的方式呈现给用户，让用户能够充分知晓所发生的变化。

  动效应该是有意义的、合理的，动效的目的是为了吸引用户的注意力，以及维持整个系统的连续性体验。动效反馈需细腻、清爽。转场动效需高效、明晰。

---

2、环境

实质化设计 模拟的是真实的环境，是一个立体的（三维的）空间。

这意味着每个对象都有 x ， y ， z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角,每个 material 元素在 z 轴上占据一定的位置并且有一个 1dp 厚度的标准。 在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

和实际环境一样，3D效果的展示也是通过光影的关系进行展示的。

光影关系（Light and shadow） 在 material 环境中，虚拟的光线照射使场景中的对象投射出阴影，主光源投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。

material 环境中的所有阴影都是由这两种光投射产生的，阴影是光线照射不到的地方，因为各个元素在z轴上占据了不同大小的位置遮挡住了这些光线。

上图分别为：直射光投射的阴影 ， 散射光投射的阴影 ， 直射光和散射光混合投影

3、Material 属性

Material has certain immutable characteristics and inherent behaviors.
翻译为：材料拥有确定不变的特性和固定的行为。

这里的 Material 做名词，表示：料子(布料)、材料(木材，金属，塑料)、素材(书，电影)
但是，结合实际，我们可以理解为能够自由伸展变形的一种魔法纸片，在android中可以理解为控件

3.1 、物理特性

1.材料具有变化的长宽尺寸（以 dp 为计）和均匀的厚度（1dp）。

---

2.注意材料的厚度是不会变化的，只有1dp，但是我们可以通过阴影来展示材料的高度

阴影是由于材料元件之间的相对高度（Z 轴位置）而自然产生的。

---

3.材料能展示任何形状和颜色

内容的展示能够独立于材料,但要被限制在材料的范围里。内容不能超越载体。就如下图

图1，内容在材料上；图2，内容超越了材料，这就是不可取的设计或UI

---

4.多个材料元件不能同时占用相同的空间点。

材料不能穿过其他材料。利用不同的高度区分材料元件是防止多个材料元件同时占用相同空间点的一个方法。利用光影效果如下图：

如果不使用光影，进行Z轴及高度的区分，就会看到下面的效果，这样的UI就不符合Material Design设计规范了。

---

5.材料的变化

材料能改变形状，材料仅沿着它的水平面增长和收缩，即X轴和Y轴。
材料决不能弯曲或折叠，Z轴的改变只是阴影的改变，用来展现材料的高度。

Z轴产生运动一般都是用户与材料交互而产生的。

---

4、高度和阴影

Material design实质化设计，使用到的空间模型，就是借助了“高度”（Elevation）和“光影”（Shadows）这两个概念。

Android中的高度就是在 Z 轴上两个不同平面之间的一种相对深度或距离。

上图，左侧展示的就是在Android上看到的直观效果，右侧就是各控件的高度横截面。
上平面相对下平面的相对高度是6dp,下平面相对“画布”的高度为2dp, so，上平面相对“画布”的相关高度就是8dp。这些都是通过阴影效果展示的。

---

4.1 、静止高度

所有 Material 对象除去大小之外，还有一个“静止高度”，或者称“默认高度”，它是不会变化的。当一个对象的高度产生变化时，它将会尽快恢复到自身的静止高度。

在Material Design中，Android中所有的控件或对象都是有默认高度的。

可以参考下图

上图的各控件的高度横切面，如下图：

---

4.2 、元素高度比较

• 包含卡片和FAB（浮动按钮）的布局界面 ， 以及各元素在Z轴上高度。
  

• 包含导航抽屉（侧滑菜单）的布局 ， 以及各元素在Z轴上高度。
  

---

4.3 、利用阴影展示高度（分层）

以下三张图，可以发现阴影对应用界面立体感的影响

没有了阴影，就无法将浮动按钮从背景层分离出来的，就如图1。

图2，阴影表明浮动按钮与“蓝层”（blue sheet）是两个分离出来的元素。但是，由于它们的阴影非常的相似，就会被误认为在同一高度上。

图3，浮动按钮上的阴影更柔和、更大，这就说明了浮动按钮比“蓝层”（blue sheet）处在更高的高度，这就会使得界面显得更立体。

---

4.4 、在运动中阴影的变化

在运动中，阴影展示了某个对象的移动方向 以及 不同平面之间 距离的改变

如果没有一个阴影来说明高度，那么就不能明确一个方形到底是它的自身尺寸在增加还是它的高度在增加。如下图：

如果没有阴影，就无法判断是在变高，还是自身的尺寸在变

---

对象的高度增加时其阴影会变得更柔和、更大，当其高度减小时，阴影会变得更卷曲。

---

连贯的阴影可以让用户明白，对象的高度没有变化只是形状在变。

---

4.5 、元素MD中的参考阴影

参考阴影，即MD认为的各控件最适合的阴影高度，如果编写符合MD风格的应用，就需要使用这些参考阴影。

• App Bar 4dp

---

• Raised button 凸起的按钮
  静态：2dp
  敲击状态：8dp

For desktop only, raised buttons can have an elevation of:
Resting state: 0dp
Pressed state: 2dp
这段官网的介绍，我的理解是，如果这个按钮和桌面是一体的，那么他的静止高度就为0dp(桌面高度)，点击状态2dp(相对桌面高度)就如下图：

---

• Floating action button (FAB)
  Resting state: 6dp
  Pressed state: 12dp

---

• 卡片
  静态：2dp
  选中状态：8dp

---

• 菜单和子菜单
  菜单：8dp
  子菜单：9dp（在父菜单基础上加 1dp）

---

• Dialogs
  24dp
  Dialog上的按钮就是之前提到的静止状态为0dp，点击高度为2dp的Raised button

---

• 导航抽屉和右抽屉
  16dp

---

• 底部弹窗
  16dp

---

• 刷新按钮
  3dp

---

• 快速查询/搜索条
  静止状态：2dp
  滚动状态：3dp

---

• Snackbar
  6dp

---

• Switch 切换按钮
  1dp