正在阅读：什么是扁平化设计?扁平化设计的前世今生什么是扁平化设计?扁平化设计的前世今生

　　【PConline 欣赏】现在说起网页、UI设计，都会谈论扁平化设计（Flat Design）这个概念，一些大型公司和组织在网页设计都将风格偏向了它，而iOS 7又推上了一个高峰，下面笔者就来说下扁平化设计吧。

 
图01

　　在苹果与微软的青睐与推动下，扁平化设计日益盛行，但是很少有人知道扁平化设计这个概念由何而来？为什么将这个概念用在了网页设计上？对于设计的新概念来说，搞清楚一个风格和一项技术的历史背景很重要，因为在我们觉得是否采用这个新的设计概念的时候，对它来由的了解可以帮助我们做出更明智的决定。所以我们需要来看一看扁平化设计得来龙去脉。

图02

　　到底什么是扁平化设计？

　　对于那些从来没有听说过的人，可以简单解释下，所谓扁平化设计，就是在进行设计的过程中，去除所有具有三维突出效果的风格和属性。也就是说，去除掉下落式阴影、梯度变化、表面质地差别，以及所有具有三维效果的设计效果。

　　扁平化设计在如今备受设计师们的青睐，是因为通过这种风格可以让设计更具有现代感，另外可以强有力的突出设计中最为重要的内容：内容和信息。其实那些具有三维效果的属性，本身都是某段时间的流行风格，所以去除掉了这些信息，就能让你的设计不那么容易过时。更何况还能突出内容本身。所以这种设计风格还是有很多好处的。

　　其实要讨论扁平化设计就不能不提，它的相反面，也就是Rich Design丰富设计风格。所谓Rich Design就是通过添加各种设计装饰，比如下落阴影、梯度等，让整体设计显得很丰富。这种设计风格可以让用户在网页上进行导航时，更加自如。另外Rich Design和拟真设计风格也不同，后者是通过模拟物理实物来让设计更加逼真。

　　扁平化设计从何而来？

　　其实网页设计的很多风格都可以从印刷艺术品上找到影子。但是很难确认扁平化设计的最初源头。应该说是从多个设计风格和时期中，都得到了相应的灵感最终形成了扁平化设计这回事，比如下面这些：

图03

　　Swiss Style是扁平化设计历史上最值得讨论的。这种设计风格兴起于瑞士，时间上贯穿了1940年代到1950年代。Swiss Style风格的特点是大量使用网格的设计元素，另外内容和布局都很简洁，在那个年代经常可以看到一幅大照片配上简单的几个文字，这就是典型的Swiss Style设计。其实跟扁平化风格一样，Swiss Style在取得大规模的流行之前，也已经出现了一段时间了，几乎可以追溯到1920年代的德国，但是之后在瑞士取得了巨大的流行。

图04

　　另外还有Minimalism Design，其实它基本是扁平化设计的同名词，有人还将他们混用，但是它的出现要早的多，之前已经应用在建筑和视觉设计上。Minimalism Design的特点是去除所有没有用的东西，只留下需要的元素，通常都是几个几何形状、一些明亮的颜色。所以基本上是上面这两种设计风格影响了扁平化设计的形成。

　　扁平化设计在IT领域的盛行

　　虽然现如今很多的设计师都在采用扁平化风格进行网页设计，但是可以说如果没有微软和苹果这两家科技巨头的推动，扁平化设计不会发展到现在这样流行。

图05

　　首先是微软和它的Metro Design，2006年微软为了和苹果的iPod播放器进行竞争，推出了Zune音乐播放器，并从那时起开始了名为Metro的设计风格。这种风格突出字体大的文字并配合背景图片。这种风格跟当时微软传统的Windows风格有很大的不同。2010年推出的Window Phone 7系统实际也是从Zune的设计中积累了很多的经验。由此Metro的名字被流传开去，它是如此的流行，以至于微软还把它应用在了之后的Windows 8上。另外这种设计风格还被用在了其他的软件上，比如Xbox 360等等。

图06

　　另外，当然还有苹果和它的拟真风格，就在微软准备自己的设计风格时，苹果已经做出了改变，他们放弃了拟真风格，而直接采用了扁平化设计。并在2013年夏天的iOS 7推出上市。因为涉及的产品很多，所以迅速的流行开了。苹果对设计领域的影响很大，设计师迅速喜欢上了这种扁平化风格，因为这可以让他们的产品显得更加现代。最新消息显示，苹果最的OS X系统也即将全面转向扁平化设计。

　　扁平化设计的特点

　　扁平化设计的特点是十分鲜明的，国外设计师Carrie Cousins在网站上介绍了扁平化的五个特点，下面看看扁平化设计（Flat Design）的五个特点：

　　特点一、拒绝特效

　　扁平化设计概念最核心的地方就是放弃一切装饰效果，诸如阴影、透视、纹理、渐变等等能做出 3D 效果的元素一概不用。所有的元素的边界都干净俐落，没有任何羽化、渐变或者阴影。这一设计趋势极力避免任何拟物化设计的元素，这导致这一设计风格在其它平台有时候显得突兀，前景图片、按钮、文本和导航栏与背景图片格格不入，各成一派。

　　因为这种设计有着鲜明的视觉效果，它所使用的元素之间有清晰的层次和布局，这使得用户能直观的了解每个元素的作用以及交互方式。如今从网页到手机应用无不在使用扁平化的设计风格，尤其在手机上，因为屏幕的限制，使得这一风格在用户体验上更有优势，更少的按钮和选项使得界面干净整齐，使用起来格外简单。

扁平化设计拒绝特效

　　特点二、界面元素

　　扁平化设计通常采用许多简单的用户界面元素，诸如按钮或者图标之类。设计师们通常坚持使用简单的外形（矩形或者圆形），并且尽量突出外形，这些元素一律为直角（极少的一些为圆角）。这些用户界面元素方便用户点击，这能极大的减少用户学习新交互方式的成本，因为用户凭经验就能大概知道每个按钮的作用。

　　此外，扁平化除了简单的形状之外，还包括大胆的配色。但是需要注意的是，扁平化设计不是说简单的搞些形状和颜色搭配起来就行，它和其他设计风格一样，是由许多的概念与方法组成的。

扁平化设计采用简单的用户界面

　　特点三、优化排版

　　由于扁平化设计的使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。

　　字体是排版中很重要的一部分，和其他元素相辅相成。想想看，一款花体字在扁平化的界面里得有多突兀。下图是一些扁平化网站使用无衬线字体的例子。无衬线字体家族庞大分之众多，其中有些字体会在特殊的情景下会有意想不到的效果。但注意，过犹不及，不要使用那些极为生僻的字体，因为保不齐它就把你带进坑里了。

扁平化设计及其重视排版

扁平化设计及其重视排版

扁平化设计及其重视排版

　　特点四、惯用明亮配色

　　扁平化设计中，配色貌似是最重要的一环，扁平化设计通常采用比其他风格更明亮、炫丽的颜色。同时，扁平化设计中的配色还意味着更多的色调。比如，其他设计最多只包含两三种主要颜色，但是扁平化设计中会平均使用六到八种。

　　而且扁平化设计中，往往倾向于使用单色调，尤其是纯色，并且不做任何淡化或柔化处理（最受欢迎的颜色是纯色和二次色）。另外还有一些颜色也挺受欢迎，如复古色（浅橙、紫色、绿色、蓝色等）。

扁平化设计惯用明亮配色

　　特点五、最简方案

　　设计师要尽量简化自己的设计方案，避免不必要的元素在设计中出现。简单的颜色和字体就足够了，如果你还想添加点什么，尽量选择简单的图案。扁平化设计尤其对一些做零售的网站帮助巨大，它能很有效的把商品组织起来，以简单但合理方式排列。

扁平化设计采用最简方案

　　扁平化设计的未来

　　没有人有能够预测未来的水晶球，所以我们几乎可以说，扁平化设计最终也还是会消失的，会被别的设计风格取代。但是设计师们会不断的计划和尝试，并最终将它进化到一个新的风格。其实谷歌公司现在正在尝试将它和传统的Rich Design进行结合，以充分发挥二者各自的特点。总之，设计行业永远处于变化之中，扁平化设计绝不会是设计师心中永远的“宠儿”！

　　文章内容来源：什么是扁平化设计风格_扁平化设计来源与未来

　　　　　　　　　 扁平化设计[Flat Design]五个特点