Material Design 是一种以材料为基础的设计语言，由 Google 在 2014 年推出。它利用大量的阴影、卡片、动画和平面元素等特点，让用户更生动地与应用程序进行交互。在 Material Design 中，颜色起着至关重要的作用。正确的颜色搭配可以提高你的应用程序的品质和视觉吸引力。下面是 7 种在 Material Design 开发实践中常见的颜色搭配技巧。
1. 主色与辅助色
Material Design 中，主色和辅助色是非常重要的两个元素。主色会在应用程序的大部分区域中使用，而辅助色则用于强调和突出特定元素。主色和辅助色通常选择在同一调色板中。
下面是一个实例，它演示了来自 Google 的 Material Design 的基础调色板。这个调色板包含一个主色（蓝色）和若干个辅助色。在这个例子中，我们可以看到，主色通常会用在应用程序的标题栏、底部导航栏、按钮等地方，而辅助色通常用于强调功能按钮、图标、文本等元素。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
--------------- ------ ----- ---------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-
-------------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
------------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
--------
-------
------
---- ----------------------------- -----------
---- --------------------------- -----------
-------
-------2. 鲜艳色与柔和色
在 Material Design 中，鲜艳色表示充满活力、年轻、动感和充满冒险精神。柔和色则表示平静、可靠、成熟和老练。鲜艳色和柔和色通常会一起使用在应用程序中，以创造出美观和强调的效果。
下面是一个实例，它演示了鲜艳色和柔和色的使用。在这个例子中，我们可以看到，鲜艳色被用在文本框和按钮等元素中，以吸引用户的注意力。而柔和色则被用在背景和底部菜单栏等地方，以创造出轻松和平静的感觉。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----------- --- ---- ------ -- -------- --------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-
----------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
----------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
--------
-------
------
---- ----------------------- -----------
---- ----------------------- -----------
-------
-------3. 色块和文本
色块和文本广泛用于 Material Design 应用程序中的许多部分，如顶部工具栏、卡片、列表项等。在这样的情况下，你可以选择使用反向的主色和辅助色进行搭配。这样可以确保元素是视觉上平衡的，在花哨的元素周围保持相对的平静。
下面是一个实例，它演示了文本和色块元素的反向主色和辅助色。在这个例子中，我们可以看到，色块使用了蓝色（主色）作为其背景颜色，而文本使用了橙色（辅助色）进行反色处理。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
--------------- ------- --- ------ ------ --- ---- --- --------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-------- -----
-
------ -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
----- -
------ --------
---------- -----
------------ ----
------- ---- --
-
--------
-------
------
---- ------------------- -------------
---- ----------------- -------------
-------
-------4. 暗系和亮系
在 Material Design 中，暗系和亮系是两个基本的颜色选择。暗系表示深沉和神秘的性质，而亮系则表示清爽、明亮和活力。在使用暗系和亮系时，通常需要考虑到背景颜色和文本颜色的可读性。
下面是一个实例，演示了暗系和亮系。在这个例子中，深灰色被用作暗色调，而米白色则被用作亮色调。展示出来的主要是文本，以及不同程度的透明度。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----------- --- ----- ------ -- -------- ------ ----------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-------- -----
-
----------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-------- ----
-
------------ -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-------- ----
-
--------
-------
------
---- ----------------------- -----------
---- ------------------------- -----------
-------
-------5. 单色搭配
在 Material Design 中，单色搭配是一种简单有效的颜色选择方案。单色调可以提供与材料设计风格相符的一致外观。另外，使用单色搭配可以使设计更注重内容，而不会过分强调颜色的视觉效果。
下面是一个实例，演示了单色搭配。在这个例子中，我们使用了单一的主颜色作为基准。在应用程序中的不同部分、元素和状态中，单色主题被重复使用。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
----------------- ----- -- -------- --------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-------- -----
-
----------------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
----------------------- -
----------------- --------
------- --------
-
------------------------ -
----------------- --------
-
--------
-------
------
---- ----------------------------------- -----------
-------
-------6. 渐变色搭配
渐变色搭配在 Material Design 中就像百搭一样，可以用于感知深度和漂亮的背景。渐变色搭配可以让应用程序更具深度，并在背景上显示多个色调。
下面是一个实例，演示了从蓝色渐变到灰色的渐变新主题。在这个例子中，我们可以看到，渐变色被用作背景颜色和文本颜色。这样可以在元素周围创造出精美的、触感的效果。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
--------------- ------ -- -------- --------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-------- -----
-
--------------- -
----------- ------------------ ------ -------- ---------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
--------
-------
------
---- ------------------------------- -----------
-------
-------7. 互补色搭配
最后一种 Material Design 中非常常用的颜色搭配技巧是互补色搭配。互补色通常不会被重复使用，在不同的应用程序和状态中会呈现不同的视觉效果。在选择互补色时，通常需要考虑到背景颜色和文本颜色的可读性。
下面是一个实例，演示了互补色搭配。在这个例子中，我们使用了橙色作为主色，在应用程序中使用了不同的互补色调。这样可以使不同的应用程序和状态看起来非常独特且具有吸引力。
--------- -----
------
------
----- --------------- --
----- --------------- ---------------------------- ------------------ --
-------------------- ------ -- -------- --------------
-------
---- -
----------------- --------
------ --------
------------ --------- -----------
---------- -----
-------- -----
-
-------------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
--------------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
--------------- -
----------------- --------
------ --------
-------- -----
-------------- -----
----------- -------
------- ---- --
-
--------
-------
------
---- ----------------------------- -----------
---- ------------------------------------ ----- -------
---- ------------------------------------ ----- -------
-------
-------结论
Material Design 中，正确的颜色搭配可以使应用程序更具有吸引力且易于使用。在你的应用程序中使用这七种颜色搭配技巧，可以让你的应用程序看起来更加专业和精美。特别是在移动设备上，颜色搭配更是一个重要的方面，可以在小屏幕上让元素和文本变得更加清晰和可读。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673064cfeedcc8a97c91cc6c