在 Windows 8 出来之后,大家都在谈论“Metro UI”,后来又谈到了“扁平化设计”。现在,Android Lollipop 出来后,都在谈论“Material design”。有人可以解释“材料设计”和“平面样式”之间的区别吗?
“平面样式”和“材料设计”有什么区别?
材料设计在其原则上与平面设计无关。材料设计是拟物化的,因为它试图使网页设计在描绘元素的方式上更加逼真,以一种在浏览器之外有意义的方式使用图层和动画。视觉平面设计和材料设计目前相似,但材料设计可以应用于平面设计以外的设计。
它遵循3个原则
- 材料是隐喻
- 大胆、生动、有意
- 用动作赋予意义
材料设计中的分层是通过沿 z 轴向前或向后移动元素来完成的,向用户移动和从用户移动,并添加逼真的阴影以传达更多含义。动画元素,例如在移除列表项时具有影响位置的动画,旨在改善用户流程和理解,同时使体验更加流畅。这样做,通过材料设计比平面设计可以描绘更多的意义
谷歌设计师制作了纸模型来为他们的材料设计找出分层和阴影。
还有其他设计指南,包括间距、颜色、可用性以及有关定位和动画的更多详细信息,您可以在 Google 的网页中查看有关该主题的信息。
了解更多关于材料设计以及如何实现它的好方法是使用谷歌使用材料设计创建的应用程序并阅读设计细节,这是由布赖恩洛文在收件箱应用程序上的。
人们可能会认为 Material Design 是平面设计的一种延伸,但实际上原理是不同的。目前的趋势是制作谷歌目前使用的简洁、扁平化的设计,但材料设计的原则超越了这些界限,也可以应用于其他设计方法。
扁平化设计= 一个通用术语,指块状扁平图标和色块的时尚现代 UI 美学。
Metro Design = 微软针对 Windows 8 的全新 UI 设计(现称为微软设计语言),采用扁平化设计视觉美学。
Material Design = 谷歌新的安卓用户界面设计,使用扁平化设计视觉美学。
(请注意,Metro 和 Material 都不仅仅是平面设计美学。他们还谈论交互设计、流程、模式库等。)
感谢 Johannes 注意到 Microsoft UI 的名称更改。
材料设计不是扁平的,它是一堆扁平的“材料”层,在 Z 轴上间隔开一点。这意味着这些物体有阴影,当它们出现在屏幕上时应该从某个地方来,而在不再需要它们时离开到某个地方。这意味着它们不只是淡入淡出。
还有一堆设计指南指定了布局的颜色、间距和许多其他方面。
以下是其中一些,但您可以通过一些谷歌搜索找到更多信息。
http://www.google.com/design/spec/material-design/introduction.html#
“平面设计”就像他们在上面解释的那样,“材料设计”设计并不是真正的“拟物化”,而是“拟物化平面设计”。“Material Design”使用扁平的东西并将其对齐Z轴以具有“3D Flat Design”。我希望它有所帮助。