4.5 布局-组件特性

组件特性

本文描述了组件在栅格和断点间的表现方式。

内容

位置术语

组件宽度

响应模式

位置术语

UI元素在每个断点区域内的表现方式都有所不同。

描述符

UI元素、组件和表面在栅格中的位置可以使用以下术语来描述：

组件宽度

组件宽度可以在不同的屏幕上保持一致，也可以根据布局而改变。宽度可以是：

• 固定

• 弹性

由于固定宽度元素在布局改变时仍然保持宽度不变，它们的位置将会产生变化以适应新的布局。位移方式可以是：

• 推拉

• 覆盖

固定

当元素为固定宽度时，即使屏幕宽度改变，它的宽度也不会变。

这个按键相对于右边距保持了固定形式。

弹性

当元素宽度为弹性时，宽度将随着屏幕尺寸改变而伸缩。

这个按键随着右边的两个“列”的变化而伸缩。

错误示例

如果太窄而无法正常显示或者内间距太小，则不要在弹性组件上使用容器。

谨慎使用

在跨多列的宽屏中使用弹性组件时应小心谨慎，一些组件（例如按键）可能会在宽屏中过于突出。

推拉

当布局和屏幕尺寸改变时，可从原始位置来推动组件，组件宽度保持不变，但水平位置会向左或向右移动。如果推出了屏幕，部分内容可能会被屏幕边缘挡住。

内容区域被抽屉导航推出了屏幕。

覆盖

当UI发生变化时，组件可以被其它元素覆盖遮挡。当组件被覆盖时，其宽度和位置不变。

内容UI区域被导航UI区域覆盖。

响应模式

组件可以基于它们的屏幕尺寸和设备类型和使用以下模式来调整大小。这些规格包括：

• 使用更好的组件来适配空间

• 切换组件的可见性来适配较小的空间

• 改变输入方式

随着屏幕空间扩大，可能会用到以下响应模式。

显示

较小屏幕中UI的隐藏部分可在空间扩展到特定断点区域时显示出来。

元素（例如侧边导航）可在屏幕尺寸增加时成为可见状态。

简单的UI可以显示出丰富和复杂的选项。

当有更多可用空间时，在小屏幕上点击后才会显示内容。

转换

组件可以从一种格式转换成特定断点区域内的另一种组件。

侧边导航可以转换成大屏幕上的标签导航（tabs）。

列表可以在大屏幕中转换成图片列表。

菜单项可以在大屏幕中转换成工具栏中的图标。

分区

当有更多可用空间时，UI可以一次显示它所包含的多个层（如果有）。UI元素在新的可用空间内被划分成了不同的区域。

侧边导航、列表内容以及内容详情在大屏幕的一个视图内被划分成了不同的区域。

同级标签内容在大屏幕的一个视图内分区。

重排

UI可以通过改变布局来在新的可用空间内重新排列。

单列形式的元素可以用多种组合方式在大屏中通过重排来填充内容区域。

水平标签可以在大屏上重排成垂直列表。

元素可以基于新屏幕比例或者设备方向在组件内部重排。

扩展

UI可以扩展为更大的空间。

卡片可以扩展填充更大的空间。

弹框可以根据内容比例或者特定增量来扩展。

定位

UI组件可以定位到到更恰当的位置。

小屏幕上的底部动作条可以在大屏幕中作为菜单来重新调整位置。

一个浮动操作按钮（FAB）在大屏幕上可以移动到与其它UI元素相关且更显眼的位置。

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考