简述
Material Design 是 Google 推出的一套设计语言，针对移动端的 UI 设计，它的核心在于借鉴了传统纸笔界面的实体感，在通过精细的动效和渐变来提升了用户交互体验。
Material Design 的中心思想在于分层次的设计，也就是分层的视觉效果，这样可以在跨设备和平台的互操作性上更好的实现，而颜色的使用也是 Material Design 的一个关键点。
颜色规范
Material Design 为了使设计更加一致性，具有可遵循性和可重复性，提供了一组标准颜色和调色板，以便开发人员和设计师快速实现 Material Design 风格的应用和 UI 而不用进行大量的探索和设么。
其中，对于标准颜色，Material Design 定义了8种基本色：
- 红色：#F44336
- 粉红色：#E91E63
- 紫色：#9C27B0
- 深紫色：#673AB7
- 靛蓝色：#3F51B5
- 蓝色：#2196F3
- 浅蓝色：#03A9F4
- 绿色：#4CAF50
- 橙色：#FF9800
- 棕色：#795548
- 灰色：#9E9E9E
调色板则参考了传统的彩色搭配方法“三色原则”，使用的原则是：
- Primary color：主色调，通常呈现为 app bar、选项卡和按钮等；
- Secondary color：辅助色调，用于突出和与主色调形成对比，例如平面按钮等；
- Accent color：强调色调，用于突出重点图标、背景等元素的颜色。
此外，调色板还包括：颜色亮度和饱和度的变化，以及光与阴影的运用，这些都可以根据自身项目的需求来自定义。
示例代码
为了方便理解，我们可以看一下 Material Design 的 官方样例。
-- -------------------- ---- ------- ---- ------- ------ ------ --- --- ------- ----------------- ------------------- ------------------------ ---------- ------ --------- ---- --------- ------ ----- ----- --- --- ------- ----------------- ------------------- ------------------------ --------- ----- ----- --------- ---- ------ ------ ----- --- --- ------- ----------------- ------------------- ------------------------ ---------- ----- ---------
在上面的代码中，分别使用了 primary color、secondary color 和 accent color 来定义按钮的颜色，并且通过嵌入样式的方式设置颜色属性。通过这个例子，我们能够更好的理解 Material Design 关于颜色的规范和设计思想。
结论
Material Design 的标准颜色和调色板，为开发人员提供了一种快速实现 Material Design 的方式，同时为设计人员提供了一种快速设么风格图案的方式，从而真正实现了设计与开发的一体化。在实现过程中应该掌握好其原理，通过合理运用，让创意得到更好的表达，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c3e6a9babaf620fafce55