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.)

组件高度比较

阴影(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.

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

错误,没有阴影不能表达蓝色、白色、红色代表的元素是分离的
错误,蓝色的和红色阴影相似,表达不了它们在不同的高度
正确,更柔和的阴影表达了红色的按钮在比蓝色元素更高的位置

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轴上正向还是负向运动

错误,没有投影区分不了元素是在形变还是在改变高度
正确,阴影变得更柔和说明元素的高度在增加,反之高度在减少
正确,投影没有变化说明元素在改变形状而不是改变高度

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

对象关系(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轴上的位置,取决于你表达的内容层级,以及这个对象的移动是否需要独立于其它对象。

滚动时FAB固定不变,因为FAB的父亲根元素没有滚动,而卡片内的按钮会跟随卡片滚动
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,123评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,031评论 2 384
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,723评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,357评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,412评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,760评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,904评论 3 405
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,672评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,118评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,456评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,599评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,264评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,857评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,731评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,956评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,286评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,465评论 2 348

推荐阅读更多精彩内容