Material Design 基础 - Component behavior

前言

本页描述组件在布局中的行为，包括与网格以及断点的关系。

Position术语

UI元素在每个分界点范围内的行为方式不同。UI元素、组件和表面在网格中的位置用以下术语描述。

Position term	Definition
Above; below	The y position of an element
In front of; behind	The z position of an element
Left; right; center	The x position of an element
Top; bottom	The y position of an element relative to a container or screen edge
Vertically centered	The x and y position of an element centered relative to a container or the screen edges
Sticky	An element that scrolls with the UI and locks at a certain point in the scroll range
Floating	A fixed element positioned in front of scrolling content
Leading edge	The edge of a screen or layout that written content begins from. For example, in LTR languages such as English, this is usually the left edge of a screen
Trailing edge	The edge of a screen or layout where written content ends

组件自适应(Component adaptation)

组件适配描述了视觉呈现（填充、大小、布局或对齐）的变化，或者将一个组件切换到另一个更适合设备大小和用例的组件。

视觉呈现(Visual presentation)

视觉呈现是最常见的适应方法。这种适应会影响内容和对象在屏幕上的大小和位置，以及它们之间的关系。例如，移动设备上的文本列表可以调整边距、垂直间距或密度，以便更好地适应平板电脑等更大的屏幕。

大小限制(Size constraints)

Material组件具有容器尺寸、边距和填充的最小值和最大值。有关每个组件的尺寸约束，请访问“组件”部分。
例如，对于大屏幕，Snackbar的最大宽度为600dp。当布局从移动屏幕扩展到大屏幕时，这些最小值和最大值允许对组件的视觉显示进行持续更改。
缩放布局时，零部件可以在尺寸约束范围内具有固定宽度或响应宽度。
无论屏幕大小如何，具有固定宽度的元素都保持相同的宽度。

具有响应宽度的元素随着屏幕大小的变化而膨胀和收缩。

内部构成(Internal Composition)

缩放组件时，请定义其内部图元相对于容器的位置和对齐方式。
例如，当按钮水平展开时，图标按钮内的图标和文本标签保持彼此固定并保持居中。

对于更复杂的组件，如应用程序栏，可以将内部元素分组并锚定到容器中的多个点。
例如，菜单图标和徽标可以分组并定位到前缘，而搜索栏定位到中心，动作图标定位到后缘。

组件的内部组成应符合其显示设备的人体工程学需求。例如，移动设备上的水平定向卡可以在更大的屏幕上转换为更方形的卡。这种改编使图像更加突出，并允许更大的字体风格，以提高可读性。

组件交换

随着屏幕尺寸的不同，布局也会发生变化，具有类似功能的组件也可以互换。这使得可以调整布局，以便对界面的人机工程学和功能质量进行大规模更改。
例如，底部导航栏可以与平板电脑上的导航栏交换，也可以与大屏幕上的导航抽屉交换。

组件也可以切换类型。例如，手机上的全屏对话框可以与大屏幕上的简单对话框交换。这种组件更改保持了对话框的功能，同时也利用了屏幕空间，通过显示底层内容来保留用户的上下文。

更换部件时要小心，确保可互换部件在功能上是等效的。例如，不要用按钮换芯片。在列表项和卡片之间切换时要小心。部件交换应始终为用户提供功能和人体工程学的目的。

响应模式

布局中组件的排列也可以随着屏幕大小的变化而调整。通过重新定位组件或根据可用屏幕空间隐藏/显示信息，可以实现这种自适应。

显示或隐藏

当在更大的断点处有更多可用空间时，可以显示被较小屏幕隐藏的UI部分。

重新定位

一个界面及其组成部分可以回流或重新定位，以利用额外的屏幕空间。重新定位也是一种解决不同屏幕尺寸上不断变化的人体工程学和输入方法的方法。

Material Design 系列文章

更多Material Design相关文章请访问 鹏叔的IT技术博客空间-Material Design

参考文档

Material System - Component behavior