Material design 海拔 & 阴影

海拔 & 阴影

Material Design 物体与现实的物体有很多相似的性质。

在现实中,物体之间可以相互叠加和拼接,但是无法彼此交叉。物体也会投射出阴影,并且会反射光线。

Material Design 的物体也拥有这些特性,并以此构建出用户熟悉的空间模型。这种方式也被广泛的应用在应用程序的设计中。

海拔

海拔是衡量一个表面到另一个表面之间的距离,元素的海拔表明了表面之间的距离以及阴影的深度。

静止海拔

所有的元素都有一个静止的高度。同一个组件在不同的应用程序中会保持相同的高度,但在不同的平台和设备中可能会有所差异。

动态海拔补偿

动态海拔补偿是组件从静止海拔向目标海拔移动的距离。

海拔 (Android) 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

海拔是一种相对深度、距离,是两个表面在 z-轴 上的距离。

规格说明:

  • 测量海拔的单位和 x、y 轴的一致,通常来说是与密度无关的像素(dp)。因为材料元素有厚度(所有的材料都是 1dp 的厚度),所以海拔被用来测量两个表面之间距离。
  • 一个子元素的海拔是相对于父级而言的。

这张图片和其中的海拔值是针对 Android 平台的。

不同海拔的两个物体。

静止海拔

所有的材料,无论什么尺寸的,都有一个静止海拔,或者说是发生变化之前的默认海拔。如果物体的海拔发生了改变,那么它会在变化之后尽快回到静止海拔。

为了适应鼠标和非触控的操作环境,桌面端的静止海拔会比列表中的高度低 2dp。

组件海拔:

  • 在不同的应用程序中,同一个组件会保持相同的静止海拔。比如说,浮动操作按钮的海拔不会随着应用程序而发生变化。
  • 在不同的平台和设备中,组件可能会有不同的静止海拔,这主要取决于环境深度。比如说,电视的景深比桌面的更深,因为它的屏幕更大,用户的观看距离更远。同样的,电视和桌面的景深比移动设备的更深。

响应海拔和动态海拔补偿

有些类型的组件有响应海拔,也就是说它们会根据用户的输入(比如,正常、聚焦、按下)和系统事件来改变自身的海拔。改变的海拔通常就是动态海拔补偿

动态海拔补偿是组件从静止海拔向目标海拔移动的距离。以此来确保在组件的类型或发生操作时的改变能保持一致。比如所有的组件在被按下时所提升的海拔都是一致的。

一旦输入事件完成或者被取消,组件就会回到静止海拔。

避免冲突

有响应海拔的组件有时候在改变海拔时,会被其他组件挡住。因为材料不能彼此交叉,因此可以通过改变冲突组件的布局或整个应用的布局来避免这些冲突。

对于改变组件而言,在发生冲突前组件可以移动或者被移除。比如当用户激活了一个卡片时,浮动操作按钮(FAB)就会消失或者移出屏幕,而当一个 Snackbar 出现时,FAB 则会向上移动。

对于整体布局而言,在设计时就要将冲突最小化。比如把 FAB 放在卡片流的旁边,这样当卡片被激活时 FAB 就不会挡住卡片。

海拔 (dp)

组件

24

对话框

选择器

16

导航抽屉

右侧抽屉

底部 Sheet 模态框

12

浮动按钮 (FAB - 按下)

9

子菜单(每多一层子菜单高度 +1dp)

8

底部导航栏

菜单

卡片(被激活时)

浮动按钮(按下时)

6

浮动操作按钮(FAB - 静止海拔)

Snackbar

4

应用栏

3

刷新指示器

快速入口/搜索栏(滚动状态)

2

卡片(静止海拔)*

浮动按钮(静止海拔)*

快速入口/搜索栏(静止海拔)

1

开关

组件的海拔对比

下图中比较了组件的静止海拔和动态海拔补偿。

上图中只有组件的海拔是准确的,不要纠结图片中组件的长宽和整体布局,这些都只是为了做图而已。

这是一个组件的 Z 轴海拔的剖面图,案例中包含了卡片和浮动操作按钮。

这是一个组件的 Z 轴海拔的剖面图,案例中包含了一个打开的抽屉导航。

阴影 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

阴影是一个重要的视觉暗示,它暗示了物体的深度和运动方向。也是区分两个物体的唯一视觉元素。阴影大小与物体所处的海拔有关。

没有了阴影,就无法表现出浮动操作按钮是独立于底部的背景的。

明显的阴影区分可以暗示出浮动按钮和蓝色列表是相互分离的。而上图中,浮动按钮和列表的阴影大小相同,也就暗示了它们是处在同一高的。

更大、更虚化的阴影暗示了浮动操作按钮拥有比蓝色列表更高的海拔。

在物体的运动中,阴影可以有效的暗示出物体的运动方向,升高或者降低。

没有了阴影暗示海拔,人们无法看出是物体的尺寸还是海拔发生了变化。

更虚化、更大的阴影暗示出物体提升了海拔,而更锐利、更小的阴影则暗示了物体降低了海拔。

这个案例中,一致的阴影可以帮助用户理解物体改变的是形状而不是海拔。

组件的推荐阴影

强烈建议按照推荐的阴影来使用以下组件。如果你在本文中发现以下组件在其他地方与这里的规范不相符,请以此为参考。

应用栏

4dp

应用栏示例

浮动按钮
静止状态: 2dp
按下状态: 8dp

仅适用于桌面环境,浮动按钮可以有以下高度:
静止状态: 0dp
按下状态: 2dp

更多详情可参考 浮动按钮

浮动操作按钮 (FAB)

静止状态: 6dp

按下状态: 12dp

卡片

静止状态: 2dp

聚焦状态: 8dp

了解仅适用于桌面环境的内容, 请参考 内容区块.

菜单以及子菜单

菜单: 8dp

子菜单: 9dp (每多一层子菜单高度 +1dp)

对话框

24dp

抽屉导航 & 右侧抽屉

16dp

底部 Sheet 模态框

16dp

刷新指示器

3dp

快速入口/搜索栏

静止状态:2dp

滚动状态:3dp

Snackbar

6dp

开关

1dp

物体间的相互关系 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

物体结构体系

在应用中物体的运动关系取决于你如何组织和归纳物体。物体可以独立运动,但也可以被父级限制在一定范围内。

所有的物体都是父-子关系中的一员。子元素的级别比较低,因此必须服从父级。物体的父级可以是系统也可以其他物体。

父-子关系详解:

  • 每个物体都有其父级。
  • 每个物体可能会有一定数量的子级。
  • 子级会继承父级的运动属性,比如位置、旋转、缩放和高度。
  • 同级的物体在等级关系中处于同一水平。

例外

根目录的子级(比如主要的 UI 元素)可以独立的移动。比如浮动操作按钮不会随着内容的滚动而移动。其他元素包括:

  • 应用的抽屉导航
  • 工具栏
  • 对话框

交互

物体之间如何交互,取决于它们处在父-子等级关系中的位置。

比如:

  • 子元素是距离父元素最近的元素;也就是说,在子元素和父元素之间不能插入其他元素。
  • 当卡片集合滚动时,卡片之间是同级关系,所以它们一起滚动。而卡片内部的元素则被卡片自身所控制。

海拔

你如何确定一个物体的海拔(Z 轴的位置)取决于物体在等级关系中的位置,以及它是否需要独立移动。

当父级滚动时,浮动按钮(子元素)会跟着一起滚动。

当卡片集合滚动时,所有的卡片都会跟着一起滚动。但是浮动按钮却保持原有的位置。