响应式布局网格

材料设计响应式布局网格适应屏幕尺寸和方向,确保布局的一致性。


列,装订线和边距

材料设计布局网格由三个元素组成:列,装订线和边距。


排水沟
边际

内容放置在包含列的屏幕区域中。列宽是使用百分比而不是固定值来定义的,以允许内容...

阅读更多

内容放置在包含列的屏幕区域中。

列宽度使用百分比而不是固定值来定义,以允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围(预定屏幕大小的范围)确定,无论是移动设备,平板电脑还是其他尺寸的断点。

在移动设备上,在360dp的断点处,此布局网格使用4列。

在平板电脑上,在600dp的断点处,此布局网格使用8列。

排水沟

排水沟是列之间的空间。他们帮助分离内容。装订线宽度是每个断点范围的固定值。为了更好地适应屏幕,......

阅读更多

排水沟是列之间的空间。他们帮助分离内容。

装订线宽度是每个断点范围的固定值。为了更好地适应屏幕,沟槽宽度可以在不同的断点处改变。更宽的排水沟更适合大屏幕,因为它们在列之间创建了更多的空白。

在移动设备上,在360dp的断点处,此布局网格使用16dp排水沟。

在平板电脑上,在600dp的断点处,此布局网格使用24dp排水沟。

利润率

边距是内容与屏幕左右边缘之间的空间。边距宽度定义为每个断点处的固定值...

阅读更多

边距是内容与屏幕左右边缘之间的空间。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕,边距宽度可以在不同的断点处改变。更宽的边距更适合大屏幕,因为它们在内容的周边创建了更多的空白。

在移动设备上,在360dp的断点处,此布局网格使用16dp边距。

在小型平板电脑上,在600dp的断点处,此布局网格使用24dp边距。


网格定制


可以调整布局网格以满足您的产品和各种设备尺寸的需求。

定制排水沟

可以调整排水沟以在布局的列之间创建更多或更少的空间。

阅读更多

可以调整排水沟以在布局的列之间创建更多或更少的空间。

此布局网格使用8dp排水沟。更紧密的间距可能表明图像彼此密切相关,因此它们被视为集合的一部分。

此布局网格使用较大的32dp排水沟来创建列之间的更多分隔。额外的空间有助于将每张专辑视为集合中的单个实体。

别。

不要使水槽太大,例如与柱子的宽度相同。太多的空间不会为内容留下足够的空间并阻止它出现统一。

自定义利润

可以调整边距以在内容和屏幕边缘之间创建更多或更少的空间。保证金使用每个固定值...

阅读更多

可以调整边距以在内容和屏幕边缘之间创建更多或更少的空间。边距为每个断点使用固定值。

身体复制的易读性的理想长度是每行40-60个字符。

此布局网格使用小的8dp边距,以允许图像占用布局中的更多空间。

此布局网格使用大的64dp边距来限制内容的宽度。

别。

不要使边距太大,以至于没有足够的内容空间。

排水沟和边缘

在同一断点内,沟槽和边缘宽度可以彼此不同。

阅读更多

在同一断点内,沟槽和边缘宽度可以彼此不同。

  1. 32个点的利润率
  2. 8dp排水沟

水平网格

可以为水平滚动的触摸uis定制材料设计布局网格。列,排水沟和边距从左到右排列,......

阅读更多

可以为水平滚动的触摸uis定制材料设计布局网格。柱,排水沟和边距从左到右排列,而不是从上到下排列。屏幕的高度决定了水平网格中的列数。

在非触摸和Web平台上,水平滚动uis并不常见。

此水平布局网格使用四个水平列,总布局高度为400dp。

  1. 排水沟
  2. 利润率

水平网格可以定位以适应不同的高度,允许顶部的app栏或其他ui区域的空间。

此水平布局网格从顶部应用栏组件下方开始,并使用高度为316dp的四个水平列。


断点

断点是具有特定布局要求的预定屏幕尺寸的范围。在给定的断点范围内,布局会根据屏幕尺寸和方向进行调整。

断点系统

材料设计基于以下列结构提供响应式布局。使用4列,8列和12列网格的布局可用于不同的屏幕,...

阅读更多

材料设计基于以下列结构提供响应式布局。使用4列,8列和12列网格的布局可用于不同的屏幕,设备和方向。

每个断点范围确定每个显示大小的列数,建议的边距和装订线。

断点范围(dp)

肖像

景观

窗口

边际/排水沟*

0 - 359

小手机

XSMALL

4

16

360 - 399

中型手机

XSMALL

4

16

400 - 479

大手机

XSMALL

4

16

480 - 599

大手机

小手机

XSMALL

4

16

600 - 719

小平板电脑

中型手机

8

16

720 - 839

大平板电脑

大手机

8

24

840 - 959

大平板电脑

大手机

12

24

960 - 1023

小平板电脑

12

24

1024 - 1279

大平板电脑

介质

12

24

1280 - 1439

大平板电脑

介质

12

24

1440年至1599年

12

24

1600 - 1919年

12

24

1920 +

XLARGE

12

24

*边距和排水沟是灵活的,不需要大小相同。

ios断点

以下列号,边距和装订线宽度适用于ios上的屏幕,设备,方向和宽度的断点。设备方向垂直尺寸类别...

阅读更多

以下列号,边距和装订线宽度适用于ios上的屏幕,设备,方向和宽度的断点。

设备

取向

垂直尺寸类别

横向尺寸类别

边际/排水沟*

苹果手机

肖像

定期

紧凑

4

16

苹果手机

景观

紧凑

紧凑

4

16

iphone plus

肖像

定期

紧凑

4

16

iphone plus

景观

紧凑

定期

4

16

iPad的

肖像

定期

定期

8

16

iPad的

景观

定期

定期

8

24

ipad - 甚至拆分多任务处理

肖像

定期

紧凑

12

24

ipad - 甚至拆分多任务处理

景观

定期

紧凑

12

24

ipad - 2/3拆分式多任务处理

肖像

定期

紧凑

12

24

ipad - 2/3拆分多任务 - 第一个应用程序

景观

定期

定期

12

24

ipad - 2/3拆分多任务 - 第二个应用程序

景观

定期

紧凑

12

24

ipad pro - 甚至拆分多任务处理

肖像

定期

紧凑

12

24

ipad pro 13in - 甚至拆分多任务处理

景观

定期

定期

12

24

*边距和排水沟是灵活的值,在材料设计网格系统中不需要相等。


网格行为

流体网格

流体网格使用可缩放和调整内容大小的列。流体网格的布局可以使用断点来确定布局是否需要显着改变。

阅读更多

流体网格使用可缩放和调整内容大小的列。流体网格的布局可以使用断点来确定布局是否需要显着改变。


列以全宽网格展开


固定网格

固定网格使用固定大小的列,具有流体边距,以保持每个断点范围内的内容不变。固定网格的布局只能......

阅读更多

固定网格使用固定大小的列,具有流体边距,以保持每个断点范围内的内容不变。固定网格的布局只能在指定的断点处更改。

利润在固定电网中扩张


ui地区

布局由多个ui区域组成,例如侧面导航,内容区域和应用栏。这些区域可以显示操作,内容或导航目的地。 ui区域应跨设备保持一致,同时适应不同屏幕尺寸的不同断点。

为了提高设备的熟悉度,为桌面设计的ui元素应该以与移动ui一致的方式进行组织。

不同大小的屏幕上的布局更改

永久的ui地区

永久ui区域是可以在响应网格之外显示的区域,如导航抽屉。这些地区不能崩溃。

阅读更多

永久ui区域是可以在响应网格之外显示的区域,如导航抽屉。这些地区不能崩溃。


当屏幕空间可用时,永久ui区域会暴露内容。


持久的ui区域

持久性ui区域是可以随时根据命令显示的区域,或者它们可以保持可见。他们可以切换或......

阅读更多

持久性ui区域是可以随时根据命令显示的区域,或者它们可以保持可见。它们可以打开或关闭,出现或消失。当它们出现时,它们会压缩内容和网格。

当持久性ui区域可见时,其可见性不受与屏幕上其他元素的交互影响。

打开时,此持久导航抽屉会导致网格(及其内容)压缩。

临时ui地区

临时ui区域暂时出现,当它们出现时,它们不会影响响应网格。当可见时,可以通过点击...隐藏它们

阅读更多

临时ui区域暂时出现,当它们出现时,它们不会影响响应网格。当可见时,可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。

当ui区域可见时,其他屏幕元素不是交互式的。


打开时,此临时导航抽屉不会影响响应网格或屏幕内容。



whiteframes

白框是结构化布局,为布局,分层和阴影提供一致的方法。它们是一个起点,旨在进行修改以满足产品的特定需求。

移动


桌面


移动


桌面