基于认知心理学的扁平化风格的界面设计研究

聂茜

摘 要：微软Windows？8的Metro界面设计以及Apple手机iOS7操作系统的界面设计，都采用了扁平化简约的设计风格，在当前互联网和移动互联网的高速发展的信息社会下，由于apple和Microsoft两大公司在全球的广泛影响，扁平化设计风格迅速成为界面设计视觉风格的主流趋势。文章从认知心理学的角度，尤其是运用视觉认知心理学的一些原理，对扁平化简约设计风格进行了美学因素的分析，并对扁平化设计风格发展的趋向做了一定的阐述。

关键词：认知心理学；扁平化设计；界面设计；设计风格

检 索：www.artdesign.org.cn

中图分类号：TB47；B842 文献标志码：A 文章编号：1008-2832（2016）11-0057-03

Research on the Interface Design of the Flat Style Based on Cognitive Psychology

NIE Qian（ Beijing Institute of Fashion Technology， Beijing 100029， China ）

Abstract ：Both Metro UI design of Microsoft and iOS7 UI design of Apple adopt concise flat design style， in current informational society which internet and mobile internet is developing with high speed， due to Apple and Microsofts worldwide influence， the flat design style rapidly becomes main trend of UI design visual style. From cognitive psychology point of view， especially utilizing its some principles， this article makes some aesthetic analysis on flat design style， and elaborate the development trend of flat design style.

Key words ：cognitive psychology； flat design； UI design； design style

Internet ：www.artdesign.org.cn

一、引言

拟物化风格和扁平化风格是目前视觉类界面设计最明显的两大设计风格，而Apple公司和Microsoft公司正好成为这两大风格的代表。扁平化设计风格中最有力的典范就是微软的Windows 8以及Windows phone和Windows RT平台下的Metro界面。以拟物化设计风格见长的apple公司也随着2013年6月发布的ios7苹果手机操作系统中颠覆性地采用了扁平化设计风格这样更简洁的视觉设计语言，全新设计的iOS7界面让扁平化风格成为了流行设计（图1）。由于Apple公司和Microsoft公司两大公司在全球的广泛影响，扁平化设计风格迅速成为界面设计视觉风格的主流趋势。

维基百科（https：//en.wikipedia.org/wiki/Flat_design）将Flat design定义为，扁平化设计是一种界面设计的风格，它去除了容易造成三维空间错觉的元素（如：阴影、渐变或纹理）。扁平化设计是通过简单的图形、字体和颜色的组合，来达到直观、简洁的设计目的一种极简主义的设计风格。扁平化设计的核心在于极简，放弃一切装饰效果，比如阴影、透视、纹理、渐变等，所有在二维设计中能体现三维效果的元素一律摈弃。通过运用简洁的色块，抽象和符号化的图形，无衬线装饰的字体，将一切干扰信息弱化，只突出最需要表达的核心内容。

任何事物的产生和发展都是在历史的演变进化而来的，扁平化设计风格也不例外，其发生发展受到历史上诸多设计理念和设计风格的影响。理性的现代主义风格，严谨、工整、理性、实用的瑞士设计风格Swiss Style，以及去除所有无用的元素，只留下必需的元素的极简主义风格，都或多或少地影响了扁平化设计的形成。

二、扁平化设计风格的认知心理学应用

（一）认知心理学概述

认知心理学（cognitive psychology）是20世纪50年代中期源于西方的一种心理学思潮，主要研究人的高级心理过程，包括人类如何获取外部世界的信息，然后人脑如何将所获取的信息转换成知识，知识储存后又如何对人的行为产生影响。认知心理学涵盖了人们从感觉到知觉、识别、注意、学习和记忆、思维、语言、情绪等几乎全部心理活动的过程。针对人机界面设计的诸多要素，虽然可以从图形、文字、色彩和版式等的美学要素去进行分析，但是更多地要结合人的视觉认知心理学的原理，对界面进行更科学地优化设计。

（二）扁平化设计风格的认知心理学应用研究

1.注意广度的范围的有限性理论

注意广度是指在同一时间内一个人能够清楚地觉察或认识客体的数量。研究表明在0.1秒的时间内，成人一般能把握8～9个黑色圆点，把握4～6个不相联系的外文字母，以及4～5个没有联系的汉字，这证明注意广度是有一定限度的。

在界面设计领域被广泛应用的7±2原则来自哈佛大学G·A·Miller的理论《神奇的数字7±2：人类信息加工能力的某些局限》。根据George A. Miller的研究，年轻人的记忆广度大约为7个单位（阿拉伯数字、字母、单词或其他单位），称为组块。后来的研究显示广度与组块的类别有关，例如阿拉伯数字为7个，字母为6个，单词为5个，而较长词汇的记忆广度低于较短词汇的记忆广度。也即是说，人类短期记忆一般一次只能记住5-9个事物，在界面设计中，由于信息的多变性，人们的短时记忆较多，为了准确地将信息传递给用户，对其产生一定的印象，在界面设计中运用7±2原则是十分必要的。但是，许多门户型网站的首页面会运用大量的信息量的设计，以表达蕴含着丰富的资讯的涵义。所以7±2原则一般仅适用于内页的设计。但是，Cowan （2001）认为年轻人的工作记忆能力为4个组块（儿童和老人较低），在同层的页面中，信息模块的设置数量应更为精简。这也就是为什么很多的菜单的选项都设定为4，如图1为苹果手机界面底端的菜单选项设计。

2.格式塔理论中的接近原则

格式塔理论是现代认知主义学习理论的先驱，其原理几乎适用于所有与视觉有关的领域。根据格式塔理论中的接近原则（图2），当对象离得非常接近的时候，意识会认为他们是相关的。在界面设计中，一般为一个提交按钮会紧挨着一个文本框，二者是相关的，对应着一个统一的功能或用户操作指令，所以在进行设计时，相邻近的模块功能确是相关的，如图3将图标设计和文字说明临近放置，组成一个信息组快。

图4为Windows 8平台下的Metro界面，采用高纯度的鲜艳的色彩平涂色块，将不同色相的色块并置于同一个页面中，在每一个色块中衬托面积大的图标设计，加上配置在图标左下角的，与图标临近的面积相对较小的文字，二者统一在平涂的色块中，形成了视觉冲击力清晰而明确，功能相关的功能模块。所以用户认知是注意的顺序依次为色块—图标—文字。色彩的认知速度大于图形的认知，图形的认知大于文字的认知。

3.格式塔理论中的相似法则

格式塔理论的另一个重要原则是相似原则，是指在某一方面相似的各部分趋于组成整体。在界面设计中，我们倾向于把外观相似的物体归为一类。

图5是世界排名前50位的银行、地域性、资产状况等信息。同样颜色的圆形组团可以被理解为总体特征，而同色圆形组团中的单个的圆形可以被理解为局部特征。每个圆形代表一家银行，圆形的面积大小与银行的资产呈现对应关系。用户在获取信息时，首先看到的不是独立的一个个的圆形，而是一组一组的圆。在这个图表的信息传递中，使用到了格式塔的“接近性”原则，使距离互相靠近（相对于其他物体）的物体看起来属于一组，还运用了格式塔的“相似性”原则，即相似的物体（形状、大小、颜色）看起来是一类。图中将同一个国家的银行用同一种色彩进行编码，并且位置上组织在一起。所以我们很快就能看出哪个国家的顶尖银行最多——德国，哪个国家所占的银行资产多——英国、法国，用户可以更加直观有效地获取准确的信息。

三、 扁平化设计风格的美学分析

（一）界面设计的核心是功能

功能是指产品所具有的效用，并被接受的能力。人们在使用产品时，是经由功能获得需求的满足。界面的功能要使用户明确接受信息，明白操作功能，使得每一个操作是符合人的认知心理和用户行为而来的。界面设计，作为交互体验中与用户交流的最前沿，大量的信息是通过大小各异的屏幕进行传递，通过扁平化设计的界面，用户可以专注于信息本身，其产品核心的功能性大大提高。

（二）易用性的设计

界面设计是为人机交互行为服务的，其视觉设计应使整个界面呈现出尽可能的简洁易用的风格。当用户对界面的信息反馈是简洁明了，对界面所传达的信息是容易感知的，是没有压力感的，界面的表象（比如美观度）判断易用程度 ，美即好用。反之，如果界面传递给用户的感受是繁杂的，就会产生一些不友好的情绪，对用户就会产生某种压力，复杂和陌生感是压力感产生的主要来源。

在认知心理学领域，记忆代表着一个人对过去活动、感受、经验的印象积累。记忆又分为短时记忆和长时记忆两种，在界面设计中，产生的短时记忆往往较多，页面信息量大且迅速变化，随着刺激的逐步消退，短时记忆也很快衰退或受到外部的干扰刺激而遗忘。人们对新信息的理解是基于对已有的知识经验对新信息进行取样（sampling）、预期（predicting） 、验证、确定或修正（confirming or revising）的思维过程。认知心理学认为，理解的主要机制是，当阅读材料中的某些线索激活了人脑中的图式之后，图式中的变量就会被阅读材料中的信息具体化，使他们会用图式去同化新知识，改变旧知识。

根据这样的认知心理学的理论，拟物化的设计与具象的事物联系，让人们与自己以往的知识经验产生联系，并很自然地进行知识的同化。所以在交互设计发展之初，用拟物化设计取代最初的指令是非常合适的，而当越来越多的用户熟悉这种操作方式的时候，扁平化设计就能更好地指向信息的功能，简洁明了。在界面设计中，设计元素应尽量提取用户已经存储的行为经验或者记忆元素，并形成长期记忆的元素，图6、7为节拍器的icon设计。

（三）情感化的设计

情感化设计是一种在设计过程中以潜在的情感需求为主要设计原则的设计方式。今天，我们更倾向于把情感化作为一种设计理论和方法应用于产品设计。

在情感化设计中，比较重要的是由美国的认知心理学家唐纳德·A·诺曼教授提出并逐步形成的理论体系，将人类的情感认知与设计思维从理性的角度进行联系分析。诺曼教授将体验归为人的情感，他把情感化设计分为：本能层次、行为层次、反思层次。

高性能负载分为认知和体能两种：高认知负载要求用户输入较多命令或换算，挑战用户的记忆力，用户在挑战中易产生挫败感；高体能负载是指与生理习惯不匹配的操作，如步骤之间点击的距离较大），同样会给用户带来负面情绪。

四、扁平化设计风格发展的新趋向

正如历史上各种设计风格的发展演变一样，扁平化设计风格和拟物化设计风格都是信息社会发展到不同阶段的产物。扁平化设计风格现在正以绝对的优势成为界面设计的宠儿，并不代表拟物化风格就会退出历史的舞台。相反地，简久必繁，繁久必简，创新是永恒的趋势，扁平化设计最终将进化为更新的风格，目前，界面设计风格也在扁平化风格发展的基础上呈现出以下的一些倾向。

（一）扁平化设计风格融合拟物化风格

由于扁平化设计风格缺乏直观性和具象性，需要一定的学习成本，其传达的感情不丰富，甚至严谨地有些冰冷，这些都使得用户体验的满意度会有所下降。目前，在界面设计领域，出现了扁平化设计与拟物化设计风格的融合等趋势。（图8）

（二）扁平化设计的延伸：45°长投影设计风格

长投影是扁平化设计风格在极简之后的进一步演变和丰富。比较常见的如45°长投影的使用。由完全扁平的图标，以45度角，向右下角延伸出一块明度更低的色块，形成一道光线投射下的阴影的效果，物体长长的投影一样，额外引人注目。这种效果在保持扁平化的同时还增加了设计的深度。这样，可以用最简单的设计，达到提高画面深度的立体效果，长投影常用于图标的设计。（图9）

（三）多边形处理

为了给完全平面的画面增添一些立体的感觉，还时常会使用不规则多边形的色块，通

过不同色块的色彩明暗的对比，形成类似立体的视觉效果。图10为网站 Human Hubris 人类的狂妄自大中对动物的图形使用扁平化的多边形绘制。

五、总结

诞生于新的信息交互界面的扁平化设计风格，作为一种审美的流行风格，由于其传播和流行的广度和深度，已经不断地延伸并影响到传统的招贴设计、包装设计、产品设计等领域。图11为无印良品2003年的招贴设计“地平线”，空的画面带给用户更多的潜在信息以及更多的让用户可以去想象和填充的空间。而且在平面设计中留白越多，就越突出主题。在扁平化的设计中，留白意味着信息功能区域的划分，可以使用户更方便地找到自己想要找到的信息。图12的鼠标产品造型的扁平设计，抱枕上图案（图13）采用不规整的多边形色块，都是扁平化设计风格在其他传统设计领域的应用。

参考文献：

[1] 王林，宫颖.基于认知心理学的网页交互设计研究[J].艺术科技

[2] 周黎铃.基于用户体验的扁平化互联办公网产品界面设计研究[D]. 杭州：浙江工商大学.

[3] 方心怡.扁平化设计风格下平面视觉元素的应用研究[D].苏州：苏州大学.

[4] 吴俊，莫雷.智能手机交互模式的分层视觉模型[J] 包装工程，2013（6）：14-17

[5] 王津.学前儿童科学知识图画书阅读理解研究[D].上海：华东师范大学.

[6]（美）唐纳德·A·诺曼.情感化设计[M]. 北京：电子工业出版社，2005.5.

[7] 蔡涛.情绪脑与交互界面的情感化设计[J].艺术与设计（理论），2015（10）.