扁平化设计的优劣及未来

Pros-Cons-and-Future-of-Flat-Design_BANNER-tb-962x0_meitu_2

扁平化设计到底是什么?

可能你已经多次在博客和设计趋势列表中听到过对扁平化设计的赞美之词。这一简洁的视觉风格起源于极简主义,并有多种展现形式。不过,通过了解他不是什么,我们可能会对扁平化设计有更明确的理解。

扁平化设计不是三维的。顾名思义,扁平化设计的名称来源于他二维的特征。除了设计中的平面图形,扁平化设计不包含任何能够带来厚度和立体感的细节特征——比如阴影、高亮或是纹理。

扁平化设计也不是拟物化。扁平化设计最初是作为拟物化设计的对立面出现的。拟物化是一种对现实世界的物体或过程进行再现或暗示的风格。这种设计大量使用投影、真实感纹理、反射、斜面和浮雕等效果。

扁平化设计人气飙升

扁平化设计在2012和2013年开始逐步被大众认可。当时,由于Windows 8 和iOS 7 系统的发布,这一设计趋势变得随处可见(并且更容易模仿)。

从微软由鲜艳色块组成的模块化布局,到苹果对光滑造型和简化图标的使用,我们可以看到扁平化设计在发展过程中受到的某些影响,以及随之而来的趋势演变。

UXPin某员工在为Fast Co. Design撰写的文章中指出,“扁平化设计发展中的最理想状态可能是在自身趋势和被抛弃的拟物化理念中寻找一个平衡。”

但是,扁平化设计在流行几年之后仍然保持着强劲的势头,很有可能这一趋势并不是昙花一现。因此,我们来看看扁平化设计的优劣势,并分析一下未来这一趋势可能的走向。

优势

可与响应式设计兼容

自从微软和苹果纷纷选择扁平式设计,这一风格迅速成为用户体验的最新选择。在网页和移动设计中,这种设计持续流行并且势头强劲,而其流行的理由十分充分。

扁平化设计的原则可以应用到其它设计类型中,但对网页和移动设计来说,它基于网格的布局和简洁的图形设计便于调整大小和重新排列,因此特别适合在不同的设备和不同尺寸的屏幕上展示。

下图中Sergey Valiukh的例子非常明确的展示了扁平化设计通过简化和调整,可以方便地在网页和手机上提供的一致性用户体验:

而相比之下,拟物化涉及对细节精确程度比较高,带有大量的阴影和纹理,图像尺寸固定,通常无法满足适应不同查看模式所带来的缩放要求。

正如设计公司Dapper Gentlemen的Ryan Allen在自己名为《扁平化2.0》的文章中所写的:“比起像素固定的设计,扁平化设计可以更轻松地根据不同的内容尺寸进行比例调整。”

结构灵活

随便你怎么称呼——格子、卡片、模块、板块——许多选择了扁平外观的设计都由类似的统一几何形状构成。在这种布局模式中,每个设计元素都有固定位置,因此非常便于浏览和快速找到某一内容。

此外,这些格子也可以非常灵活地组成其它造型。这就使得设计者能够将布局设计成最方便浏览和展示内容的形态,而不是将所有内容挤在固定大小的布局中。

举个例子,下图中的宣传册由Bureau of Betterment设计,该设计利用了网格作为布局基础,使用了不同大小的矩形来突出不同的设计元素,比如排版和图标。所有的格子通过使用统一色彩和简洁的插图,进一步增强了扁平的效果。

而该公司的网站,则使用了不同类型的网格,比如菜单、员工照片、以及服务列表:

排版清晰可读

扁平化的设计还延续到了对排版的设计方式中,带来了更大、更加流线型的排印。不再使用阴影和其它效果,使得文字读起来更加轻松。

由于风格匹配,无衬线体(Sans-serif)成为了热门选择。尽管无衬线体和展示字体在设计上并不复杂,但作为标题或主要内容出现时,仍然非常抓眼。

劣势

牺牲了部分易用性

在突出扁平化设计简洁和流畅特点的过程中,一些设计师会陷入过分追求美感以至于损害设计自身易用性的误区中。这一问题在网页和移动设计方面尤其突出。

(由于在同一是平面上,所有设计都是扁平的)可能很难分辨究竟哪些可以点击,哪些不能。一些重要特征或作用可能隐藏在了页面下,对用户来说,他们习惯的视觉线索也可能不存在——这都是过分追求简洁所导致的。

拿下面的网站做个例子。所有的框都能点击吗?还是只有某些可以?仅仅看这个页面我们很难判断。

缺乏独特性

每一个企业、品牌和个人,在进行项目设计时都希望能够将特性展示出来——不论设计的是网页、app、名片、活动海报还是其他。

扁平化设计的一个劣势就在于,它对简洁的、固定意义的视觉效果的坚持常常会导致许多设计看起来多少有些雷同。对于进行纯扁平化设计的设计师来说,他在进行项目设计时,能够选择的设计原则是非常有限的。

就比如下面这两张图分别来自两个毫无关系的手机应用界面,图一是由Marco La Mantia 和 Simone Lippolis设计的,图二的设计师则是Luis Vaz。两份设计的特点都是都是基础的几何图形叠加白色的无衬线字体。连配色方案都十分类似:

过分关注流行美学

扁平化设计常常出现在设计趋势列表中,因为对设计师来说,如果他们希望自己的设计看起来时尚并且能够展示现有技术,扁平化设计仍是不二之选。

但随之而来的问题在于,一些设计师采用扁平化设计,仅仅是为了随大流,而并没有考虑这一设计是否真的有用。这可能会带来一些毫无意义的设计选择——比如早期扁平化设计中非常多见的长阴影。

以下两张图分别由Alexander Lotosky和Erik Malmsköld设计,非常典型地展示了这一长阴影趋势:通常用在字体和图标中。这两份设计都诞生于2013年,当时扁平化设计作为一种新型的视觉风格,引发了一阵狂热。

不过,比起仅仅为了追随流行美学而进行设计,前文提到的以牺牲实用性为代价的设计要更加糟糕。其中的一个例子就是使用瘦型和极细字体进行排版,尽管看上去可能十分简洁干净,但是读起来却非常困难。

当这种为追求视觉效果而忽略字体和页面比例的设计应用在小型页面中,比如设计名片、手机客户端或手机网页时,则可能造成这样的效果:

未来

扁平化2.0

在过去几年间,由于设计师们对扁平化设计进行了各种各类的试验,许多人可能已经注意到了我们上文中提到的优缺点,并决定进行相应的调整。

尽管早期迭代中,扁平化设计主要以严格的视觉简洁性为特点,但其近期的发展已经再次引入了阴影、纹理这类展现质感的特征——这不仅是出于美观,也有功能性的考虑。

这类对纯扁平设计的调整通常被称为“扁平化2.0”或者“近扁平化”设计。

这类设计更多的是一种折中:在保留扁平化设计干净简洁特征的基础上,加入些微的拟物性特征,以增加视觉变化,提升实用性。

扁平化2.0的一些技术包括,通过叠加元素或增加色彩变化和阴影,为平面增加厚度和立体感。另一个常用的混合技术则是加入图像,而并非局限于扁平式插画或图标。

在下图的例子中,扁平化设计的网格式布局以及简洁易读的特点都得到了保留,但同时,元素的叠加和扁平但有纹理的插画使设计更上一层楼——这也是扁平化2.0一个非常好的例子。

材料设计

材料设计是由谷歌开发出的一种视觉语言,与近扁平化设计有许多共同点,主要强调网格式布局,以“精心选择的配色、全平面图像、大规模排版和刻意留白”为特点,致力于营造大胆的图形效果。

这类设计的灵感来自纸张,带有”取自现实的视觉线索”和“用户熟悉的触觉特性”来帮助用户快速理解和使用这一设计——这听起来有些拟物化设计的意思。

例如下面为Tubik Studio的UI概念图,注意其中细微的阴影和按键的颜色,这使得导航操作立刻明确了起来。暗藏在背景中的大型字体排版,以及表面像纸张一样的层叠效果,都给材料设计增加了一种层次感。

浏览MaterialUp网站可以找到更多材料设计的案例。

尽管材料设计具有明显的扁平化特征,但它对光影、动作和其他细节的关注证明了扁平化设计通过改造可以变得更加实用和灵活。

在免费提供的 材料设计指南 中,谷歌将这一设计高度细化,设计师可以紧跟指南,或是挑选自己喜欢的元素和技巧,更加轻松地将材料设计应用到自身工作中。

这也推动了设计师根据自己的理解和修改,对扁平化设计和材料设计进行试验,来创造出新的趋势。

因此,尽管在设计风格的推广过程中,微软、苹果和谷歌这样的大品牌占有绝对影响力,但设计师们才是真正参与和设计新趋势的人——他们才是帮助引领下一代“大热门”的人。

参与讨论

“当你考虑扁平化设计(视觉简介)和拟物化设计(视觉模拟)背后的精神时,你会发现这两种概念毫无疑问可以共存。真正的难点,正如过去和未来所验证的,在于如何在二者之中找到最佳平衡。”——UXPin  刊登于Fast Co. Design

你认为扁平化设计正在朝着一个更加平衡的方向发展吗?是该维持现在的状态,还是你已经准备好向下一个趋势发展?请在评论区留下您的想法和简介。

如果您想要进一步了解扁平化设计背后的概念 ——例如瑞士平面设计风格和极简主义的影响,或响应能力和网格式布局等主要特征——可点击下面的链接获取相关阅读和资料:

  • 响应式网页设计:2016年的互联网是什么样的
  • 网格式布局改善设计的15个理由
  • 全球平面设计:瑞士设计
  • 极简设计:25个案例及实用窍门
  • 极简主义设计免费字体60种

作者:Janie Kliever

自由作家,平面设计师,Design Artistree创意工作室老板。大学毕业后,她在自身艺术背景的基础上,探索并爱上了设计。目前,她十分享受对传统美术的技艺和平面设计的可能性结合进行探索。