Material Design 1 与 Material Design 2

这篇文章包含附属链接；如果您通过本文提供的不同链接购买产品或服务，我可能会收到报酬。

什么是 Material Design 2？

Material Design 诞生于 2014 年，旨在提升 Google 所有产品在全平台上的一致性。Material Design 究竟意味着什么？它受物理世界的启发，并基于现实世界如何反射光线和投射阴影。世界的物质原则在纸和墨中被重新构想，从而诞生了如今的 Material Design。

然而，Material Design 存在一些缺陷，需要开发者自行重新创建每个组件。因此，谷歌最近采用了新的方法来设计新组件，包括更新的字体、圆角和扁平化的全白色背景，使其与 2014 年提出的 Material Design 概念有所不同。这就是所谓的 Material Design 2。

Material Design 和 Material Design 2 之间有什么区别？

Material Design 2.0 和 Material Design 的区别如下：

• 空白和半透明

大量的留白是 Material Design 和 Material Design 2 之间的一大区别。这样做是为了打造极简主义的外观，但却引发了不少争议。新设计中也有一些与半透明相关的变化。

• 色彩鲜艳的图标

设置应用中有很多新元素，还有一些新的彩色图标，这似乎是 Material Design 的新变化。总而言之，谷歌似乎在 Material Design 2 中拥抱了更明亮的色彩。

• Google Sans

Material Design 2 中另一个越来越明显的变化是，标题栏采用了 Google Sans 字体，取代了部分 Roboto 字体。谷歌的全新 Material Design 已在 Wear OS 网站、众多 Google Tasks 应用、2018 年 Google I/O 大会以及新版 Gmail 的邮件标题中使用了其新字体。

• 圆角 丰富的圆角设计也是 Material Design 2 的一大亮点。圆角半径已广泛应用于 Google 的应用、Google Feed、Google Tasks 应用、Google Pay 网页版以及其他页面。与原版 Material Design 的不同之处在于，技术上已经圆润的圆角半径也得到了进一步的提升。
  
  

• 新的圆形标签指示器

Material 2 的另一个新变化是全新的弹出窗口设计，其圆角设计与传统的高亮显示不同，后者会覆盖整个标签页，有时甚至延伸到其他标签页。圆角标签指示器现已出现在 Android 版 Google 地图、新的 Google 帐户设置页面以及网页版 Gmail 中。

• 菜单中的圆形选择突出显示

新的 Google Material Design 中另一个明显的重大变化是菜单中的圆形选择突出显示。

• 更大的 BottomAppBar

随着手机尺寸的增大，在应用中导航变得愈发困难。因此，在 Android P 中原有的 Material Design 指南中引入的 BottomAppBar 现已焕然一新。主要变化在于，带有宽浮动按钮的“任务”选项现在位于 BottomAppBar 的顶部。这些 BottomAppBar 将会出现在 Google 的大部分第一方应用中。

新版 Material Design 中哪些方面没有改变？

Material Design 2 不会正式发布。谷歌可能不会把 Material Design 称为 Material Design 2，因为其底层原理完全没有改变。Material Design 正在日新月异，新版本似乎只是在原有的 UI 上做了一些改动。

新版Material Design依然建立在谷歌2014年发布的开源代码之上，除了基础之外，Material Design背后的组件只是进行了小幅更新，并没有发生改变。

材料设计示例

受 Google Material Design 的启发，Creative Tim创建了大量 Material Design 示例，您可以利用它们轻松创建美观、符合 Material Design 风格的主题和仪表盘。以下列出了一些示例：

材料套件

详细信息 | 实时预览|获取托管
这款免费的 Bootstrap 4 UI 套件具有清新、新颖、受材料设计启发的设计，配有一组漂亮的组件、精心的颜色选择和大规模的排版。

材料仪表板专业版

详情 | 实时预览|获取主机
Material Dashboard Pro 是受 Google Material Design 启发的又一款仪表盘，它利用表面、光线和运动效果，使仪表盘呈现出纸张般的质感。它是 Material Kit 的一部分，提供创建复杂产品所需的必要工具。

NextJS 材料套件

详情 | 实时预览|获取主机
NextJS Material Kit 也受到 Material Design 的启发，可用于 NextJS、React 和 Material-UI。它拥有明亮、清新的色彩和丰富的组件，能够打造出最惊艳的网站。

Creative Tim 拥有大量适用于多种编程语言的 Material Design 模板，您可以付费或免费使用。虽然目前提供的套件和模板基于 Material Design 1，但我们很快将实现 Material Design 2 并将其集成到现有模板中。

结论

虽然 Material Design 在 2014 年发布时存在一些缺陷，但它已经取得了长足的进步，几乎被 Google 的所有应用、网站和组件所采用。随着 Material Design 2 的全新外观被广泛使用，可以说，这一理念在网页和应用程序设计领域取得了巨大的成功。立即购买Creative Tim创建的易于使用的套件和模板，利用 Material Design 的概念快速启动您的最新项目！