扁平化： 移动互联网时代的设计新趋势

毛悦溢

简介

扁平化设计（Flat Design），简单来说是平面设计的一种风格——这种风格在当下经常被运用在移动设备应用程序以及网页当中，除此之外，在更广范围的平面设计领域也都可以见到扁平化设计的影子。自2007年1月第一代IPhone发布以来，智能手机、平板电脑等各种移动设备已经融入了人们的日常当中，成为工作、生活和娱乐不可或缺的部分。正是在这种移动设备大规模占据人们生活的环境下，扁平化设计应运而生。

2008年，扁平化设计的概念首先由谷歌公司提出，它意味着最大限度地减少使设计立体的风格元素的运用，包括阴影、渐变和纹理等等，扁平化在设计上更加注重简单的元素、字体和颜色，其中又特别强调对色彩的运用。与扁平化相对的通常有两个概念，丰富设计（Rich Design）和拟物化（Skeuomorphism） 。阴影、高光和斜角等在丰富设计中被大量使用，而在拟物化风格中，设计力求展现物体的真实形态。值得注意的是，扁平化和拟物化在原则上并不互相排斥，我们时常可以在扁平化的设计中看到拟物化的痕迹，只是在如何展现物体的真实形态上他们采取了不同的方法。

扁平化风格在设计领域的风头日渐兴起，这背后的原因可以归结为两个。首先，扁平化设计诞生与移动设备的温床之中，而移动设备受制于电池，有续航焦虑的问题。诸如3D渲染、动画效果等高性能要求的技术，在移动设备上被限制使用。因此，在技术层面上，移动设备需要一种能极大地降低功耗、延长续航和提高响应速度的设计，而扁平化设计正是能满足这一需求的风格。此外，随着互联网飞速发展，我们进入了一个信息爆炸，信息碎片化的时代。在这样一个信息过剩的时代中，我们每时每刻接收到信息已经远超负荷。此外，我们刚在桌面电脑上经历过一个由复杂而精美的软件界面和丰富和华丽的网页组成的时代，各种绚丽特效充斥着视觉，有时候我们注重交互界面的观感胜过了交互的目的本身。因此，从审美层面来说，我们需要一种简洁、干净、舒服的视觉效果来取代过去的过剩的复杂。扁平化设计也是在这种趋势中成长起来的。它化繁为简、去伪存真，用最简单的观感去突出需要传递的内容和信息。设计中使用的简单元素、字体和色彩也是服务于信息和交互本身，帮助用户更快地理解使用方法或交互过程，去除认知障碍。

和极简主义的关系

从对扁平化设计的描述来可以看出，它和极简主义（Minimalism）存在很强的内在联系。极简主义是一种艺术流派，兴起于二战后恢复时期百废待兴的美国。极简主义以简洁、实用的气质出现在人们的视野中，指导重建工作，服务于实业。 我们可以在很多现代流派的建筑、室内设计、物件、装置等作品中看到符合极简主义的风格。它们摒弃了复杂的线条、形状、纹理和图案，用二维化的表现手法去展现创作者的意图，用简单的几何来传递美感。时至今日，极简主义有了越来越多拥趸，甚至它已经超越了一种艺术流派的范畴，成为一种思想或者生活态度。显而易见，极简主义也早已经蔓延到了平面设计的领域。扁平化设计，除了受到上文所提及的技术层面和审美层面两个需求影响，很大程度上也可以说是源自于极简主义。扁平化设计的特征，绝大多数都符合极简主义的描述。

在作者看来，扁平化设计和极简主义可以说是互为表里的关系。在艺术上，极简主义希望用最简洁、直观的方式去表达，可以让削弱观众理解主旨的障碍、减轻审美疲劳。而在界面上，扁平化同样以简单、直接的视觉和交互呈现在用户眼前，以保证信息的有效传递、降低学习成本。简单来说，极简主义是指导思想，而扁平化是展现极简的具体方法论。

主要特征

扁平化设计所要简化的主要体现在两个方面。首先自然是视觉上的简化，通过去除三维效果和过度的细节，减少动画和特效，并用简单的几何形状和颜色组合来呈现简单、整洁的画面。扁平化在追求视觉上的简化以外，也对交互提出了要求。交互上的简化，包括减少传统的瀑布式的列表的使用、放弃复杂的菜单和选项，并且充分利用简化的视觉元素本身和触控这一种新的交互形式，给使用者带来直观、纯粹的体验。在交互的设计上，同样需要经过深思熟虑，以符合使用场景以及人的行为习惯和思维模式，从而降低用户的学习成本，使用起来自然而流畅。

在了解扁平化设计的基本特征之后，我们可以通过分析一些推崇扁平化风格的设计师从他们的工作中总结出来的经验和原则，来更加深入的进行剖析。

设计师Carrie Cousin提出了一些能让设计展现扁平化风格的明显特征。首先是没有添加额外的效果，尤其是传统的三维化元素，诸如阴影、浮雕、渐变等等。从图层的角度来说，扁平化的设计和三维的设计可能是一样的，但是各个图层平面在扁平化设计中是不相交也不连接的。如何将各个平面联系起来，展现成一个统一体依赖于对设计的层次感的体悟，和对元素的排布。第二个特征是使用简单的元素。我们可以看到现在很多吸引人的并且充满现代感的网页，经过观察，它们仅仅是由几何图形以及文字构成，过去常见的诸如精美的背景、复杂的图案和装饰性的纹理都在被逐渐淘汰。 其次，由于扁平化仅仅使用简单的视觉元素，因此它又尤为重视对字体的使用。大部分优雅的手写体和复古字体，通常都和扁平化的风格相违和。通常会选择一个简洁的主要字体，搭配一个次要字体使用。同样的，颜色对于扁平化设计也是至关重要。扁平化风格中使用的颜色更加的鲜艳，明亮。往常的设计以2-3种颜色做为主色调，但在扁平化设计中，可能6-8种颜色被平均的使用。尽管色调增多，但我们在扁平化设计中一般使用的是大的色块，因此在局部，或者在一个视觉元素中，往往使用的是一种颜色，或者是同类色。相比于以往的设计，扁平化在颜色的使用上更为丰富，但在颜色的变化和排布上显得没有那么复杂。最后一个特征，Carrie称之为极简主义设计方式，在设计过程中始终以极简作为指导思想，尽量使用简单的元素，降低视觉复杂程度

必须强调的是，简单的元素、简化的视觉效果并不意味着简单的设计。例如大胆的在局部使用几何和颜色，从而形成视觉上的焦点，引导用户关注和使用，同时在非重点的部分进行视觉效果的弱化，造成对比和冲击，让设计成为一个有机的整体，如何做到这些对设计提出比传统风格更大的挑战。

设计师钱嘉文提出了对扁平化设计在特定场景使用的理解，除了和上文中提到的一些重合的地方之外，他也提出了很多独到的见解。例如扁平化设计在文字的排版上要注重四个原则——亲密、对齐、对比和重复。简单来说就是意思相近内容的亲密，同一页面元素之间的对齐，不同等级元素之间的对比以及相同级别元素的重复。在字体方面，他推荐使用无衬线的字体， 而在形状/色块方面，则强调了色块和内容文字的大小比例的协调关系。作者同样指出了图标对于扁平化设计的重要性，好的图标不仅能提升整体的设计感，也能更加轻松的将信息传达给观众。提炼图标至关重要，而这也是一项需要付出很多的时间和精力的任务。

发展历程

在对扁平化的简介中提到，扁平化设计的出现和风靡依托于越来越普及的智能移动设备，因此我们可以通过观察和分析移动设备的用户界面的历史来获悉扁平化风格的发展和演变。

微软公司在2010年的下半部分发布了Windows Phone 7， 它是该公司第一款专门针对手机的操作系统。这个系统的用户界面率先使用了简约的、充满现代感的二维化设计，也正是在这一代系统的发布中，微软向顾客介绍了Metro这一标志性的设计语言。Metro意味着都市，是现代化的象征，可以看作是复古（Retro）风格的对立面。

微软在这款界面的设计中，采用了方形作为的基本视觉元素和交互的单位。方形的色块不带有任何阴影、渐变、高光之类的三维效果，在颜色上也选择了单色作为主色调。此外，方形色块也可以被同样尺寸的图片所取代。这套设计可以说是扁平化的入门之作，色块的交互形式在当时为手机用户带来了新鲜感和便利，但是它也有很多不足之处。例如在图标的设计上虽符合简约的标准，但是却显得有些单调。在图标以及文字/数字的排版布局上也缺乏深思熟虑，虽然直观但是比较粗糙。此外，界面中用了一些图片代替色块，很容易在更换图片后显得画面杂乱。

到了2012年第四季度，微软发布了个人电脑的新一代操作系统Windows8，同时将Metro更名为Modern UI。这个系统的用户界面基本上采用了和Windows Phone 7一样的以大面积色块做为主体的设计，这体现了触控屏幕的发展和平板电脑的兴起。Windows 8在界面上有了更多的变化，例如不再采用单一的色彩作为基调，而是让色块和色块之间有丰富的颜色。此外图标的设计更为精细，很多都能体现出微软自身的特色。在字体的选用和文字的布局上有了长足的进步，不再和它的前身一样呆板。

随着微软在界面上不断推动扁平化设计往前发展，它的竞争对手也开始在同样的设计风格上发力。在2013年9月，苹果公司发布了第七代移动设备操作系统iOS 7。在苹果的著名设计高级副总裁Jonathan Ive的主导下，本代的iOS进行了彻底的改头换面。

在这一代iOS中，拟物化的元素，例如立体的杂志架，日历上的羽毛和游戏中心的毛毡基本上都被抛弃，取而代之的是一套重新设计的基于扁平化的按钮和界面。大部分的按钮都是以清爽的白色线条或者最简单的色块来表现出自己的特征，我们可以看到苹果在图标的设计上，就有比微软深的多的功底。值得注意的是，在图标的底色上苹果仍旧采用了一定的渐变色，严格来说属于伪扁平化，同时图标和背景之间的层次感比较强烈，让用户觉得每一个按钮都非常的有机。在文字上，苹果可以说和微软有异曲同工之妙。

到2014年底，谷歌公司发布了第五代安卓操作系统（Android 5.0 Lollipop）。在过去的一段时间里，谷歌围绕着Google Now的界面和交互设计拓展出一套极具特色和说服力的设计语言——Material Design，而Android5.0是第一款带有其血统的操作系统。

这一代的安卓同样重新设计了完整的一系列图标，而与iOS不同，它并没有采用固定形状的图标，而是让所有图标保留自身的特色，因此显得更加生动和直观，再经过精心的搭配和排布，整体观感也十分和谐。仔细观察可以看出，图标保留了一定的阴影和少量的高光，因此也同样属于伪扁平范畴。相比于iOS7那种清澈剔透的毛玻璃质感，Android5.0更加着重用配色来展现一种简约和现代的气质。这款系统的另外一个核心特色是它的响应式的动画和转换效果。

到现在，时间过去接近两年，这几家公司的系统也经历了一到两个大版本的变迁，在用户界面上也发生了诸多革新换代。

随着生产力的进步，我们在物质上渐渐地丰富，而随着互联网的高速发展，我们也进入了一个信息爆炸的时代。与内容上的过剩相对的，是人们在形式上和设计上，开始追求由繁入简。正如越来越多的人在生活上崇尚极简主义，扁平化设计也在平面设计领域得到了很大的发展。扁平化的设计风格抛弃多余的细节，通过二维化、几何化、色块化等手段对事物的进行视觉和交互上的提炼。通过扁平化设计，我们可以更快速的表现设计师的意图，也能更精准的传达内容。

（作者单位：浙江理工大学）