在 Material Design 设计中，背景颜色的选择非常重要，它可以影响用户对应用程序的整体感觉和易用性。本文将介绍 Material Design 中设计背景颜色的指南，包括颜色的选取、如何搭配以及如何使用背景色营造用户友好的界面。

Material Design 颜色系统

Material Design 中采用的颜色系统基于 3 个颜色属性：原色（Primary）、强调色（Accent）和背景色（Background）。这些属性都是通过调整色彩的明度和对比度来定义的，在视觉层次结构中起到不同的作用。其中，背景色作为视觉层次结构的底层，能够提供页面的深度和整体感觉。

选择合适的背景颜色

合适的背景颜色应该与应用程序的整体设计风格和用户需求相匹配，从而提供清晰易识别的界面。以下是一些选择合适背景色的指导原则：

避免使用过于鲜艳和太过暗淡的颜色，这些颜色可能会引起用户的不适。
在整个页面中使用连续的背景颜色，可以增强应用程序的整体感觉。
当使用渐变效果时，使用渐变颜色之间的对比度保持一致，以获得平滑的过渡效果。
考虑到文字在背景上的对比度，选择足以容易区分文字和背景的颜色。

在 Material Design 中，可以通过以下方法来选择合适的背景颜色：

根据内容选择颜色

根据应用程序中的内容类型和目标用户选择合适的颜色色板。例如，在时尚应用程序中，可以选择亮色和高饱和度的颜色来展示新的潮流和时尚。而在新闻应用程序中，应该选取更加中性和深度的背景颜色以突出新闻内容。

考虑其色差

在选择颜色时，应使用 Material Design 颜色工具来确保在设计中使用的颜色相互之间有充足的对比度。这不仅可以增强应用程序的可读性，还可以提高可访问性和可用性。

使用 Material Design 中预定义的颜色

Material Design 中提供了预定义的颜色，可以在应用程序中使用。这些颜色经过优化，可以为应用程序提供最佳的用户体验。使用这些颜色不仅有利于提高应用程序的一致性和可读性，还可以使应用程序更容易适应 Material Design 指南中的其他设计原则。

搭配多种背景颜色

尽管单一的背景颜色已经足以构建出设计精美的应用程序，但使用多个颜色也可能会增强应用程序的视觉吸引力。以下是一些在 Material Design 中使用多种背景色的指导原则：

通过层次结构来增加深度

通过使用不同颜色的层次结构，可以增加背景的深度感。可以通过在页面的不同区域使用不同的颜色来区分层级，例如使用浅色背景来突出某部分内容，使用深色背景来突出其他部分内容。

使用背景图案

在设计中，通过在背景中使用纹理、图案以及其他视觉元素混合，可以增加背景的深度和层次感。但是，当使用背景图案时，需要确保与文本和图像的对比度相当。

使用渐变

在 Material Design 中，渐变被广泛应用于背景中，以获得更自然、柔和和有吸引力的过渡效果。可以尝试使用两个或多个层次结构之间的颜色渐变，但需要提高对比度让文本达到清晰可读。

如何使用背景色

除了选择合适的背景颜色，还有一些技巧可以使用背景色来提高应用程序的易用性与可读性：

背景色搭配应用名字和 Logo

可以在主屏幕或其他位置使用应用程序名称和 Logo 等元素来同时突出应用的氛围和品牌，并与背景颜色相匹配。

在不同的视图中使用不同的背景颜色

在具有多个视图的应用程序中，可以在不同的视图和屏幕上使用不同的背景颜色，以帮助用户快速识别他们所处的位置。

使用背景色提高元素组合的可读性

可以通过使用背景颜色对相关的图标、标签和其他元素进行分组，从而增强元素的可读性并提高用户体验。

示例代码

下面是一个简单的示例代码，在应用程序的不同屏幕中使用不同的背景颜色：

-- -------------------- ---- -------
--------- -----
------
------
  --------------- --------------
  -------
    ------- -
      ----------------- --------
      ------ -----
      -------- ----
      ----------- -------
    -
    -------- -
      ----------------- -----
      ------ -----
      -------- -----
      ----------- -------
    -
    ------- -
      ----------------- --------
      ------ -----
      -------- ----
      ----------- -------
    -
  --------
-------
------
  ---- ---------------
    ------------ -----------
    -------------
  ------

  ---- ----------------
    ----------------
    ------- ------- ---- -- --- -------
  ------

  ---- ---------------
    -------------
  ------
-------
-------

在这个代码中，我们定义了三个不同的背景颜色类，用来应用到应用程序的页面上。通过添加这些不同的颜色，我们可以达到区分不同屏幕元素的目的并且为用户提供更优的使用体验。

总结

在 Material Design 设计中，背景颜色的选择是增强应用程序的可读性和可用性的重要方法。本文介绍了一些选择背景颜色和如何搭配背景颜色来创建应用程序的指南与指导原则，并提供了一些示例代码用于展示如何使用这些指导原则。通过遵循这些指南和指导原则，可以让你的应用程序更加符合用户的期望，并且有更好的用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/649d695c48841e9894a2ce35