扁平化风格界面设计的探讨

1、扁平化风格界面设计的探讨 张贝 1方卫宁 2 （1北京交通大学 建筑与艺术学院 100044 北京） （2北京交通大学 轨道交通控制与安全国家重点实验室 100044北京） 摘要：扁平化设计是近期出现的一种新的界面设计风格，它去掉了阴影、渐变、透视等界面设计元素，崇尚简洁、平面化的呈现方式。由于人们生活节奏的逐渐加快，对信息的传递要求更加精确，设计师有责任把界面信息简化，使其条理更加清晰，扁平化设计的出现正好满足了这一点。它秉承以人为本的原则，提供全新的交互体验模式和视觉感受。本文将从扁平化风格的起源、特点及其在界面设计中的应用进行深入地探讨。深入剖析它与传统界面风格的不同和优势，为其更好地在

2、人机交互界面设计中的应用提供有益的借鉴和参考。关键词：扁平化风格，人机交互，界面设计 Abstract：Flat design is a recently arising new design style which takes the elements of user interface design away, such as shade, gradient and perspectivity, and which advocates simple and flat presentation. As the accelerated pace of life, more accurate t

3、raffic information is required. Designers are responsible for the simple interface design and the distinct method. Flat design just meets the demand. It adheres to the people-oriented principle and provides a new interaction experience mode and visual perception. This article will conduct in-depth d

4、iscussions of the flat design beginning, characteristic and application in interface design. The article will also dissect the difference and advantage between flat design and traditional interface design. So to provide helpful reference for applying in the human-computer interaction interface desig

5、n. Keywords: flat design, human-computer interaction, interface design 随着人们使用电子产品数量的日益增加，人们需求的不断提高，界面设计开始备受关注。界面设计的好坏直接影响到用户的使用状况，扁平化设计是近期出现的一种新的界面设计风格，已经成为 2013年移动界面的设计趋势，与目前流行的拟物化设计形成了鲜明的对比。它不管从界面设计还是交互设计上都给用户提供了一种新的体验模式，期望用最简洁的视觉语言有效的传达信息，减少认知障碍。从本质上看，扁平化设计不仅仅是一种视觉风格的改变，而是一种设计语言和思维方式的演化。本文将对扁平化风格

6、的起源、特点及其在界面设计中的应用进行深入地探讨。 1.扁平化设计的起源扁平化设计在近期之所以受到广泛的关注，主要是由于以微软和苹果为主的几大公司在其界面设计上一改以前普遍流行的拟物化设计风格，开始寻求一种新的界面设计语言，它放弃了立体装饰效果，去掉了阴影、渐变、透视等元素，崇尚以简洁、平面化的呈现方式，达到言简意赅的目的，给界面设计带来了一股新的风潮。 而扁平化风格的出现绝不是设计师的一时兴起，界面设计的呈现方式如同艺术流派一样，需要存在多种风格和形式，这是艺术的需要也是大众的需要。从欧洲文艺复兴开始，到古典主义、现实主义美术、印象主义、新艺术运动，再到 20世纪的立体主义、表现主义、抽象主

7、义、波普艺术等的出现，艺术由开始的写实风格到后来出现抽象风格，形式不断的丰富并且流派也越来越多样化，使艺术走向一个多元化的发展。随着人们认识水平的提高，自身知识储备的不断累积，对事物理解及其概括能力的加强，界面的设计风格也应是具象到抽象的发展趋势。 其次，界面设计之初并不那么受到人们的关注，也不是由具有良好设计素养的专业设计师来完成，甚至部分让程序员来代替，这就导致了只是在对物体进行模仿刻画的具象表现形式拟物化设计的诞生，它是靠细腻的表现、精致的外观来吸引消费者1，但从消费者的角度来看，自从 20世纪 60年代出现重视装饰的后现在主义，到 70、80年代在设计界掀起轩然大波，经过了半个世纪的演

8、 96 变，过多精致、华丽的图像充斥在人们的眼前，大家的视觉环境已经趋于饱和，像素级的细腻刻画已经无法满足消费者。并且人们生活日趋繁忙，复杂的装饰似乎变成了一种累赘，这时，提倡形式遵循功能的现代主义风格就更加符合人们的口味。简洁的界面呈现方式，更容易抓住人们的眼球，并能在短时间内快速的获取有效信息，更加适应人们快节奏的办公、生活环境。而且消费者的审美特点是一个螺旋式的循环过程，以具象表现为代表的拟物化设计已经占据领导地位，这必将导致一种新的风格的出现，它就是扁平化。 2. 扁平化设计的本质及特点由于科学技术的发展，电子产品成了人们最常接触到的产品之一，我们获取信息不再依赖于纸媒，电脑、手机成了

9、主要的信息载体。此时，界面设计就显得至关重要。优秀的界面设计可以引导用户快速准确的获取信息，较少的产生辨识问题和迷途现象，提供更好的用户体验。扁平化设计一改之前一味追究仿真的写实效果的误区，抛弃了以往繁杂的界面装饰效果，用简洁的设计语言直命信息本身，提高了产品的可用性也更符合当下人们的审美需求，下面从界面设计、交互设计两方面来讲解扁平化。 2.1 界面设计以手机的界面设计为例，之前的拟物化设计不管是在图形的设计还是在场景的交互上都力求与现实相一致，高度的相似性及其精致的外观成了最大的卖点。这样做的优势可以减少学习成本，新用户或者知识储备比较欠缺的用户也可以根据其逼真的形象迅速的进行识别。但是拟

10、物化设计也有其缺点存在：一、随着现在电子产品屏幕分辨率的提高，尺寸也逐渐多样化，繁琐费时的拟物化设计显然不能满足要求。例如 ios系统的指南针应有程序（图 1），左图是之前的拟物化表现方式，不管是背景还是主体物从颜色到质感甚至其比例都模仿的非常精到，使用户一眼就能辨识出其用途，但是逼真的表现给设计师带来了庞大的工作量，并且无法保证其能很好的适合于各种尺寸的产品界面，这样就面临着一个新的问题，就是如果更好的适应，从而达到完美的视觉呈现。在这一点上以逼真、精致取胜的拟物化设计显然不是最好的选择。二、日本机器人专家森昌弘提出了一个恐怖谷理论，他认为 “在一定程度上，我们会对一个类似于人的对象感觉同情

11、和受其吸引。但是由于一个微小的设计变化，我们就会突然感觉害怕和厌倦”，这即是他所谓的“恐怖谷”。2同理，逼真的界面设计未必会给用户带来好感，当你在使用一个应用时，用户总是期望能最大限度的还原真实的样貌，体验模拟真实场景带来的视觉感受。当它不能满足人们的想象时，产品的体验就会降低，这样就陷入了一个误区，人们花了更多的时间用来逼真的呈现某个程序本身，但却并不能够提供很好的用户体验，也会因为过于模仿实物而使设计师的创造力受到局限，显然拟物化设计已经无法满足用户的需要。 图 1 指南针应用程序 97 扁平化界面设计的出现恰恰解决了这些问题，它是一种倾向于简洁的设计风格，设计师在设计的过程中加入了更多理

12、性的因素，使信息条理更加明晰。从图 1中可以看出，它解决了之前拟物化设计对多种屏幕尺寸和分辨率不能很好适应的问题，只保留了具有象征性的红色指示标，抛弃了原有的纹理、质感，对整个程序重新的归纳总结，用简洁的图形向用户传递信息。并没有影响工具的使用，也大大减少了在图形及交互设计上的工作量，更加注重功能本身信息的传递，使其具有了更好的适应性。并且给设计师提供了新的界面设计思维方式和广阔的设计空间，设计师可以根据用户的习惯制定更加人性化的界面设计。这样用户有了更多的可选择性，可以根据自己的喜好选择符合自己视觉要求和习惯的界面呈现方式，也给界面设计注入了新鲜血液。 2.2 交互设计在交互设计方面的扁平化

13、设计与单纯的界面图形扁平化有所不同，它是与层级界面设计相比较的，由于人们目前生活状态比较繁忙，获取信息也呈现碎片化、不连续的状态，这样流水式、扁平化的界面信息呈现形式更加符合人们的要求3。在人机交互中，纵向的树形层级结构容易引起用户的厌倦，也会因为突然终断而无法继续，横向的扁平化交互设计减少了层级结构，在同一级中更多的展现信息，也增加了层与层之间的切换渠道，更有利于用户随时浏览想要的信息，使其使用流程更加便捷、通畅。 在微软的 win8界面设计中，其交互设计充分的考虑到了这一点：从它新的 “开始”界面（图 2）来说，它采用了极具个性的版面布局，将用户常用的应用直观的展现在桌面。你可以一目了然的

14、看见信息回复、更新，并且可以自定义自己桌面的颜色、布局甚至内容，不需要你记住它的位置也不用反复的点击，在 win8的升级版 win blue中改进过的动态磁贴带来了更多规格，给用户更加多样化的选择。而且在应用方面删除了原有的导航栏、控件栏等不必要的界面元素，原有的操作按钮在需要的时候通过上下滑动来获得，让屏幕尽可能大的显示主体内容，这种扁平化的方式让你能够快捷的和应用进行交互4。给用户带来很好的沉浸感。并且扁平化风格的界面设计充分考虑到了各种不同尺寸的屏幕显示及其横竖屏切换的问题，使其显示更自由、灵活，更加注重界面的适应性和用户的体验。 3. 扁平化设计的应用扁平化设计并不是突然出现的，在过去

15、的一段时间里一直都有设计师坚持使用这种简约的设计风格，直至拟物化设计趋于饱和，扁平化的优势才得以显现，越来越多的设计师开始使用。在网页设计方面，最初网页更倾向于用仿真的界面设计给用户带来视觉冲击，从而吸引用户的注意，但是伴随着 web2.0的出现，更大的信息量和更复杂的交互产生，网页的内容就显得更加重要，不需要界面设计来喧宾夺主5。欧洲的一些设计师的个人主页就很喜欢使用扁平化的设计风格，他们喜欢个性化的表现方式，独具一格的视觉呈现，并且简洁的界面设计可以很好的衬托内容，通过良好的颜色搭配和设计布局，反而显得更有质感也更能突显出设计师的个人功底。 图 2 开始界面 98 软件界面设计方面，微软界

16、面的集体革新无疑是一个最好的例子，微软可以说是第一个大规模采用扁平化风格的案例。从它的 Logo、win8及 office2013等，几乎所有的产品都采用了 Modern UI风格，在设计界掀起了一股扁平化的设计风潮，而它的出现不止是一种设计风格，也说明设计越来越注重用户的需要，坚持以人为本的设计原则，以给用户提供方便、快捷的生活、工作环境为最终目的。 移动端界面设计方面，不仅苹果公司开始抛弃钟爱的拟物化设计，谷歌公司也有了很大的尝试，在 2011年 10月发布的安卓 4.0版本的设计规范里就有提到， “中性，平面，简洁。使用单一的视觉隐喻，使用户可以很容易地识别和理解它的目的。 ”6这说明，

17、安卓也渐渐走向了扁平化的道路，并且相较于网页，人们在使用移动端获取信息的时候，更加需要扁平化的设计。因为移动端的屏幕有限，简洁、干净的扁平化界面能让人们准确的获取信息减少信息障碍，并且人们在使用移动端时层级结构扁平化的呈现方式能使更多的信息同时展现在人们的眼前，也更加符合人们的需求。 目前，国内的设计行业越来越受到重视，人们对设计的要求也越来越高。一些设计师、公司开始了扁平化的尝试，包括腾讯体育、新浪首页还有刚刚改版的京东商城等，很多我们日常使用到的网站，都在慢慢的发生变化，开始使用简洁的表现方式，更加注重信息的排版和交互流程，去掉了复杂、毫无意义的界面元素，给用户带来了焕然一新的视觉感受也获得了大家的认可。但是在提倡简约的扁平化表现形式的同时要注重细节和人的因素，避免在减少形式的同时，漠视了功能，造成冷漠、缺乏人情味的弊端。 4. 结论随着产品类型的不断增多和用户需求的不断增加，必须出现新鲜的设计语言来满足产品和用户多样化的需求。人们生活节奏逐渐加快，对信息的传递要求精确，并且目前消费者的视觉环境充斥着各种繁杂的设计，显然拟物化以不再受到人们的追捧。此时，界面简洁、调理清晰的扁平化设计更能符合人们的口味。它秉承以人为本的设计原则，注重产品的功能，具有全新的交互体验模式，目前拟物化设计已经接近饱和，全新的扁平化设计将顺应时代的潮流，在今后的一段时间里成为界面设计的主流风格