2-3 What:Elevation & Shadows

Underpinning this spatial model are the concepts of elevation and shadow.

支持空间模型建立的是高度和阴影这两个概念。

高度(Elevation)

Elevation is the relative depth, or distance, between two surfaces along the z-axis.

Elevation是两个表面在z轴上的相对距离(单位也是dp)。

静止高度(Resting elevation)

All material objects, regardless of size, have a resting elevation, or default elevation that does not change. If an object changes elevation, it should return to its resting elevation as soon as possible.

每一个元素都有静止高度,或者默认高度,这个高度的数值是不变的。当一个元素改变了其高度,需要尽快回到默认高度。

默认高度在不同app之间也是统一的,但同一种组件的默认高度在不同平台上是不同的(如在TV上的高度要大于在在PC和手机上)。

动态高度偏移(dynamic elevation offsets)

Some component types have responsive elevation, meaning they change elevation in response to user input (e.g., normal, focused, and pressed) or system events. These elevation changes are consistently implemented using dynamic elevation offsets.

一些组件类型拥有响应性的高度,意味着他们可以通过改变高度来反馈用户的输入或系统事件。而组件高度的改变是通过动态高度偏移来统一实现的

Dynamic elevation offsets are the goal elevation that a component moves towards, relative to the component’s resting state. They ensure that elevation changes are consistent across actions and component types. For example, all components that lift on press have the same elevation change relative to their resting elevation.

动态高度偏移是组件要相对静止高度要移动到的目标高度(理解:移动距离)。这些距离的定义保证了高度的变化在行为和组件类型之间是统一的。例如,所有组件在被按压时被提高,其高度变化是相同的。

当输入事件完成或被取消的时候,组件回到默认高度。

避免高度干扰(Avoiding elevation interference)

当可以响应的组件在产生高度变化的时候,可能会对其它组件造成高度干扰。因为组件是不能互相穿过的,所以需要用一些方法来避免高度干扰的问题。

在组件的角度,可以组件移动或消失来避免(For example, a floating action button (FAB) can disappear or move off-screen before a user picks up a card, or it can move if a snackbar appears)

在布局的角度,可以用布局设计来减少产生干扰的机会(For example, position the FAB to one side of stream of a cards so the FAB won’t interfere when a user tries to pick up one of cards.)

2-3 What:Elevation & Shadows_第1张图片
组件高度比较

阴影(shadows)

Shadows provide important visual cues about objects’ depth and directional movement. They are the only visual cue indicating the amount of separation between surfaces. An object’s elevation determines the appearance of its shadow.

阴影提供了关于元素的高度和方向性移动的重要视觉暗示。阴影是唯一能表明平面上有多少个分区的视觉暗示。一个对象的高度决定了阴影的表现。

2-3 What:Elevation & Shadows_第2张图片
错误,没有阴影不能表达蓝色、白色、红色代表的元素是分离的
2-3 What:Elevation & Shadows_第3张图片
错误,蓝色的和红色阴影相似,表达不了它们在不同的高度
2-3 What:Elevation & Shadows_第4张图片
正确,更柔和的阴影表达了红色的按钮在比蓝色元素更高的位置

In motion, shadows provide useful cues about an object’s direction of movement and whether the distance between surfaces is increasing or decreasing.

在运动时,阴影提供了关于对象的运动方向以及元素表面之间的距离是否在增长或缩小的有用提示。(理解:区分是否在z轴上运动,是在z轴上正向还是负向运动

2-3 What:Elevation & Shadows_第5张图片
错误,没有投影区分不了元素是在形变还是在改变高度
2-3 What:Elevation & Shadows_第6张图片
正确,阴影变得更柔和说明元素的高度在增加,反之高度在减少
2-3 What:Elevation & Shadows_第7张图片
正确,投影没有变化说明元素在改变形状而不是改变高度

元素阴影大小参考(跟上文的组件高度值一致)

对象关系(Object Relationships)

对象层级(Object Hierarchy)

All objects are part of a hierarchy described in terms of a parent-child relationships.

所有对象都一个以“父-子”关系来描述的层级体系的一部分。

“父-子”定义:所有的对象都有一个父亲。每个元素都可以有任意数量的儿子。儿子继承父亲的转换属性,如位置、旋转、比例及高度(跟随父亲移动和转换)。兄弟是指处在同一层级水平的元素。

例外(Exceptions)

Items parented to the root, such as primary UI elements, move independently of other objects. For example, the floating action button does not scroll with content. Other elements include: an app’s side nav drawer, the action bar, dialogs.

根元素的儿子,例如基础UI元素,在运动时独立于其它对象。例如,浮动操作按钮(floating action button, FAB)不会随着内容滚动。其它类似的元素还包括:侧边抽屉导航(side nav drawer),操作条(action bar),对话框。

交互(Interaction)

How objects interact with one another is determined by their place in the parent-child hierarchy.

一个对象如何和另一个对象进行交互,取决于它们所处的“父-子”层级位置。

父子之间的z轴距离最小,没有别的对象可以在父与子之间插入。在一组滚动的卡片中,卡片之间时兄弟关系,所以它们一前一后地一起移动。

高度(Elevation)

How you determine the elevation of objects—their position in z-space—depends on the content hierarchy you want to express and whether an object needs to move independently of other objects.

如何定义对象的高度——它们在z轴上的位置,取决于你表达的内容层级,以及这个对象的移动是否需要独立于其它对象。

2-3 What:Elevation & Shadows_第8张图片
滚动时FAB固定不变,因为FAB的父亲根元素没有滚动,而卡片内的按钮会跟随卡片滚动

你可能感兴趣的:(2-3 What:Elevation & Shadows)