Material Design设计指南整理（一）

最近在读谷歌的material design设计指南，根据自己的理解将其整理下来，方便之后查阅。

material design，可称为材质化设计，是谷歌创造的一种新的视觉语言，主要目标有两个，一是希望将科技创新与传统设计进行融合，从而打通物理世界和虚拟世界；二是希望能在不同的平台和设备之间构造一致的体验。这两点在整个设计规范中得到了很好的体现。

科技与设计的结合 不同平台和设备的一致体验

基本构成：

材质是核心，传统的设计准则是框架，动画是灵魂

1、 材质：

材质，是真实世界的隐喻。基于物理世界的触感，启发于纸张和墨水的表现形式，发展于科技以及想象力。
基于物理世界能让用户快速地理解其功能可用性，当然，除了物理世界的简单映射外，还创造了一些新的功能可用性，巧妙地取代了物理世界但是又没有打破其基本的规律。下面会对材质做详细的介绍。

2、设计：

传统印刷设计中的文字排版、网格、尺寸、颜色、图像等，搭建了材质化设计的基本框架。这些不只是为了好看，更重要的是能够组织信息并对用户做出引导。通过创造层级关系，获取视觉焦点，有意识地突出某些元素等，提高用户体验。

3、运动：

动态能够赋予设计更多的意义，更好地表现元素自身以及元素之间的关系，更好地提高用户的关注度，从而提升用户体验。
运动多数是由用户发起的，能够提高用户对应用的掌控感。
运动的前提是尽量不打断用户体验的持续性，特别是在变换和重新组织内容时。

材质详细介绍

从三个方面介绍：环境、物理属性、运动属性
下面的物体或者材质都是同一个意思。

1、环境

这是一个三维的空间，材质、光线、投影是这个空间最基本的东西。
在这个三维空间中，X轴水平，Y轴竖直向上，Z轴是垂直于屏幕。
光源分为两种，主光源和环境光。
主光源有一定的方向，会在物体上产生定向的阴影，环境光没有方向，会在物体四周造成较为柔和的阴影。

2、物理属性（基础的、高度、阴影、相对关系）

• 材质的长宽可以任意设置，但是厚度不变，都为1dp。
• 材质的形状和颜色都可以改变，以承载不同的内容，这些内容不会对材质的厚度造成影响。内容可以在材质内自由变换，行为独立于材质。
• 材质是固体的，意味着不能穿过其他材质，不能与其他材质发生重叠，输入事件不能穿过材质，比如各种手势，只能影响位于前面的材质。
• 高度：
  指两个物体在z轴上的距离，单位是dp，因为材质是有厚度的，所以测量是从一个材质的顶部到另一个材质的顶部。
  1）静止高度：
  或者称为默认高度。所有的物体都有静止高度。当高度发生变化后，应尽快回到静止高度。桌面端的静止高度比表格中列出的要低2dp，这样更适用于鼠标以及其他非触摸式环境。
  2）控件高度：
  控件在不同的app之间有一致的静止高度，在不同的平台和设备之间会有所不同。组件有动态补偿高度，指的是当组件响应用户的输入时，发生的高度上的改变，同样的，每种组件的动态补偿高度也是一致的。
  在输入事件完成或者取消之后，组件要回到原来的静止高度。
  3）避免干扰：
  由于动态补偿高度的存在，组件会离开原来的位置，有时会与其他组件相互干扰。这是需要避免的，思路如下：1、在组件层面上，在发生干扰之前，相应的组件移开进行避让，在事件完成后回到原位。2、在框架层面上，尽量将有可能产生干扰的组件分开，避免干扰的发生。

各个控件的静止高度 示例一 示例二

• 阴影
  阴影取决于物体的高度，物体越高，阴影越大。反之，阴影也可以反映物体的高度，除此之外，还能表示物体之间的关系，区分不同的物体，也可以用来辨别同个物体前后的变化。需要注意一点的是，阴影是与位置紧密联系了，不要单纯为了改变阴影而改变。
  因为高度决定了阴影，而且控件都有默认的高度，因此也有了默认的阴影。控件也有动态补偿高度，相应的也有对应的阴影大小。下面是一些例子，具体可以在官方文档中查看。https://material.google.com/what-is-material/elevation-shadows.html#elevation-shadows-shadows

• 物体关系
  1、父子关系：每个物体都有一个父级，每个物体都有多个子级，子级从父级继承了其变换属性，就是说子级会跟父级一起运动。
  2、同胞关系：拥有同一个父级的称为同胞关系。
  子级在的位移受到父级的限制。物体不能插入别的父子级之中

3、运动属性（变换属性加移动属性）

• 物体可以动态地改变形状，可以在所处的平面上放大缩小，甚至凭空地消失和出现。
• 物体不能弯曲和折叠
• 多个物体可以连接在一起，也可以拆分开来形成多个独立的物体。
• 材质可以同时沿多个轴移动，不用局限于简单的单向移动。
  （这里好像不能附gif图，有兴趣的可以直接到官网上看相应的演示）https://material.google.com/what-is-material/material-properties.html#material-properties-transforming-material