Material Design 3 · 设计组件

   悦姐聊设计

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

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

---

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

上一篇我们介绍了MD的设计理念，这一篇我们接着聊MD的设计组件。MD的设计组件共有30个，相对iOS指南，有更多新的元素，比如分割线，Chips，Snackbar、卡片等，都是我们在设计中常用的控件，而且在MD中讲的特别细致，每一个控件都包含用法、设计原则、元素拆解、交互方式，应该怎么用，不建议怎么用，都给出了丰富的案例，所以特别适合初学者学习。

交互设计 · 第 10 讲

👉 Material Design 3  · 设计组件👈

我们还是先来回顾一下MD中有哪些设计组件，以下是官网提供的答案：

▲图1 MD组件一览表

按照我对组件的理解，我把这30个组件进行了分类，如下图所示：

▲图2 MD组件分类

下面我们就按照这三大类别，逐一介绍。

一。栏

MD的栏有7种，我还是按照位置关系将其进行了细分：

▲图3 MD的7种栏

1.1 顶部应用栏

顶部应用栏显示与当前视图相关的信息和操作。

▲图4 顶部应用栏

它有两种常见的形式，一是常规顶部应用栏，二是上下文操作栏。

常规的顶部应用栏将导航按钮放在在最左侧，导航右边是标题，操作按钮在应用栏右侧居右对齐，最多显示3个，超出3个操作的，在最右侧一个放置一个更多菜单收纳。当标题比较长时，建议使用显著标题栏（要注意精简标题，不建议标题省略或缩小字号），当想要强化标题文字时，也可以使用显著标题栏，让标题单独一样显示。

当操作页面元素，进入页面模态时，顶部应用栏可以变成上下文操作栏，此时，导航按钮变为关闭按钮。为了强化状态栏的变化，建议应用栏要改变背景色，以提示用户栏的变化。

1.2 Tab栏

MD 的Tab栏位于顶部应用栏下方，用于在同一层次结构的不同内容组之间导航（iOS Tab栏位于底部，帮助人们了解应用程序提供的信息或功能类型，虽然名字相同，定位是完全不同的）

▲图5 Tab栏

Tab栏有两种形式：固定Tab栏和滚动Tab栏。

固定Tab栏中选项的数量是2~4个（不建议超过4个），每个选项宽度相同（它们均分Tab栏宽度）。

滚动Tab栏的数量不确定（一般≥4个）可扩展，当一组选项卡无法在屏幕上全部显示时，需使用可滚动Tab栏，每个Tab的宽度由其文本标签的长度决定。

Tab栏的标签名不能折行，要显示完整，每一个选项的图文形式要一致，默认要有选中状态，选中状态要明显区别于非选中状态，用户可以通过点击选项或滑动内容进行Tab选项切换，选项卡可以循环，滑到最后一项后可以再回到第一项。

1.3 Snackbar

Snackbars 用于通知用户应用程序已经执行或将要执行的动作，暂时出现在屏幕底部，会在4~10秒内自动消失。一个snackbar 可以包含一个动作。

▲图6 Snackbar

Snackbar是MD特有的组件，iOS规范中是没有的，但现在很多App也都在使用。它是由容器+文案 +操作（可选）构成；容器是完全不透明的，以保证文案的可读性；在移动设备上，文案最多显示2行；为了与文案区分开，操作文字是带颜色的。

Snackbar一次只显示一个，一行高度是48dp，两行高度是64dp，如果有FAB或底部应用栏，它出现在Fab/底部应用栏上方；

1.4 底部应用栏

底部应用栏提供对底部导航抽屉和最多4个操作的访问，包括浮动操作按钮。

▲图7 底部应用栏的几种样式

常见的底部应用栏有以下几种形式：

1、有居中重叠FAB的底部应用栏，左侧是导航按钮，右侧是上下文操作。中间是叠在应用栏Z轴上方的FAB按钮。

2、有居中插入FAB的底部应用栏（其他同上）。

3、无FAB，左侧是导航按钮，右侧是上下文操作按钮的底部应用栏。

4、左侧是上下文操作按钮，右侧是Fab的底部应用栏。

大家可以根据自身产品操作的属性和个数选择不同形式的底部应用栏。

1.5 底部导航/导航轨/导航抽屉

底部导航、导航轨和导航抽屉，是一组在不同大小的屏幕上可以互相转换的导航组件。

▲图8 底部导航、导航轨和导航抽屉

底部导航仅在移动设备和小型平板电脑界面上使用，在大屏幕上，需将底部导航换成导航轨或导航抽屉。MD中建议：在360-599dp手机等小型设备显示底部导航；600-1239dp 平板电脑等中型设备显示导航轨；1240dp+ 的设备上显示导航抽屉；

二。控件

MD中的控件有14个，我按照单击操作类、范围操作类、展示类将其分为了3大组，如下：

▲图9 MD的控件分类

我挑选其中几个比较有特色的控件跟大家进行介绍。

2.1 按钮

按钮是各平台最基础的控件之一，MD 3中总结了8种样式的按钮，分类比较细致，大家可以仔细学习一下：

▲图10 MD按钮的类型

从功能的优先级上来讲：浮动操作按钮和扩展浮动操作按钮的优先级是最高的，海拔也最高，它在页面滑动时会一直呈现，适用于当前界面甚至是全局产品最核心的功能。

浮动按钮的优先级仅次于FAB，适用于当前界面最核心的功能。

其他按钮的视觉层次依次是填充按钮＞填充色调按钮＞线性按钮＞文本按钮＞图标按钮，大家可以根据页面上操作的主次，选择合适的按钮样式进行组合设计。

2.1 Chips

Chips是MD的特有控件（很多文章将其翻译为纸片，我们在工作中有时会以标签来指代），它允许用户输入信息、进行选择、筛选内容以及触发操作，是一组动态显示的多个交互元素，MD中Chips的默认圆角是8dp。

▲图10 MD按钮的Chips

相信很多小伙伴第一眼看到Chips都会有些困惑，Chips看起来很像线性按钮或者是填充色调按钮呀？为什么要单独命名成一个组件呢？

在MD中，特意强调了这个问题：Chips不是按钮。他们的共同点是：Chips和按钮都提供了视觉隐喻（外观相似性），以提示用户采取行动、做出选择。它们的不同点在于：多个Chips是一起出现在一个组中的，而一个组中的按钮不应超过 3个。

我们可以详细的了解一下Chips这个特殊的组件的类型及用法：

▲图10 MD按钮的Chips

MD中的Chips有四种类型：

1、帮助性纸片

它可以跨越多个应用程序，在满足上下文情景的情况下，动态地出现。比如手机桌面上锁屏时出现的一些重要消息，或者是应用内的一些重要时间支持添加到日历、卡包或在地图上查看。

2、筛选性纸片

筛选性纸片依靠标签或描述词来筛选内容，它们可以很好地替代切换按钮或者多选框控件。

3、输入型纸片

输入性纸片允许用户进行输入并且将文本转化为一个视觉整体，方便用户进行查看验证，用户可以通过删除键将其整体删除，或点击它进行再编辑。

4、建议型纸片

建议型纸片通过呈现动态生成的建议(如可能的响应反馈或搜索筛选条件)来帮助精确用户的意图。

通过对Chips的使用场景和作用的细分，我们确实可以感受到Chips不是按钮，其实我们在日常工作中也会经常用到，只是没有将其单独命名为Chips而已（而且样式上大家也可以调整，并不一定用MD中的标准样式，这样反而可以把它和按钮在视觉上区分开来）

2.3 时间选择器

时间选择器可以帮助用户选择和设置特定时间。MD将其作为一个单独的组件来介绍，让其设置过程和最终的显示效果更一致（iOS的日期、时间、地址等都是通过picker这个组件来完成的）。

▲图11 MD的时间选择器

用户可以通过点击或滑动表盘上的数字来设置时间（上图左），相比起iOS的picker确实更加直观和高效，有原生Android系统的小伙伴可以体验感受一下。

2.4 文本字段

文本输入框也是各平台最基础的控件之一，MD中把文本字段做了非常详细的元素拆解如下图所示：

▲图12 MD中的文本字段

里面非常详细的讲解了哪些元素是必要的，哪些元素是非必要的，他们在交互时应该如何出现，出现的位置在哪里，作用是什么？显示的规则是什么？MD提供了丰富的动效及图片按钮作为参考，如果大家有文本字段设计上的疑问，不妨仔细学习一下。

2.5 分割线

分隔线是对列表和布局中的内容进行分组的细线。

▲图13 MD中的分割线

MD把分割线分成了四类：通栏分割线、内嵌分割线、居中分割线和带子标题的分割线。作为最基础的控件元素，这些分割线在我们产品设计中也非常普遍，每个设计师都需要明确到底什么情况下采用哪种分割线。

这里可以给大家介绍一个最简单的选取规则：通栏分割线分隔的内容一般都是彼此独立的；内片分割线左侧一般都有图标或图片，居中分割线上下的内容通常是有关联的并列的一组内容；带子标题分割线则是作为分组的分割线，在小组内容的最上方呈现。

当然除了用线性分隔，日常设计的时候，我们还需要考虑另外两种常见的分割方式留白分割和卡片分割，综合场景来选择最合适的分割方式，这里有一张我曾经对各种分割方式特点的总结，大家可以参考一下：

▲图14 笔者对分割方式的总结

2.6 卡片

卡片用于承载单个主题相关的内容和操作，作为MD材料的代表，经过这几年的推广，卡片已经渗透到产品设计的方方面面，iOS系统中自带的App也经常采用卡片式的设计。

▲图15 MD中的卡片

MD中的卡片作为一个单独的控件，它有以下特点：

1、卡片容器是卡片中唯一必要的元素，其他元素都是可选的。

2、卡片可以有显性的边界，也可以没有。

3、卡片不可以翻转；

4、卡片的默认高度是1dp，拖动高度是8dp；

5、不建议在卡片内滚动，避免两个滚动条；

卡片作为一个容器，可以很好的收纳相对复杂的信息和操作，具体大家也可以参考上图的分割方式，在合适的场景下选择卡片分割。

三。视图

MD中的视图组件相对iOS要少一些，我将其简单分为了操作类和内容类。操作类的核心强调让用户去操作，内容类的则主要在于呈现内容，让用户查看。

▲图16 MD中的视图组件

因为有很多是和iOS类似的，所以我只选择2个跟iOS有显著差异的进行介绍。

3.1 横幅

横幅用于显示重要、简洁的消息，并为用户提供处理（或关闭横幅）的操作，它需要用户主动操作后才会消失。

▲图17 视图-横幅

作为MD的一个特殊组件，它在产品设计中并不普遍（很多产品会有顶部提示，但用的不是横幅，因为横幅比较占空间）以下是横幅的使用规则：

1、横幅应显示在屏幕顶部，顶部应用栏下方，它是持久的和非模态的，允许用户在任何时候忽略它们或与它们交互。

2、横幅容器是矩形的通栏，一次只能显示一个横幅。

3、横幅最多可以包含两个文本按钮，次要动作放在左边，核心动作放在右边。

3.2 背景幕布

背景幕布出现在应用程序中所有其他内容的后面，在它之上显示上下文和可操作的内容。

▲图18 视图-背景幕布

之所以把背景幕布单独提出来讲是因为它的结构，它不是由一个容器填充颜色构成的，而是由两个面构成的，后层的面显示操作和上下文，可以控制和通知前层的面呈现不同的内容。比如在后层的面上显示导航，点击后在前层呈现不同的导航内容。或者在后层显示筛选器，点击后过滤筛选前层的内容。后层的面海拔为0dp，它的颜色填充整个背景，MD不建议使用下拉手势来显示后层的内容。（现实情况是：很多产品若是选择这种结构，都会增加明确的视觉暗示，让用户可以通过下拉来呈现后层的内容，以减少用户的操作成本）

小结

MD的设计组件介绍到这里就结束了，让我们再来回顾一下所有的组件内容及分类：

▲图19 MD所有组件

通过本篇文章的解析之后，大家对于MD组件的所有内容，及特色组件是不是有了更清晰的认识呢？如果你对文章任意内容有疑问，请加悦姐微信yuechats，加入悦姐交互小课堂，听悦姐为你详细讲解~

交互设计 · 第 11 讲预告

👉 Material Design 3 · 材料基础👈

🎉🎉🎉

悦姐1月组建了【交互小课堂】

每周日晚8:00，腾讯会议开讲文章拓展知识，并免费解答大家的交互设计疑问。

系列课程20堂+，帮助大家交互设计从入门到专业。

前100名限时特价199元加入，101~200名限时定价299元。

有需要的小伙伴请添加悦姐微信yuechats，备注【交互小课堂】

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

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

---

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

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