Material Design 之布局（四）

最新推荐文章于 2025-07-24 10:01:47 发布
最新推荐文章于 2025-07-24 10:01:47 发布
阅读量2.7k 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： material-design 设计
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37168878/article/details/70242862
本文介绍了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。

  • 移动设备

这里写图片描述

说明：

图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

5、自适应UI

这个概念最早我是在学习前端的时候接触的，前端好像叫做响应式布局，因为网页的尺寸经常会改变，所以得让网页能够适应不同尺寸的显示。Android应用上做自适应UI，应该是考虑到在小屏、大屏和平板电脑上显示同一个应用界面的情况。

  • 为了获得最佳用户体验，Material Design（实质化设计）用户界面应适应以下断点宽度的布局：480dp，600dp，840dp，960dp，1280dp，1440dp和1600dp。

现在android主流手机的分辨率都已经是1920*1080 dp，中低档的也是1280*720 dp。
做手机适配的时候只需要做到80%-90%的手机就可以了，鉴于android的碎片化，不建议强求做到适配100%

这里写图片描述

1.布局中的总结和细节显示内容

600 dp 以下的布局可以通过单个级别的内容层次充满屏幕（要么总结内容，要么细节内容，但不是全部）。
超过 600 dp 宽度的布局可以放置两个等级的内容层次（总结和细节内容两者）。

2.最大屏幕宽度
超过 1600 dp 宽度的布局可以变大直到最大宽度。目前，网格可以实现下列事情中的一种：

边距增大时保持居中对齐
右边距增加时，居左对齐。
显示额外内容时，保持增长。

5.1、参考UI

当宽度发生改变的时候，UI做出相应变化。

这里写图片描述

这里写图片描述

这里写图片描述

5.2、详细文档

参考原文：https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-surface-behaviors （科学上网）
国内翻译：http://wiki.jikexueyuan.com/project/material-design/layout/adaptive-ui.html

6、分屏

分屏模式允许在屏幕上同时显示两个活动。这是android N 即android7.0的新特性。

用法
行为
布局

6.1、用法

应用程序不允许自己调用分屏模式; 用户必须激活它。

实际使用，手机上分屏打开微信和微博：

这里写图片描述

实际上应用程序将根据需要调整大小以适应拆分视图（除非您的应用程序与分屏格式不兼容）。如上图

  • 在手机端和平板电脑上分屏效果如下：

这里写图片描述

ANDROID L——Material Design详解（主题和布局）
大苞米的专栏
10-15 3万+
Android L特性介绍——Material Design。详解Material Design中主题的使用和布局的简介
Material Design 3 动态布局：自适应界面开发全攻略
移动开发前沿的博客
07-08 979
在当今的移动应用和网页开发中，用户使用的设备多种多样，屏幕尺寸和分辨率各不相同。为了给用户提供一致且优质的体验，界面需要具备自适应的能力。Material Design 3 作为一种优秀的设计语言，提供了动态布局的解决方案。本文的目的就是详细介绍 Material Design 3 动态布局的相关知识，涵盖从基础概念到实际开发的各个方面，让开发者能够全面掌握自适应界面的开发方法。本文将首先介绍 Material Design 3 动态布局的核心概念，通过有趣的故事和通俗易懂的比喻让大家轻松理解。
material-ui-layout：Material UI的声明性布局
02-03
材质用户界面布局 告别花费数小时来配置应用程序的布局。 :party_popper: 欢迎使用声明式方式创建应用的布局！ :party_popper: 该库使用 ，布局基于指南 :nerd_face: 安装 npm install material-ui-layout 用于Material-UI v4 npm install material-ui-layout@4.0.0-rc.5 我们目前正在生产中对其进行测试。 v4的最终版本候选版本即将推出。 例子 在查看示例 有助于 如果您想帮助我们构建最好的布局组件，我们将非常高兴，请随时与我们联系。 路线图 网页范例 为两行AppBar添加更好的支持 添加测试 添加一些有用的组件
Material Design效果实现全解析
最新发布
weixin_30356433的博客
07-24 861
在 Material Design 中，View Behavior 是指组件在用户交互时表现出的行为和动画效果。一个精心设计的 View Behavior 可以提升用户体验，使界面更加直观和响应迅速。它能够告知用户他们的操作是否被系统识别和响应，同时增强了界面的视觉吸引力。要设计一个自定义的 View Behavior，首先要了解用户的交互模式，然后基于这些模式使用 Android 提供的动画框架和回调机制来实现。
开发Google Material Design风格的WPF程序
weixin_34307464的博客
07-24 326
今天在网上看到了一个Material Design风格的WPF皮肤，看上去还是挺不错的 这个项目是开源的，感兴趣的朋友可以下载试下： https://github.com/ButchersBoy/MaterialDesignInXamlToolkit。 另外，该作者还实现了一个WinForm版本的：https://github.com/IgnaceMaes/MaterialSkin，不过貌...
【Material Design视觉设计语言】应用布局设计
weixin_34088583的博客
04-08 158
【Material Design视觉设计语言】章节列表 【Material Design视觉设计语言】开篇 【Material Design视觉设计语言】Material Design设计概述 【Material Design视觉设计语言】应用布局设计 【Material Desig...
基本的Material Design布局结构
咖啡花园
12-20 1409
Flutter应用的用户界面是由布局控件（不可见的）和展示控件（可见的）协同完成的，布局控件就像是建筑里的框架，而展示控件则相当于建筑里的砖瓦。展示控件按照布局控件的要求依次排列，就组成了用户所看见的界面。在Flutter应用中，最基础的布局结构是脚手架（Scaffold），例如：import 'package:flutter/material.dart'; void main(){ runAp
MaterialDesignInXaml.Examples-master.zip
02-14
MaterialDesignInXaml 是一个流行的开源库，专为Windows Presentation Foundation (WPF) 应用程序引入了Google的Material Design原则。这个库使得开发者能够轻松地在WPF应用中实现现代、直观且美观的用户界面设计。...
material design的几种布局
04-29
以下我们将详细探讨几种关键的Material Design布局及其应用。 1. **CoordinatorLayout**：这是一个高级的根布局，用于实现复杂的协调动画和交互。它可以与AppBarLayout、CollapsingToolbarLayout等组件配合，实现...
Flutter 初识： Material Design 布局和结构控件
yang_6799的博客
07-18 1735
它提供了一个默认的页面框架，包括应用栏、抽屉、浮动操作按钮和底部导航栏等元素。BottomNavigationBar 是 Flutter 中用于实现底部导航栏的小部件，通常用于在应用程序的不同页面之间进行导航。MaterialApp 是 Flutter 中的主要应用小部件，提供了一个 Material Design 风格的应用框架。TabBar 是 Flutter 中用于实现选项卡导航的小部件，它通常与 TabBarView 一起使用，以在应用程序中创建标签页布局。
Material-Design
李泽文的博客
04-01 2457
Material-Design 介绍Material design的相关控件在开发中使用 ##概述 对于开发人员，Android21新增了许多新控件和新特性，这些控件和特性都是基于Material Design的设计理念的，这一篇就来讲讲Material Design给Android开发带来的变化。 ##主题和布局 Material提供了下面三种主题 @android:style/The...
Material Design
xingyu19911016的博客
06-10 906
旨在统一跨平台的用户体验。自 Android 5.0（API 21）起，Material Design 成为 Android 系统的核心设计理念，并通过 Material Component for Android 库提供官方实现。
Material Design详解 主题布局
Android藏宝阁
11-24 633
Material Design：Material Design是Google推出的一个全新的设计语言，它的特点就是拟物扁平化。Material Theme使用Material主题：Material主题只能应用在Android L版本。应用Material主题很简单，只需要修改res/values/styles.xml文件，使其继承android:Theme.Material。如下 <!-- res/
Material Design(一)
chili_fan的博客
01-10 6998
Material Design，中文名：材料设计语言，是由Google推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。 目 的为不同平台”提供更一致、更广泛的“外观和感觉”适用平台手机、平板电脑、台式机等重要功能系统字体Roboto的升级版本等 ...
Material Design(三)——图像
薛增辉的博客
07-31 449
图像 在Material Design中，图像（包括绘画和摄影）都是组建而成而非人为策划。强调场景的实质性、质感、深度，体现在让人意想不到的色彩运用，以及对环境背景的关注。 看起来让用户觉得舒服、神奇但是却看不出是过度人为修饰、制作的图片 原则 使用能够表达个人关联、信息和令人愉悦的图像。 1. 个人关联 △使用能够唤起回忆的影像来建立用户和应用程序的情感联系 2. 信息 △传达特...
UI风格汇：材料设计（Material Design），是对扁平风格的延展。
2401_82616673的博客
03-24 4990
材料设计（Material Design）是由Google提出的一种UI设计风格，旨在为用户提供一种更加真实、直观和自然的界面体验。材料设计强调平面化、阴影效果、响应式动效、材质与深度以及统一的设计语言，旨在为用户提供一种更加真实、直观和自然的界面体验。
Material Design介绍
MRYZJ的博客
09-27 805
Material Design介绍 一、Toolbar 说到Toolbar，就要提到ActionBar了，每个活动最顶部的那个标题栏其实就是ActionBar。不过ActionBar由于其设计的原因，被限定只能位于活动的顶部，从而不能实现一些Material Design的效果，因此官方现在已经不再建议使用ActionBar了。 打开AndroidManifest.xml文件看一下，可以看到，这里...
掌握Android Material Design之CoordinatorLayout
标题“CoordinatorLayout”指的是一种用于Android开发的布局管理器，它在Android的Material Design设计理念中扮演着重要角色。CoordinatorLayout是Android Support Library的一部分，属于一个高级布局容器，允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值