介绍
Flat Design 和 Material Design 都是现代 UI 设计中最流行的两种设计风格。Flat Design 是从微软公司的 Metro UI Design 风格中发展而来的，具有扁平、简约和色彩丰富的特点。Material Design 是由 Google 公司在 Android L 发布时推出的，它是一种拥有富有深度感、动感的设计风格。
本文将会探讨这两种设计风格的区别和联系，为前端设计者提供一些有用的指导意义。
Flat Design
Flat Design 的平面风格是现代 UI 设计的开端。 它的设计特点是扁平化的、色彩丰富的、直观且简洁的设计。从颜色角度来说，主要使用鲜艳明快的颜色，像蓝色、红色、黄色等，通过对比色的搭配，使得视觉效果更加的突出。Flat Design 的特点是摒弃了冗长复杂的元素和效果，最大化了页面的显示空间，让用户的操作更加方便和简单。 Flat Design 风格的代表有Windows 8, iOS。
Flat Design 的特点：
- 扁平化的；
- 特点是颜色鲜艳；
- 简洁而直观；
其实 Flat Design 就是单色或彩色背景，大字号、左右适度的空白填充，大量使用图标和少量扁平化的按钮。
Flat Design 的示例代码：
.btn-flat{
background-color: #2196F3;
color: #fff;
border: none;
}Material Design
Material Design 为用户界面设计提供了一个全新的规范，它提供了更多的深度和动作效果，使得页面更加的有立体感和互动性。
Material Design 实际上是对 Flat Design 的进阶和复杂化。 它拥有原子单位和各种尺寸的精确渲染。它将对象看作是真实的资料，并带有真实世界的阴影和通过运动和过渡来表示空间 —— 以及早期的2D设计所缺的深度感。
Material Design 的特点：
- 精确的设计；
- 有颜色层级、图片圆角等特效；
- 火车从头到尾一直在移动的设计；
Material Design 通过在设计中突出纸张的缩放效果，使得用户可以了解每个图层的分层结构，并且 Material Design 中的对象都具有三维阴影来表示高度变化。
Material Design 的示例代码：
-- -------------------- ---- -------
---- -------------
---- --------------
---- ------------------------- ------------- -------
------
---- ----------------
--- ---------------------- ------ ------ ---------
-- --------------------- -------- ---- --------
------
------区别
Flat Design 注重简化和大胆的颜色和图标，而 Material Design 注重物理深度和空间感，它们的目的是使界面更加整洁并提供更多的可读性。在 Flat Design 中，元素更简单；在 Material Design 中，元素有更多的功能，并且动画方面也更加优秀。
Material Design 和 Flat Design 的最大区别是材料感。 Material Design 基于纸张、卡片和墨水的元素， Flat Design 则基于简化图形。
联系
Flat Design 和 Material Design 有某些方面的互补性。 具有 Flat Design 风格的网站可以随着交互的深入而受到 Material Design 的影响，而 Material Design 可以通过采用较少的扁平元素来表现更柔和的 Flat Design。两者可以混合运用。
结论
虽然 Flat Design 和 Material Design 风格在设计上都有其好处，但我们不能只为了追求时髦而改变设计风格。在设计中，关键是理解产品的身份，旨在为用户提供清晰易懂、操作方便的界面。任何风格只是设计手段，它们应在产品主题下得到应用并被并精心设计来融入其中。
两种风格的确有它们的优点，具有 Flat Design 风格的网站可以随着交互的深入而受到 Material Design 的影响，而 Material Design 可以通过采用较少的扁平元素来表现更柔和的 Flat Design。两者可以根据您的具体品牌和需求而混合使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66faf90a447136260153dd15