布局 响应式 UI

响应式 UI

Material Design 的响应式布局可以适配任何尺寸的屏幕。本文包括了利用弹性网格在不同的布局方式的一致性、不同尺寸的屏幕上内容如何展示以及描述了应用如何从小屏幕扩展到巨大的屏幕上。

断点 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

为了最佳的用户体验,Material Design 用户界面应当可以适配以下断点:480、600、840、960、1280、1440 以及 1600dp。

1、内容摘要和详情视图的布局

  • 在低于 600dp 的屏幕中仅展示某一层级的内容(无论是内容摘要还是详情,但不要同时展示)。
  • 在大于 600dp 的屏幕中可以同时展示两级的内容(同时包括内容摘要和详情)。

2、最大屏幕宽度

当布局宽度超过 1600dp 时,可以让宽度一直增加,直到达到最大宽度。此时的网格可以执行以下某一项:

  • 居中对齐内容,在内容区域两侧增加外边距
  • 保持内容左对齐,不断增加内容的右侧外边距
  • 内容宽度持续增加,同时可以展示出额外的内容

断点系统

断点系统描述了不同屏幕、设备和操作系统中的列表和宽度的规格。

对于某些尺寸,即使设备发生了旋转也会保持相同的数值。因此任意方向上的最小宽度都是一个定义值。

* 设备的最小宽度 <600dp 时为 16dp

** 为了适应浏览器 chrome 的变化,桌面端的断点值比列表中的小 16dp。

断点(dp)

手机/平板纵向

手机/平板横向

窗口

列数

间隔

0

小尺寸手机

xsmall

4

16

360

中尺寸手机

xsmall

4

16

400

大尺寸手机

xsmall

4

16

480

大尺寸手机

small handset

xsmall

4

16

600

小尺寸平板

中尺寸手机

small

8

16/24*

720

大尺寸平板

大尺寸手机

small

8

16/24*

840

大尺寸平板

大尺寸手机

small

12

16/24*

960

小尺寸平板

small

12

24

1024**

大尺寸平板

medium

12

24

1280**

大尺寸平板

medium

12

24

1440**

large

12

24

1600**

large

12

24

1920**

xlarge

12

24

网格 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

Material Design 的 UI 是基于 12 列的网格布局。这样的网格确保了不同布局的视觉连续性,同时可以灵活的适配多种宽度的设计。网格的列数取决于断点系统。

动画中展示了界面和面板如何与 12 列的网格对齐。

边距和间隙

相比于网格列宽,响应式的网格更注重一致的边距和间隙宽度。Material Design 的外边距和列都遵守 8dp 的基准网格。外边距和间隙可以是 8dp、16dp、24dp、40dp。

外边距不需要和间隙相等。例如,在同一个布局中可以使用 40dp 的边距和 24dp 的间隙。

动画中展示了边距和间隙的变化:

  1. 8dp 的外边距和间隙
  2. 16dp 的外边距和间隙
  3. 24dp 的外边距和间隙
  4. 40dp 的外边距和间隙
  5. 40dp 的外边距和 24dp 的间隙

全宽网格 vs 中心网格

全宽网格使用流动列和布局来判断何时改变布局。

中心网格使用固定列,并且在所有列(加上定义的外边距)不再适配屏幕时重新布局。

  1. 全宽网格
  2. 中心网格

面板对网格的影响

根据导航模式的定义,侧栏导航可以是固定的、可切换的、临时的。这些行为不仅适用于侧栏导航,也适用于任何面板。

固定的

固定面板不属于响应式网格。面板会根据定义的断点(当屏幕可以容纳面板时)来展示并且会挤压内容。面板中没有显示/隐藏面板的控制器。

面板对响应式网格的影响

侧面板对网格的影响

动画展示了两种行为:

  1. 可切换的侧面板出现时,会同时挤压网格和内容。当面板保持可见时,内容依然是可以被访问的。切换按钮可以隐藏面板。
  2. 临时侧面板出现时,会把网格和内容推出屏幕。点击面板外部的任意区域或是面板内部的项目就可以隐藏面板会。

可切换面板对响应式网格的影响

临时覆盖

临时覆盖的面板不会对网格和内容产生影响。当面板出现时,点击面板外部的任意区域或是面板内部的项目就可以隐藏面板。

临时面板对响应式网格的影响

界面行为 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当屏幕尺寸发生变化时,UI 会根据特定的界面行为来适配屏幕。

可见性

行为

定义

固定的

当屏幕有充足的空间,界面就一直可见。

可切换的

可以切换界面是否可见。当可见时,与屏幕中的其他元素交互不会改变面板的可见性。

临时的

可以切换界面是否可见。当可见时,与屏幕中的其他元素交互会隐藏或最小化面板。

宽度

行为

定义

固定

元素的宽度不随屏幕的宽度变化。

流动

元素的宽度会随着屏幕的宽度变化。

粘着的

元素的宽度固定的,直到受到其他元素或断点的影响。

挤压

元素的宽度随着面板的出现而收窄。

推出

元素的宽度保持不看,水平位置随着面板的出现而改变,有可能会超出屏幕的范围。

覆盖

元素的宽度和位置在面板覆盖时保持不变。

描述术语

行为

定义

高于、低于

元素的 Y 坐标

向前、向后

运动中的元素 Z 坐标

前面、后面

元素的固定 Z 坐标

左、右、中心

元素的 X 坐标

顶部、底部

元素的 Y 坐标相对于屏幕的边缘

扁平、升高

元素的 Z 坐标和阴影。扁平的元素没有阴影

内嵌、全出血

元素或图片的内边距

摘要、详情

内容摘要和全文

模式 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

当屏幕空间增加时,可以应用以下的响应模式:

  • 出现
  • 变形
  • 分隔
  • 重排
  • 扩展
  • 位移

出现

UI 在小屏幕中会被隐藏,当屏幕的空间充足时,元素可能会出现。

像侧栏导航这样的元素就可能被显示。

简洁的 UI 可能会出现更多功能或复杂选项。

在小屏幕上内容需要点击某个元素之后才会出现,当有充足的空间后,内容会默认出现。

变形

UI 元素可能会从某种形态变成另一个。

侧栏导航变成 Tabs。

列表变成了网格列表。

菜单项变成了工具栏中的图标。

分隔

一个图层的 UI 可能会被划分到新的空间中。

侧栏导航、内容列表以及详情内容被分隔在同一个视图中。

空间增加时,左侧面板、内容列表以及左侧面板被分隔在同一个视图中。

Tab 栏中的同级内容被分隔在同一个视图中。

重排

当空间充足时 UI 会被重新布局。

单列元素可能会重新排列成多种组合来填满内容区。

水平列表可能会重新排列成垂直列表。

组件内的元素可能会根据不同的屏幕比例或设备方向而重新排列。

扩展

UI 可能会扩展成更大的区域。

内容卡片可能会扩展成一个全新的区域。

对话框可能会根据内容扩展,或是特定的增量扩展。

位移

UI 组件可能会移动到更合适的位置。

小屏幕的底部 Sheet 可能会重新移动并以菜单的形式展示。

浮动操作按钮(FAB)会根据其他 UI 元素移动到更显眼的位置。