Material Design 3 · 设计理念

   悦姐聊设计

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

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

---

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

今儿是初七，开工第一天，用一篇新文章祝大家开工大吉，虎虎生威🐯🐯🐯

春节期间一直在看Material Design(后文简称MD)，对比iOS指南，MD堪称保姆级设计规范，从概述、规格到指南、实现，图文并茂，案例丰富，描述详细，易读易懂，真的忍不住安利大家要多多学习，绝对可以帮助大家打好交互设计基础。

交互设计 · 第 9 讲

👉 Material Design 3  · 设计理念👈

MD是谷歌为旗下全线产品提供的一套设计规范。作为开源的设计体系，MD不仅为安卓设备提供设计指南，也为开发者应用到苹果和windows设备提供了支持和资源，可以帮助团队快速构建精美的产品。

▲图1 Material you视频介绍

MD 3 是Google 迄今为止最具表现力和适应性的设计系统，在MD 2的基础上更新了主题、部分组件，以及动态配色等 Material You 个性化功能，旨在与新的 Android 12 视觉风格和系统界面相得益彰，感兴趣的小伙伴可以阅读体验进阶团队翻译的中文版（感谢@ZoeXY@文静等同学的倾力翻译）

▲图2 Material Deisign3 中文版

之前学习iOS指南时，我把整个规范拆解成了三大模块：设计理念、界面元素和设计标准，帮助大家建立宏观框架。同样，在学习MD时，我们也需要先从宏观上进行归纳和拆解。

▲图3 MD官网上的目录范围

跟iOS指南相比，MD规范内容更加丰富和详细，绝对值得大家细细品读。经过几天系统性的学习，我把官网中的所有内容归纳为设计理念、材料基础和设计组件三大部分。

▲图4 MD内容拆解

设计理念指导着材料基础和组件的具体设计，材料基础和设计组件共同支撑着顶层的设计理念。设计组件构建了材料基础中的所有视觉元素，材料基础中的设计理念又影响和塑造着每个一个组件的设计，三者互相支撑，构建完整的设计系统。

今天我们还是先从顶层的设计理念开始讲起。

▲图5 MD的设计理念

MD的设计理念可以归纳为3大原则，相比iOS更加精炼和贴切，直指MD的核心设计精髓。

一。材料是隐喻

隐喻是iOS在拟物化设计时代就推出的设计理念，Google的设计师在MD中将其发扬光大，成为MD最核心的设计理念。

▲图6 材料是隐喻

MD 的灵感来自物理世界及其材质，包括它们如何反射光线和投射阴影。MD是以纸墨为基础隐喻进行的再设计。

▲图7 材料的构成

在MD中，材料是通过面（英文Surface，有文章将其翻译为表面、纸张、量子纸张）、海拔和阴影来体现的。

1.1 面

MD中所指的材料本质就是面，海拔和阴影相当于是面的外在特性。

▲图8 面的三维特性

面作为MD的默认材料，除了外在特性外，也具有默认的内在属性：不透明的白色，在X轴和Y轴上占据一定的大小，在Z轴上占据1dp的厚度。MD中所有的UI元素都来自与对面的修改。

▲图9 内容与面的关系

面是内容的载体，内容依附在面上，内容不是单独的一个层，它显示与否不会增加面的厚度，内容可以是任意形状和颜色的。

对内容进行操作时，内容的反馈可以独立于面，但仅限在面的范围内反馈，不能超越面的范围作用于其他面。

内容的行为可以独立于面的行为，面进行伸展运动时，内容可以保持固定大小和位置不发生变化。内容行为也可以跟随面的行为，同步的进行缩放平移。

▲图10 面的物理特性

面作为纸张的隐喻，也具备部分纸张的物理特性。比如：

1、一项操作不能同时触发两个面的反馈，不能透过上层的面作用于下层的面。

2、面重叠时，海拔高度是不同的（因为有厚度）。两个面不可能同时出现在同一个空间位置。

3、一个面不能穿透另一个面。

4、面不能像气体、液体或凝胶那样流动。

5、面可以沿任何轴线运动。

这些都是以纸张为隐喻大家可以理解的物理特性，此外，面还具有现实纸张所不具备的魔法特性：

▲图11 面的魔法特性

1、面可以根据内容展示的需要，改变大小、形状、透明度。

2、多个面可以连接在一起，也可以拆分开。

3、面可以根据需要，自发的产生或消除。

了解MD，首先就是要了解材料（面）的内在特性，这样才可以在设计中灵活的运用它。

1.2 海拔

海拔（Elevation），在物理世界中是指地面某个地点高出海平面的垂直距离。MD也借用了这一概念，用于表达面在Z轴上的垂直距离。

▲图12 海拔

在MD中，海拔是沿 z 轴的两个表面之间的相对距离，单位是dp。所有材料和组件都具有默认的海拔高度，所以我们在进行设计时，一定要正确的表现其海拔。

▲图12 海拔·静态表达

在静止状态下，要清楚的表现面的海拔高低，可以有3种方式：

1、清晰的显示面的边缘，让它与周围环境形成对比；

2、通过默认态或运动态与其他面重叠；

3、与其他面相隔一定的距离。

▲图13 海拔·动态表达

除了静止状态下的表达，还有很多可以动态表达海拔高低的方式，比如阴影的变化，动态重叠，动态推开，缩放遮挡，视差滚动以及这些动效的组合，都可以清楚的传达出面的海拔高低。

MD给所有组件都规定了默认的海拔高度，以明确不同组件的信息层次。大家在使用这些组件时，需要注意正确的使用阴影、动效等方式来匹配其信息层次。

▲图14 海拔·默认值和动态偏移值

1.3 光影

材料的面受光源照射后会投射阴影。主光源产生清晰的有方向的主阴影，各个角度的环境光通过漫反射产生了柔和的环境阴影。

▲图15 光影

在MD中，面同时受到主光源和环境光源的照射，所以阴影要同时体现主光源和环境光源，不能单独显示一种光源的效果，而且MD鼓励在暗黑模式下也显示阴影，即使它在视觉上并不明显。

▲图16 阴影

阴影提供了关于海拔，运动方向和面边缘的提示，面的阴影由其高度和其他面的关系决定。（大家可以思考一个问题：是不是同一海拔的面，阴影效果就是一样的？）高海拔的面阴影较大，低海拔的面阴影较小。

无论是面、海拔，还是光影，它们的多数特性都与现实世界相呼应，这就是MD对材料是隐喻的充分贯彻。

二。鲜明、形象、有意义

MD的第二大设计原则是鲜明、形象、有意义。在MD中，基本上所有的模块和组件都遵循这一设计原则。

▲图17 设计原则-鲜明、形象有意义

MD 借鉴印刷设计的方法（排版、网格、空间、比例、颜色和图像）为指导，为每一个页面创造层次、意义和焦点，让观众沉浸在体验中。

鉴于下文动效和后续材料基础的文章都会充分体现这一原则，此处我们只简单展示一下此理念。

2.1 鲜明

MD的色彩运用具有典型的鲜明特征。

▲图18 鲜明·色彩

主要体现在以下几个方面：

1、MD内置默认主题色，有着强烈的色彩对比；

2、MD提供动态色彩方案，自适应用户桌面主题；

不管哪一套色彩系统，MD都提供了主色、中性色和辅助色。主色用来强调关键组件如FAB、按钮、顶部应用栏等。中性色用于背景和面，或强调文本和图标。辅助色用于一些特殊状态如错误提示。

2.2 形象

MD的形状，也非常生动的展示了其活泼的形象。

▲图19 形象·形状

在MD中，设计师可以创建个性化的几何形状去表达品牌，如上图SHRINE。MD 3 引入了多种不同的几何图形（参见一开始的视频）让元素形象更加鲜明和个性化。为了方便形象表达，对于所有组件，MD都提供了形状定制能力和建议，让大家可以在组件的基础上自定义形状，这对于创建形象的元素提供了强有力的支持。

2.3 有意义

MD的图标和图标动效，都是有意义的典范。

▲图20 有意义·图标

在MD中，系统图标是简单、现代和友好的，力争用最简单的形式表达意义，并用鲜明形象的动效来增强其意义。

特别要强调的是鲜明、形象、有意义是一个整体，只不过我为了方便大家理解，单独选取了一些对象的典型特征来分别阐释，作为设计理念，希望我们设计的每一个元素都兼具鲜明、形象和有意义。

大家在阅读下方动效的介绍时，也可以仔细体会一下，除了动效表意这一原则之外，动效设计也同样遵循鲜明、形象有意义。

三。动效表意

借助微妙的反馈和流畅的过渡，动效可以吸引并维持用户的注意力。当元素出现在屏幕上时，通过与之交互，它们会改变和重组产生新的变化，这些变化的过程让UI更有表现力且更易于使用。

▲图21 设计原则-动效表意

每一个动效都需要其存在的理由，都必须提供额外的价值和意义。MD中介绍动效可以具有以下4重意义。

3.1 用户引导

▲图22 动效·用户引导

操作前，动效可以吸引用户的注意，并帮助用户理解如何执行操作，例如，页面的滑动的光晕动效或者是上滑动效，可以暗示用户上滑页面。商品从列表到购物车的曲线运动动效可以暗示用户到购物车查看商品等。

3.2 反馈状态

▲图23 动效·反馈状态

操作时，动效可以提供有效的反馈，明确告知用户系统是否接受到用户的输入。比如拨号键的点击态，进入新页面时占位符的动效加载效果，长按卡片时卡片阴影变化效果等，都明确的告知用户系统接收到了用户的行为。

3.3 表达页面层级

▲图24 动效·表达页面信息层级

页面的转场动效，可以帮助用户理解页面之间的层级关系。比如列表页卡片展开，可以表达父子页面的关系。Tab横向切换可以表达平行页面的关系。点击按钮展开菜单，可以让菜单和操作关联起来。(MD还提倡用淡入淡出来表现无关系页面的过渡，但我个人认为这个要慎重，很多情况下还不如没有动效，比如切换底部导航Tab的动效)

3.4 表达品牌

▲图25 动效·表达品牌

动效可以表达品牌的个性和风格。在具体设计中，我们可以根据品牌风格，自定义过渡效果、图标、插画以及logo动效，让品牌感受更加鲜明形象，既可以增加用户交互的趣味性，还可以在用户旅程的峰终时刻强化情感的表达，塑造记忆深刻的产品体验。

在用动效表达意义时，要注意通过速度来控制动效的时长和效果。正确的持续时间和缓动组合可以让动效更清晰自然。

▲图26 动效·速度与时长

动效的持续时间有两点规律需要遵守：

1、动效过渡区域越大，动效时间越长（按钮100ms，小浮层250ms，全屏300ms）

2、退出和关闭的动效比进入动效略短（50ms）

同时，为了让动效更符合现实世界的感知规律，MD建议进入退出都要使用缓动效果，MD提供了4种缓动类型供大家直接调用：

▲图27 动效·缓动效果

1、标准缓动通过花费更多时间来减速而不是加速，从而巧妙地将注意力集中到动画的结尾，适用于界面上一个元素由静止到运动再到静止的情况。

2、强调缓动在标准缓动的规律下，在动画结束时持续更长时间，以引起额外的注意，以传达更加风格化的速度感。

3、减速缓动：最快速进入并在静止时结束，适用于元素入场。

4、加速缓动：从静止加速到峰值结束，适用于元素退场；

小结

MD的设计理念介绍到这里就结束了，让我们再来回顾一下这三大原则：

▲图28 MD的设计理念

通过本篇文章的解析之后，对上面3个原则，你是否有了更深刻的理解呢？如果你对文章任意内容有疑问，请加悦姐微信yuechats，加入悦姐交互小课堂，听悦姐为你详细讲解~

交互设计 · 第 10 讲预告

👉 Material Design 3 · 设计组件👈

🎉🎉🎉

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

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

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

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

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

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

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

---

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

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