响应布局网格

材料设计响应网格布局适应屏幕大小和方向,确保整个布局的一致性。


柱,檐槽和边距

材料设计布局网格由三个元件组成:列,水槽和利润率。

1.列
2.排水沟
3.边距

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

阅读更多

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

列的宽度是用百分比,而不是固定值,以允许内容灵活地适应任何屏幕尺寸限定。在网格中显示的列数是通过将在哪个画面被视为断点范围(范围预定的屏幕尺寸)来确定,无论是为了移动,平板电脑或其他大小断点。

在移动设备上,在360dp断点,这种布局网格使用四列。

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

排水沟

排水沟是列之间的空间。他们帮助单独的内容。沟槽宽度在每个断点范围的固定值。以更好地适应屏幕,...

阅读更多

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

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

在移动设备上,在360dp断点,这种布局网格使用16DP排水沟。

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

利润率

利润率之间的空间内容和屏幕的左,右边缘。缘的宽度被定义为在每个断点固定值...

阅读更多

利润率之间的空间内容和屏幕的左,右边缘。

缘的宽度被定义为在每个断点范围的固定值。以更好地适应屏幕,宽度可以在不同的断点变化幅度。发展经济学的利润率是大屏幕更合适,因为他们创建一个围绕内容的周边更多的空白。

在移动设备上,在360dp断点,这种布局网格使用16DP利润。

在一个小片,在600dp的断点,这种布局网格使用24dp利润。


网格定制


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

定制排水沟

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

阅读更多

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

ESTA布局网格使用8DP排水沟。在更紧密的间隔可能暗示图像密切相关的彼此,让他们被视为集合的一部分。

ESTA布局网格使用较大的,32DP排水沟来创建列之间多个分离。额外的空间每张专辑有助于被视为在单个集合的实体。

别。

排水沟不作太大,相同的宽度如列。太多的空间不会留下足够的空间内容,并防止它出现统一。

定制利润率

余量可以被调节以创建内容和屏幕的边缘之间的更多或更少的空间。每件都用固定的数值区间...

阅读更多

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

对于正文可读性的完美长度是每行40-60个字符。

ESTA用小网格布局,利润率8DP允许图像占用更多的空间布局。

ESTA使用大网格布,64DP边距限制内容的宽度。

别。

不要让大的利润,所以没有足够的空间内容。

排水沟和边距

在同一个断点,排水沟和边距宽度可以彼此不同。

阅读更多

在同一个断点,排水沟和边距宽度可以彼此不同。

  1. 32DP利润率
  2. 8DP排水沟

水平网格

材料设计网格布局可以定制用于触摸水平的用户界面,滚动。列,水槽和利润率奠定了由左到右...

阅读更多

材料设计网格布局可以定制用于触摸水平的用户界面,滚动。列,水槽和利润率奠定了由左到右,而不是自上而下。屏幕的高度确定的列数在网格水平。

UIS是罕见的水平滚动触摸和非网络平台。

卧式布局网格ESTA使用四列水平,为400dp的完整布局高度。

  1. 排水沟
  2. 利润率

水平网格可以被定位,以适应不同的高度,使得在顶部的应用程序栏或其他UI区域空间。

顶部应用栏组件的下方水平布局格ESTA开始,并使用四列水平地在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加

肖像

定期

紧凑

4

16

iphone加

景观

紧凑

定期

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的的亲 - 甚至分裂的多任务处理

肖像

定期

紧凑

12

24

iPad的的亲13英寸 - 甚至分裂的多任务处理

景观

定期

定期

12

24

*灵活的利润率和排水沟是价值观,不需要等于在材料设计网格系统。


格行为

流体网格

流体网格使用规模和调整列的内容。流体网格布局可以使用的断点,以确定布局需要发生很大变化。

阅读更多

流体网格使用规模和调整列的内容。流体网格布局可以使用的断点,以确定布局需要发生很大变化。


扩大全宽网格列


固定网格

固定网格使用固定大小的列,流体利润率保持不变的内容在每个断点范围。固定网格布局只能...

阅读更多

固定网格使用固定大小的列,流体利润率保持不变的内容在每个断点范围。固定网格布局只能在指定的断点改变。

利润率固定网格扩大


UI区

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

来熟悉各种设备,专为桌面UI元素应的方式,与移动UI一致的组织。

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

UI永久地区

UI永久区域是区域可以显示响应电网以外的是,像抽屉式导航。这些区域不能折叠。

阅读更多

UI永久区域是区域可以显示响应电网以外的是,像抽屉式导航。这些区域不能折叠。


当屏幕空间可用,永久的UI区域公开的内容。


UI持久区

UI持久的区域是区域可以使得在命令随时显示出来,或保持他们可以看到。它们可以切换或...

阅读更多

UI持久的区域是区域可以使得在命令随时显示出来,或保持他们可以看到。他们可以开启或关闭进行切换,出现或消失。当他们出现,它们凝结内容和电网两个。

当一个持久的UI区域是可见的,其知名度不被交互在屏幕上的其他因素的影响。

当打开时,这种持续的导航抽屉导致电网(及其内容)凝结。

UI临时区域

UI临时出现的区域是暂时的,当他们这样做,他们不影响响应电网。当可见的,他们可以通过点击一个隐藏...

阅读更多

UI临时出现的区域是暂时的,当他们这样做,他们不影响响应电网。当可见的,它们可以通过它们敲击在其区域内的项目,或者他们的区域外的任何空间隐藏起来。

当用户界面是一个明显的区域,其他屏幕元素都没有互动。


当打开时,这并不是临时导航抽屉影响响应网格或屏幕内容。



whiteframes

whiteframes是结构化提供一个一致的方法来布局,层次感和阴影的布局。他们是一个起点,意味着要修改,以满足产品的特殊需求。

1.移动


2.桌面


1.移动


2.桌面