Material Design 是 Google 推出的一套设计语言，旨在为移动和 Web 应用程序提供一致的用户体验。其中的颜色设计是其重要的组成部分。在 Material Design 中，颜色不仅仅是为了美观，更是为了提高用户体验的可读性、易用性和可访问性。本文将介绍 Material Design 颜色选定的原则及实践方法，帮助前端开发者更好地应用 Material Design。
Material Design 颜色系统
Material Design 颜色系统由两个部分组成：调色板和基础颜色。调色板包括主色、辅助色、警告色和危险色，基础颜色包括黑色、白色和灰色。这些颜色都是经过精心挑选的，可以用于设计中的各种元素，包括背景、文本、按钮、图标等。
调色板
调色板是 Material Design 颜色系统的核心。它定义了五个预定义的颜色，每个颜色都有一个主要的色调和一组相关的色调。这些颜色可以用于设计中的各种元素，从而创造出视觉上的层次感和深度感。
主色
主色是应用程序的主要颜色，用于突出重要的元素和交互。主色应该是应用程序的标志性颜色，可以用于应用程序的品牌标识。主色有两种：500 和 700。500 是主色的默认值，700 更加饱和，可以用于需要更强烈的视觉效果的元素。
// javascriptcn.com 代码示例 /* 主色调色板 */ $md-primary: ( 50: #e1f5fe, 100: #b3e5fc, 200: #81d4fa, 300: #4fc3f7, 400: #29b6f6, 500: #03a9f4, 600: #039be5, 700: #0288d1, 800: #0277bd, 900: #01579b, A100: #80d8ff, A200: #40c4ff, A400: #00b0ff, A700: #0091ea, );
辅助色
辅助色是用于补充主色的颜色，用于突出重要的元素和交互。辅助色应该是应用程序中的强调颜色，可以用于按钮、文本框、进度条等元素。
// javascriptcn.com 代码示例 /* 辅助色调色板 */ $md-accent: ( 50: #e0f7fa, 100: #b2ebf2, 200: #80deea, 300: #4dd0e1, 400: #26c6da, 500: #00bcd4, 600: #00acc1, 700: #0097a7, 800: #00838f, 900: #006064, A100: #84ffff, A200: #18ffff, A400: #00e5ff, A700: #00b8d4, );
警告色
警告色用于表示需要用户注意的元素，例如错误提示、警告消息等。警告色应该是应用程序中的醒目颜色，可以用于按钮、文本框、进度条等元素。
// javascriptcn.com 代码示例 /* 警告色调色板 */ $md-warn: ( 50: #fff3e0, 100: #ffe0b2, 200: #ffcc80, 300: #ffb74d, 400: #ffa726, 500: #ff9800, 600: #fb8c00, 700: #f57c00, 800: #ef6c00, 900: #e65100, A100: #ffd180, A200: #ffab40, A400: #ff9100, A700: #ff6d00, );
危险色
危险色用于表示危险或错误的元素，例如删除按钮、警告消息等。危险色应该是应用程序中的醒目颜色，可以用于按钮、文本框、进度条等元素。
// javascriptcn.com 代码示例 /* 危险色调色板 */ $md-danger: ( 50: #ffebee, 100: #ffcdd2, 200: #ef9a9a, 300: #e57373, 400: #ef5350, 500: #f44336, 600: #e53935, 700: #d32f2f, 800: #c62828, 900: #b71c1c, A100: #ff8a80, A200: #ff5252, A400: #ff1744, A700: #d50000, );
基础颜色
基础颜色包括黑色、白色和灰色。这些颜色可以用于设计中的各种元素，从而创造出视觉上的层次感和深度感。
黑色
黑色是最深的颜色，可以用于背景、文本、图标等元素。
// javascriptcn.com 代码示例 /* 黑色调色板 */ $md-black: ( 1000: #000000, 900: #212121, 800: #424242, 700: #616161, 600: #757575, 500: #9e9e9e, 400: #bdbdbd, 300: #e0e0e0, 200: #eeeeee, 100: #f5f5f5, );
白色
白色是最浅的颜色，可以用于背景、文本、图标等元素。
// javascriptcn.com 代码示例 /* 白色调色板 */ $md-white: ( 50: #ffffff, 100: #fafafa, 200: #f5f5f5, 300: #eeeeee, 400: #e0e0e0, 500: #bdbdbd, 600: #9e9e9e, 700: #757575, 800: #616161, 900: #424242, );
灰色
灰色是介于黑色和白色之间的颜色，可以用于背景、文本、图标等元素。
// javascriptcn.com 代码示例 /* 灰色调色板 */ $md-grey: ( 50: #fafafa, 100: #f5f5f5, 200: #eeeeee, 300: #e0e0e0, 400: #bdbdbd, 500: #9e9e9e, 600: #757575, 700: #616161, 800: #424242, 900: #212121, );
颜色选定的原则
在使用 Material Design 颜色系统时，需要遵循以下原则：
保持一致性。应该使用相同的颜色来表示相似的元素，例如按钮、文本框、进度条等。
突出重点。应该使用主色和辅助色来突出重要的元素和交互，例如主要的按钮、导航栏等。
提高可读性。应该使用合适的颜色来提高文本和图标的可读性，例如使用深色文本在浅色背景上。
考虑可访问性。应该使用符合 WCAG 网络内容无障碍性指南的颜色，以确保所有用户都可以访问应用程序。
实践方法
在实践中，我们可以使用以下方法来应用 Material Design 颜色系统：
使用预定义的调色板和基础颜色。在设计中使用预定义的调色板和基础颜色，可以确保颜色的一致性和可访问性。
自定义调色板。如果需要，可以根据应用程序的需求自定义调色板，但需要确保颜色的一致性和可访问性。
使用颜色工具。可以使用一些颜色工具来帮助选择合适的颜色，例如 Material Design 颜色工具、Adobe Color 等。
测试可访问性。在设计中需要测试颜色的可访问性，可以使用一些工具来测试，例如 Contrast Checker、Color Safe 等。
示例代码
以下是一个示例代码，演示如何使用 Material Design 颜色系统实现一个简单的按钮组件。
<!-- 按钮组件 --> <button class="md-button md-primary">Primary Button</button> <button class="md-button md-accent">Accent Button</button> <button class="md-button md-warn">Warn Button</button> <button class="md-button md-danger">Danger Button</button>
// javascriptcn.com 代码示例
/* 按钮样式 */
.md-button {
display: inline-block;
padding: 12px 24px;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
cursor: pointer;
}
/* 主色按钮样式 */
.md-primary {
background-color: $md-primary-500;
color: $md-white;
}
/* 辅助色按钮样式 */
.md-accent {
background-color: $md-accent-500;
color: $md-black;
}
/* 警告色按钮样式 */
.md-warn {
background-color: $md-warn-500;
color: $md-black;
}
/* 危险色按钮样式 */
.md-danger {
background-color: $md-danger-500;
color: $md-white;
}总结
Material Design 颜色系统是一个强大的工具，可以帮助我们创建出具有层次感和深度感的设计。在应用 Material Design 颜色系统时，需要遵循一些原则，例如保持一致性、突出重点、提高可读性和考虑可访问性。同时，可以使用一些实践方法，例如使用预定义的调色板和基础颜色、自定义调色板、使用颜色工具和测试可访问性。希望本文可以帮助前端开发者更好地应用 Material Design 颜色系统。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65785d14d2f5e1655d243f97