这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

目录

Material Design中的高度
描绘高度
高度层次结构
默认高度

 

高度是沿z轴的两个界面之间的相对距离。

​​组件高度值

  1. 导航抽屉:16dp
  2. App应用栏:4dp
  3. 卡片:1dp到8dp
  4. FAB:6dp
  5. 按钮:2dp到8dp
  6. 对话框:24dp

 

材料设计中的高度

测量高度

材料设计中的高度测量是为测量材料界面之间的距离。 沿着Z轴在密度独立像素(dps)和使用阴影描述(默认情况下),这个距离从一个界面的表面到另一个界面的表面。
​​

  1. 从正面看,一个高度为1dp的界面和另一个高度为8dp的界面
  2. 从侧面看,两个界面之间的高度差为7dp
    ​​

当其他界面位于界面后面时,相同高度的表面可能会有不同的表现。

  1. 界面A和B两个高度相同,为8dp。 它们投射不同的阴影,因为界面B位于另一个
    界面(C)的前面,C早已有了高度。
  2. 从侧面看,界面(A),(B)和(C)之间有高度差异。

 

高度系统

所有材料设计的界面和组件都具有高度值。

不同高度的界面执行以下操作:

  1. 允许界面在其他表面前后移动,例如内容在应用栏后面滚动
  2. 反映空间关系,例如一个浮动操作按钮的阴影如何表明它是和一个卡片集分离的
  3. 将注意力集中在最高的高度上,例如临时出现在其他界面前的对话框

可以使用阴影或其他视觉提示来描绘高度,例如界面填充或不透明度。
​​
Material Design使用阴影显示高度。

​​

 

默认高度
默认高度是默认情况下为组件提供的起始高度值。 为响应用户或系统事件,事件会从默认高度移动。 所有材料组件有默认高度,相同地对于每种类型的组件都有默认高度。 例如,所有卡片具有彼此相同的默认高度,并且对话框具有与其他对话框相同的默认高度。

默认高度和环境
默认高度因环境,平台或应用程序而异。 移动设备上的默认高度旨在提供视觉提示,如阴影,以指示组件何时是交互式的。 相比之下,桌面设备上的默认高度较浅,因为会有其他提示(如悬停状态)在组件交互时体现。 例如,桌面设备上0dp高度的卡片用边框描绘轮廓。
​​

  1. 从前面看,应用栏(A),卡片(B)和浮动操作按钮(C)的移动设备的默认高度
  2. 从侧面看相同的组件

​​


1.从正面看,应用栏(A),浮动操作按钮(B)和卡片(C)在桌面设备上的默认高度
2.从侧面看相同的组件

 

改变高度

组件可以根据用户输入或系统事件更改高度。 发生这种情况时,组件会移动到预设的动态偏移高度,既组件在非静止状态下移动到的默认高度。

每种类型的组件的动态偏移高度都是相同的。 例如,所有卡片使用与其他卡片相同的偏移值,并且所有浮动操作按钮使用与其他浮动操作按钮相同的偏移值。

一旦用户输入(或系统事件)完成或取消,组件就会迅速返回其默认高度。​​

一些组件响应用户输入而增加高度。

  1. 在用户输入时,此按钮将其高度从2dp增加到8dp
  2. 从侧面看相同的组件

 

高度冲突
当组件在其默认高度和动态偏移高度之间移动时,它不应与其他组件发生碰撞。

为了避免这些类型的碰撞,组件可以移开。 例如,如果增加卡片的高度位置使其穿过浮动操作按钮,则该按钮可能会在发生碰撞之前消失或移出屏幕。

您还可以设计应用程序的布局以避免碰撞,例如在卡片旁边放置浮动操作按钮,而不是直接放在卡片上方。

​​暂时重新定位或移除可能与偏移组件发生碰撞的组件。 在移动设备上的卡片流的前视图(1)和侧视图(2),显示出当选中卡片(A)时浮动动作按钮(B)如何消失。

​​

设计您的应用程序,使极少机会发生高度冲突。

 

描绘高度

要成功描绘高度,界面必须显示:

  1. 界面边缘,使界面与周围环境形成对比
  2. 与其他界面重叠,无论是静止还是运动
  3. 与其他界面的距离

 

界面边缘

边缘有助于表达材料界面的触觉质量。 通过将用户界面的不同部分分离成可识别的组件来
展示一个表面的结束、另一个表面的开始。 例如,应用栏的边缘显示它与网格列表分开,
向用户传达网格列表的滚动是独立于应用栏。

默认情况下,材质界面使用阴影来表示边缘。 其他方法也可用于指示边缘,例如:

  1. 给界面设置不同的颜色
  2. 给界面设置不同的不透明度
    边缘必须在界面之间产生足够的对比度(通过满足或超过适宜的对比度),以使它们看起来彼此分开。

​​

 

界面重叠

当界面部分或完全地与另一表面重叠时,表明两个界面有不同的高度(而不是它们之间的差异的程度或量)。 较高高度的界面出现在较低高度的界面之前,这意味着它们沿z轴定位在不同的高度。 默认情况下,界面可能会相互重叠,或者由于在UI中更改其位置的运动而变得重叠。

当界面具有不同的不透明度或彼此的对比度不足时,可能难以分辨出哪个界面位于另一个界面之前。 为了避免似是而非的重叠,需确保界面边缘清晰易辨。

​​

  1. 阴影显示界面边缘,界面重叠和高度。
  2. 不同的界面颜色显示界面边缘和重叠,但不是高度。
  3. 不透明度显示界面边缘和重叠,但不是高度。

​​

 

距离

界面之间的高度差异可以使用遮罩背景或使用阴影来表示。

遮罩背景
当UI的背景在遮罩状态时,它表示其上方的内容处于更高的高度。 遮罩背景表示了大量很高但未指定的高度。

​​

 

阴影
阴影可以表达界面之间的高度差异,而这种方式是其他方法不能做到的。
阴影的大小和柔和度或扩散量都表示两个界面之间的距离程度。 例如,具有小而锐利的阴影的界面表示界面紧邻其后面的界面。 更大,更柔和的阴影表达更多距离。

阴影大小和扩散传达的细微差异:

  1. 两个界面之间的一个细微程度的距离
  2. 非重叠界面之间的高度差异
    ​​阴影显示界面的边缘及其相对于背景的高度。 它们还使非重叠界面之间的高度差异可感知。

​​

​​

 

 

动效和高度

动效可以使用以下方法强调高度:阴影大小和柔和度的变化强调高度的变化。

  1. 改变阴影
  2. 显示重叠
  3. 推动
  4. 缩放
  5. 视差

 

阴影的变化
阴影大小和柔软度的变化强调高度的变化。

阴影增长,以强调卡片正在上升。

 

显示重叠
在动效时,界面可以部分地或完全地与另一表面重叠,显示哪个界面在另一个界面之前。

随着它的扩展,界面可以通过重叠附近的界面来显示高度。

 

推动
相同高度的界面可以推动其他界面沿着路径移动。

选定的列表项展开时,将周围的项目推开。

 

缩放
向上或向下缩放界面的大小可以强调高度变化。

前景和背景界面向上和向下缩放以强调高度的变化。

 

视差
不同高度的多个界面以不同的速度移动可以产生深度感并将焦点放在前景内容上。

前景界面比背景图像移动得更快,从而产生深度感。

 

组合动效技术
用组合动效强调高度。​​

视差动效和缩放强调哪些界面位于其他界面之前。

 

 

高度层次结构

内容与其他内容的关系,取决于它们是否处于相似或不同的高度。

不同高度的内容
其他界面前的界面通常为:

  1. 包含更重要的内容
  2. 聚焦注意力,如对话框
  3. 控制其后面的界面,例如应用栏中的操作

​​
桌面设备界面的前视图(1)和侧视图(2)显示了主要焦点(B)的更重要内容如何出现在次要焦点的内容之前,如脚注(A)。

​​
移动设备界面的前视图(1)和侧视图(2)显示出了如何将内容放置在更高的界面上,如底部动作条(A),可以在保持前后界面关系的同时聚焦注意力。

​​

移动设备界面的前视图(1)和侧视图(2)显示了内容在较低位置的界面(A)上通常由前面的界面控制,例如导航抽屉(B)。

 

共面界面上的内容

将界面定位在同一高度使它们共面,并且可以表明它们包含的内容一样重要。 例如,集合中的所有卡片是同等重要的。

  1. 从正面看,卡片(A,B)具有相同的高度并一起移动,强调了它们的内容具有相似的层次结构
  2. 从侧面看相同的组件

 

不表达高度的界面可以看起来是共面的。 对于不表示高度的界面,您可以通过其内容传达层次结构差异,并通过调整其水平和垂直布局位置来指示其相对层次结构级别。
例如,在具有共面界面的面板上,根据语言文本的显示方向,将详细内容放在父内容旁边。
​​

  1. 从正面看,桌面设备UI演示了在同一高度(A,B,C)界面从左到右的定位如何根据英语语言内容传达层次结构。
  2. 从侧面看相同的组件

 

 

默认高度

所有元素都具有默认高度和动态偏移高度的默认值。 某些组件位于比其他组件更高的位置,所有组件遵循一致的高度顺序。 例如,对话框始终显示在所有其他组件的前面。

以下表格列表列出了默认高度和动态偏移高度的默认值。

默认高度值表

组件 默认高度数值(dp)
对话框 24
底部模态动作条

侧边模态动作条

16
抽屉式导航 16
浮动操作按钮(FAB-按下状态) 12
标准底部动作条

标准侧边动作条

8
底部导航栏 8
底部应用栏 8
菜单和子菜单 8
卡片(当拾起时) 8
实心按钮(按下状态) 8
抽屉式导航 16
浮动操作按钮(FAB-静止状态高度)

Snackbar

6
顶部应用栏(滚动状态) 4
顶部应用栏(静止状态高度) 0或4
刷新指示器
搜索栏(滚动状态)
3
实心按钮(静止状态高度) 2
搜索栏(静止状态高度) 1
卡片(静止状态高度) 1
开关 1
文字按钮 0
标准侧边动作条 0

 

默认高度值图
​​
显示多个组件的默认高度和动态偏移高度的横截面图。

 

原文地址:Material Design

译者:糖糖

 

转载请注明:学UI网 » Material Design Environment Elevation

登录收藏
 
你可能喜欢的:
Material Design Layout Responsive layout grid  响应式布局网格Material Design Layout Responsive layout grid 响应式布局网格
Material Design Layout Pixel density 密度与分辨率Material Design Layout Pixel density 密度与分辨率
Material Design Understanding layout 布局指南Material Design Understanding layout 布局指南
Material Design Environment Light and shadowsMaterial Design Environment Light and shadows
Material Design Environment Surfaces 界面Material Design Environment Surfaces 界面
Material Design Foundation overview 概述Material Design Foundation overview 概述
Material Design ShrineMaterial Design Shrine
Material Design ReplyMaterial Design Reply
Material Design RallyMaterial Design Rally
Material Design OwlMaterial Design Owl