交互设计 » Material Design 之响应式栅格布局

Material Design 之响应式栅格布局

发表于: 交互设计. 评论
Sponsor

Material Design 响应式布局栅格适应屏幕尺寸和方向,确保布局的一致性。

列、间距和边距

Material Design 布局栅格由三个元素组成:列、间距和边距。

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

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

间距

间距是列之间的空间,它们有助于分离内容。

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

边距

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

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

自定义栅格

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

自定义间距

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

自定义栅格

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

正文副本可读性的理想长度是每行40-60个字符。

间距和边距

在同一断点内,间距和边距宽度可以彼此不同。

水平栅格

Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列,而不是从上到下排列。屏幕的高度决定水平栅格中的列数。

在非触控和web平台,水平滚动的UI并不常见。

可以定位水平栅格以适应不同的高度,从而为顶部的app栏或其他UI区域留出空间。

断点

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

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

每个断点范围决定每个显示大小的列数、建议的边距和间距。

栅格特点

弹性栅格

弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。

固定栅格

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

UI(用户界面)区域

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

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

永久UI区域

永久UI区域是可以在响应栅格之外显示的区域,如导航抽屉。这些地区不能重叠。

持久UI区域

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

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

临时UI区域

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

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

原型

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

翻译:Clien
https://www.zcool.com.cn/article/ZOTExMzEy.html
原文地址:https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins

赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }