扁平化设计风格在平面设计中的应用

佀冬梅

摘    要： 随着社会的不断加速发展，电子信息终端技术的蓬勃发展，扁平化设计逐渐成为界面设计和交互设计设计风格的主流方向。扁平化设计作为一种全新的设计主流被受众喜爱。本文通过对扁平化设计风格研究，深入探索拓展扁平化设计风格的应用范围，并突破UI设计的范畴，尝试根据包装设计、插画设计等不同平面设计领域的设计特点，探索扁平化设计在不同领域上的可行性分析，为扁平化设计的应用提供借鉴和思考。

关键词： 扁平化设计    平面设计    视觉元素

一、扁平化设计概述

（一）扁平化设计的概念

扁平化设计是近年来刚刚发展起来的一种全新的设计风格，英文中常用翻译为Flat Design。作为一个全新的专业名词，在设计领域没有统一的定义。在英文版的维基百科中对扁平化设计的定义是：一种界面设计的风格，在设计过程中去除所有具有三维空间效果的样式和属性，删除一切具有阴影、高光、反光、渐变、阴影表面纹理及所有三维错觉的设计元素[1]。扁平化设计产生的核心是对信息的提炼使设计更注重功能本身，实现功能最大化。在表现形式上更注重简单元素平面化，去除所有产生立体感的特效，对排版和单一色彩进行极简化处理。将想要传达的信息更加简单明了，使用户最大限度地接受有用的核心内容，使界面设计更加高效合理。这一核心使设计师更倾向将扁平化设计运用在UI设计和人机交互设计中。

扁平化设计风格这种追求简约的设计风格更依赖那些被精心筛选的本质性元素，而非表面上的装饰，一切设计都为功能服务，可以真正做到形式追随功能。

（二）扁平化设计形成过程

1.从微软公司的界面设计中诞生

扁平化设计风格真正应用于界面设计是由微软公司2006年推出的名为Zune的音乐播放器。微软推出了如图1的Zune音乐播放器，为与苹果的iPod播放器竞争，从此开始名为Metro的设计。其特点主要突出显示大文本并匹配背景图像。这个版本的操作系统使用许多简单的形状，清晰的印刷格式，明亮的对比色，复杂的细节和纹理已被删除。就此Metro的名字已经流传了起来，而且很受欢迎，因此微软之后将它应用于Windows 8系统。另外，这种设计风格也用于其他软件，比如Xbox360等。扁平化和极简主义设计为Web和移动应用提供了更多可用的设计解决方案。

2.掀起扁平化设计风格热潮

2013年9月，蘋果公司发布了ios7，ios操作系统出现后开始进行了操作系统用户界面的升级。如图2所示中IOS 6系统（左）与IOS 7系统（右）对比可以看出ios7完全放弃了拟物化设计，并从所有图标和界面中删除了所有细节，纹理和阴影等颠覆性的调整。同时，国内主流互联网产品，例如：腾讯QQ、360浏览器、新浪微博、包括微信等，操作系统如魅flyme3.0，小米MIUI6等，都已经开始采用扁平化设计风格，在产品界面图标和标志的基础上均进行了改革。扁平化设计开始推向设计热潮的高潮，逐渐成为移动互联网和界面设计中最受关注的术语之一。

二、扁平化设计原则

（一）图形设计简化

图形简化是最可以具体描述扁平化设计风格的设计特点，这种简单的设计趋向意味着它可以增强设计的功能性。扁平化设计风格的图形特征最主要的是有着鲜艳的色彩、清晰的边缘和开放的空间。扁平化设计最常见的是图标式图形设计，从图形设计中看出这一设计并不是减少真实世界的对象或使用模拟图形。这意味着扁平化设计会在现实世界和技术世界之间产生差距。

1.简化提取

扁平化设计是时代的产物。事实上，扁平化设计走向设计主流方向的确是因为它能够不断优化自身，使其更能适应时代的发展。但事实上，使扁平化设计应用在不同设计领域中，绝不是一件简单的事情。扁平化设计是绝对提取，需要有更扎实的基本功，其实与书法的道理相似笔画越少，书写越难，笔画越多越容易书写。

2.去除特效

扁平化设计完全属于二维空间的产物，这就意味着它不会过度设计。因此，在扁平化设计风格中不会有倒角，投影，渐变或其他效果应用于图层。不难看出所有扁平化设计风格的界面设计，它们大多只有尖锐的边缘，没有投影。一个简单的形状加上一个没有景深的平面。

3.图形几何化

扁平化设计会使用一些简单的用户界面元素，如有的按钮和图标设计，设计师只需寻找简单的形状，如矩形、圆形或正方形，以保持每个形状的独立。形状的边缘可以完美定位或包含一点曲率。每个用户界面元素都很简单，并且易于点击或切换。对用户而言直观的交互，没有设计中的过度设计。删除简单的样式并鼓励用粗体可点击的按钮进行着色。但是，这并不意味着简单的几何元素就是简单的设计。通常几何形状会给用户带来更大的虚构空间，这是直观和清晰的。当然，一个更简洁和通用的图标，它携带的信息量更大，并且使功能最大化。

（二）风格配色的选择

颜色是扁平化设计风格在表达功能性时最重要的部分。在扁平化设计中，色彩运用得是否到位，无疑是这种设计风格中很重要的一个环节。很多UI设计作品在色彩上更多地强调更亮、更鲜艳。在以往的设计中，大多数情况下设计一个作品更专注在两三种颜色之间，在界面设计中使用的颜色模式往往比其他调色板更引人注目，更明亮。

（三）字体的运用

字体是扁平化设计中非常重要的元素。扁平化设计将界面中所有元素清晰简洁，设计师可以在字体创建时使用自己所期望的样式和色调，可以使用自定义和特定字体设置整个界面框架的基调。

如今的“扁平”字体通常由单一字体组成，或者是两种非常接近的字体。在不同风格、功能设置下的字体选择，均为易读、易辨识且简单的字体。这正是关键所在，不能使字体分散注意力。如果字母带有过多的风格与个性，就会阻碍用户的阅读流程。通常的做法是“隐形的设计”，换句话说，就是做出让用户不会注意到的设计。因为每当用户留意设计，就会丧失沉浸式的体验。

（四）版式布局

1.网格

网格在扁平化设计中起着非常重要的作用，特别是在界面设计中。通过网格将视觉元素整合在一起，可以使整个设计更有次序和直观。

网格不仅可以显示视觉顺序，还可以使用网格划分内容和功能组，无须使用直线或框划分组对象。网格中简单的对齐和间距设置可以更好地帮助用户了解功能和结构。尝试打破网格结构，突出重要元素，以吸引用户的注意力。告别假3D元素装饰、物理比例和定位等基本布局原则同样是展示视觉顺序的关键。

使用更密集的网格，当减少视觉色彩匹配元素时，会发现这种设计方法可以承载更复杂的结构并且不会显得杂乱。如果想要表达的其他内容信息就可以单独放置。

2.半透明

自苹果IOS 7系统推出扁平化设计风格以来，主打的半透明设计就开始被广泛应用，这种设计手法主要以半透明磨砂玻璃风格引起大家的关注。基于透明度的使用，苹果公司还提高了系统对外部环境感知的敏感度。

使用半透明效果最大的好处是可以使画面产生对比，设计师可以通过色块，图片上的大字体或者多种颜色层次创造视觉中心。这种效果如果运用得当就可以很快将画面层次展现出来。但是使用这一效果时需要谨慎，因为这种效果很难处理得当，需要遵循如下原则：图片和文字一定要有可读性，这样使用半透明效果才有意义。在决定半透明位置的时候，要构思好需要遮挡什么内容，遮挡的部分是否合理。透明度的错误使用会影响整体的设计效果和阅读性，不可以在对比非常强烈的图片上放置半透明元素。

三、扁平化风格在平面设计领域的应用

（一）包装设计中的扁平化设计风格

包装设计中的扁平化风格主要体现在：文字清晰化、颜色简化和图形简化、版面简约化。对复杂图形、烦琐文字、拥挤版面，采用扁平图形、清晰文字、单纯色彩，秉持“简约而不简单”的设计理念，传递产品信息的同时强化了品牌形象，完美达到了包装设计的目的。

（二）插画设计中的扁平化设计风格

扁平化风格的插画色彩对比较强，在颜色的使用和选择上，大多数插画师们会选择特有的或者商业需求的色彩语言体系进行绘制，并且削弱物体固有的阴影及其明暗关系的强烈感，增强颜色与颜色之间的块面感、统一感或是对比感，让颜色整体或是在画面内颜色与颜色有一定的对比。有些插画师会选择直接用纯色的色块上色，有的插画师会选择用拼贴、多色块叠加进行绘制。此外，在色块的内部也会使用叠加轻微的纹理让色块更加丰富，纹理和拼贴的图案在制作方面，有些插画师会选择在纸上手绘出想要的图案图形，再通过软件后期到画面当中，这样做是为了让纹理看起来更加自然，色块外部偶尔会根据实际情况用勾线的方法将外部轮廓凸显出来。

（三）企业形象设计中的扁平化设计风格

扁平化设计风格进入VI设计系统的关键是对其设计理念的影响，体现企业文化与内涵。因此，根据扁平化设计原则企业形象设计时应对VI设计的字体和颜色至关重要，对于企业形象设计而言，合适的字体和颜色将达到突出的视觉效果，会很容易让人感受到企业文化的核心意义。

扁平化设计开始仅仅存在于界面设计，而现在在不同的设计领域随处可见，以移动客户端的界面出现在人们的视野，人们从持有批评或中立的态度到现在完全接受它，并广泛地应用在平面设计的各个领域。由此可见，扁平化设计风格顺应了时代的发展，同时社会的发展带动了扁平化設计风格的发展，满足了社会发展的需求。扁平化风格设计重视实现产品的功能性，淡化复杂的装饰外观，带来简洁清晰的图像及出色的功能，在界面设计和交互界面上已经取得成功。设计师应抓住其中的设计要点，在不同设计领域探索和应用起到不一样的作用。

参考文献：

[1]张欣.视觉符号在扁平化界面设计中的应用[J].艺术探索，2013（6）：104-105.

[2]P迪.做好扁平化设计-视觉篇[EB/OL].http：//www.alibuybuy.com/posts/83847.html，2013.

[3]刘畅.浅析扁平化设计的发展趋势、优势与成因[J].美术大观，2014（12）：99.

[4]崔天剑.大数据时代扁平化设计趋势研究[J].创意与设计，2014（32）：16-20.

[5]周黎铃.基于用户体验的扁平化互联网产品界面设计研究[D].杭州：浙江工商大学，2014.