格式塔心理学在界面设计中的应用研究-韩静华
格式塔心理学在界面设计中的应用研究韩静华，牛菁（北京林业大学，北京 100083）
摘要：目的研究格式塔心理学在界面设计中的应用。方法通过不同的界面设计案例，分别分析格式塔心理学中的接近性、相似性和闭合性3 个原理。结论格式塔心理学有助于设计师了解人的眼脑视觉规律，从整体上把握事物的知觉结构，将设计中的信息结构进行组织、简化、统一，使界面更加协调，易于理解，从而方便用户读取重点并实现自己的任务需求。
关键词：格式塔；心理学；界面设计；知觉结构；视觉系统
中图分类号：TB472
文献标识码：A
文章编号：1001-3563(2017)08-0108-04
界面设计是人与机器之间传递和交换信息的媒介，心理学是关于人的科学，掌握与设计相关的心理学规律能有效地捕捉用户心理。格式塔心理学强调人的视觉系统对看到的事物进行整体认知和简化的特点，可以帮助设计师认识到设计的关键问题和创新点，从而对设计进行有效的调整和改进。
1 概述
1.1 格式塔心理学概述
格式塔心理学也称完形心理学，强调知觉的整体性，其基础理论是人的视觉系统能自动输入并构建结构，对形状、图形和物体等视觉元素进行整体组织，而不是对单个元素进行分析。“形状”和“图形”在德语中是"Gestalt"，因此这些理论也被称为视觉感知的格式塔原理。格式塔原理指出，知觉是有组织、结构和内在意义的一个整体。人的视觉具有整体化、简化处理图形的倾向。
1.2 界面设计与格式塔心理学的联系
格式塔心理学为美学研究创造了新的角度，也为设计师提供了更人性化的规则。研究行为心理与使用界面间的关系规律，可以使界面设计更深层次地切合用户的使用习惯。准确表意是图形设计的重中之重，形是由设计师与观看者共同创建的，顺应视觉规律的交互方式可以提升用户情绪体验。
格式塔原理并非视知觉的基础原理，但为视觉感知提供了一个合理的描述框架，并被进一步拓展。其与符号学、拓扑学及对称性等理论相结合的视觉方法论，突出了设计的实践技能和对科学方法的重视，为界面设计准则提供了有用的理论依据。
2 格式塔心理学在界面设计中的应用研究
格式塔心理学主要有接近性、相似性、闭合性、连续性、对称性和简单性等多项重要原理，其中接近性、相似性和闭合性原理在界面设计中非常具有代表性，下面通过案例进行具体分析。
2.1 接近性原理
接近性原理强调位置。物体间的相对距离能影响视觉感知它们是否为一个整体，以及它们的结构关系是怎样的。其他因素相同时，距离较近的物体看起来属于一组，而相距较远的物体则自动划为组外。
接近性原理简要图示见图1，各色块的形状和颜色完全一致，但按其距离分布，在视觉上明显分为4组。过去的设计师们常使用分栏线将网页版面分割成不同部分。根据接近性原理，分栏线并不是必须的。通过将同一类别的操作对象紧密排列，并将这一组操作对象与其他对象的距离拉开，就能够使这一组操作对象看起来属于一组，能满足同一个任务需求。
接近性原理的3 个案例见图2，新浪首页见图2a，网页整体布局分为左中右3 栏，不同信息索引模块之间没有使用明显闭合的分栏线，而只保留了绝对必要的文字、图片等组成元素。通过标题栏以及隐形的框架将网页元素进行归类划分出不同区域。组织形式越简单越能更好地实现所要的功能，同时能节约版面以避免内容冗繁降低浏览速度。网易、搜狐等其他门户网站首页也多使用类似的界面设计。
微信朋友圈见图 2b，特点是严格遵循时间线。用户每条朋友圈采用统一格式显示，不同日期之间的留白距离明显大于同一日内每条朋友圈之间的距离，这样用户在浏览时可以明显地识别出每一条朋友圈所属的时间线，清晰明了。接近性原理使图片和所配文字、分享内容和所配文字间的正确组合更加明确，使人们在视觉和心理上获得更佳体验。
Safari 浏览器偏好设置界面见图2c，包含多个选项，界面没有使用分界线来划分不同类型的设置选项，而是将选项通过上下距离不同进行分组，从而减少用户界面上的视觉凌乱感，同时便于操作。当视觉单元彼此贴近时，视觉思维将暗示这种状态是一种归类。此种视觉归类方法较为直接且容易实现。在界面设计中，用距离进行归类同时适用于对象为少量和大量的相同视觉单元。
2.2 相似性原理
相似性原理强调内容。其他因素相同时，内容相似的物体被视觉归类为一组。人倾向于把形状、颜色、结构特征相同或相似的视觉对象看作一个群组。相似性原理简要图示见图3，各色块的分布距离一致，但因形状和颜色的不同，也在视觉上明显分为了4 组图形。
若一个界面中若干个操作对象的形状、颜色、结构特征相类似，用户就会把它们看作一类能满足同一个任务需求的组件。设计人员要让用户能够快速有效地区分不同功能的操作对象，就需要为不同的操作对象设定独特的形状、颜色和结构特征。设计师从早期生硬的线框方式归类到现在利用背景色、线条等隐性的方式归类，给用户带来更多舒适感。
相似性原理的3 个案例见图4，中国农业银行个人服务界面见图4a，不同服务类别模块外形、排列方式一致，能够保持界面的整齐，并表明各个模块有着同样的服务性质。但是模块内容的形状、颜色彼此区别开来，又使用户直观感受到不同模块图标展示的是不同服务功能。使用过程中，作为用户，知道这些图标都可以提供银行的某项服务，也清楚的知道每个图标代表的不同意义，能满足不同的需要。
手机淘宝APP 首页入口目录见图4b，电商首页的入口目录便于用户进入并挑选和购买自己想要的产品。相似性原理会让用户第一时间意识到，这一组形式相同风格一致的图标的目录作用，点击不同图标会进入不同界面。当用户选中某个产品种类时，要有一定的交互体验，让用户明确自己的操作对页面产生了作用。如图4b 淘宝APP 有好货产品类别处，将当前选中类别用颜色或框选特殊标注出来，视觉会自动把相同填充色的归类，当前选中的区块会被自动与其他区块区分开来。
Adobe In Design CC 2015 for Mac 表选项界面见图4c，排版软件的设置对话框通常包含多个功能板块，每个功能中又包含大量的选项设置，功能的多样性常常会增加设计的复杂度。对话框的特殊性质要求不能采用过于复杂或过大的图像图形来进行表示，文字成为了最常用的对话框元素。
在元素单一、元素多的客观条件下，怎样实现简洁方便实用的界面设计，相似性原理又为人们提供了很好的思路。如图4c，将功能文字排成一行并整体加橘色外框，一方面可以吸引视线，一方面用同样的外框和格式强调这行元素是同一组。被选中的功能选项背景颜色加深“凹”下去，增强了软件操作的交互性。
2.3 闭合性原理
闭合性原理强调元素在画面上的布局。人们的视觉系统能将敞开的图形闭合，并感知为完整形象而不是分散的碎片。
闭合性原理简要图示见图5，图形由3 个不完整的圆形组成，3 个圆形中间留有空白，但是人的视觉系统会将空白自动补全为一个白色三角形。同时视觉系统也会自动判断，圆形被三角形挡住了一部分，而不是本身就不完整。
Adobe Photoshop CC 2015 for Mac 首选项界面见图6，其选项设置界面分组关系明确，标题与选项区分清楚。设计者使用线框的强烈方式划分选项，可以让用户迅速地了解每一类的主要内容。将选项标题放在缺口上，闭合性原理使用户视觉首先关注到未闭合的区域，自然的让用户先关注到标题。这样的设计方式可以使界面清晰明确，又不至于元素过多，还符合用户先关注选项分类再关注选项内容的使用习惯。
微信朋友圈界面见图7，朋友圈的图片显示方式分别体现了闭合性的不同应用。如图7a，每条朋友圈的缩览图永远保持正方形，不足4 张时，图片会被拼成一个完整的正方形，超过4 张时，则用前4 张图片拼成一个正方形缩略显示，符合用户的闭合心理。点进单条朋友圈内，则采用了九宫格排列方式，当图片不足6 张或9 张时会有缺口，如图7b，因此一些“强迫症”用户选择发空白图片来补全正方形，如图7c。这也是因为闭合性原理使人的视觉倾向于将空白的位置补全，设计师会遵循用户的视觉规律，在界面设计时尽量主动将图形补全，当设计师没有满足用户时，用户会用自己的方式予以调整。
3 结语
格式塔心理学展示了人的视觉系统是如何被优化从而感知结构的。视觉系统通过主动对所处环境中的视觉信息构建结构，从而让人更快地了解物体和事件。
在本文案例分析中，可以明显感受到几条原理并非独立存在，而是互相作用和影响。接近性、相似性原理与试图给对象分组的倾向相关，闭合性原理与试图给对象完整形态的倾向相关，格式塔原理让界面上的信息以分组和完整的方式呈现。设计师在进行界面设计的过程中，在感性上注重视觉效果的同时，理性上能够按照格式塔原理组织结构，那么用户会更容易浏览和查找信息，并使用产品完成他们的任务需求。
参考文献：
董庆波. 视觉格式塔理论的设计思考. 包装工程,2011, 32(6): 25—26.DONG Qing-bo. Design Thinking of the Visual GestaltTheory. Packaging Engineering, 2011, 32(6): 25— 26.
王琴. 产品抽象线型的格式塔分析. 包装工程,2013, 34(18): 32—33.WANG Qin. Gestalt Analysis about Abstract Lines ofProduct Modeling Design. Packaging Engineering,2013, 34(18): 32—33.
李理, 刘畅, 康俊峰, 等. 基于格式塔心理学的工业产品渐消面设计研究. 包装工程, 2015, 36(14): 46—47.LI Li, LIU Chang, KANG Jun-feng, et al. GradualDisappearance in Industrial Product Based on GestaltPsychology. Packaging Engineering, 2015, 36(14):46—47.
阳巧, 谢亮. 交换体验——构建信息服务设施交互界面中的移情设计方法. 装饰, 2016(2): 80—81.YANG Qiao, XIE Liang. Visual Aesthetics in NewMedia Development Environment. Zhuangshi, 2016(2): 80—81.
崔生国. 以形寓意: 关于图形视觉形态和意义的思考. 装饰, 2013(2): 127—128.CUI Sheng-guo. Shape Expressing: Thinking about theVisual Form and Meaning of the Graphics. Zhuangshi,2013(2): 127—128.
孙利. 用户体验形成基本机制及其设计应用. 包装工程, 2014, 35(10): 29—31.SUN Li. Basic Mechanism and Its Design Applicationof User Experience. Packaging Engineering, 2014,35(10): 29—31.
刘小路. 由“技艺”到“方法”: 格式塔理论在包豪斯与乌尔姆的发展. 装饰, 2014(6): 76—77.LIU Xiao-lu. From "Techniques" to "Methods": Developmentof Gestalt Theory in the Bauhaus and theHFG Ulm. Zhuangshi, 2014(6): 76—77.
哈特穆特·奥本多夫. 极简主义在人机交互设计应用中的四大理念. 装饰, 2014(10): 40—41.HARTMUT O. The Four Notions of Minimalism inHCI. Zhuangshi, 2014(10): 40—41.
张贵明. 简约高效——人机界面的组织策略. 装饰, 2013(9): 99—100.ZHANG Gui-ming. Simplicity and Efficiency: OrganizationStrategy of the Human-Computer Interface.Zhuangshi, 2013(9): 99—100.
夏颖翀. 数字产品界面中朴素的设计和冗余的设计. 装饰, 2013(5): 98—99.XIA Ying-chong, Simple or Unnecessary Method inInterface Design for Digital Products. Zhuangshi,2013(5): 98—99.
页:
[1]