Material Design 是 Google 设计语言，旨在提高移动应用程序和 Web 应用程序的视觉和交互体验。在 Material Design 中，尺寸设置是一个重要的设计元素，借助于统一的尺寸应用程序，能够提高应用程序视觉上的一致性。本文将会介绍 Material Design 中在移动设计中较好的尺寸设置方式，并提供示例代码进行演示。
Pixels vs Dips
在移动应用程序设计中，我们通常使用一个称为 dp 或 dip 的度量单位，这代表了设备独立像素。与像素不同，这个单位在不同设备上的大小是一致的，并且能够自适应不同的屏幕密度。所以，我们应该在设计中使用 dp 单位，而非固定像素大小。例如，在 Android 平台上，我们可以使用 Android 设计规范 中提供的尺寸来设置 dp 单位。
基础尺寸
在 Material Design 中，最基础的尺寸是 8dp，它被称为基础的密度无关单位。8dp 尺寸用于图标的大小、内边距和间距。使用这个单位可以使应用程序间距和尺寸具有一致性。例如，一个应用程序中的所有内边距都应该是 8dp。
大小材料
在 Material Design 中，大小材料是定义的标准尺寸集合。它们需要适用于所有不同屏幕密度的设备，并且应该相对布局所支持。这意味着 UI 元素应该基于这些标准尺寸进行定位和布局。Material Design 尺寸定义的大小材料及其含义如下：
小型（12dp）: 这是一种适合在屏幕上进行小规模操作的元素，例如按钮、输入框和文本标签。
中型（16dp）: 这个大小适用于包含文本和图像的元素，例如卡片和平铺。
大型（24dp）: 这个大小适用于更复杂的 UI 元素，例如对话框和活动汇总。
非常大（32dp）: 这是针对具有重要突出显示的 UI 元素，例如弹出菜单、图标和主应用程序标志。
Margin 和 padding
Material Design 中的 margin 和 padding 是定位元素的两种方式。Margin 是指 UI 元素之间的空间，而 padding 是指 UI 元素内部的空间。我们应该使用相同的 margin 和 padding 值，以保持设计的一致性。
例如，在一个文本输入框中，我们可以使用以下的 margin 和 padding 值：
---------
-----------------------------------
------------------------------------
------------------- ---- -----
----------------------
------------------------------
---------------------------------
--------------------------------
--------------------------------- --结论
Material Design 中的尺寸设置是一个重要的设计元素，它可以提高应用程序在视觉上的一致性。设计人员应该使用 dp 或 dip 非固定像素大小。基本尺寸应该使用 8dp，而标准尺寸集合可以使用 Material Design 中定义的大小材料。Margin 和 padding 值应该统一，以保持设计的一致性。
本文转载自 Material Design Margin and Padding Sizes Explained.
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671798f0ad1e889fe2228e65