一起学习 Material Design 01

Material Design (下称MD) 在今年4月更新了一波,所以重新研究了下,顺便把之前的学习笔记整理了一下,搞了个精简版 MD 文档出来,希望对大家有用。

Chapter 1:Material Design

Material Design 通过构建系统化的动效和空间合理化利用,并将两个理念合二为一,构成了实体隐喻。(Jimmy:注意 MD 的关键就在于动效与空间利用。)

1. 环境

Material design 是一个包含光线、材料和投射阴影的三维环境。这意味着每个对象都有 x、y、z 三维坐标属性,z 轴垂直于显示平面,并延伸向用户视角,每个材料都有 z 轴厚度,标准是 1dp,相当于一个屏幕密度为 160 的设备上的一像素。在网页上,z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

材料环境中的所有阴影都是由这两种光投射产生的,阴影是光线照射不到的地方,因为各个元素在 z 轴上占据了不同大小的位置,遮住了这些光线。在网页上,阴影的实现是在 y 轴上使用多重阴影。下面的案例中,卡片的高度是 6dp。

2. 材料

2.1 物理属性

  • 材料是固态的,输入事件不能穿透材料。
  • 多个材料元素不能同时出现在同一空间的相同位置。
  • 材料之间不能相互交叉,即材料不能从另一个材料中穿过。(Jimmy:你可以将 MD 里的材料理解成实心材料)

2.2 材料转换

  • 材料可以改变其形状。
  • 材料智能在当前所在平面内伸缩。
  • 材料不能弯曲或折叠。
  • 多片材料可以互相组合
  • 分割后,材料可以复原。例如,如果你从一片材料中移动了其中一部分,这部分材料会重新回到那片材料中,恢复成一整片材料。(Jimmy:我把 MD 里的材料都想象成一种特别的木板,它们有厚度,非常硬无法弯曲和折叠,但是你可以把它们切割和拼接,同时他们还可以变形伸缩。)

2.3 材料的移动

  • 材料可以在环境中的任何地方自动创建或销毁(消失)。
  • 材料可以沿着任何轴移动。
  • Z 轴的运动通常是用户和材料交互的结果。(Jimmy:这里的交互有点击、长按等。例如:点击材料,相当于在 Z 轴上施加了压力,Z 轴距离就变小了。)

3. 层次和阴影

3.1 海拔高度

海拔高度是相对深度或距离,是两个表面在 Z 轴上的距离。海拔高度的测量单位是与密度无关的像素(dp)。因为材料元素有厚度(所有材料都是 1dp 的厚度),所以海拔高度被用来测量两个表面的顶部之间的距离。 (Jimmy:如下图所示,左侧两个材料间的海拔就是 6 dp)

组件的海拔高度对比:

Comments
Write a Comment