介绍
Material Design 是 Google 推出的一种视觉设计语言，是一套精美的设计指南和规范，用于设计 Android 移动应用和 Web 应用。其中，色彩搭配和配色原则是 Material Design 设计中的重点。
色彩搭配
色彩基础
Material Design 设计中有三种基本的颜色：Primary Color（主色）、Accent Color（强调色）和 Text/Icons Color（文本/图标颜色）。其中，Primary Color 和 Accent Color 的选择非常重要，因为它们会影响整个应用的视觉效果。
Primary Color 是应用的主色调，通常用于导航栏、按钮和一些重要元素中。Accent Color 是强调色，用于突出重点、强调信息等。
另外，Text/Icons Color 的选择也非常重要。它们用来传递信息和导航用户，因此需要与背景色形成清晰对比。一般来说，文本和图标颜色应该是黑色或白色，以确保足够的对比度。
色彩搭配原则
Material Design 根据颜色的明暗程度和饱和度来形成色彩层次。较浅和较暗的颜色用于不同的用途，例如弱化背景、弱化分割线等。因此，正确的颜色选择和搭配可以使应用更具层次感和深度感。
Material Design 根据 Primary Color 和 Accent Color 的搭配方式，分为以下几种类型：
单色搭配
单色搭配是使用同一 Primary Color 的不同色调来实现。它可以创造出非常简洁且统一的效果，适用于一些正式的应用或需要较高的可读性的应用。下面是一个简单的单色搭配示例：
-- -------------------- ---- ------- ------------ -------- -- -- ------- ----- ----------------- -------- ------------------ -------- ----------------- -------- -- --------- ------------------- -------- ----------- -------- -- --- ---------------- -------- ----------------- --------
对比色搭配
对比色搭配是使用 Primary Color 和一个具有高对比度的颜色（通常为黑色或白色）进行搭配。这种配色方式非常适合需要强调的地方，例如按钮、图标等。
-- -------------------- ---- ------- ------------ -------- ----------------- -------- ------------------ -------- ----------------- -------- -- ------ ------------------- -------- -- ------ ----------- -------- ---------------- -------- ----------------- --------
三色搭配
三色搭配是使用 Primary Color、一个 Dark Color 和一个 Light Color 进行搭配。其中 Primary Color 通常用于主要元素，Dark Color 用于弱化背景，Light Color 用于突出边框、分割线等。
-- -------------------- ---- ------- ------------ -------- ----------------- -------- ------------------ -------- ----------------- -------- ------------------- -------- ----------- -------- ---------------- -------- ----------------- --------
色彩工具
为了帮助设计者更好地搭配颜色，Material Design 提供了一些工具：
- Color Tool：用于生成 Material Design 的颜色搭配方案。
- Palette Generator：用于生成 Material Design 的颜色搭配方案。
配色原则
除了颜色的选择和搭配外，还有一些重要的配色原则需要注意：
对比度
对比度是指两种颜色之间的明暗程度差异。在 Material Design 中，文本和图标颜色需要与背景色形成明显的对比度，这样才能够确保足够的可读性。根据 Material Design 的规范，文本和图标需要具有 4.5:1 的对比度，而对于小字体来说则需要更高的对比度。
色彩平衡
色彩平衡是指在应用中使用的不同颜色之间保持平衡。通过正确的搭配和使用，可以在视觉上平衡各种元素，使应用看起来更加美观和统一。
颜色的作用
颜色的选择和使用应该与应用的目标和品牌形象相符合。例如，紫色通常代表创新和创造性，适用于科技和高科技企业；绿色通常代表自然和环保，适用于环保和农业企业。因此，在选择配色方案时，应该考虑所要传达的信息和场景。
示例代码
下面是用 Sass 实现的一个 Material Design 的颜色变量示例。通过调用对应的变量，可以轻松地实现颜色搭配和调整。
-- -------------------- ---- ------- -- ------- ------------ -------- ----------------- -------- ------------------ -------- -- ---------- --------------- -------- -------------------- -------- --------------------- -------- -- ---- ----------------- -------- ------------------- -------- -- ------ ----------- -------- ---------------- -------- ----------------- --------
结论
通过正确的颜色搭配和配色原则，可以创造出美观、易于使用和符合品牌形象的应用。在使用 Material Design 进行应用设计时，应仔细考虑颜色的选择和搭配，确保应用在视觉上的一致性和吸引力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6773e4186d66e0f9aae8ac63