这是一个翻译系列,原文是谷歌18年所出的材料设计指南(文末有链接),强大的材料设计将带我们一起深入了解UI设计中的所有规范。每周会更新数篇,一共百余篇,欢迎关注哦。

 

目录

列,间隙和外边距
网格自定义
断点
网格行为
UI区域
线稿

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

 

列,间隙和外边距

材料设计布局网格由三种元素组成:列,间隙和外边距。
​​

 

  1. 间隙
  2. 外边距

 


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

使用百分比而不是固定值来定义列宽,让内容灵活地适应任何屏幕大小。 网格中显示的列数由可视屏幕的断点范围(屏幕大小的预定范围)确定。无论是移动设备,平板电脑还是其他尺寸的断点。
​​
在移动设备上,断点为360dp,此布局网格使用4列。

​​


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

 

间隙
间隙是列之间的空间。它们用来分隔内容。

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


在移动设备上,断点为360dp,此布局网格使用16dp的间隙。

 

​​
在平板上,断点为600dp,此布局网格使用24dp的间隙。

 

外边距

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

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

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

 

​​
在小型平板上,断点为600dp,此布局网格使用24dp的外边距。

 

 

网格自定义

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

 

自定义间隙
可以调整间隙以便在布局的列之间创建更多或更少的空间。
​​
此布局网格使用8dp的间隙。 较紧的间距可以暗示图像彼此密切相关,因此它们被视为集合的一部分。
​​

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

​​

不要使间隙太大,例如与列相同的宽度。 太宽的间隙就不会给内容留下足够的空间且防止它显得统一。

 

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

保证可读性的理想正文长度是每行40-60个字符。
​​
此布局网格使用小的,8dp的外边距,让图像在布局中的占据更多的空间。

 


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

 

​​


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

 

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

 

  1. 32dp的外边距
  2. 8dp的间隙

 

水平网格

材料设计布局网格自定义水平滚动的触摸UI。 列,间隙和外边距从左到右排列,而不是从上到下。 屏幕的高度决定了水平网格中的列数。

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

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

  1. 间隙
  2. 外边距

 

可以定位水平网格以适应不同的高度,为顶部的app应用栏或其他UI区域留出空间。
​​
此水平布局网格从顶部应用栏的组件下方开始,并使用高度为316dp的四个水平方向的列。

 

断点

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

 

 

断点系统

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

每个断点范围确定每个显示尺寸的列数,建议的外边距和间隙。

断点范围(dp) 竖屏 横屏 窗口  外边距/间隙
0-359 小型手机 超小 4 16
360-399 中型手机 超小 4 16
400-479 大型手机 超小 4 16
480-599 大型手机 小型手机 超小 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+ 超大型 12 24

*外边距和间隙是灵活的,不需要尺寸相等。

 

iOS的断点

以下列数,外边距和间隙宽度适用于iOS上的屏幕,设备,方向和宽度的断点。

设备 方向 垂直尺寸类别 水平尺寸类别  外边距/间隙
iPhone 纵向 常规 紧凑 4 16
iPhone 横屏 紧凑 紧凑 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分屏多任务-第一个app 横屏 常规 常规 12 24
iPad – 2/3分屏多任务-第二个app
横屏
常规
紧凑
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区域可见时,其他屏幕元素不会进行交互。
​​
打开时,此临时导航抽屉不会影响响应式网格或屏幕内容。

 

 

线框图

线框图是结构化布局,为布局,分层和阴影提供一致的方法。 它们是为满足产品特殊需求
而进行修改时的起点。
​​

 

  1. 移动设备
  2. 桌面设备​​

 

 

  1. 移动设备
  2. 桌面设备

 

 

原文地址:Material Design

译者:糖糖

 

转载请注明:学UI网 » Material Design Layout Responsive layout grid 响应式布局网格

登录收藏
 
你可能喜欢的:
设计沉思录|美事升级,不止于改版设计沉思录|美事升级,不止于改版
这篇“点9”文,欠大家两年了!这篇“点9”文,欠大家两年了!
案例:如何优雅地用卡片分类法,搞定烦人的用户需求???案例:如何优雅地用卡片分类法,搞定烦人的用户需求???
抖音VS快手,产品模式是如何影响交互模式的?抖音VS快手,产品模式是如何影响交互模式的?
如何更好的使用弹窗?如何更好的使用弹窗?
一款APP的交互文档从撰写到交付③一款APP的交互文档从撰写到交付③
关于评分功能的一些思考关于评分功能的一些思考
一款APP的交互文档从撰写到交付②一款APP的交互文档从撰写到交付②
Material Design Layout Spacing methods 间距规范Material Design Layout Spacing methods 间距规范
设计沉思录|设计师应该了解的响应式知识设计沉思录|设计师应该了解的响应式知识