Material Design 的颜色规范是什么?

简述

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