Material Design 之布局（四）

最新推荐文章于 2025-07-24 10:01:47 发布

沐左21

最新推荐文章于 2025-07-24 10:01:47 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： material-design 设计

本文链接：https://blog.youkuaiyun.com/m0_37168878/article/details/70242862

Material Design 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Material Design的基本原则，包括纸张工作原理、单位与测量、度量与边框、结构及自适应UI等内容，帮助开发者更好地理解和应用Material Design。

1、原则

Material Design 使用的基本工具来源于印刷的设计元素（如排版，网格，空间，尺度，颜色和图像），所以我们需要先来了解在印刷中纸是如何工作的。

1.1、纸是如何工作的

在Material Design（实质化设计）中，纸张的物理特性被翻译成屏幕。应用程序的背景类似于一张平坦的，不透明的纸，应用程序的行为模仿了纸张的大小变化，拖拽和重新组合在一起的能力。

接缝

当两个页面有公共的边，就会产生接缝，并且有接缝的两张纸通常会一起运动。

这里写图片描述

层级

具有不同z轴位置（或深度）的两个页面重叠在一起会形成一个层级[step]，但是他们彼此独立。

这里写图片描述

1.2、浮动动作按钮

浮动动作按钮，一般作为一个单一的动作在界面中存在；且，如果其余两个页面都有关，那么他可以跨越接缝。

这里写图片描述

2、单位和测量

有些单位在不同的使用环境中有不同的含义。本章讨论了与设备无关的像素，可缩放像素以及像素密度等概念的使用。

像素密度
密度无关像素（dp）
可扩展像素（sp）
设计dp的布局
图像缩放

2.1、像素密度

DPI =屏幕宽度（或高度）像素/屏幕宽度（或高度）英寸；屏幕的DPI越高成像越清楚，同样像素的按钮在不同分辨率的屏幕上，显示的大小是不一样的，尤其是android的严重碎片化，更加加剧了这种情况，所以我们往往需要针对不同的屏幕密度来优化你的设计（屏幕适配）。

我们来看看同样的UI在不同像素密度的屏幕上的显示情况，图1是高分辨率的屏幕，图2是低分率的屏幕。
这里写图片描述

这里写图片描述

2.2、与密度无关的像素（dp）

密度独立像素(dp)是灵活的单位,可以在任何分辨率的屏幕上缩放到均匀的尺寸。开发Android应用程序时，请使用dp在不同密度的屏幕上均匀显示元素.

dp =（屏幕宽度上的像素* 160）/屏幕密度

如果你有三个屏幕，都是1.5英寸宽，但是屏幕的分辨率不同，那么他们屏幕宽度仍为240dp。dp只适用于android开发。

这里写图片描述

2.3、可扩展像素（sp）

在为安卓系统开发程序时，可扩展的像素（SP）提供和DP一样的功能，但只是在字体上。

2.4、设计dp的布局

在设计屏幕布局时，计算 DP 元素的度量：

DP =(宽度像素 *160)/ DPI*

例如，在 320 dpi 的分辨率的屏幕上显示一个 32×32 像素的图标，我们在代码中就应该为 16 x 16 DP。

2.5、图像缩放

通过运用这些比例，图像可以缩放到不同的屏幕分辨率的屏幕上并且看起来效果都一样：

这里写图片描述

3、度量与边框

基准网格
边框和间距
比例边框
按增量调整
触摸目标大小

3.1、基准网格

所有组件都与间隔为 8dp 的基准网格对齐。排版/文字（Type）与间隔为 4dp 的基准网格对齐。在工具条中的图标同样与间隔为 4dp 的基准网格对齐。这些规则适用于移动设备、平板设备以及桌面应用程序。

这里写图片描述

基准网格中的排版示例

这里写图片描述

关于排版可以参考系列文章“ Material Design 之Style（三）”

3.2、边框与间距

以下模板和示例包含手机，平板电脑和桌面上的元素的边框，间距指导和示例UI。

资源下载（需科学上网）

移动设备布局模板(2.23M)
平板电脑布局模板(1.39M)
PC桌面布局模板(89.40M)

移动设备

这里写图片描述

说明：

图1，屏幕边缘左右边距：16dp
与图标或头像关联的内容左边距：72dp
手机上的水平边距：16dp

图2，垂直边距
1、24dp
2、56dp
3、48dp
4、72dp

3.3、比率边框

谷歌官方推荐的宽高比：
16：9
3：2
4：3
1：1
3：4
2：3

实际UI 效果：

这里写图片描述

总结说明：

1、栅格系统的最小单位是8dp，一切距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
顶部状态栏高度：24dp
Appbar最小高度：56dp
底部导航栏高度：48dp
悬浮按钮尺寸：56x56dp/40x40dp
用户头像尺寸：64x64dp/40x40dp
小图标点击区域：48x48dp
侧边抽屉到屏幕右边的距离：56dp
卡片间距：8dp
分隔线上下留白：8dp
大多元素的留白距离：16dp
屏幕左右对齐基线：16dp
文字左侧对齐基线：72dp

2、所有可操作元素最小点击区域尺寸：48dp X 48dp。

3、另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。

4、平板与PC上留白更多，距离与尺寸要相应增大。具体可以参考，谷歌原文，地址：
https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-keylines-spacing
或者国内翻译地址：
http://wiki.jikexueyuan.com/project/material-design/layout/metrics-and-keylines.html

4、结构

移动端

这里写图片描述

从左到右：侧滑导航菜单，UI界面（包含工具栏和内容区域），右导航。

平板和PC端的结构和这个差不多，具体的可以参考以下链接：
谷歌官方文档：https://material.io/guidelines/layout/structure.html#structure-toolbars
国内翻译文档：http://wiki.jikexueyuan.com/project/material-design/layout/structure.html