如何在 Material Design 中应用各种不同的颜色？-JavaScript中文网-JavaScript教程资源分享门户

Material Design 是 Google 推出的一种设计语言，它强调简洁、直观且统一的用户体验。在 Material Design 中，颜色是非常重要的元素之一，它可以传达信息、强调重点并影响用户的感官体验。在本篇文章中，我们将探讨如何在 Material Design 中应用各种不同的颜色，并给出示例代码供读者参考。

Material Design 颜色的分类

在 Material Design 中，颜色被分为两类：品牌色和基础色。

品牌色

品牌色是应用程序中最重要的颜色之一，它应该与应用程序的标志和主题保持一致。品牌色通常用于按钮、链接、进度条、滑块等物件上，以强调用户应该关注它们。Material Design 中的品牌颜色包括红色、粉色、紫色、深紫色、靛色、蓝色、亮蓝、青色、绿色、黄色和橙色。

基础色

基础色指的是白色和黑色及其变体：浅灰色、灰色和深灰色。基础色在 Material Design 中被用于背景、类型和布局元素。

如何应用 Material Design 颜色

提取 Material Design 颜色

Google 提供了一些工具可以用来提取 Material Design 的颜色。例如，Material Color System 可以用来创建品牌色调色板。

// javascriptcn.com 代码示例
<!-- 示例代码：Material Design 品牌颜色调色板 -->

<div class="mdc-color-palette">
  <div class="mdc-palette-row">
    <div class="mdc-palette red"></div>
    <div class="mdc-palette pink"></div>
    <div class="mdc-palette purple"></div>
  </div>
  <div class="mdc-palette-row">
    <div class="mdc-palette deep-purple"></div>
    <div class="mdc-palette indigo"></div>
    <div class="mdc-palette blue"></div>
  </div>
  <div class="mdc-palette-row">
    <div class="mdc-palette light-blue"></div>
    <div class="mdc-palette cyan"></div>
    <div class="mdc-palette teal"></div>
  </div>
  <div class="mdc-palette-row">
    <div class="mdc-palette green"></div>
    <div class="mdc-palette yellow"></div>
    <div class="mdc-palette orange"></div>
  </div>
</div>

在示例代码中，我们使用了 mdc-palette 类来展示 Material Design 品牌颜色调色板，然后将它们分为四行，每行三个颜色。

使用 Material Design 颜色

为了使用 Material Design 的颜色，在 HTML 或 CSS 中加入颜色关键字就可以了。例如，在 HTML 中加入 class="mdc-button--raised mdc-button--primary" 可以使用 Material Design 的红色进行按钮着色。

<!-- 示例代码：Material Design 红色按钮应用 -->

<button class="mdc-button mdc-button--raised mdc-button--primary">
  购买升级版
</button>

在示例代码中，我们声明了一个 mdc-button 类来使用 Material Design 的按钮样式，然后加入 mdc-button--raised 和 mdc-button--primary 类来让这个按钮变成红色的。

使用 Sass 变量

使用 Sass 变量可以方便地在整个项目中使用 Material Design 颜色。首先，需要引入 Material Design 的颜色库：

@use "@material/theme/colors";

然后，就可以在 Sass 中使用颜色变量了：

$my-color: colors.$indigo-500;

在示例代码中，我们声明了 $my-color 变量并将其设置为 Material Design 的靛色 500。

使用 Props

如果您正在使用 Vue 或 React，可以使用 Props 来使用 Material Design 颜色。例如，在 Vue 中，您可以使用 props 来传递颜色：

// javascriptcn.com 代码示例
<!-- 示例代码：Vue 中的 Props -->

<template>
  <button :class="'mdc-button--raised mdc-button--' + color">
    点击我
  </button>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: "primary"
    }
  }
};
</script>

在示例代码中，我们声明了一个 color 属性，并设置默认的 primary。这个属性可以在 mdc-button-- 类的前面插入，并用作按钮的颜色。

解决问题

在 Material Design 中使用不同的颜色时，需要注意以下两个问题。

对比度

一些用户可能会有视力障碍，因此 Material Design 建议使用高对比度颜色，以确保这些用户也能轻松地阅读和交互。要设计具有足够对比度的应用程序，可以使用 Color Tool 来生成对比度报告。

一致性

为了使您的应用程序更具吸引力，您可能需要添加自定义样式或颜色。但是，Material Design 建议使用 Material Design 品牌色和基础色，并尽量避免在不同物件之间使用相似的颜色，以确保一致性和易用性。

总结

在本篇文章中，我们探讨了如何在 Material Design 中应用各种不同的颜色。我们了解了品牌色和基础色的分类，并提供了一些示例代码，供读者参考。同时，我们还讨论了如何解决颜色在应用程序中出现的问题。

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