2017 Material design 第一章第四节《高度和投影》

岑和风
2023-12-01

四、高度和投影(Elevation and shadows)

Material design中的material对象的特性与现实物理世界中的物体特性相似。

在现实物理世界中,一个物体可以叠在另一个物体上面,但是物体间不能相互穿过。同时,物体也能投射投影和反射灯光。

Material design借鉴了现实物理世界中物体的特性,并将其运用在虚拟的三维空间里面的material对象上。这种借鉴现实物理世界的做法不仅有利于帮助用户理解,还能统一各应用间的体验。

高度(Elevation)
高度的计算方法是从一个material对象的顶面到另一个material对象的顶面。高度的大小可以暗示用户两个material对象间的距离大小以及投影的深浅。

默认高度(Resting elevation)
所有的material对象在空间中都有其自己默认的高度。在应用中,这些组件(material对象)的默认高度是这样的,但到了不同的平台或是设备上的时候,默认高度可能就会出现变化。

高度的动态补偿(Dynamic elevation offsets)
高度的动态补偿就是一个组件(material对象)从其默认高度朝着目标高度所做的位移变化。


高度(Android) (Elevation (Android))

高度取决于沿z轴两个面之间的距离,或者说是深度。

说明:
高度(z轴)的测量单位和x、y轴上的测量单位是一样的,都是dp(density-independent pixels)。因为material的厚度是1dp,所以对两个material对象间高度的计算是从一个material对象的顶面到另一个material对象的顶面。
在material对象中,一个子对象的高度与其父对象的高度相关。
下图是Anndroid应用中的例子。

不同参照物下2个material对象的高度

默认高度(Resting elevation)
无论大小,所有的material对象都有一个默认高度,这个默认高度是不会改变的。当一个material对象的高度产生了变化,之后它会马上回到默认高度。

电脑桌面端(Desktop)的各组件默认高度比下图所列值小2dp,目的是适应带鼠标以及非触摸屏的设备环境。

高度(dp)组件
24对话框,选择器
16抽屉导航, 右抽屉导航, 模态底部sheet
12浮动按钮(FAB)
9子菜单(每个子菜单+1dp)
8底部导航栏, 菜单, 卡片(选择状态), 抬起按钮 (按下状态)
6浮动按钮(默认状态), Snackbar
4应用栏
3刷新指示器, 快速入口 / 搜索栏(滚动状态)
2卡片(默认高度)*, 抬起按钮(默认高度)*, 快速入口 / 搜索栏(默认高度)
1开关

组件高度:(Component elevations)
在不同的应用中,各组件的默认高度不变。举个例子,在一个应用中浮动按钮(floating action button)的默认高度是6dp,到了另一个应用中一样也是6dp的默认高度。
在不同的平台和设备中,各组件的默认高度可能不同,这取决于人们观看的距离。举个例子,因为TV有着比电脑桌面(desktop)更大的屏幕尺寸,所以观看TV的距离比观看电脑桌面的距离要更远。同理,观看TV和电脑桌面的距离比观看手机的距离要远。

高度响应和高度的动态补偿(Responsive elevation and dynamic elevation offsets)
一些组件的高度会作响应,换句话说就是当用户输入反馈(比如正常状态、聚焦状态和点击状态)或一些系统事件的反馈时,这些组件的高度会因此而改变。这些组件的高度变化主要是通过高度的动态补偿实现。

高度的动态补偿就是一个组件(material对象)从其默认高度朝着目标高度所做的位移变化。它能确保各组件变化以及组件类型的一致。例如,所有可点击的组件被点击后都会有相同高度的位移变化。

一旦用户输入事件完成或者被取消,这些组件就会返回到默认高度的位置上。

避免高度变化冲突(Avoiding elevation interference)
当一个组件的高度在位移变化的时候,有可能会遇到其他组件也在变化。因为material对象之间是不能够相互穿过的,所以我们要避免各组件在高度变化的时候发生冲突。

在组件处于相同高度的时候下,组件可以根据情况提前移动或者直接消失。举个例子,浮动按钮(floating action button,以下简称“FAB”)会在用户选择卡片(cards)之前消失或移离屏幕,抑或者当snackbar出现时浮动按钮移动位置。

在布局层面上,通过设计应用的布局可以减少组件间相互冲突。举个例子,将浮动按钮(FAB)置于屏幕的一侧,当用户选择卡片(cards)的时候就不会和浮动按钮产生冲突。

各组件间高度的对比(Component elevation comparisons)
下图是各组件间默认高度和高度的动态补偿的对比。

在上图中,只有所列组件高度方面和其之间的对比是确定的。组件相关的其他方面和其整体的布局只作说明参考

以上图为例,图中该应用的页面布局里面包含了卡片(cards)和浮动按钮(FAB)组件。右边是该页面的横截面图,其中展示了各组件的高度信息

以上图为例,图中展示了一个被用户打开的抽屉导航菜单(Nav drawer)。右边是该页面的横截面图,其中展示了各组件的高度信息

投影 (Shadows)

为了引导用户理解material对象的深度和运动方向,投影提供了重要的视觉暗示。投影是唯一能够区分面与面(material对象)之间关系的视觉线索。一个material对象的高度决定了其投影的效果。

没有投影存在,你根本不清楚浮动按钮(FAB)和背景是否是分开的。
不可行

虽然有投影存在,我们也知道浮动按钮(FAB)和蓝色卡片是分开的两个组件。但因为两个组件的投影相似,所以会误以为两个组件处于同一高度。
不可行

图中,浮动按钮(FAB)的投影比其他组件的投影更为柔和且面积更大,这样我们很容易就能看出浮动按钮的高度比蓝色卡片的高度要高。
可行

在运动方面,投影不仅能为material对象运动的方向提供视觉暗示,还能展示material对象之间的高度变化(距离增加还是减少)。

图中是蓝色的material对象的前后变化。因为没有投影暗示material对象的高度,所以你根本不清楚其尺寸在增加还是高度在增加。
不可行

图中是蓝色的material对象的前后变化。前者因为投影清晰且面积较小,所以高度较低。后者反之。
可行

图中是蓝色的material对象的前后变化。两者因为投影一致,所以很容易能看出material对象是尺寸在变化。
可行


组件的投影规范
以下是各个组件的投影参考。如果在Material design规范中其他地方出现了与这些投影参考规范不同的组件投影,请与这里为准。

应用栏(App bar)
4dp

凸起按钮(Raised button)
默认状态(Resting state): 2dp
按下状态(Pressed state): 8dp

在电脑桌面端(desktop)上:
默认状态:0dp
按下状态:2dp
点击查阅关于 凸起按钮 的更多信息。

浮动按钮(Floating action button (FAB))
默认状态:6dp
按下状态:12dp

卡片(Card)
默认状态:2dp
凸起状态(Raised state):8dp

在桌面电脑端上的情况,请前往 内容布局 查阅更多信息。

菜单和子菜单(Menus and sub menus)
菜单:8dp
子菜单:9dp(每增加一个子菜单+1dp)

对话框(Dialogs)
24dp

抽屉导航菜单和右抽屉(Nav Drawer & Right drawer)
16dp

底部模态sheet (Modal bottom sheet)
16dp
译者注:
1.sheet是Material design语境中的词语,可以粗浅的认为是“纸片”的意思。如果换成正常的说法应该是对话框的意思,只不过官方为了配合语境而另作设定。
2.什么是「模态」,请点击了解

刷新指示器(Refresh indicator)
3dp

快捷入口/搜索栏
默认状态:2dp
滚屏状态(Scrolled state):3dp

Snackbar
6dp
译者注:同样是Material design语境中的词语,不好表达故不做翻译。

开关(Switch)
1dp

对象关联 (Object relationships)

对象层级
在一个应用中,你如何去组织对象直接决定了对象移动的时候与其他对象之间的关系。比如该对象是否能够独立移动,还是说移动的时候受到其他对象约束。

所有对象之间都是以父子关系存在的。「子」级对象从属于它的「父」级对象。一个对象能成为整个系统或者另一个对象的子级对象。

译者注:这里讨论的对象就是material对象。material对象在「应用」中的表现就是我们熟知的一个个组件。

关于父-子级对象:
每个对象都有一个父级对象
每个对象都有不同数量的子级对象
子级对象继承父级对象的属性,如位置、选择、缩放和高度。
跟子对象处于同一层级的子级对象的级别相同。

例外
一些对象从属的父级对象是root,比如重要的UI组件,它的移动独立于其他对象。举个例子,浮动按钮不会跟随滚屏而移动。除此之外,还包括以下组件:

  • 侧边导航菜单
  • 操作栏
  • 对话框

相互作用
一个对象如何作用于另一个对象,取决于他们在父子层级中的位置。
举例说明:
子级对象和父级对象在z轴上的距离是最近的;其他非子级对象不能在父-子级对象之间插入。
一个正在移动的卡片(card)集合,他的所有子级卡片都跟随着移动。这个卡片集合控制着它的各个子级卡片移动。

抬起按钮(子级)跟随父级sheet滚动离开屏幕。

因为整个卡片(card)集合跟随屏幕滚动而移动,所以其各个子级卡片也会随着屏幕滚动而移动。浮动按钮之所以没有跟随屏幕滚动,是因为其父级对象没有因此滚动。

高度
如何决定某个对象的高度(即它们在z轴上的位置)取决于你想表达怎样的内容层级,以及当一个对象需要移动的时候是否独立于其他对象。

 类似资料: