资讯详情
Material Design中的高度
描绘高度
高度层次结构
默认高度
高度是沿z轴的两个界面之间的相对距离。
组件高度值
导航抽屉：16dp
App应用栏：4dp
卡片：1dp到8dp
FAB：6dp
按钮：2dp到8dp
对话框：24dp
测量高度
材料设计中的高度测量是为测量材料界面之间的距离。 沿着Z轴在密度独立像素（dps）和使用阴影描述（默认情况下），这个距离从一个界面的表面到另一个界面的表面。
从正面看，一个高度为1dp的界面和另一个高度为8dp的界面
从侧面看，两个界面之间的高度差为7dp
当其他界面位于界面后面时，相同高度的表面可能会有不同的表现。
界面A和B两个高度相同，为8dp。 它们投射不同的阴影，因为界面B位于另一个
界面（C）的前面，C早已有了高度。
从侧面看，界面（A），（B）和（C）之间有高度差异。
高度系统
所有材料设计的界面和组件都具有高度值。
不同高度的界面执行以下操作：
允许界面在其他表面前后移动，例如内容在应用栏后面滚动
反映空间关系，例如一个浮动操作按钮的阴影如何表明它是和一个卡片集分离的
将注意力集中在最高的高度上，例如临时出现在其他界面前的对话框
可以使用阴影或其他视觉提示来描绘高度，例如界面填充或不透明度。
Material Design使用阴影显示高度。
默认高度
默认高度是默认情况下为组件提供的起始高度值。 为响应用户或系统事件，事件会从默认高度移动。 所有材料组件有默认高度，相同地对于每种类型的组件都有默认高度。 例如，所有卡片具有彼此相同的默认高度，并且对话框具有与其他对话框相同的默认高度。
默认高度和环境
默认高度因环境，平台或应用程序而异。 移动设备上的默认高度旨在提供视觉提示，如阴影，以指示组件何时是交互式的。 相比之下，桌面设备上的默认高度较浅，因为会有其他提示（如悬停状态）在组件交互时体现。 例如，桌面设备上0dp高度的卡片用边框描绘轮廓。
从前面看，应用栏（A），卡片（B）和浮动操作按钮（C）的移动设备的默认高度
从侧面看相同的组件
1.从正面看，应用栏（A），浮动操作按钮（B）和卡片（C）在桌面设备上的默认高度
2.从侧面看相同的组件
改变高度
组件可以根据用户输入或系统事件更改高度。 发生这种情况时，组件会移动到预设的动态偏移高度，既组件在非静止状态下移动到的默认高度。
每种类型的组件的动态偏移高度都是相同的。 例如，所有卡片使用与其他卡片相同的偏移值，并且所有浮动操作按钮使用与其他浮动操作按钮相同的偏移值。
一旦用户输入（或系统事件）完成或取消，组件就会迅速返回其默认高度。
一些组件响应用户输入而增加高度。
在用户输入时，此按钮将其高度从2dp增加到8dp
从侧面看相同的组件
高度冲突
当组件在其默认高度和动态偏移高度之间移动时，它不应与其他组件发生碰撞。
为了避免这些类型的碰撞，组件可以移开。 例如，如果增加卡片的高度位置使其穿过浮动操作按钮，则该按钮可能会在发生碰撞之前消失或移出屏幕。
您还可以设计应用程序的布局以避免碰撞，例如在卡片旁边放置浮动操作按钮，而不是直接放在卡片上方。
视频播放器
暂时重新定位或移除可能与偏移组件发生碰撞的组件。 在移动设备上的卡片流的前视图（1）和侧视图（2），显示出当选中卡片（A）时浮动动作按钮（B）如何消失。
设计您的应用程序，使极少机会发生高度冲突。
要成功描绘高度，界面必须显示：
界面边缘，使界面与周围环境形成对比
与其他界面重叠，无论是静止还是运动
与其他界面的距离
界面边缘
边缘有助于表达材料界面的触觉质量。 通过将用户界面的不同部分分离成可识别的组件来
展示一个表面的结束、另一个表面的开始。 例如，应用栏的边缘显示它与网格列表分开，
向用户传达网格列表的滚动是独立于应用栏。
默认情况下，材质界面使用阴影来表示边缘。 其他方法也可用于指示边缘，例如：
给界面设置不同的颜色
给界面设置不同的不透明度
边缘必须在界面之间产生足够的对比度（通过满足或超过适宜的对比度），以使它们看起来彼此分开。
界面重叠
当界面部分或完全地与另一表面重叠时，表明两个界面有不同的高度（而不是它们之间的差异的程度或量）。 较高高度的界面出现在较低高度的界面之前，这意味着它们沿z轴定位在不同的高度。 默认情况下，界面可能会相互重叠，或者由于在UI中更改其位置的运动而变得重叠。
当界面具有不同的不透明度或彼此的对比度不足时，可能难以分辨出哪个界面位于另一个界面之前。 为了避免似是而非的重叠，需确保界面边缘清晰易辨。
阴影显示界面边缘，界面重叠和高度。
不同的界面颜色显示界面边缘和重叠，但不是高度。
不透明度显示界面边缘和重叠，但不是高度。
距离
界面之间的高度差异可以使用遮罩背景或使用阴影来表示。
遮罩背景
当UI的背景在遮罩状态时，它表示其上方的内容处于更高的高度。 遮罩背景表示了大量很高但未指定的高度。
阴影
阴影可以表达界面之间的高度差异，而这种方式是其他方法不能做到的。
阴影的大小和柔和度或扩散量都表示两个界面之间的距离程度。 例如，具有小而锐利的阴影的界面表示界面紧邻其后面的界面。 更大，更柔和的阴影表达更多距离。
阴影大小和扩散传达的细微差异：
两个界面之间的一个细微程度的距离
非重叠界面之间的高度差异
阴影显示界面的边缘及其相对于背景的高度。 它们还使非重叠界面之间的高度差异可感知。
动效和高度
动效可以使用以下方法强调高度：阴影大小和柔和度的变化强调高度的变化。
改变阴影
显示重叠
推动
缩放
视差
阴影的变化
阴影大小和柔软度的变化强调高度的变化。
阴影增长，以强调卡片正在上升。
显示重叠
在动效时，界面可以部分地或完全地与另一表面重叠，显示哪个界面在另一个界面之前。
随着它的扩展，界面可以通过重叠附近的界面来显示高度。
推动
相同高度的界面可以推动其他界面沿着路径移动。
