扁平化——以简约为核心的产品交互设计研究

许晓云　王一琳

摘要：如今的信息时代，计算机，手机等电子产品成为日常不可或缺的信息工具，而现代的信息产品不仅是一个孤立的事物，是较为完全贸易形式或者体系服务里的终端性产品，这个终端是否完备，不仅是决定此设计的自身，还涉及到了产品相关联的服务带给人们的完善体验。

从电子产品交互模式自传统的按键操作界面逐步转变成更直观显示在屏幕的触碰式电子交互界面。操作形式的转变使得图案的界面设计已经成为人们在使用产品过程时更为直观的视觉沟通方式。尤其在手机交互设计中，“扁平化”一词似乎瞬间成为潮流，更是年轻用户的掌上宠儿。

本文探索在越来越讲求情感化设计的今天，摒弃拟物化为何还能成为交互设计的流行趋势。

关键词：交互设计 扁平化设计 体验 传达

中图分类号：TB47

文献标识码：A

文章编号：1003-0069（2015）10-0080-02

一 扁平化设计的背景

在多学科的交叉研究越来越重视的大环境下，交互设计出现在产品设计的领域、视觉传达专业、人机工程方面、认知心理学、社会和人类自然等科目交叉范畴，是一门新型的解决如何使用信息化产品的设计学科。

在国外，众多交互设计的研究机构和企业在人才布置上也表现了它多学科的特质，麻省理工学院的媒体实验小组成员就均由有着各种学科背景的英才构成。为了探索利于不同学科背景的协同合作方式和手段，2008年，清华大学同样初次启动了信息艺术设计交叉研究生项目。

在多学科大环境下更有利于我们理解交互设计中的扁平化。即交互不仅是屏幕上的体验，更是一种以产品为载体获得整体的，主观的感受。不仅仅是局限于手持终端或者冰冷的产品上。

二 扁平化设计的来源

它之所以称之为扁平化，是此种设计方式行使的形态和特征所决定的。

它简洁明确的定义，是二维空间内的一种表达方式。如图一：注重网络及无衬线字体，层次分明，特征为大图加小字体。在设计领域中，它的先驱极简化设计已被接受。极简化设计：抛开杂七杂八繁琐的多余的东西，只剩下必要成分，早在网络时代之前，已经被广泛应用于建筑及视觉艺术领域。可以说扁平风格是一种继承和发展的重现。

扁平化设计的定义：仅仅采用二维元素，所有元素都不加修饰，阴影，斜线，突起，渐变等厚重的变化。这些都不会出现在扁平化风格的设计中。干脆，有力，极力避免雨花，阴影这样的特效。摒弃现实主义，3D，拟物化元素，独立，正角，直角，圆弧都非常重视。如图二：iOS7不只是单单的去掉周边的方框，将立体箭头变成了抽象的易读图案，取代了条条框框使界面變得更简洁干净，给人“通透”感。

现代生活中，真正把扁平化设计应用到极致的是当属苹果与微软两大巨头。

三 扁平化设计的特点

显而易见的扁平化设计能更加简单地将所需要传递的信息通过更好的语言表达出来。

第一：使用效率高

屏幕上扁平化的设计不仅仅是将拟物化的图标“拍扁”而已。传递同样的信息，但相比其他风格更为简单明了，解决了一个现代化社会都需求的客观问题，即效率问题。扁平化设计元素里的色彩与版面格式都很适合使用于较小屏幕。理念在于摒弃与本质无关的一切细小枝节，作为一种视觉反应体系，可以在最短时间里发现使用者的搜索目标，其实用性在设计中即得到了表现。扁平化设计绝对趋向于矢量风格的图形，在一定次序上削弱对像素精度的依赖。

这样的“拍扁”在功能应用上更能提高人们的效率。在信息更迭如此迅速的生活中，时间，效率皆为金钱，所以更适应现代人接受信息碎片化的特点。

第二：制作成本低

首先，在设计制作时，图层越多，分辨率越高，反映到电子屏幕上就是请求时间长，加载时间多。在配色的选择，多中小的块面色彩值略有不同就会给人很大的心理差异，微调细节是必不可少的。扁平化会降低表现形式反复调整过程。比如，如需在短时间内更新改版网页，只要给制作者提供色值，也便于下次更新使用。即节约了时间成本。

其次多种尺寸和分辨率的智能终端产品都能被扁平化设计很好地适应。去除更多繁琐和细节上的优化处理，能更快速地适配在产品上，兼容性极高。

第三：高度适应社会

现在，以使用，效率为主的界面，网页要求其中的设计更为直观。使用者反应速度越快，效率越高。减少了使用者思考的时间，手指在鼠标，屏幕上停留时间更短。当在了然的图标排列之下，浮现出丰富的可读信息，这无疑会提高使用者的兴奋度。

四 扁平化设计的原则

由于扁平化要保证高可用性条件下尽量地简捷，确保应用或者其网站的直观性，易用性，和无需引导的方向。要求元素更简单。更为突出的就在于排版重要性，确保产品在感官上和措辞上的统一性，用字的形体例举：字体选取能够用单一无衬线字体，经过字体的比例大小再区别元素，极度美化过的形体和极简设计守则相互冲突。排列版式版的结果在和辅助使用者更加理解设计，标示，按键等各方元素能更加注重增加易用与交互性。

第一：色彩。颜色的采用相对于扁平化设计来说极为重要，大部分网络应用色色调明亮鲜艳，平均要用到6到8种色彩。扁平化设计色彩减少，利于统一化，有利于契合整体页面。

第二：极简。上文提过扁平化设计师极简的延伸，设计时应该清除所有无关紧要的元素来尽量利用简洁的色彩与文体。摒弃过多的阴影，浮现，纹路等因素。

第三：对比。通过大小，尺寸，颜色的对比体现图标的重量感。

第四：排版。排版更清晰，合理。布局需要仔细推敲来弥补过于简洁的图形样式。而过于繁琐的图形或多或少影响到整体的统一性。如图三：优秀的扁平化网页设计摒弃图案纹理背景，阴影文字。谷歌是第一个使用扁平化设计准备对重构Web应用程序的公司，现在越来越多的公司都在效仿。

五 扁平化风格流行的原因

第一：由于手机用户大多在碎片式的间断时间内使用手机。因此手机界面应尽量提供简易，快捷的渠道来协助人们获取信息，较少有关没有纵向逻辑关系的信息。所以，扁平化设计在应运而生之前诞生了。个人认为这是造成手机趋向扁平发展的主要原因。多层级式菜单，页面切换系统进行领航，会增长使用者获得信息的认知成本。它的信息组织模式与人们的认知特性相符，越来越普遍地运用于数字化产品界面设计中。

客观性的界面向跳转速率增加，尽陕尽可能又完整地呈献给用户。

第二：扁平化的界面设计无疑减小了言语信息沟通的距离。

第三：扁平化的界面设计在达成信息访问透彻化的同时，相应在程序上也增添了单页，减轻了视觉传递的复杂水准。

提高了信息访问效率，与认知的成本。

第四：避免信息迷航。扁平化手机的界面设计优点还表现在给使用者提供了开放性，信息的透彻化访问途径，扁平化界面的访问途径，只要在顶级界面就可以向不同子模块信息实行独立操控。让使用者的感知思维顺着平面二维的延展，并不是沿着朝向深入层次流，用来保障使用者的连贯性。更完美地在有限的显示空间给使用者展现最有效率的信息。

六 局限性

在越来越讲求情感化设计的今天，摒弃拟物化为何还能成为交互设计的流行趋势？

第一：对于钟情于拟物化设计的用户来讲。美观享受永远是第一位的。

但是现在看来拟物化设计与九宫格设计好似皆是上个世界的产物。逼真的感官效果未必能让人感到舒服，无论设计师还是公众，希望看到的是无需太多思考就能认知的。提到扁平化就不得不说它的前辈.拟物化设计，与复合设计。即使用尽可能多的效果元素，给用户带来的触觉感知，让人有感觉很熟悉与亲切。

第二：完全扁平化界面的设计上在表现力是有较大限制性。

尽管扁平化界面经过舍弃多数装饰性的因素，突出了核心信息让使用者迅速发现他们所想得到的讯息。可极度抽象化之后的简练符号图像不是人人皆可马上明知理解的。相对于那些理解抽象符号图像较为迟钝的使用者来说，更是下降了其的用戶体验，转达的情感不够丰满，乃至有部分人评价此风格的交互设计有些过分冷冰。

第三：扁平化设计与情感化设计并不矛盾。

扁平化是另一种以用户为中心，能带来更流畅体验的情感。个人认为，一切设计都应考虑使用的产品和使用的环境。只要此种风格融入进了环境，通过产品体现出价值，即是合理。再加之适应社会，与以往有所突破，那流行必是大势所趋。如图四：拟物化时代已经有logo的，再做扁平化会更简单，因为在用户中已经有了辨识度。这在情感上很占优势。

七 扁平化设计在未来的趋势

对设计革新而言，扁平化设计给我们符号的抽象化。大大体现了产品语义在生活中的应用。简捷，直白，准确传递信息需求的扁平化设计必将能与拟物化设计中探寻出一个均衡点，扁平化设计携带本身优点与新势力打破了以往常规，快速地有了自己的立足之地，在交互设计历史上也将是浓墨重彩的一笔。

扁平化设计之前势如破竹般的出现，并且迅速流行开来正是真正体现了本真的设计，人性化的设计。更合理，更简洁，更直观即会更符合现代社会的生活方式。将来更是一种设计趋势，是设计美学中的流行方向。此种势态并不是仅仅是因为消费者被日常的图标种种产生审美上的厌倦疲劳而变化，而是为了顺应更高度的数字化社会，即是适应数字时代，从而引领时代。