傲娇的扁平化设计的进击之旅：与时俱进，勇于创新

 

在过去的几年里，扁平化设计以其简约的画面、整洁的布局、流畅的加载速度、响应式设计等众多优势俘虏了一大批粉丝，正逐渐成为网站设计趋势的主流。这种设计趋势为什么能极短的时间内迅速发展壮大?除了以上这些优点，还有一项十分重要的因素，那就是扁平化设计一直与时俱进，不断克服自身的弊端，努力跟上时代的步伐，满足用户的需求。早期的扁平化设计强调放弃一切装饰效果如阴影、渐变、纹理等，重点突出信息本身，这使得网站的视觉效果很是单调，网站的配色方案也比较单一，但在后期发展过程中，扁平化设计开始突破原有的局限性，积极吸纳一些新的、有用的设计元素，有关扁平化设计方面的想法和概念不断丰富，扁平化设计也开始出现新的类型和分支。在今天，扁平化设计的呈现方式多种多样，不管你想做一个什么样的网站，总有几款扁平化设计能让你倾心。今天小飞就带您看一下扁平化设计的发展历程以及一些实例，快来一起感受扁平化设计的进击之旅吧!

早期的扁平化设计 v1.0

在扁平化设计出现以前，人们一直很喜欢拟物化设计，通过逼真的纹理、多样的渐变以及复杂的细节营造出3d效果，让虚拟物更接近于实物，模仿真实事物的外观。苹果公司也曾是这种设计风格的忠实支持者之一，它的应用商店和各种设备上图标都有使用拟物化设计(当然，后期也转向于扁平化设计)。然而，在2010年，扁平化设计开始向超现实的拟物化设计发起冲击。扁平化设计使用棱角分明的线条，让信息和事物的工作方法以简单直接的方式呈现出来，这更便于访客理解。扁平化网站的设计方案也集中在高饱和度的色彩和排版上，而不是大量的图像，这减少了网站不必要的加载时间。

这就是早期的扁平化设计，强调去除冗余、厚重和繁杂的装饰效果，避免做出3d效果的元素，使用简洁风格的图标，聚焦于抽象、极简和符号化。但它也有自己的不足。由于强调剥离细节设计，主要依靠信息本身，在用户引导方面也并不总是那么顺畅;单调的视觉效果和单一配色方案难以满足大众的口味。不过事实也证明绝大多数设计师还是喜欢这种设计趋势的，这点从它的不断发展中就可以看出来。总而言之，扁平化设计可能是过去十年里最伟大的和最具革命性的一种设计趋势。

 

material design [1.0和2.0的中间时代]

material design是谷歌为其产品和软件推出的一种视觉设计语言，是一套设计标准文档的集合。它吸取了扁平化设计中最精华的部分，同时又添加一些微妙的拟物化元素，比如使用阴影显示分层，使用动画引起用户交互，保证网站的可用性和用户的互动性。它让扁平化设计更加开放，一些规定也没有早期那么苛刻。

扁平化设计发展如此迅速背后一个主要的推动力就是material design。虽然material design 的概念很明确，但它也随着网站趋势和用户需求的改变不断变化。它可以看作一种设计框架和模板，具有普遍适用性。从某种意义上来说，material design可以看做早期的扁平化设计和扁平化2.0的一个过渡，或者说它促进了扁平化设计的进一步演变。不过，material design毕竟是与谷歌直接联系在一起的，在创建一个独特的网站上面没有那么有效。

 

扁平化 2.0

接下来就是扁平化2.0的时代了。扁平化 2.0 这个概念最早来源于设计师 ryan allen。扁平化 2.0 是一种演变，而不是一场革命。扁平化2.0只是扁平化设计的一个分支，它给扁平化设计重新赋予了新的内涵，是这个概念沉淀之后逐渐成熟的标志。扁平化 2.0允许设计师打破其原有的强硬规定，带来了一些微妙的元素和技巧，如高光强调、渐变、多种色调和色度、阴影效果、多种配色方案。在扁平化中使用微阴影可以增加元素深度，将重要内容从背景中独立出来，有效传递信息;将低调的渐变用于背景色或氛围色能够实现元素的过渡，给网站笼罩一种和谐、朦胧感。当然，这些新元素的添加都是适度的，是符合扁平化的美学标准的。也因此，扁平化2.0在易用性和适用性更强，兼顾了设计的美观和功能性，几乎可以和任何其他概念一起结合使用，网站的用户友好度大大提升，扁平化2.0受到很多设计师的欢迎，不少网站都应用了这一设计趋势。另外，也有一些设计趋势从扁平化2.0中衍生出来，最流行的可能要数卡片式设计和分屏式设计了，扁平化这棵大树的枝干越来越多。

 

扁平化设计2017

在今天，不少设计师继续进行有关扁平化设计的尝试，在设计手法或细节处理中又融入了越来越多的想法。扁平化设计进入了一个新的发展阶段，由于这个发展阶段暂时还没有人命名，小飞姑且称它为扁平化设计2017，下面是当今扁平化网站中的一些共同特征，这些特征都与扁平化2.0的有所不同，标志着新的发展阶段的到来。下面就一起来看看吧!

元素更趋扁平化

扁平化设计2.0中的按钮风格和用户界面元素在今天已经不那么适用了。现在，按钮的样式要比以往更加简单，常常是方形或圆角边缘的矩形框配以黑白色的文本，网站logo和图标也都采用更加扁平化的风格。各种简洁的元素再加上一个详尽的主页设计，这样的网站才能脱颖而出。

 

精简的导航菜单

由于扁平化设计要求简洁大方的设计布局，网站的导航菜单也需要更加精简，这也是为什么隐藏式菜单导航和汉堡图标开始流行。它们几乎已经成为当前网站的标配，给访客提供充足的*，既方便操作也不影响信息的传递，还在不同大小的屏幕上也能够得到很好的呈现。

 

更广泛的配色方案

大胆明亮的配色一直是扁平化设计的"宠儿"。在早期扁平化设计中，人们经常挑选高饱和度的颜色，而在扁平化2.0时期双色调配色是比较流行的配色方向。但随着扁平化设计的进一步发展，今天网站中使用的配色方案要更加丰富，网站设计师不仅使用明亮、鲜艳的颜色，也会应用暗色系的色彩，比如在主页使用渐变的色调或叠加图片等，网页设计要比以往更加生动活泼。

 

极简的主页设计

以往扁平化设计强调的极简主要在于网站中的各种元素、图标等。在2017年，网站的主页设计也遵循极简主义。现在的网站主页更倾向于强调单个行为引导，而不是复杂的元素堆叠。反过来说，就算主页上的元素再多样，单个的行为引导也会给访客留下简洁、干净的印象。

 

精致的排版

当网站中不再使用复杂多样的元素以后，网页排版的重要性就凸显出来了。前面在《巧妙利用排版和布局迅速提升网站颜值》中我们讨论过网页排版有助于强调视觉效果，提高网站可读性和可用性，还能保持网站元素的一致性。在扁平化设计之中，网页排版的好处可不仅仅这些，精致的网页排版还能够提升网站的设计美感，让信息内容本身很好的展现。

 

更少的拟物特效

尽管在今年的扁平化设计之中，设计师确实有使用一些微妙的元素让网站设计更加丰富，但这并不意味着拟物化设计的回归。生动、有趣的网站并不总是与拟物化设计挂钩的，他们与拟物效果有着本质的不同。相反，现在的扁平化设计中使用更少的拟物效果，尽量不营造逼真的效果。

 

动效与反馈

近些日子，随着h5/css3技术的发展，动效又重新回归大荧幕。而在扁平化设计之中，设计师常常将动效与反馈结合在一起，这能更好的引导用户、同用户沟通，是如今交互设计和ux设计的关键所在。

 

大量留白

随着显示屏幕越来越大(pc端和移动设备都是如此)，设计师在网站中使用大量留白以保持扁平化设计的极简主义风。与此同时，留白还能够有效突出网站的关键内容。当然咯，留白并不一定非得是白色。如果你对网站中留白手法比较感兴趣，可以参阅《少即是多-怎样在响应式网站中运用"留白"艺术》。

 

扁平化图层

毫无装饰的扁平化图层看上去也很棒，而且还可以给用户提供一些额外的信息，它们能成为不同元素的载体，或者单纯的营造空间感。分层设计方法就是其中一个代表。

 

超大的设计元素

超大的字体，超大的图片，甚至超大的按钮和图标，都已经不是什么新鲜的设计手法了，它们借助过人的体积感和强有力的对比来制造视觉奇观，是非常有用的设计技巧。这种设计手法在早期的扁平化设计就有了，只不过现在使用更加频繁。

 

扁平化设计一直在不断进击，易读性更高、可用性更强、视觉上更美观，这也是为什么它能源源不断迸发出蓬勃生机。我们在做网站时也是一样，不要墨守成规，切实根据网站自身的特点，寻找符合的模板，运用有效的技巧，让自己的网站更加出彩。扁平化设计还会一直发展下去，谁也不知道它最终会成为什么样，是经典不朽还是逐渐淘汰，但不可否认的是现在扁平化设计仍是大家比较拥护的设计趋势之一。赶紧在自己的网站使用扁平化设计吧!

如果你没什么想法，不妨来起飞页看看吧!起飞页自助建站平台有不少扁平化设计的模板，这些模板都有着简洁的元素、图标，多样的配色方案，足够的留白。快来起飞页自助建站平台（）做一个扁平化设计的网站吧!