(译)MaterialDesign(四)-Elevation&shadow

其他文章

Material Design中的对象在一定程度上和真实世界的对象很相似。

在物理世界中,物体可以彼此堆叠或固定,但不能穿过彼此。 对象也投射阴影和反射光。

Material Design反映了这些特征,形成了用户熟悉的空间模型,并且可以在应用中统一风格。

高度

通过测量一个表面的前面到另一个表面的前面,元素的高度表示表面之间的距离和其阴影的深度。

静止高度

所有Material元素都有静止高度,虽然组件在应用中具有一致的静止高度,但是他们可能在不同的平台或者设备上不一样。

动态高度

动态高度偏移是组件相对于其静止时的位置朝向的高度。

高度(Android)

高度是在z轴方向两个Material的表面的深度差或者距离。

特点
  • 在高度的测量时,单位是以与x、y轴相同的与密度无关的像素单位dp。因为Material元素具有慎对(1px),所以从一个表面的顶部到另一个表面的顶部表示高度

  • 子对向的高度是相对于父对象的。

静止高度

所有Material对象,无论大小都有不变的静止高度或者默认高度,如果对象改变了高度,那他应该尽快返回到静止高度。

下表是各种元素的高度值

高度(dp) 组件
24 Dialog,Picker
16 Nav drawer,Right drawer,Modal bottom Sheet
12 Floating action buttion(FAB-pressed)
9 Sub menu (+1dp for each sub menu)
8 Bottom navigation bar,Menu,Card (when picked up),Raised button (pressed state)
6 Floating action button (FAB - resting elevation),Snackbar
4 App Bar
3 Refresh indicator,Quick entry / Search bar (scrolled state)
2 Card (resting elevation) *,Raised button (resting elevation)*,Quick entry / Search bar (resting elevation)
1 Switch

桌面系统的静止高度低于列表里所有值2dp,以适应鼠标和触摸环境

组件高度
  • 各个组件在程序中保持一致的静止高度。例如,Floating Action Bar的高度随着应用程序的不同而不同。
  • 根据环境的改变,组件在不同的平台和设备上具有不同的高度。例如,电视机具有比桌面更大的深度,因为它具有更大的屏幕并且可以从远处观看。同样,电视和桌面比移动设备的深度更大。

响应高度和动态高度偏移

一些组件拥有响应高度,意味着他们可以在响应用户或者系统的事件时(正常,聚焦和按下)改变高度。这些高度变化使用动态高度偏移实现。

动态高度偏移是组件相对于组件的静止状态朝向的目标高度。 它们确保高度更改在操作和组件类型之间保持一致。 例如,所有在压力下提升的部件相对于其静止高度具有相同的高度变化。

如果输入动作完成或者取消,这些组件将回到它的静止高度。

避免高度干扰

具有响应高度的部件可能在其静止高度和动态高度偏移之间移动时遇到其它部件。 因为Material不能通过其他Material,组件避免以任何数量的方式彼此干扰,无论是基于每个组件还是使用整个应用程序布局。

  • 在组件级别,组件可以在他们造成干扰之前移动或者移除。例如,在用户点击Cardview时,Floating Action Bar可以消失或者离开屏幕,snackbar出现,它可以移动。

  • 在布局级别上,设计应用布局以尽量减少干扰的机会。 例如,将FAB定位在Cardvierw区域的一侧,使得FAB在用户尝试拾取卡时不会干扰。

组件高度比较
image

在此图中,只有组件的高度尺寸和布局是准确的。 部件的其他尺寸和整体布局仅用于说明。

例子:


image

包含卡片和浮动操作按钮的示例应用程序布局,以及其沿z轴的其组件高度的横截面图

image

一个带有打开的导航抽屉的示例应用程序布局,以及沿其z轴的其组件高度的横截面图。

阴影

阴影提供关于对象的深度和方向移动的重要视觉提示。 它们是表示表面之间的分离量的唯一视觉提示。 对象的高度确定其阴影的外观。

错误
错误的做法
没有阴影,没有指示FloatingActionBar与背景分离。
错误
错误的做法
阴影表FlaotingActionBar和蓝色表是独立的元素。 然而,他们的阴影是如此相似,暗示他们都在同一高度。
正确
正确
较柔和的较大阴影表示FloatingActionBar处于比蓝色层更高的高度。

在运动中,阴影提供关于对象的运动方向以及表面之间的距离是增加还是减小的有用提示。

错误
错误的做法
没有阴影指示高度,不能明确表明这个正方形是增加大小还是增加其高度。
正确
正确的做法
阴影随着物体的高度增加而变得更软和更大,并且随着高度的降低而变得越来越小。
正确
正确的做法
在这种情况下,一致的阴影帮助用户理解对象正在改变形状,而不是改变高度。
组件参考阴影

以下组件阴影应用作规范引用。 如果以下参考阴影和本规范中其他地方找到的组件阴影之间存在任何差异,请遵循这些参考阴影。

1.App bar 4dp
image
2.Raised button

Resting state: 2dp
Pressed state: 8dp

For desktop only, raised buttons can have an elevation of:

Resting state: 0dp
Pressed state: 2dp

image
3. Floating action button (FAB)

Resting state: 6dp

Pressed state: 12dp

image
4. Card

Resting state: 2dp

Raised state: 8dp

image
5. Menus and sub menus

Menus: 8dp

Sub menus: 9dp (+1 dp for each sub menu)

image
6. Dialogs 24dp
image
8. Nav Drawer & Right drawer 16dp
image
9. Modal bottom sheet 16dp
image
10.Refresh indicator 3dp
image
11. Quick entry/Search bar

Resting state: 2dp

Scrolled state: 3dp

image
12.Snackbar 6dp
image
13.switch 1dp
image

对象关系

对象层次关系

按钮随布局滚动

如何在应用程序中组织对象或对象集合,确定它们如何相对于彼此移动。 对象可以彼此独立地移动,或者由层次结构中较高的对象约束。

所有对象都是根据父子关系描述的层次结构的一部分。 这些关系中的每一个中的“子”指的是从属于其“父”元素的元素。 对象可以是系统或另一个对象的子对象。

父子关系

  • 每个对象有一个父对象。
  • 每个对象可以具有任意数量的孩子。
  • 子节点从父节点继承变换属性,如位置,旋转,缩放和高程。
  • 兄弟姐妹是同级别层次中的对象。

例外

Floating Action Bar不随布局滚动

作为父根目录的项,例如主UI元素,独立于其他对象移动。 例如,FAB钮不随内容滚动。 其他元素包括:

  • 应用程序的侧导航栏
  • 操作栏
  • 对话框

相互作用

对象如何相互交互取决于它们在父子层次结构中的位置。

例如:

  • 孩子与他们的父母有最小的z轴分离; 其他对象不会在父对象和子对象之间插入。
  • 在滚动卡集合中card卡是彼此的兄弟,因此它们一起移动在一起。 他们是控制他们的运动的卡收集对象的孩子。

高度

如何确定对象的高程 - 它们在z空间中的位置 - 取决于要表达的内容层次结构以及对象是否需要独立于其他对象进行移动。

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

推荐阅读更多精彩内容