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

 

目录

基准网格
间距
容器和纵横比
触摸并单击目标

 

间距方法使用基准网格,参考线,内边距和增量间距来影响比率,容器和触摸目标。

 

基准网格

8dp网格
在移动设备,平板和桌面设备上所有组件对齐8dp的方形基准网格。
​​
应用栏和浮动操作按钮与8dp网格对齐。

 

4dp网格

图标,排版和组件中的某些元素可以对齐4dp的网格。
​​
底部导航栏的元素对齐4dp的网格。

 

4dp基准网格
​​
字体与4dp基准网格对齐。

 

当于组件内部居中时,排版可以不对齐4dp的网格,例如一个按钮或者列表。
​​

即使类型不在4dp网格上,文本也会在列表项里垂直居中。

 

间距

参考线

参考线可以统一放置在布局网格外面的的元素。 它们是垂直的线,规定不与网络对其的设计元素的位置。 参考线由每个元素与屏幕边缘的距离决定,以8dp为单位进行测量。

参考线应与响应式布局网格结合使用,在设计中统一放置元素。

  1. 布局网格
  2. 参考线
    ​​

参考线可以在布局中的元素之间创建更多或更少的空间。 它们可根据每个断点范围进行调整。

 

内边距

内边距是指UI元素之间的空间。 它是一种替代间距的方法,以8dp或4dp的增量测量。

内边距应与响应式布局网格结合使用,以在设计中一致地放置元素。
​​

  1. 布局网格
  2. 内边距

​​


内边距可以垂直和水平来测量。 与参考线不同,内边距不需要跨越布局的整个高度。

 

垂直间距

垂直间距是指一些标准元素的高度,例如应用栏或列表项。 这些元素的高度应与8dp网格对齐。
​​

  1. 状态栏:24dp
  2. 应用栏:56dp
  3. 列表项目:88dp

 

增量

增量用于测量在应用程序中元素的大小和位置。

它具有相同的高度和宽度。 它可以是任意数值,但建议使用标准元素的高度(例如应用栏)作为增量。

​​
此增量使用应用栏的高度来定义。 如果应用栏高度为56dp,则增量为56 x 56dp。

要使组件(如卡片)宽度增加8倍,用增量值乘以增量数即可。 如果每个增量为56dp,则卡片的总宽度为:8个增量x 56dp = 448dp

这张卡的宽度为448dp。

 

容器和纵横比

容器

容器是用于表示封闭区域的形状。 容器可以包含各种UI元素,例如图像,图标或表面。

​​
200%

  1. 图像容器
  2. 图标容器
  3. 表面容器

 

容器可以是固定的,并限制其中元素的大小或裁剪。 或者,它们可以是灵活的并且延长支撑它们包含的内容大小。
​​

  1. 固定图像容器,会裁剪原始图像大小。
  2. 灵活的图像容器,可以缩放以适应原始图像大小。

 

纵横比

纵横比是元素宽度与高度的比例。

要保持布局的一致性,请在图像,表面和屏幕大小等元素上使用一致的纵横比。 纵横比用宽度:高度来表示。

建议在UI中使用以下纵横比:
16:9,3:2,4:3,1:1,3:4和2:3
​​

 

灵活的比例
灵活的比例大小由布局网格决定:

  1. 容器宽度由屏幕布局决定,并且伸展到最大可填充的空间
  2. 容器高度由容器中图像的高度决定

使用灵活的比例让内容决定容器的高度。

​​
容器宽度由布局网格中的列宽确定。

 

响应式裁剪

响应式显示图像,请确定在不同断点范围内如何裁剪图像。 在不同的断点范围内,裁剪可以:

  1. 保持一个固定的比例
  2. 适应不同的比例
  3. 确定图像高度

 

保持一个比例
图像大小可以在断点范围内保持一个固定的比例。
​​
50%
图像在断点之间保持3:2的比例。

 

适应不同的比例
在每个断点范围,图像大小可以改变成不同比例。

​​
50%

断点之间的图像比率从1:1变为3:2。

 

确定图像高度
图像尺寸可以在跨越断点范围和在断点范围内保持固定的高度和流式宽度。

​​
50%

图像在断点之间保持固定高度和流式宽度。

 

触摸并单击目标

触摸目标规格

触摸目标适用于同时接收触摸和非触摸输入的任何设备。 为了平衡信息的密度和可用性,触摸目标应至少为48 x 48 dp,并且它们之间至少有8dp的空间。
​​
触摸目标最小值为48 x 48 dp

 

点击目标

在非触摸UI上,单击目标应至少为24 x 24 dp,并且它们之间至少有8dp的空间。

​​
单击目标最小值24 x 24 dp

 

原文地址:Material Design

译者:糖糖

 

转载请注明:学UI网 » Material Design Layout Spacing methods 间距规范

登录收藏
 
你可能喜欢的:
设计沉思录|美事升级,不止于改版设计沉思录|美事升级,不止于改版
这篇“点9”文,欠大家两年了!这篇“点9”文,欠大家两年了!
案例:如何优雅地用卡片分类法,搞定烦人的用户需求???案例:如何优雅地用卡片分类法,搞定烦人的用户需求???
抖音VS快手,产品模式是如何影响交互模式的?抖音VS快手,产品模式是如何影响交互模式的?
如何更好的使用弹窗?如何更好的使用弹窗?
一款APP的交互文档从撰写到交付③一款APP的交互文档从撰写到交付③
关于评分功能的一些思考关于评分功能的一些思考
一款APP的交互文档从撰写到交付②一款APP的交互文档从撰写到交付②
设计沉思录|设计师应该了解的响应式知识设计沉思录|设计师应该了解的响应式知识
【宝典在手,设计不愁】2019最全App设计备忘录,助你轻松查漏【宝典在手,设计不愁】2019最全App设计备忘录,助你轻松查漏