Material Design 是谷歌推出的一种设计风格，它的目标是创建一个设计语言，让用户可以轻松地在移动设备和台式机之间实现一致的视觉体验。在 Material Design 中，通知视觉元素是非常重要的一部分。那么，我们应该如何使用 Material Design 创建通知视觉元素呢？本文将为您详细介绍。
Material Design 中的通知视觉元素
在 Material Design 中，通知视觉元素包括：
Snackbars：它们是通知用户任务已成功或失败的轻量级组件。它们通常会在页面底部出现，并在几秒钟后自动消失。Snackbars 的样式趋向于简单，只用于传达文本信息。
Toasts：它们与 Snackbars 很类似，但它们不同的是，Toasts 通常是居中显示的，可以显示更多的内容。
Notifications：它们是用于显示进程状态和用户消息的高级组件，常见于移动应用程序。
Banners：它们与 Notifications 类似，但它们通常会在页面顶部出现并持续更长时间。
以上这些组件的设计思路，是在不打扰用户当前正在执行任务的情况下，向用户传递必要的信息。所以在设计这些组件时，我们需要注意以下几点：
- 组件应该是简单的，不应该干扰用户正在进行的操作。
- 组件应该明确传达信息，让用户知道发生了什么事情。
- 组件应该易于使用，让用户可以通过简单的交互与其进行互动。
现在，让我们具体看看如何在前端中使用 Material Design 创建通知视觉元素。
使用 MaterializeCSS 来创建通知视觉元素
MaterializeCSS 是一个流行的 Material Design 风格的前端框架，我们可以使用它来实现常见的通知视觉元素。
Snackbars 和 Toasts
MaterializeCSS 为 Snackbars 和 Toasts 提供了简单的 API 来使用。试着运行以下代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------------- --------- - --------------
----- -------------------------------------------------------------- -----------------
----- ---------------- ---------------------------------------------------------------------------------------------
----- --------------- ---------------------------- ------------------ --
------- --------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------------
-------
------
---- ------------------
------- ---------- ------------ ------------ ----------------------- --------------------------------
-- ------------------- ----------- ---- ----------------------- ---------------- -------- ---------------------------
------
-------
-------这段代码会在页面上渲染一个按钮和一个链接，点击它们就会出现一个 Toast 或 Snackbar。
Notifications 和 Banners
如果您需要更高级的组件，比如 Notifications 和 Banners，您可能需要使用其他框架或自己编写代码。好在在 MaterializeCSS 中，我们有这样一个代码片段：
<div class="card-panel teal lighten-2"> <span class="white-text">这是一个Banner</span> </div> <div class="card-panel"> <span class="blue-text text-darken-2">这是一个Notification</span> </div>
在这段代码中，我们使用了一个 Card 组件和一些 CSS 样式来实现 Notifications 和 Banners。您可以通过更改颜色类来创建不同的样式。试着运行这段代码，看看它是如何工作的。
总结
Material Design 是一个非常实用的设计语言，可以帮助我们在应用程序和网站中创建通知视觉元素。在本文中，我们介绍了 Material Design 中的四种通知视觉元素，以及使用 MaterializeCSS 框架来创建这些元素的方法。希望这篇文章能够帮助您创建出舒适的 Material Design 风格的网站或应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491281648841e9894f2cf7b