Material Design 是 Google 推出的一种现代化的设计语言，该语言具有鲜活、明亮的颜色风格，深受众多设计师和开发者的喜爱。那么，为什么 Material Design 的颜色更加鲜活、明亮呢？在本篇文章中，我们将深入探讨该问题，希望为广大的前端开发者带来一定的参考价值。
Material Design 的颜色理论
要了解为什么 Material Design 的颜色更加鲜活、明亮，我们首先需要了解 Material Design 的颜色理论。根据 Material Design 的设计原则，人们在使用应用程序的时候，应当感觉到自己处在一个真实的材质世界中。因此，Material Design 将颜色分为两类：主色和强调色。
主色
主色是应用程序主要的品牌色，用于识别品牌，并为用户提供导航栏、工具栏等等主要组件的背景颜色。在 Material Design 中，主色应当是明亮、鲜活的颜色。这些颜色应当能够吸引用户的注意力，并给他们带来轻松、愉悦的体验。Material Design 提供了一组标准颜色，开发者可以根据自己的品牌特点进行选择。
下面是 Material Design 的标准主色列表：
--- ---- ------ ---- ------ ------ ---- ----- ---- ---- ---- ----- ----- ----- ---- ------ ----- ------ ---- ------ ----- ---- ---- ----
我们可以使用以下代码获取 Material Design 中的主色列表：
------- ------------------------------------------------------------------------------------- ------- -------------------------------- ---- ------------ -- ---------------------------- --------- ---------------- ----------------------------------- ------ ------- --- ----- ----- ------ ----- ---------------------------------- ------ ------
强调色
强调色用于突出应用程序特定的元素，例如按钮、链接等等。在 Material Design 中，强调色应当是更为鲜活、更为明亮的颜色。强调色应当能够让用户在视觉上即时获得信息，并引导用户进行某一动作。同时，强调色也应当具有品牌識别的能力，例如，我们可以使用品牌的主色和强调色进行组合，创造出与众不同的品牌视觉效果。
下面是 Material Design 的标准强调色列表：
--- ---- ------ ---- ------ ------ ---- ----- ---- ---- ---- ----- ----- ----- ---- ------ ----- ------ ---- ------
我们可以使用以下代码獲取 Material Design 中的強調色列表：
---- ------------ -- ---------------------------- --------- ------ ----------------------------------- ------ ------- --- ----- ----- ------ ----- ---------------------------------- ------ ------
Material Design 颜色的应用
了解了 Material Design 的颜色理论之后，我们就可以开始为我们的应用程序配置颜色方案了。下面，我们将为大家介绍一些常用的 Material Design颜色应用方法。
使用主色
使用 Material Design 主色，可以为应用程序增加明亮、鲜活的视觉效果。在我们的设计中，应当尽量保证主色的明亮、鲜活程度，这样才能最大限度地吸引用户的注意力。同时，我们还可以在应用程序的主要元素中使用主色，例如导航栏、工具栏等等。
以下是一个基于 Vue.js 和 Vuetify 的主色应用示例：
----------
------ --------- ---------------- ----------------------------------- ---
---------- ---- ----------------
------------------- ---------------------
---------------------
---------------------
------------
-----------
-------------
-------- ----- ----- --- ----- ----------- ---------- ----- ----- --- ----------- ------- -------- -- -- - ----- --------- ------- ---- ------ ------ -- ------ ----------- ----- ------------ ---- ------- ------ --------- -- -- ----- ------- ----- ----------- ------ ---------- ----- -- ----- ---------- -------- ---- --- -------- ----- ----- ------- ------ ----- ---- -------- -------- ---------- ---- -- ----- ------- ------- -------- -- ------ ----- ------------ -- ---- ---------
--------------
------------
--------
-----------
--------
------ ------- -
-
---------在这个示例中，我们使用了 Material Design 中的 primary 颜色作为我们应用程序的主色，并将其应用于了应用程序的背景颜色和导航栏中。
使用强调色
在设计中，我们需要提取应用程序左右特定元素的颜色进行强调，以便让用户能够在视觉上很快地获得信息。在 Material Design 中，我们可以使用强调色来突出按钮、链接等等元素。
以下是一个基于 Vue.js 和 Vuetify 的强调色应用示例：
----------
-------
---------- ---- ----------------
------------------- ---------------------
---------------------
------ ---- ------------------- ----------
------------
-----------
-------------
-------- ----- ----- --- ----- ----------- ---------- ----- ----- --- ----------- ------- -------- -- -- - ----- --------- ------- ---- ------ ------ -- ------ ----------- ----- ------------ ---- ------- ------ --------- -- -- ----- ------- ----- ----------- ------ ---------- ----- -- ----- ---------- -------- ---- --- -------- ----- ----- ------- ------ ----- ---- -------- -------- ---------- ---- -- ----- ------- ------- -------- -- ------ ----- ------------ -- ---- ---------
--------------
------------
--------
-----------
--------
------ ------- -
-
---------在这个示例中，我们使用了 Material Design 中的 accent 颜色作为强调色，并将其应用于了 "Sign Up" 按钮的背景颜色中。
结论
在本篇文章中，我们深入探讨了为什么 Material Design 的颜色更加鲜活、明亮的问题，并为大家介绍了 Material Design 的颜色理论和应用。Material Design 的颜色理论强调了应用程序的明亮、鲜活程度，并提供了主色和强调色两种颜色类型。在使用 Material Design 的时候，开发者可以根据自己的品牌特点选择主色和强调色，创造出更为鲜活、明亮的视觉效果。我们希望这篇文章能够为广大的前端开发者带来一定的参考价值，并帮助他们设计出更为出彩的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671a4d579babaf620fa27f13