浅谈UI设计中“扁平化设计”的运用和发展趋势
——以IOS UI为例

杜翔宇 （徐州工程学院艺术学院 221008）

浅谈UI设计中“扁平化设计”的运用和发展趋势
——以IOS UI为例

杜翔宇 （徐州工程学院艺术学院 221008）

作为移动应用端上流行的UI设计风格，“扁平化”设计理念目前在UI设计中得到了广泛的应用。基于这种认识，本文对UI设计中“拟物化”“扁平化”设计概念和内涵进行了分析，然后以IOS UI 为例对“扁平化设计”的运用方法展开了研究。最后，本文则对UI设计中“扁平化设计”的发展趋势进行了探讨，以期为关注这一话题的人们提供参考。

“扁平化”；“拟物化”；UI设计；运用方法；发展趋势

所谓的UI，其实就是用户界面的英文简称。就目前来看，UI设计风格可以划分为两种，即“拟物化”和“扁平化”设计风格。而“扁平化”设计理念在IOS UI上的成功运用，使得该种设计风格为人们所熟知，并且逐渐成为了一种获得大众认可的设计风格。因此，相关人员有必要对UI设计中“扁平化设计”的运用和发展趋势展开研究，以便更好的运用该种设计理念。

一、UI设计中“拟物化”“扁平化”设计概念和内涵

（一）“拟物化”设计

所谓的“拟物化”设计，其实就是一种强调模拟实物质感、明暗和材质等特性的界面设计理念，可以在实现交互的同时进行现实操作形式的模拟。采取该种设计理念，可以实现富有感性化色彩的交互设计，能够帮助人们凭借经验尽快学会操作界面。以ibook这一交互界面为例，其从视觉效果到感官手势都对真正的书籍进行了模拟，甚至实现了对翻书声音的模拟，能够给人带来更具趣味性和亲和力的界面操作体验。

（二）“扁平化”设计

“扁平化”设计其实是一种摒弃一切装饰效果的设计理念，可以借助简单直接的方式进行事物和信息的展现，可以避免用户对界面产生过多的认知障碍。从特点上来看，“扁平化”设计以简约为核心，追求层级优化。

1.以简约为核心

以简约为核心，就是对透视感和光影效果进行摒弃，从而使设计元素变得符号化和抽象化。在这样的界面上，所有元素都拥有鲜明的形状和边缘，效果如同将所有元素“拍扁了”。如同中国水墨画，“扁平化”设计注重留白，以便通过增强界面主体内容存在感使人体会简约的魅力。

2.追求层级优化

Synthesis and crystal structure of 10-phenyl-6,7,8,10-tetrahydro-cyclopenta[b]pyrrolo[3,2-f]quinolin

近年来，互联网终端开始变得多样化，其使用场景也越发复杂，从而使用户对界面操作失去了耐心。信息层级优化则是“扁平化”的一大特征，其实现了信息从属层级关系的简化，突显的都是与核心内容相关的交互元素，能够帮助用户尽快获得需要的信息。而这样的设计不仅能够提高用户操作效率，还能够体现对用户的关怀。

二、以IOS UI 为例探讨UI设计中“扁平化设计”的运用方法

（一）IOS UI设计中由“拟物化”到“扁平化”的演变过程

相较于“拟物化”设计，“扁平化”设计无疑是性的设计风格，是目前得到广泛争论的设计形式。自从苹果公司进行IOS7的推出后，其UI设计就开始由“拟物化”向“扁平化”演变，从而使扁平化设计风格在移动端的操作系统中得到了推广应用。如下图1所示，为iPhone IOS6与iPhone IOS7的对比图。从视觉效果上来看，IOS7的色彩显得更加艳丽，图形也更加简约，实现了抽象化表达。比较“拟物化”和“扁平化”的IOS UI界面可以发现，拟物化系统仅仅是进行事物表面的模拟，并未进行内容的延展，并且也缺乏想象空间。在看图的过程中，受众虽然能够较快接受，但是很难进行延伸拓展。所以，刻意进行交互界面的“拟物化”设计，将导致界面的操作效率遭到降低。随着数码的普及应用，人们对产品的使用要求显然发生了变化1。但是“拟物化”设计的审美追求显得单一，所以无法满足人们的审美需求。而扁平化设计可以实现多余装饰的剔除，可以帮助用户排除复杂图标外观的干扰，将注意力集中在软件功能上，从而使用户可以尽快获得想要的信息。因此，IOS UI的“扁平化”设计已然成为了一种设计风格，可以引领UI设计潮流。

图1 IOS6与IOS7比较图

（二）简约图标的设计运用

在移动应用客户端上，设置图标的目的就是为了帮助用户识别各软件功能，所以图标的美观性并不是最主要的设计考量因素。根据“扁平化”设计理念，在设计图标时就应该进行简约图标的运用，从而引导用户关注软件的功能。在IOS UI的“扁平化”设计中，使用的图标具有明显的“扁平化”特征，其组成元素未添加斜面、渐变、羽化和阴影等修饰，仅仅使用简单到极致的单色块组合，从而使图标和按钮等界面元素得到了简化。如下图2所示，IOS7中各图标基本形都由几何形与几何形或曲直线与几何形构成，如指南针、相机等，表现方式比较简练。而利用简洁的线条实现图形的高度概括，则对设计师有较高的要求。因为，在进行简单图形设计时，设计师必须要实现事物图形特点的高度提炼，需要达到使用户一目了然的目的，从而使用户适应信息和接受信息的时间得以减少。

图2 IOS7图标

（三）鲜活色彩的设计运用

将不必要的装饰放弃后，就只剩下形状和色彩。所以，“扁平化”设计十分注重色彩的设计和运用。从IOS UI设计来看，IOS7显然具有色彩鲜艳、明亮的特点，与其他采取“扁平化”设计的UI在色彩上具有相似性。如下图3所示，IOS7界面色调拥有丰富的层次，色彩之间的搭配十分和谐温和。利用多用色块和单纯颜色配合，则给人带来了干净、清晰的感受，也能够使界面各种关系得以清楚的表现出来。在应用软件界面上，IOS UI使用的是单色调，可以给软件带来一个系统视觉主题，从而使整个操作界面拥有统一协调色彩，继而使界面显得干净和简洁2。比如在IOS7通讯APP中，统一使用白色和绿色组合。对于使用者来讲，经过长时间交互，用户会形成固定思维，认定白色和绿色组合为通讯，从而迅速完成图标的查找。之所以进行单一主题色的确定，则是为了缓解UI界面中过多元素组成给人带来的负荷感。在IOS UI的“扁平化”设计中，仅仅依靠不同纯色块的相互配比，就可以利用简单的纯色进行良好视觉效果的营造。

图3 IOS7色彩搭配

在IOS UI的“扁平化”设计中，所有的视觉元素都保持着简单、自然的特点，其字体排版与界面风格一致，也体现了简约和自然的设计理念。在界面排版方面，采取“扁平化”界面可以进行重要信息的突出，并且将次要信息隐藏起来，从而为用户提供需要传达的关键信息。如下图4所示，IOS7界面将次要信息隐藏在下拉菜单中，利用简单的信息布局为用户浏览界面提供了便利，同时也有利于用户观察全局信息，因此可以使用户的满意度得到提升。而在字体应用方面，界面中较为重要的字体明显要更大一些，从而达成了突出文本的作用。同时，所有元素都有统一参照物，并且有规律的放置。此外，IOS UI界面上的文字中贯穿着标点，使得文字显得简洁且并不突兀，可以起到帮助读者理解文字的作用。为更好的实现信息传递，苹果公司推出的IOS9甚至采用了全新字体方案，为用户打造了新字体3。目前，该种字体被称之为苹方，具有清晰易读的显示效果，并且能够为简体、繁体的切换提供支持。相较于之前的字体，该种字体拥有清晰棱角，更容易阅读。

三、UI设计中“扁平化设计”的发展趋势

（一）适应性不断增强

随着互联网终端的复杂化发展，“扁平化”设计的适应性也将不断增强。近年来，移动终端的尺寸、界面分辨率都在不断改变。而采取“扁平化”的设计方式，则能够为不同分辨率屏幕提供良好的界面支持，能够使小图片和高分辨率之间的矛盾在一定程度上得到化解，所以能够为用户提供拥有更好显示效果和更高适用性的界面。因此在大屏时代，“扁平化”设计能够更好的适应时代的发展需求，并且也能够为小屏终端UI设计提供更好的途径。此外，使用“扁平化”设计元素，占用的存储空间也较小，能够确保终端运行的流畅性，从而使用户获得更好的体验。所以在UI设计中，“扁平化”设计的较强适应性在未来将得到更好的体现。

（二）结构轻量化发展

信息化时代的到来，使得人们的生活中充斥着大量的信息碎片，从而给用户浏览操作带来了较大的负担。实现信息结构的轻量化，则能够使用户的操作逻辑更加清晰，从而使用户能够更轻松的进行信息获取。所以，随着时代的发展，“扁平化”设计将进一步实现信息结构的轻量化。通过使信息层级变得“扁平化”，则可以使内容本身得到强化，从而减少用户因理解信息结构和逻辑花费的成本，因此能够使用户获取信息的距离得到缩短。例如，百度手机助手的浏览页面设计就使用了半层弹层这种“扁平化”设计模式，从而通过简化信息框架增强了信息的存在感，为用户带来了更为轻松自然的操作体验。

（三）更符合大众审美

无论是从文字发展还是绘画发展角度来看，人们在最初发展阶段都是追求写实模仿。而当实现了极致写实之后，人们就可以使进行抽象文字和抽象绘画的探索。UI界面设计也是一种艺术形式，其发展也将尊崇这一规律，从而更好的满足大众的审美需求。所以，尽管“拟物化”设计受到了人们的喜爱，但是“扁平化”设计必将会成为一种潮流4。随着数字产品审美趋势的变化，“扁平化”设计也将进一步借助自身优势取得审美上的突破。在生活中充斥大量炫酷的拟物效果的背景下，“扁平化”界面将凭借其简洁、质朴、大方的特点给人带来全新的感受，从而使人们的审美疲劳得以有效缓解。

（四）更注重用户体验

从根本上来讲，UI设计追究的就是给用户带来更好的体验。而“扁平化”UI设计同样需要追求为用户带来更好的体验，同时也并非是完全依靠想象得到的，其也是拟物的，但更加抽象化。所以，为增强用户体验，还要在“扁平化”设计的基础上进行效果元素的添加，从而使界面元素的辨识度得到提高。IOS8界面之所以引起较大的争论，就是由于其过度“扁平化”，却忽视了给用户带来的体验5。因此，相信随着设计师对用户体验的重视程度的加深，“扁平化”设计也将达成提升用户体验的UI设计目标。

四、结论

凭借简约和信息透明化的优势，“扁平化”设计方式在UI设计中得到了广泛的应用。而随着信息时代的到来，这种优势将更加明显，从而使其获得更好的应用前景。

注释：

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

2.陶薇薇,张小玲.UI界面中扁平化设计的原则与技巧[J].科技传播，2014（13）:176+155.

3.卜祥维.关于UI扁平化设计在移动终端的应用与价值探究[J].戏剧之家，2014（13）:161-162.

4.王凡,黄迅.探析扁平化Metro UI设计与“少即是多”设计原则的相关性[J].包装世界，2015（2）:92-93.

5.徐亚非,王勤勤.“互联网+”时代下的UI设计发展趋势[J].艺术科技，2015（9）:204+236.