Material Design 中控件文字和背景颜色搭配的方法

Material Design 是一种由谷歌提出的设计语言，它主张材质化、扁平化的设计风格，并提供一系列精美的控件供开发者使用。而控件的文字和背景颜色搭配是 Material Design 设计风格中的一个重要方面，它直接影响着用户对应用界面的整体感觉和使用体验。本文将详细介绍如何在 Material Design 中正确地搭配控件的文字和背景颜色。

基本原则

在 Material Design 中，文字和背景颜色的搭配原则主要有以下几条：

1. 文字颜色应该与背景颜色形成足够的对比度，以确保文字在背景上清晰可见。
2. 背景颜色应该建立在 Material Design 的色彩体系之上，以保持应用的视觉统一性。
3. 在不同的场景下，控件的文字和背景颜色应该根据实际需求进行调整，以尽量提高用户体验。

常见控件的文字和背景颜色搭配

按钮

在 Material Design 中，按钮通常分为三种状态：默认状态、按下状态和禁用状态。下面是这三种状态下按钮文字和背景颜色的搭配建议：

• 默认状态：按钮背景色建议选用浅色调，文字颜色建议选用深色调，以保证足够的对比度。例如：

<button class="mdc-button mdc-button--raised" style="background-color: #f44336; color: #fff;">
  确定
</button>

• 按下状态：建议将按钮背景颜色加深，以产生“按下”的视觉反馈。例如：

<button class="mdc-button mdc-button--raised" style="background-color: #c62828; color: #fff;">
  确定
</button>

• 禁用状态：按钮背景部分可以使用禁用状态的轻灰色，文字部分使用更浅的灰色。例如：

<button class="mdc-button mdc-button--raised" style="background-color: #f5f5f5; color: #9e9e9e;" disabled>
  确定
</button>

文本输入框

在 Material Design 中，文本输入框通常包括单行输入框和多行输入框。下面是它们的文字和背景颜色搭配建议：

• 单行输入框：输入框背景色建议选用白色，文字颜色建议选用深灰色。例如：

<input class="mdc-text-field__input" type="text" style="background-color: #fff; color: #424242;" placeholder="请输入内容">

• 多行输入框：与单行输入框类似，建议选用白色背景和深灰色文字。例如：

<textarea class="mdc-text-field__input" style="background-color: #fff; color: #424242;" placeholder="请输入内容"></textarea>

卡片

在 Material Design 中，卡片是一种常见的容器控件，它通常用于显示列表、文章等内容。下面是卡片的文字和背景颜色搭配建议：

• 卡片底色：建议选用 Material Design 中的灰色系，例如 MDC 主题颜色灰色调 mdc-theme--background. 文字颜色建议选用深色调，以确保足够的对比度。例如：

<div class="mdc-card" style="background-color: #f5f5f5;">
   <div class="mdc-card__content" style="color: #424242;">
      <p>这里是卡片内容</p>
   </div>
</div>

• 卡片标题：标题可以使用更深的颜色进行突出，例如 MDC 主题颜色红色调 mdc-theme--primary . 例如：

<div class="mdc-card" style="background-color: #f5f5f5;">
   <h2 class="mdc-typography--headline6 mdc-theme--primary" style="margin: 1rem;">这里是卡片标题</h2>
   <div class="mdc-card__content" style="color: #424242;">
      <p>这里是卡片内容</p>
   </div>
</div>

总结

控件的文字和背景颜色搭配是 Material Design 设计风格中的一个重要方面，它直接影响着用户对应用界面的整体感觉和使用体验。在使用 Material Design 控件时，我们应该遵循一些基本原则，并根据具体场景在颜色搭配上进行微调，以确保最佳的视觉效果和用户体验。

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