Material Design Environment Surfaces 界面

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

 

目录

Material环境
属性
特征

 

界面

材料设计具有三维特性,反应在其界面,深度和阴影的使用上。

 

Material环境

物理世界
在物理世界中,物体可以堆叠或彼此连接,但不能相互穿过。 他们投下阴影并反射光线。

Material Design体现了界面通过材质UI去显示和移动对象的特性。 界面及其在三位空间中的移动方式,均与其在物理世界的移动方式相似。 此空间模型也可以一致地在应用程序中应用。

 

深度
Material Design UI显示在使用灯光,界面和投射阴影表达三维(3D)空间的环境中。 Material环境中的所有元素都沿水平,垂直和沿z轴的不同深度移动。 通过将元素放置在沿着z轴正方向的各个点处,朝向观察者延伸来描绘深度。

在Web上,UI通过操纵y轴来表示3D空间。
​​Material Design Environment Surfaces 界面
带有x,y和z轴的3D空间

 

属性

Material界面在材料设计中具有一致的,不可更改的特性和多种行为。

 

外形尺寸

材料具有不同的x&y尺寸(以dp测量)和统一的厚度(1dp)。

​​
Material Design Environment Surfaces 界面

 

阴影

材料界面在不同高度投射阴影。

Material Design Environment Surfaces 界面

阴影显示不同的材质界面的高度。

  1. 顶视图
  2. 当材料向上移动时,显示由光投下等量3D视图的阴影
    ​​

Material Design Environment Surfaces 界面

在不改变界面高度的情况下不要表达阴影。

  1. 顶视图
  2. 等距3D视图仅使用颜色而不是光线和高度来描绘阴影

 

分辨率
材料具有无限分辨率。

材料具有无限分辨率。
​​

内容

内容在材料上以任何形状和颜色显示。 内容不会向材质添加厚度。 内容不是在单独的层上展示。

Material Design Environment Surfaces 界面

材料可以显示任何形状和颜色。 内容可以独立于Material,但仅限于Material的边界内。

​​

Material Design Environment Surfaces 界面

内容行为可以独立于界面行为。
​​

Material Design Environment Surfaces 界面

内容行为可以跟随Material行为。

 

物理属性
材料是坚固的。 用户输入和交互不能透过材料。 多个Material元素不能同时占据空间中的相同点。
​​

Material Design Environment Surfaces 界面

 

 

多个材质元素不能同时占据空间中相同的点。

​​
Material Design Environment Surfaces 界面

 

 

材料不能通过其他材料。例如,更改高度时,一个材料界面无法穿过另一个材料界面。

Material Design Environment Surfaces 界面

材料不能穿过其他材料。

 

材料不能像气体那样表现。

Material Design Environment Surfaces 界面

材料不能像气体那样表现。

 

Material Design Environment Surfaces 界面

材料通过不透明度,大小或位置的变化进入和退出。

 

材料不像液体或凝胶那样是流体,尽管它可能用于展示具有这些特性的内容。

Material Design Environment Surfaces 界面

材料不像液体或凝胶。
​​

Material Design Environment Surfaces 界面

材料不像液体。

 

转换材料

材料可以改变形状。

材料可以改变不透明度。

 

Material Design Environment Surfaces 界面
​​
1.材料可以在整个界面上统一地改变不透明度。
2.材料可以改变其界面的一部分的不透明度。

 

材料仅沿其平面延伸和收缩。

Material Design Environment Surfaces 界面

材料仅沿其界面延伸和收缩

 

材料在用户界面的厚度里弯曲和折叠

Material Design Environment Surfaces 界面

材料永远不会以超过用户界面深度的方式弯曲或折叠

 

材料界面可以连接在一起成为一个新的Material界面。

材料界面可以连接在一起成为一个新的Material界面。

 

当分裂时,材料可以重新合并。 例如,如果从界面中移除一部分界面,界面将再次变为整体。

​​材料可以分裂并再次变为整体。

 

运动

材料可以在环境中的任何地方自发生成或解散。 材料可以沿任何轴移动。 可以协调多个Material界面的的运动。

材料可以自发生成或解散。

 

材料可以沿任何轴移动。

材料可以沿任何轴移动。

 

可以协调多个Material界面的运动。

可以协调多个Material界面的运动。

 

沿z轴的材料运动通常是用户交互的结果。

用户交互促使材料界面呈现沿Z轴运动

 

属性

基本材料界面
基本的材料界面为不透明白色,厚度为1dp,并投射阴影。所有UI元素在 Material Design中的结果都来自该界面的修改。

 

行为
材料界面可以以某种方式表现:

  1. 固定界面可以通过任何交互保持相同的尺寸。
  2. 可拉伸界面可以持续扩展或收缩直至尺寸限制,然后表现为固定界面。
  3. 内部可滑动界面在整个交互过程中保持相同的大小。 他们可以在区域内滚动时显示其他内容,直到达到内容限制尺寸。 当达到限制尺寸时,它们在滚动方向上表现为固定界面。

​​Material Design Environment Surfaces 界面
在最初可见的所有内容时,材料界面尺寸可以固定。 界面在整个交互过程中保留原尺寸。

​​

材料界面尺寸可沿一个或多个轴扩展,以适配其他内容。

 

材料界面尺寸保持不变,但内容可以在界面上滚动或平移。

 

复合界面
界面可以划分为不同区域来显示不同类型的行为。

单个界面中可以包含多个内部可滑动界面,例如嵌入的地图(1)独立于可滚动列表(2)

 

卡片可扩展以便于展示独立于其他卡片内容的区域

 

可伸缩界面

可伸缩界面在达到极限值之前都可被拉伸,达到极限时整个界面将被固定。 界面可以拉伸垂直,水平或双向拉伸。
通常,用户与界面的交互在一个方向上拉伸界面。 例如,点击“更多详细信息”可能会使一个卡片垂直增长并显示其他内容。

材料拉伸方向可以仅仅是垂直的。
​​

材料拉伸方向可以仅仅是水平的。

 

材料拉伸方向是水平的和垂直的,可以是单独的,也可以是同时的。

 

 

界面定位和移动(x / y)

界面可以在x轴和y轴上保持固定的位置,或者可以在任何方向上移动。

界面移动可以限制在单个轴上,允许一次沿单个轴移动,或允许同时沿两个个轴移动。

界面可以保持在固定位置。 顶部应用栏(1)保持在固定位置,而卡片集合(2)仅在其后面垂直滚动。

​​

界面(1,2)可以在任何方向上移动,尽管移动可以限制在一次的单个轴上。
​​

 

界面可以向任何方向移动。

 

界面的移动可以互不干扰,可以影响其他界面的移动,或者由其他界面的移动来决定。

从属性可以基于各种机制,例如当附近的界面移动时另外的界面在扩展,或者有视差时移动的界面之间的比例。​​

界面可以彼此独立地移动。
​​

一个界面的运动可以取决于另一个界面的运动。

 

界面不透明度
材料界面可以是透明的,半透明的或不透明的。

透明界面和半透明界面可能需要进行背景处理以保持界面上文本的易读性。

透明界面缺少清晰的边缘,使得难以确定界面的开始和结束的位置,以及内容属于哪些界面。

Material Design Environment Surfaces 界面

  1. 透明界面和半透明界面可能需要进行背景处理以保持界面上文本的易读性。
  2. 等距视图

​​

Material Design Environment Surfaces 界面

  1. 不要使用透明界面,因为它们没有不透明度,使得难以识别界面上出现的内容。 此顶部应用栏是透明的,显得不清晰如果文本在顶部应用栏或者在界面在文本后面
  2. 等距视图

 

遮罩
遮罩是应用于材料界面上的临时处理,目的是使界面上的内容不那么突出。 它们有助于引导用户注意屏幕的其他部分,忽略界面上被遮罩处理过的信息。

遮罩有多种使用方式,包括:

  1. 界面及其内容的变暗或变淡
  2. 减少界面及其内容的不透明度
    屏幕上的多个界面可以同时使用遮罩。遮罩可以出现在任何高度,无论是在前景还是在背景中。
    ​​
    Material Design Environment Surfaces 界面

 

原文地址:Material Design

 

文章版权归原作者,内容为网络收集。如有侵权请告知我们并会及时删除。邮箱: hello@sketchui.net