扁平化设计在UI设计中的运用方法

沈强

摘要：近年来的界面设计风格在不断变化，设计师们的个人喜好和倾向性以及网页设计趋势方面的话题一直争论不休。扁平化设计无疑是当前讨论最多、最火的设计形式，自ios7面世以来，更是将扁平化设计的讨论推向风口浪尖。生活中处处可见扁平化设计作品，比如苹果手机，采用棱角分明的线条，加上苹果的部分应用界面，单色鲜明的对比，非常大气。扁平化设计为网站设计注入了新的活力，打开了新的格局。因为设计元素简约、直观，从很大程度上提高了网站的加载速度，使其收缩弹性也具有绝对优势。不仅如此，设备屏幕的分辨率效果也在不断提高，这就要求图案应向简洁明快方向发展，直观简约的图形与文字在设计中可以节省不少时间和精力。时至当前的网站设计领域，扁平化设计的概念已经家喻户晓。随着设计行业的不断发展，扁平化设计已摇身一变成为时代的新宠，成为新时期设计风潮的引领者。本文简析了扁平化设计与UI设计的概述，探究了扁平化设计的优势，并指出了扁平化设计在UI设计中的运用方法。

关键词：扁平化设计 UI设计 特点 运用方法

中图分类号：J0-05 文献标识码：A 文章编号：1008-3359（2017）14-0157-03

提到扁平化设计，就不能回避拟物化设计。扁平化设计与拟物化设计的不同之处在于其不去着力制造出透视感的效果，只凭借概念性、简约、象征性的设计语言进行呈现。扁平化设计是一种简约的UI设计理念，被广泛应用于图形和用户界面上。在图形媒介，例如海报、艺术作品、指导文档、各类出版物等方面尤为常用。扁平化界面干净利落，色块形状规则，字体清晰、一目了然，颇具现代风韵，给人留下无限的想象空间。这种设计把交互的重点放在了功能本身的应用方面，因此繁杂的界面与不必要的交互因没有了存在的价值而被淘汰。扁平化设计强调对于三维效果图像元素使用的最小化，包括阴影、渐变和纹理的弱化，使画面看起来显得更加平滑，信息处理的效率也会更高，同时可以提升网页的性能。扁平化设计的特殊性在于其层次与其它的元素排列工整，且不会出现交叉，前后景画面、控制区、字体等不存在明显的分界。扁平化设计之所以受到大家的青睐，不仅在于其明朗的层次结构，也和它清晰的元素布局分不开，因此在用户解读产品和交互的过程中，扁平化设计的作用不容小视。時至今日，扁平化设计已受到了诸多网站的拥护，并且这一现象还呈现出向App与移动设备蔓延的趋势。如果屏幕不大，也没有名目繁多的按钮与选项，扁平化设计就得以大显身手了。不过，简单的元素并不等同于不费吹灰之力就能完成设计，事实上，扁平化设计同其他设计理念一样，都属于复杂的系统工作。扁平化设计风格在UI设计中的运用，起初是受到了国际主义平面设计风格、现代主义以及包豪斯新兴风格的影响。

一、扁平化设计与UI设计的概述

就外行人看来，“扁平化设计”不过是一种设计风格的名称，它化繁为简，在各行各业都以突显3D效果为使命的潮流下反其道而行之。简单来讲，扁平化设计就是不力求营造出常规的效果。设计师们之所以会对扁平化设计赞赏有加，主要得益于其清爽明朗的风格，充满了浓重的现代化美感，加之有助于设计师把关注点放在核心内容与信息要素的呈现方面。通过应用扁平化设计出来的作品即使放到十年之后依然能够夺人眼球，因为它让界面看上去干净大方。这种设计方法最早出现于上个世纪初期，时至今日仍活跃在有关设计的各个领域。即便扁平化设计在网站设计与其他艺术品设计中的应用由来已久，但它始终处于默默无闻、名不见经传的状态，直到其在微软与苹果等相关产品设计的应用，才逐渐从幕后走到台前，广为人知。然而扁平化设计也并非绝对完美，很多缺陷在数字世界表现得尤为明显，诸如摒弃了不可或缺的线索要素，用户不能确定某个按钮有没有接收到指令。

UI设计涵盖了对系统的人机交互、操作模式、界面效果等全部建构过程的总称。UI设计的目的主要在于两方面：一方面是让系统向着个性化与内涵化方向发展；另一方面是为了让系统便于操作，具有明确的定位与鲜明的特点。

UI设计有用户体验师、交互设计师、视觉设计师、前端设计师等分工。用户体验师需要采取多种途径去获知用户对体验和界面的想法、需求，然后以此为依据对所设计的项目进行相应的建构与谋划。每个项目的交互环节都由专门的交互设计师来完成，每个部分所不可或缺的产品原型便由此而来，并研发适应用户体验的诸多设计决策，这其中不仅涉及到任务流和单独的页面交互，开展评测与商讨等也包括在内。视觉设计师负责各种界面的视觉设计，根据品牌形象和用户定位设计界面，完善交互设计，准确无误地呈现出视觉效果。前端设计师主要通过代码保证产品功能最终实现，为设计提供有力保障。

二、扁平化设计的优势

（一）便于信息有效传达

扁平化设计是一种视觉设计风格，不仅适于电子产品的UI设计，也适用于一般的海报、册子、宣传画等传统印刷载体，同时广泛应用于2D平面设计，它更多是着重于视觉传达，与人机交互的关系并不是那么紧密。当今AR技术可以将虚拟物体叠加到真实世界，融合并进行互动。不过要以复杂的真实环境作为“背景画布”，UI的设计则要重点考虑如何更好地呈现信息，便于浏览与交互。那么扁平化设计的优势就体现出来了，即：更好地呈现内容和数据，避免过多视觉元素对信息辨识造成干扰，适用于透明化的效果，便于用户观测外部环境。

（二）布局明确

目前很多扁平化设计都是基于UI技术（如 Hololens），可以对空间进行重构，这也让扁平化设计在UI设计中的运用从传统2D平面转为3D空间，从XY轴变成了XYZ轴。这也使得虚拟的数字内容，更多地都将以3D模型的形态呈现。UI的风格可以是扁平的，但是UI当中的内容其实也可以立体的、拟物的、丰富的，人与内容的交互也可以是立体的。手机产品设计中对于空间的应用，能让布局更加明确，使人们意识到扁平的设计也可以是立体的。Google的Material Design 其实早就引入了Z轴的概念，将整个场景立体化而不局限于平面。通过不同的层级位置，去影响视觉的显示效果。

（三）满足用户需求

不谈用户需求，只谈设计，就是闭门造车。不同的设计风格，适用于不同的产品。即使是在扁平化设计大行其道的今天，还有很多应用仍在使用拟物化设计，比如追求画面写实的游戏。所以说，设计风格并不受使用设备和技术的约束，而是取决于应用的场景。设计风格的明显变化是由人们的生活方式决定的，因为人们的生活节奏在变快，所以希望一切变得更简洁，就像人们的阅读习惯变成了更喜欢微信、微博这种简短的文字，而扁平化设计的出现正是迎合了大众的这种需求。这是一个时代的要求，不管我们是否喜欢这个风格，但它是最适合当下人们的生活方式的。

三、扁平化设计在UI设计中的运用方法

（一）谢绝特效

极简的风格决定了扁平化设计要谢绝一切特效，仅采用二维元素。从图片框到按钮，再到导航栏都干脆有力，所有元素都被“压扁”成一个二维的符号，凡是与特效有关的构想都要扼杀在萌芽状态，扑朔迷离、琳琅满目的透视效果也通通拒绝。平铺直叙、2D、简约化设计风格，是扁平化设计的心头之好。扁平化设计概念最喜欢删繁就简，那些风极一时的装饰效果它都不屑一顾，哪怕是逼真、立体、高端大气上档次的3D效果也难俘获它的芳心。一言以蔽之，就是彻底的谢绝特效，特效没有用，一切都靠简单。

（二）使用简洁风格的元素和图标

所有应用扁平化设计风格的网站或者手机界面，界面元素都避免浮夸、花哨，力求简单，给人清爽、干净、平和朴实之感。每一个按钮或者图标，都是设计师们极简思维与设计智慧的集中体现，但这也并不意味着具象的图标就变得凤毛麟角，然而目光所及之处还是那些简单的形状占据了更多的视力范围。简洁风格的元素和图标使扁平化这种设计风格给人更具大气的感觉，不因外形花哨而乱花渐欲迷人眼，却也因骨骼清奇、以简唯尚而成为设计中的一股清流。

（三）用色考究

了解配色基本原理的人都知道，一个页面最好不要超过三种以上的颜色。颜色配的好不好、正确与否，都是用户是否愿意停留在界面的关键因素，因为颜色会给人第一个感觉，感觉不好细节都懒得看了。为了弥补视觉元素的单调，扁平化设计极为重视色彩的使用，无论是从色彩的色相、明度还是纯度上来看，它要求最终的呈现一定是舒适、有活力、充满现代感和趣味性。

（四）精巧的排版

优化排版，使用特别简单的元素，排版就成了很重要的一环，排版好坏直接影响视觉效果，甚至可能间接影响用户体验。设计师要尽量简化自己的设计方案，避免不必要的元素在设计中出现。简单的颜色和字体就足够了，如果还想添加点什么，尽量选择简单的图案。虽然扁平化设计风格去除了诸多视觉元素，但这并不意味着它令界面变得毫无美观可言。扁平化设计对界面的排版有着极高的要求，也正因为如此，它看上去简洁干净的界面变得精巧细致又充满了潮流感。

（五）极简风格

极简是扁平化设计的灵魂，它是指导扁平化设计必须满足以上四个要素的核心。设计者可尽情以自己的风格来选择其所要使用的元素、颜色和版式，但这一切的最后呈现必须要满足极简的特点。其实最初的数码显示界面都是扁平化的，后来才开始拟物化，发展至今又回归到扁平化，这种回归是很理性的，因为扁平的图标其实更容易识别。扁平化的回归可以认为是人们通过归纳总结世界后得出了“需要简约”这个答案后的一个选择。

四、结语

总而言之，好的设计不能只是在目光所能及的表面上下功夫，它应该是包罗万象、涉及到表达的途径等多个领域的。不考虑风格的因素，扁平化设计与拟物化UI设计的最初目的都指向于帮助用户提高阅读信息内容的效率，使用户体验的满意度实现最大化。拟物化设计憑借设计元素仿照生活中实际物体的轮廓与形态，使用户对产品的功能一目了然。而扁平化设计则不然，它改变了借助视觉元素传递信息的这一设计逻辑，把所要表达的重点放在内容上面，便于用户在短时间内更便捷地获取到自己所需要的信息。一切设计都要以面向客户的具体需求为出发点，扁平化设计在UI设计中的应用能够更好地解决问题，使设计的目的从复杂转向纯粹，力争使效率与内容达到更好的状态。

参考文献：

[1]孙明海，谭昊祥.扁平化风格在手机UI设计中的应用[J].设计，2016，（07）：34-35.

[2]杜翔宇.浅谈UI设计中“扁平化设计”的运用和发展趋势——以IOSUI为例[J].大众文艺，2016，（19）：74-75.

[3]林阳.UI设计中扁平化理念应用研究——创造平面功能化[J].艺术科技，2014，（01）：267.

[4]高鹏，杨正.论UI设计中的扁平化与拟物化[J].美术教育研究，2014，（10）：60.

[5]加瑜.扁平化设计风格在标志设计中的运用探析[J].美术教育研究，2014，（12）：57.

[6]任冬巧，杨春燕.扁平化设计在网页设计中的运用研究[J].大众科技，2014，（06）：4-5.