Material Design 3 · 布局、导航和交互

   悦姐聊设计

 一个爱学习和分享的设计专家~

本文4131字，阅读时间约10分钟~

22年的Flag之一是要输出《交互设计基础课程》，所以计划每周一篇，欢迎大家持续关注和监督:eyes:

上两篇我们介绍了MD的设计理念， 设计组件 (上次好多同学在公众号留言MD3，说想要MD3的设计组件，大家可以在官网http://www.material.io/resources中下载，figma、sketch版本都有) ，今天我们聊一聊MD材料基础中交互的3个核心模块：布局、导航和交互。

交互设计 · 第 11 讲

:point_right: MD 3  · 布局、导航和交互:point_left:

首先，我们还是全览一下MD材料基础中有哪些内容：

▲图1 MD材料基础内容一览表(蓝框中的内容是沟通的子项)

按照我对材料基础的理解，我把左边13类概括成了3大类：视觉类，不常用，和交互必学。

▲图2 MD组件分类

视觉类是视觉设计师重点要学习的内容，我这里只做概述：

色彩模块包括主色、辅色、拓展色、错误色、动态色彩构成的色彩系统，设计师可以通过色彩的选择和组合，构建产品的风格和品牌。

排版主要是文字排版，包括文字字体、字号、字重、间距、网格、基线等，通过排版清晰的展示内容的层次及品牌形象。

图标包括平台对产品图标的大小、网格、关键线、形状的建议，并提供了系统常见的操作、文件和目录图标作为参考，将图标拆解成：笔画、笔画终端、内拐角、外拐角、负空间、边界区域，辅助设计师完成统一风格的图标绘制，最终实 现产品品牌、服务和工具的视觉化表达。

形状反应特定的目的和涵义，MD提供了各种组件自定义形状 的建议，通过对组件容器、面、动效元素等形状一致性的规划和设计，可以塑造产品特色、表达产品品牌，并帮助用户识别组件、传达状态。

声音和机器学习在基础交互设计上使用较少，我们先行略过。交互必学类模块，所有的交互设计师都需要认真阅读，因为环境和动效已在设计理念中已经做了详细阐述，沟通模块的内容相对细碎，且和iOS有些重合，请大家自行学习，本文我们重点介绍交互设计的核心模块：布局、导航和交互。

一。布局

MD的布局使用统一的元素和间距来保持跨平台、环境和屏幕尺寸的一致性。我把布局模块的核心知识要点抽练成下图，左边是关于整体版面的设计，右边是单个组件/元素的设计。

▲图3 布局中的知识要点

1.1 响应式布局网格

响应式布局网格可适应屏幕的大小和方向，确保布局之间的一致性。

▲图4 响应式布局网格3元素

响应式布局网格有 3 元素，分别是：

列：内容放置在单/多列的屏幕区域中。列宽是用屏幕的百分比定义的，而不是固定值。

水槽：列之间的间距，在断点范围内，水槽宽度是固定的，断点改变，水槽的宽度可以改变。屏幕越宽，水槽也越宽。

边距：内容与屏幕左右边缘之间的距离。边距宽度用每个断点范围的固定值或缩放值定义。

1.2 断点

断点是在特定布局要求下的屏幕尺寸阈值。

▲图5 断点

在给定的断点范围内，布局会自动调整以适应屏幕大小和方向。

Material Design 提供基于 4 列、8 列和 12 列网格的响应式布局，可用于不同的屏幕、设备和方向。 每个断点范围内有确定的列数，以及每种显示尺寸的推荐边距和间距。

1.3 基线网格

基线网格是版式设计的基础，它的作用在于精确创建和编辑对象，为版面的编排提供一种视觉 参考和构架基准。

▲图6 基线网格

在基线网格的布局中，移动设备、平板电脑和台式机中所有的组件都与 8dp 方形的基线网格对齐。 组件中的图标、 文字 和某些元素可以与 4dp 网格对齐。 文字可以与 4dp 基线对齐，也可以在组件中居中，放置在 4dp 之外。

1.4 间距法

间距法是一组关于如何在页面和组件中放置元素的规则，它用基线网格、关键线、填充和增量间距来调整比率、容器和触摸目标。

▲图7 间距法

内间距Padding： 组件内元素之间的距离，以 8dp 或 4dp 为增量进行测量。

尺寸Dimensions： 组件元素的宽度和高度，它们应与 8dp 网格对齐。

对齐Alignment： 组件内元素的放置方式。

关键线 Keylines： 一种对齐工具，垂直线，显示元素与网格对齐时的放置位置。 关键线由每个元素与屏幕边缘的距离决定，并以 8dp 为增量进行测量。

1.4 容器

容器 表示封闭区域的形状， 可以用来存放 UI 元素，例如图像、图标或面。

▲图8   容器

容器可可以分为两类：刚性容器和灵活容器。刚性容器尺寸固定，不随图像大小变化而变化，图像超出容器会被裁减。灵活容器尺寸可变， 容器随图像大小变化而变化，始终保持图像在容器内。

1.6 纵横比

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

▲图9 纵横比

纵横比 = 宽度： 高度。

建议在整个 UI 中使用以下纵横比：16:9；3:2; 4:3；1:1; 3:4；2:3。 为了保持布局的一致性，设计师 在图像、 面和屏幕尺寸等元素上建议 使用一致的纵横比。

在响应式网格布局中，除了固定的纵横比，还可以采用灵活比率， 容器宽度由屏幕布局决定，并逐渐 增大以填充可用的最大空间。容器高度由容器中图像的高度决定。

1.7 响应式裁减

响应式裁减定义在不同的断点范围内裁剪图像的规则，以响应式的显示图像。

▲图10 响应式裁减

响应式裁减有3种裁减方式：

1、保持固 定比例；2、 自定义 不同的比例；3、 固定图像高度。

在设计时，大家可以根据图片的目的和重要性进行选择。

1.8 触摸目标

为了平衡信息密度和可用性，触摸目标应至少为 48 x 48 dp，目标之间至少有 8dp 的空间。

▲图11 触摸目标大小

二。导航

导航使用户能够在应 用程序中移动，以完成任务，好的导航是让用户感受不到的导航。

▲图12 导航的三种类型

关于导航，我们主要介绍导航的类型、转换方式和搜索。

2.1 导航类型

MD将导航分为了3种类型：

▲图13  导航 的三种类型

横向导航：指引用户在同一层次的页面之间移动，它可以通过导航抽屉、底部导航和Tab栏实现。

前向导航：让用户在连续的层次结构、流程中的步骤或跨应用程序的屏幕之间移动。前向导航将导航行为嵌入到容器、按钮、链接或使用搜索中。

反向导航：按时间顺序或任务流程向后移动屏幕， 通常由操作系统或平 台提供。 反向时间导航是指以相反的顺序在用户最近查看的屏幕的历史中导航； 向上导航允许用户在单个应用的层次结构中向上导航一级，直到到达应用的主屏幕或顶级屏幕。

2.2 导航转换

当 用户使用导航时会发生导航转换，并呈现转换动效以帮助用户更好的理解转换页面之间的关系。

▲图14 导航转换

应用程序的导航转换有3种类型：。

在横向导航的底部导航转换时，采用的是顶层转换，也就是淡入淡出模式过渡。在横向导航的顶部Tab栏转换时，采用的是兄弟转换，平行移动的方式过渡。在前向导航和反向导航时，采用的是父子转换，比如点击放大/缩小，向右/向左覆盖的方式过渡。

2.3 搜索

搜索允许用户快速找到应用内容。 用 户 在搜索框中输入关键字，点击查询得到相关 结果。 在App中有两种常见的搜索形态： 置顶搜索和可拓展搜索。

▲图15 置顶搜索

当搜索是应用程序的高频功能时，使用置顶搜索。

置顶搜索框内有搜索提示，点击搜索框，搜索页面会扩大到全屏，可以在搜索框下方显示历史记录。用户可以键入关键字或从选择联想内容提交搜索。 搜索结果显示在搜索栏下方。 用户点击向上箭头，要从搜索框中 释放焦点并关闭搜索建议。

▲图16 可拓展搜索

当搜索不是应用程序的高频功能时，使用可拓展搜索。

可拓展搜索默认以 图标展示，而不是搜索框。 用户点击搜索图标，可将工具栏整体转换为搜索栏， 历史记录可以显示在搜索栏下方。 用户 输入查询或选择联想 内容 提交搜索。 搜索结果显示在搜索栏下方。 点击向上箭头会从搜索中释放焦点，关闭建议和屏幕键盘，并将工具栏返回到其原始状态。

不管是置顶搜索还是可拓展搜索，除了初始状态之外，历史记录页，联想页和结果页的交互基本保持一致。

▲图17 搜索流程的几个状态

三。交互

交互这个模块主要讲两点：手势和状态。

3.1 手势

手势让用户可以通过触摸与屏幕元素进行直接交互。

▲图18 手势

关于手势设计，有3个设计原则：

1、手势让用户通过触摸去执行任务。

2、手势允许用户以不精确的操作执行。

3、手势允许用户通过触摸直接更改 UI 元素。

当用户与产品进行手势交互时，还需要做到以下3点：

1、操作前：有手势的暗示，比如 用可见的界面元素或行为来表明可以对它们执行 手势。

2、操作时 实时响应，操作元素要马上发生状态变化，以表达用户对触摸交互的直接控制。

3、操作后实时体现对手势类型的响应。

在移动App中， 手势可帮助用户在视图之间导航、采取行动和操作内容。我们可以把手势分为3大类：导航手势，动作手势和变换手势。

▲图18 手势类型

导航手势可以帮助用户轻松浏览产品。 常用的 导航手势 包括： 轻敲、滚动和平移、拖、滑动、捏。

动作手势 可以执行动作或提供完成动作的快捷方式。 动作手势包括： 轻敲、长按、滑动。

变换手势让 用户可以通过手势变换元素的大小、位置和旋转。 变换手 势 包括： 双击、捏、复合手势、拿起并移动。

3.2 状态

状态是对组件 或交互元素现状的可视化呈现。 元素的每个状态都应该在视觉上相似但又与环境中其他状态有明显区分。

▲图19 常见的各种状态

互联网产品中组件的状态包括：默认（启用）态、禁用态、悬停态、焦点态、按下态、拖动态、选中态、激活态、开启态、关闭态和错误状态。

作为交互设计师，我们在设计任何一个可交互的组件时，都需要考虑其多种状态的设计，不能遗漏，这是对交互设计的基本要求。

▲图20 状态3原则

状态设计有3 大原则：

1、一致性：同一组件的状态应该具备一致性，让大家能很容易理解其只是状态发生了变化。

2、状态有优先级，不同优先级的状态有显著的视觉区分。

3、同时显示：当一个组件触发多种状态时，多种状态要同时显示，如选择和悬停。

▲图21 状态变化的几种形式

我们可以通过以下几种方式来变化交互组件的状态：

1、叠加层；

2、海拔变化；

3、颜色状态变化；

4、显示额外的图标（如选中图标）

5、显示辅助信息（如错误提示）

到这里，MD的布局、导航和交互介绍就结束了，希望 通过本篇文章的解析，大家对于MD的布局、导航和交互有了更进一步的理解和认识。 如果你对文章任意内容有疑问，请加悦姐微信yuechats，加入悦姐交互小课堂 ，听悦姐为你详细讲解~

交互设计 · 第 12 讲预告

:point_right:  设计师如何做需求分析 :point_left:

我是悦姐，一个爱学习和分享的设计专家~

欢迎关注，2022年和悦姐一起交互进阶~

可备注加【交互小课堂】~

听悦姐分享更多交互小知识和设计日记精华内容~