Material Design 中控件颜色提取与配色实践-JavaScript中文网-JavaScript教程资源分享门户

Material Design 中的控件是一个全新的设计语言，它提供了一种现代的、更加绚丽和友好的用户界面设计。其中，控件颜色的配色是其中的关键部分。本文将介绍 Material Design 中控件颜色的提取和配色实践，以及在前端开发中的应用。

控件颜色的提取

Material Design 中控件颜色的提取是基于色相圆的。每个控件的主色调都是由两个基本颜色组成的，分别为“Primary Color”和“Secondary Color”。其中，“Primary Color”是主色调，通常会应用到应用的大部分区域中，比如应用栏、按钮等。而“Secondary Color”则是用于强调性的背景色、分割线等元素上。

首先，我们需要选择主色调的基本颜色，以蓝色为例。可以使用 Adobe Color Picker 工具（https://color.adobe.com/create/color-wheel/）来选取蓝色的对应颜色。选择好颜色后，我们需要确定该颜色的辅助色调，这些颜色将与主色调一起用于构建控件的配色方案。

Material Design 为我们提供了一组辅助色调，每个颜色与主色调形成了一个 tetradic（四色）关系。因此，我们可以根据主色调的选取，自动得出配色方案。我们可以看一下下面的例子：

// javascriptcn.com 代码示例
// Blue - Main color
$md-blue-500: #2196F3;

// Blue - Secondary colors
$md-blue-50: #E3F2FD;
$md-blue-100: #BBDEFB;
$md-blue-200: #90CAF9;
$md-blue-300: #64B5F6;
$md-blue-400: #42A5F5;
$md-blue-500: #2196F3;
$md-blue-600: #1E88E5;
$md-blue-700: #1976D2;
$md-blue-800: #1565C0;
$md-blue-900: #0D47A1;

上面的代码中，我们选取了蓝色作为主色调，然后从该颜色的 tetradic（四色）关系中选取了 9 个配色。下面，我们就可以利用这些配色来构建我们应用的控件样式。

控件颜色的配色实践

在实际应用中，我们需要用所选的颜色来配合我们的控件。下面我们以一个列表为例进行说明：

// List control colors
$list-bg-color: $md-grey-50;
$list-item-bg-color: $md-white;
$list-item-border-color: $md-grey-200;
$list-item-hover-bg-color: $md-grey-100;
$list-item-active-bg-color: $md-grey-300;
$list-text-color: $md-grey-800;

上面的代码中，我们给出了一个列表的控件样式。其中，$list-bg-color 是列表的背景色，$list-item-bg-color 是列表项的背景色，$list-item-border-color 是列表项的边框颜色，$list-item-hover-bg-color 是列表项的鼠标悬停背景色，$list-item-active-bg-color 是列表项的激活背景色，$list-text-color 是列表中文本的颜色。

下面，我们可以根据以上控件颜色样式进一步制作我们的实际列表控件：

// javascriptcn.com 代码示例
// List control
.list {
  background-color: $list-bg-color;
  border: 1px solid $list-item-border-color;
  border-radius: 4px;
  padding: 16px;

  li {
    background-color: $list-item-bg-color;
    border-bottom: 1px solid $list-item-border-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;

    &:hover {
      background-color: $list-item-hover-bg-color;
    }

    &:active {
      background-color: $list-item-active-bg-color;
    }

    .text {
      flex: 1;
      color: $list-text-color;
    }

    button {
      border-radius: 4px;
      border: none;
      color: $md-white;
      background-color: $md-blue-500;
      padding: 4px 8px;
      outline: none;

      &:hover {
        background-color: lighten($md-blue-500, 10%);
      }

      &:active {
        background-color: darken($md-blue-500, 10%);
      }
    }
  }
}

上面的代码中，我们根据前面定义的 $list-bg-color、$list-item-bg-color 等控件颜色样式来制定列表的样式。我们可以看到，控件颜色的提取和配色实践可以非常方便地制作控件，这样我们就可以快速应用到我们的前端项目中。

总结

本文介绍了 Material Design 中控件颜色的提取和配色实践，并通过一个列表控件的例子来说明控件的制作过程。我们可以看到，在前端开发中，控件颜色的配色非常重要，是构建良好前端应用的关键部分。同时，我们还可以通过 Material Design 中提供的配色方案来简便地进行控件颜色的提取和配色实践。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654874777d4982a6eb2b7b79