简述
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