扁平化风格在交互产品设计中的应用

税梦瑶

以研究扁平化风格在交互产品设计中的应用为目的。通过分析扁平化风格两大表现形式：框架形式简洁化、功能操作便捷化，提出扁平化风格在交互产品设计中的方法，应从扁平化图形、排版、色彩三方面入手，结合产品市场和用户需求，以实现产品功能为目标，最终实现视觉美学与功能便捷双重优秀的产品交互体验设计。

近年来，扁平化风格在产品交互设计中的运用越来越广泛，成为交互产品设计中的一种视觉表现风格。扁平化风格完全采用不加任何视觉效果的平面元素进行设计，摒弃投影、渐变、浮雕、凹陷等三维视觉表现形式，力求营造简洁、无干扰、直接的视觉效果。

扁平化风格的表现形式

1.框架形式简洁化

框架结构的规划是产品交互设计中非常重要的组成部分，结构的设计是否具有逻辑性、是否流畅合理，是否符合产品定位和用户需要，对于产品交互设计的后期延展具有举足轻重的作用。扁平化风格在框架结构和形式设计上最大的特点就是简洁化，主要体现在界面形式简洁、界面层级简洁两方面。

2.界面形式简洁

界面形式简洁是扁平化风格的一种视觉特点。互联网的快速发展导致用户在使用产品过程中浏览信息的可选性增加，耐心减弱，如何在最短时间内突出产品重要信息和内容，是产品取胜的关键。扁平化设计正是通过图形、图标、色彩、字体的合理简洁搭配和使用，形成具有产品特色的统一视觉效果，从而把重点信息放在第一位，便于用户第一时间关注和识别。在满目三维效果越来越逼真的当代设计环境中，一款优秀的扁平化设计犹如清新的微风，能满足信息有效阅读的同时，还能带给用户轻松的浏览感受和使用体验。

3.界面层级简洁

由于网络技术的提高和普及，人们使用手机进行产品交互界面操作的时间增多，但其大部分由零散的时间构成，因此手机交互产品的界面层级应以简洁设计为主，简单的菜单层级可以节约打开界面时使用的网络流量和时间，减少用户的等待焦虑，给用户提供一个流畅的浏览环境。扁平化风格在设计中使用模块化的构成元素所占空间较小，同时单页界面的展开很大程度上也减轻了用户的视觉浏览负担。常用的一种层级设计方法是“灌木型层级设计”，将产品界面中的最基础层级信息置顶，删减需求量较少的中级层级信息。由此得到的层级设计，界面叠加层次少，用户访问路径较短，用户返回主界面层级较快速，普及和操作便捷。

功能操作便捷化

产品的功能要通过操作来实现，因此操作设计便捷化是产品交互设计的另一重点。用户在友好便捷的操作过程中体验、了解产品信息，实现使用目的。但目前，不少交互产品由于功能设置过多，或功能叠加过度，操作步骤过于繁琐，导致用户体验不友好，使用过程不能体现设计师的意图，因此扁平化风格的设计成为便捷操作的一种设计途径。

1.操作引导便捷

界面吸引用户好奇心并激发用户尝试体验操作是产品交互设计的一项重点。产品的引导页设计成为招揽用户的门面，要求既有设计感、趣味感，操作过程又不能繁琐。目前很多新闻类产品的交互界面在引导页设计上，信息放置过度，造成界面内容庞杂，视觉重点不突出，用户浏览容易疲倦等现象发生。扁平化风格的引导页界面设计，网格化布局干净、结构有条理，无装饰风格的图片和图标搭配简洁的文字说明，带给用户一种清新、明确、简约的指引性视觉体验。

2. 操作反馈明晰

用户在使用过程中遇到错误操作，或某一操作动作结束后，操作是否成功等一些情况时，需要产品交互设计提供反馈信息这一步骤。良好的信息反馈占用时间少，占用界面空间小，视觉效果不突兀，不会让用户感觉焦虑。如图1是某一网页等待界面设计，界面背景采用儿童画手绘图形，排列乱中有序，前景采用扁平化的矩形缓冲条造型，用户在提交某一操作后，借助缓冲条可以减缓等待时的焦虑。

3.操作更新便捷

互联网线上线下产品信息的更新是否快速便捷，是产品设计前规划定位的一大思考要素。不少交互产品在设计时过于注重复杂、绚丽的表现形式，造成产品信息更新速度较慢，成本较高的局面，而扁平化风格设计的另一优势是成本低、更新快，由于构成扁平化风格多为无装饰效果的平面构成元素，因此在产品界面风格和信息的更新上，设计元素改变较便利，界面变换灵活，效果明显，使用时间少，这也成为很多交互产品公司选择扁平化风格的重要原因之一。

扁平化风格在交互产品设计中的方法

在产品交互设计中，扁平化风格元素的使用主要从图形、色彩、排版、字体几方面体现。

1.扁平化图形运用

扁平化的图形设计与三维图形有很大差别，但设计方法和审美要求都必须符合市场和用户心理标准。在具体设计上，要求图形要在深入研究产品特征的基础上，高度提炼产品和所要传达的信息形象，除去各种装饰手法、用直接概括的视觉语言塑造形象。图形语意要明确，必须符合大众的生活认知，识别度较高。

如图2是某一产品的网站调研数据界面设计，产品通过两种颜色划分矩形画面，让扁平化的界面产生视觉对比，界面所使用的饮料、蛋糕和人头图形，图形设计摒弃凹凸、纹理、阴影等效果，用最简洁的笔画概括调研内容，搭配左侧简练的文字，突出图形信息重点。

2.扁平化版式运用

越是简单的设计越体现设计师的功力。比如留白的版式设计，仅用黑白两种对比元素就能设计出的强烈的视觉美感，在白色的背景上，黑色的文字既是信息，也是一种黑色的视觉符号，通过点线面的不同组合、排列，形成或错落、或整齐、或异形的不同画面，给人以韵律感。扁平化版式设计，应以突出重要内容为主，排版上注意信息的主次之分，通过调节文字与图形、线条等其他元素之间的行间距、字间距，让所有组成元素无形中成为画面中的点和线，传递出动静结合、强弱有序的节奏感。

3.扁平化色彩运用

介于产品交互设计中扁平化图形的设计极为简练，在界面视觉效果上想要突出重要信息的话，另一设计方法就是合理运用扁平化色彩。产品交互设计中的扁平化色彩运用要求配色饱和度和色调尽量统一协调，常用饱和度高、明亮的单色为主。另外，扁平化色彩也常用到复古色作为配色，这类色彩饱和度较低，但因为将纯色与白色相结合，使色彩视觉感受更加柔和亲切，富有女性的柔美。近年来，扁平化色彩的同色使用较为流行，常常用某一单色搭配黑色或白色，从而创造出富有视觉冲击力的界面效果。如图3是手机某款基础功能界面的扁平化配色方案，界面采用蓝色为基础色，搭配黑白两色文字，形成视觉效果对比。

结论

扁平化风格的应用既是视觉设计语言的兴起，也是设计思维方式的改变。最大的优势是将产品信息和操作原理以最直接简练的形式展现给用户，减少操作体验过程中的出错率。为了完善市场上各类型号和功能的产品交互界面需求，应当将设计重点放在产品交互界面的功能实现应用上，扁平化风格的兴起和推广，也应该立足于此，将优秀的交互体验、便利的识别、流畅的操作、情感的传递、舒适的视觉效果等设计标准融汇于其中，最终实现视觉与功能双重优秀的产品交互体验设计。

（作者单位：攀枝花学院艺术学院）