首页 > 其他分享 >Material Design 基础 - Elevation(标高)

Material Design 基础 - Elevation(标高)

时间:2022-10-22 18:01:15浏览次数:77  
标签:静止 Elevation Material Surface 标高 Design 组件 阴影

1. Elevation(标高)

Elevation(标高)是沿 z 轴的两个Surface之间的相对距离。

2. 测量标高

Material Design中的标高为Material surfaces之间的距离。从一个Material surface的前部到另一个Material surface前面的距离沿 z 轴以与dps(density-independent pixels)为单位进行测量,并使用阴影进行描绘(默认情况下).

3. elevation系统

所有Material surfaces和组件都具有标高值。

不同标高的surfaces执行以下操作:

  • 允许surfaces在其他surfaces的前面和后面移动,例如内容在app bars后面滚动
  • 反映空间关系,例如浮动操作按钮的阴影如何指示它与卡片集合分开
  • 将注意力集中在最上层的surface上,例如对话框暂时出现在其他Surface的前面

可以使用阴影或其他视觉提示(如Surface填充或不透明度)来描绘标高。

注意:
不同的surface填充也可以用来描绘标高而不仅仅是阴影.
不同的透明度也可以用来描绘标高而不仅仅是阴影.

4. 静止标高

静止标高是默认情况下为组件指定的起始标高值。组件从静止标高移动以响应用户或系统事件。所有Material组件都具有对于每种类型的组件都相同的静止标高。例如,所有卡片彼此具有相同的静止标高,并且对话框具有与其他对话框相同的静止标高。

5. 静止标高和环境

静止标高因环境、平台或应用程序而异。移动设备上的静止标高旨在提供视觉提示(如阴影),以指示组件何时是交互式的。相比之下,桌面上的静止标高较浅,因为其他提示(如悬停状态)在组件交互时会进行通信。例如,桌面上 0dp 标高的卡片用描边勾勒轮廓。

6. 更改标高

组件可以更改标高以响应用户输入或系统事件。发生这种情况时,组件将移动到预设的动态标高偏移,这是组件在非静止状态时移动到的默认标高。

每种类型的元件之间的动态标高偏移相同。例如,所有卡片都使用与其他卡片相同的偏移量,并且所有浮动操作按钮都使用与其他浮动操作按钮相同的偏移量。

一旦用户输入(或系统事件)完成或取消,组件就会迅速返回到其静止标高。

7. 标高干扰

当元件在其静止标高和动态标高偏移之间移动时,它不应与其他元件碰撞。

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

你还可以设计应用的布局以避免冲突,例如将浮动操作按钮放在卡片旁边,而不是直接放在卡片上方。

8. 描绘标高

要成功描绘标高,surfaces必须显示:

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

8.1. Surface边缘

边缘有助于表达Material surfaces的触觉质量。它们显示一个图面的结束位置,另一个surface通过将 UI 的不同部分分隔为可识别的组件来开始。例如,应用栏的边缘显示它与网格列表是分开的,从而向用户传达网格列表独立于应用栏滚动。

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

赋予Surface不同的颜色
为Surface提供不同的透明度

边必须在Surface之间产生足够的对比度(通过达到或超过可访问的对比度),以便将它们视为彼此分开。

8.2. Surface重叠

当一个Surface部分或完全重叠另一个Surface时,它表示两个Surface占据不同的标高(但不是它们之间的差异程度或数量)。较高标高处的Surface显示在较低标高处的Surface的前面,这意味着它们位于沿 z 轴的不同标高处。默认情况下,Surface可能会相互重叠,或者由于运动而导致其在 UI 中的位置而重叠。

当Surface具有不同的不透明度或彼此对比度不足时,可能会很难分辨哪个Surface在另一个Surface的前面。通过确保明确定义Surface边,避免模棱两可的重叠。

  1. 阴影显示Surface边缘、Surface重叠和标高。
  2. 不同的Surface颜色显示Surface边缘和重叠,但不显示标高距离感。
  3. “不透明度”显示Surface边和重叠,但不显示标高距离感。

8.3. 距离感

Surface之间的标高差程度可以使用遮罩背景或使用阴影来表示。

  • 遮罩
    当背景在 UI 中被遮罩化时,它表示其上方的内容处于较高高度。遮罩的背景表示大而未量化的高程。

  • 阴影
    阴影可以以其他技术无法表示的方式表示表面之间的高程程度。

阴影的大小和柔和度或扩散量都表示两个表面之间的距离程度。例如,阴影较小且锐利的曲面表示曲面与其后面的曲面非常接近。更大、更柔和的阴影表示更多的距离。

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

两个曲面之间的详细距离度
非重叠表面之间的高程差

8.4. 运动和标高

运动可以使用以下方法强调标高:

  • 阴影变化
    阴影大小和柔和度的变化强调了高程的变化。
  • 显示重叠
    一个曲面可能会在动画时部分或完全重叠,以显示哪个曲面在另一个曲面的前面。
  • 推动
    共享相同高程的表面可以在其路径中移动表面。
  • 缩放
    向上或向下缩放表面的大小可以强调高程变化。
  • 视差
    不同高程处以不同速度移动的多个表面可以创建深度感,并将焦点放在前景内容上。
  • 组合动作技巧
    组合动作技巧可以通过结合动作技巧来强调标高。

9. 标高层次

内容与其他内容的关系取决于它们位于相似还是不同的海拔高度。

9.1. 不同标高层次的内容

位于上层的标高通常意味着:

  • 包含更重要的内容
  • 集中注意力,例如对话
  • 控制其后面的表面,例如应用程序栏中的操作

9.2. 共面曲面上的内容

将曲面放置在同一标高处会使它们共面,并可能表明它们包含彼此同等重要的内容。例如,一个集合中的所有卡片都具有同等的重要性。

不表达标高的曲面可以显示为共面。对于不表示标高的曲面,可以通过其内容以及通过调整其水平和垂直布局位置以建议其相对层次来传达层次差异。

10. 默认标高

所有元素都具有静止标高和动态标高偏移的默认值。某些构件的标高高于其他构件,从而在所有组件之间建立了一致的标高顺序。例如,对话框总是出现在所有其他组件的前面。

下表列出了静止标高和动态标高偏移的默认值。

默认标高值表

组件 默认标高值(dp)
Dialog 24
Modal bottom sheet Modal side sheet 16
Navigation drawer 16
Floating action button (FAB - pressed) 12
Standard bottom sheet Standard side sheet 8
Bottom navigation bar 8
Bottom app bar 8
Menus and sub menus 8
Card (when picked up) 8
Contained button (pressed state) 8
Floating action button (FAB - resting elevation) Snackbar 6
Top app bar (scrolled state) 4
Top app bar (resting elevation) 0 or 4
Refresh indicator Search bar (scrolled state) 3
Contained button (resting elevation) 2
Search bar (resting elevation) 1
Card (resting elevation) 1
Switch 1
Text button 0
Standard side sheet 0

11. 参考文档

Material System - Environment Elevation

标签:静止,Elevation,Material,Surface,标高,Design,组件,阴影
From: https://www.cnblogs.com/guoapeng/p/16816812.html

相关文章

  • Material Design 基础 - Component behavior
    前言本页描述组件在布局中的行为,包括与网格以及断点的关系。Position术语UI元素在每个分界点范围内的行为方式不同。UI元素、组件和表面在网格中的位置用以下术语描述。......
  • Material Design简介
    介绍Material是Google创建的一个设计系统,旨在帮助团队为Android、iOS、Flutter和Web构建高质量的数字体验。原则材料是隐喻Materialdesign的灵感来自物理世界......
  • Material Design基础 - Pixel Density
    像素密度(PixelDensity)一英寸屏幕上存在的像素数称为像素密度。屏幕像素密度和分辨率因平台而异。屏幕密度变化高密度屏幕的每英寸像素数比低密度屏幕的多。因此,相同......
  • Material Design基础 - 响应式布局网格
    响应式布局网格MaterialDesign的响应式布局网格可根据屏幕大小和方向进行调整,确保布局的一致性。Columns,gutters,andmargins响应式布局网格由三个元素组成:Columns,......
  • Material Design基础 - spacing methods
    spacingmethodsspacingmethods使用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。基准网格8dp网格所有组件都与移动设备、平板电脑和台式机的8dp方......
  • Material Design基础 - Surfaces
    MaterialSurfacesMaterial设计具有三个维度的品质,这些品质反映在其对表面(Surfaces)、深度和阴影的使用中。Materialenvironment在真实世界中,物体可以堆叠或相互接触,......
  • Material Design 基础 - 文字排版
    文字系统(Thetypesystem)使用排版尽可能清晰有效地呈现您的设计和内容。文字类型标尺(Typescale)质感设计的文字类型标尺包括一系列对比样式可满足产品及其内容的需求......
  • Material Design基础 - Light and shadows
    光线和阴影materialsurface阻挡光源时会投射阴影。在material设计环境中,虚拟灯光照亮UI。关键灯光创建更清晰的方向性阴影,称为关键光阴影。环境光从各个角度出现,以创建......
  • Material Design 基础 - Layout
    理解layoutmaterial设计布局使用统一的元素和间距,以鼓励在多种平台、环境和屏幕尺寸之间的一致性。原则Predictable(可预测的)使用直观且可预测的布局,并具有一致的U......
  • Material Design 基础 - 导航
    说明导航允许用户在应用程序中移动。导航类型导航是在应用程序的屏幕之间移动以完成任务的行为。它是通过几种方式实现的:专用导航组件、将导航行为嵌入内容以及平台功能......