当代交互界面设计领域的扁平化设计界面研究

陈雯璐

【摘要】：通过分析当代大数据技术在交互界面设计中对其设计范围、设计理念与设计方法三个方面所产生的广泛影响，提出扁平化设计在当代交互设计领域中迥然于拟物化设计的创新特征与方法，包括抽象细致的设计编排和丰富的配色体系，简析了扁平化设计在交互界面设计中的创新功能抽象化表达的视觉形式，为交互设计界面按扭设计提出合理化建议。

【关键词】：交互界面；扁平化设计；按钮；创新趋势

在当代交互界面设计领域中扁平化设计已经成为主流视觉表现形式，交互设计长期以来一直遵循着以用户为中心（User Centered Design，UCD）的设计原则，在设计的每一个阶段中都围绕UCD，运用线框、层级形式进行辅助设计。

在交互界面中的按钮研究其学术名称应称为：设计优秀和有效的行为召唤。

一、扁平化设计的定义

扁平化的视觉表达是一种极简主义风格，和拟物化设计理念相左，基本上抛弃了所有 3D 效果，比如投影、渐变、织体和贴图、或者各种增加实体的效果，转而重心放在简单化的元素、字体形态以及“扁平”的颜色（大意就是去掉渐变和装饰）上。进入 21 世纪以来越来越多的设计师们看好它简洁而高效的界面，因为 Flat Design 能更加快速传达内容信息，而且视觉设计上更加平易近人。另外，比起拟物化设计，它更容易适配于各种不同尺寸的设备和做成响应式，并且更好保持原样不失真（因为基本上是矢量元素）。

二、交互界面中的设计要素

就交互界面设计而言，视觉表现形式是为了更加人性化的用户体验。有的扁平化界面设计按钮设计不够突出，就做不到有效的行为召唤，那是全局设计有相对应的问题，而全局设计在界面当中包含了对比（颜色对比，大小对比，位置对比）、上下文的衔接（转换场景按钮）、文案（各种短语活动口号或者识别度高的icon）、各种反馈（填写校检、悬停状态）；最后一点，也是最重要的一点，代入感情色彩的表达，称之为“有爱”表达。以上几点如无做到位，就算按钮再“突出”，用户也没有点击欲望。

同一界面中的非扁平和扁平化对比，在IOS7中虽然扁平化了的键盘摒弃了各种渐变和材质的视觉元素表达，但是视觉上的灰白键盘也是有阴影的。在界面设计上采用不同于过去拟物手法的传统型设计方后之后，很好的剔除不必要的干扰因素，使视觉上变得更为抽象和简练。扁平化的抽象设计元素可以满足创新功能的需求，突破拟物化设计形式在功能上的诸多限制。

数据时代的远程交互

当今时代也是一个大数据时代，所有的信息和数据通过电子产品进行统计数据上传到云端汇总再进行分析再分类，也就是说我们的计算机正在全面代替人力做人类日常的生活需求进行高度概括的分析工作。从传统的以用户心理模型为中心的设计理念正在悄无声息的往多元化发展。逐步转变为更加宽泛的设计理念设定，包括由物-物交互（产品的可识别语言）、人-机交互（用户体验）在内的框架式模型空间设定。利用大数据技术的优势，将交互设计推向新的历史发展阶段，与当前科技发展齐头并进。与此同时，产品信息的资料获取的即进性有利于设计前期繁冗调研工作的简化，从而得出更为科学准确的数据，为设计决策提供确凿的依据。

大数据与扁平化的结合优势

扁平化设计有鲜明的图形对比较果，给人深刻的印象和强烈的视觉冲击力。它去除了多余的装饰，画面纯粹简单、干净利落。在有限的交互界面中，各个设计元素之间的关系分明，层次清晰，版式布局严谨，能够让用户以最直观的形式看到每一个元素符号，并理解它所代表的功能作用和使用方式。就是这样一种新颖的纯粹的强烈的视觉形式和设计理念，彰显着与众不同、别具一格，信息直观传递的视觉优势。

1、创新功能抽象化表达

自苹果公司ISO7以全新扁平化视角进入市场以来，越来越多的电子产商包括微软、安桌都跟风推风进行了扁平化设计风格的革新。从Window XP发展到Win7用了数时年的时间，也就是说长时间的推陈出新的过程当中我们只是把拟物化视觉表达做到了极致。如图所示，微软公司从九几年至二零一零年的图标变化过程中可以看到从简单象形到材质逼真拟物的过程。到二零一三年的时候，图标更替成了具有扁化特点的图标，抽象的概念的表达。

2、抽象化的设计美学

抽象化视觉形式的信息传递带给人最为直观有用的信息，减少了扰乱信息准确程度的各种装饰性干扰因素。让用户操作变得更为简洁明了、快捷方便。因而，在抽象的扁平化设计里，去除了逼真的质感，去除了纹理，简化了透视阴影之后。各项层次变得干净、清晰、直接。它用最为简单的视觉符号将各种功能、信息、操作方式高度简化表达，无需探索用户复杂微妙的心理感情变化，摒弃一弃视觉干扰障碍。可以说在创新功能的同时，这种无障碍性更有利于新型产品的操作应用推广。

3、信息传递的直观路径

“扁平化”可以理解为两层含义，一层是以色彩和图形无素为主要表达媒介的视觉形式；另一层指的是它的功能特性，具有大跨度、少层次的特征。有效缩短信息传送时间和间隔，进而提高信息与指令传达的效能。具有简单、直观、快捷、易用的特点。以扁平化的视觉表达方式取代过去以计算机语言和拟物化形式为主的动作模式，可以很好的在机-人、机-机、人-人进行无障碍转换。即以图形、色彩为主，简写文字为畏的表达方式来传递各种信息，成为一种人-人间能用的符号式语言。

三、扁平化设计的颜色搭配

扁平化设计中使用的颜色较为纯粹简单，极强的用颜色对比突出主体物，色彩运用较为大胆，通常使用鲜亮颜色，高饱和度高纯度颜色进能搭配，摒弃一切柔化、渐变的手法，以加强单纯的色彩对比来加强界面视觉冲击力。较传统视觉设计当中，一个画面通常控制不超过三个颜色进行搭配，而在扁平化设计中平均可以使用6～8种颜色搭配。

在扁平化视觉配色规则中，力求达到简洁、清爽的效果，通常以色调和饱和度相一致作为基本原则，色彩搭配也会跟随每年流行色的更替而改变。或是根据表达内容的不同而改变。例如，鲜亮的色彩反映出年轻、活泼、时尚的气质，尤其在亮色背景或是暗色背景中都可以达到理想视觉对比度，显得格外出挑，从而得到较高的吸引力指数。设计中还经常会使用到复古色与单一色。复古色，具有怀旧的情感色彩，是建立在鲜亮色彩基础上的不饱和色，通常和白色结合，复古色与白色的反差能够带给人以柔和舒缓的视觉效果。

结论

扁平化设计对于很多人来说都是一个新潮的名词，其明显的视觉特点也给交互设计师、用户耳目一新的感觉。它的简单直白让人视感觉豁然开朗。但它受追捧并不仅仅因为他是潮流的代表，更重要的是它是交互设计和科技化相结合的一个数字时代的必然产物。扁平化设计为智能领域提供了更加直接的功能运用，为数字发展提供了更多的可能性和便利。扁平化设计摒弃了拟物化的质感坚持至简至纯的内在本质。可以说，扁平化设计始终以功能优于形式为准则。

参考文献：

[1]韩晓墨. 继承与发展并重——论扁平化设计的席卷[J]. 现代装饰 （理论）， 2013， 7： 072

[2]张芸. 扁平化设计在网页上应用的优势[J]. 艺术科技， 2013， 26

[3]宋方， 金锦虹， 逯新辉. 析 “扁平化” 手机界面设计[J]. 包装工程， 2012， 14： 60-63

[4]崔天剑，现代设计的形式意味 艺术百家， 04期（4）， 178-180.

[5]崔天剑，徐碧珺. 大数据时代扁平化设计趋势研究[J]创意与设计，2014.03

[6]崔天剑，董甜甜. 当代交互设计的扁平化研究 [J].包装工程，2014.09

[7]于凤阳. 福田繁雄视觉传达设计中的创作方法研究 [J].文艺生活，2015.04

[8][英]诺伯特·林顿. 现代艺术的故事 [M]. 广西美术出版社，2012.09

[9]马娜娜. （2013）. 简洁而不乏味——浅谈扁平化界面设计. 大众文艺：学术版， 16期

[10]徐云飞. （2014）. 被误读的扁平化設计趋势. 美术教育研究， 06期， 66-66

[11]夏燕靖. 中国设计艺术史 [M]. 沈阳 辽宁美术出版社，2001

[12]张贝， & 方卫宁. （2013）. 扁平化风格界面设计的探讨. 2013国际工业设计研讨会暨第十八届全国工业设计学术年会