1. 引言
界面设计是交互设计的最外层表现形式，通过视觉元素和交互设计优化用户与数字产品之间的互动体验，直接影响产品使用者对产品第一印象的交互反馈[1]。格式塔心理学指出用户视知觉对界面的感知逻辑，进一步指导设计师优化设计，帮助设计师创建符合用户认知习惯的、易于理解的界面层次和视觉结构[2] [3]。
第55次《中国互联网络发展状况统计报告》显示，2024年我国网民规模达到11.08亿人，互联网普及率达到78.6% [4]。数据说明当前我国网民基数大，对便民服务类APP需求明显，而运营商作为用户接入互联网的服务提供者，相应的应用程序存在大量的用户需求。手机APP界面是用户与手机进行信息交互的媒介[5]，是用户使用产品的直观工具。因此，本文以中国电信APP的界面设计为例，旨在研究格式塔心理学视角下便民服务类APP的界面设计，并给出相应的改善建议。
2. 概念界定
2.1. 格式塔心理学
格式塔心理学(Gestalt Psychology)，又叫完形心理学，起源于20世纪初的德国，其核心观点是“整体大于部分之和”，强调人类经验和行为的整体性，即人类感知系统倾向于将复杂的视觉信息组织成有意义的整体，而不是简单地处理孤立的元素。格式塔心理学已被应用于视觉特征的影响[6]、认知现象等多个领域的研究[7]，描述的是人类视觉从神经系统对事物的感知方式，为美学研究创造了新的角度，也为设计师提供了更人性化的规则[8]，尤其是在界面设计中。
2.2. 便民服务类APP
便民服务类APP是指通过移动互联网技术，为用户提供日常生活所需的便捷、高效、低成本服务的应用软件，聚焦于解决用户在政务办理、公共事业、金融支付等方面的需求，旨在提升生活便利性和效率。
政务办理方面，代表的APP有国家政务服务平台、交管12123等，这类应用提供政府事务办理、公共信息查询、政策咨询等服务；公共事业方面，代表的APP有各大运营商网上营业厅、电网、水务公司官方应用程序等，这类应用提供通讯、水电等生活必需品的在线缴费等服务；金融支付方面，代表的APP有支付宝、云闪付、各大银行的手机客户端等，这类应用提供移动支付、理财等金融服务。
中国电信APP是中国电信提供的全国统一官方服务平台，为客户提供充值缴费、费用查询、业务办理、故障申告等电子自助服务。本研究基于中国电信APP 11.3.0版本，对界面设计展开分析。
3. 格式塔心理学视角下中国电信APP界面设计研究
格式塔心理学包括接近性原则、相似性原则、连续性原则、主体与背景原则、共同区域原则、封闭性原则、对称性原则等多项原则，其中接近性、相似性、连续性原则在界面设计中具有代表性[9] [10]，下面将以中国电信APP首页为例进行研究。
3.1. 接近性原则
接近性原则又称临近法则，在视觉上相互靠近的元素容易被感知为一个整体或一组，示意见图1。这一原则揭示了空间关系在信息组织中的重要性。在便民服务类APP界面设计中，接近性原则可以帮助设计师将功能相关的元素进行合理布局，从而降低用户的认知负荷。
Figure 1. Schematic diagram of the principle of proximity
图1. 接近性原则示意图①
如图2所示，在中国电信APP的首页中，居于中部的子栏目“电话账单”、“积分兑换”、“本地特惠”、“10GB”、“宽带新装”的五个图标相互接近，呈现出间隔一致、横向对齐的特点，其下方五个白底、蓝色线条的图标也符合接近性原则的特点，既成排又分布均匀，且相互靠近，让用户在视觉上认为这十个为一组。同时，这十个图标底部均有黑色小字作为文字引导，小字距离上方图标更近，图标之间的左右间距比图标和小字的间距更大，人眼自动将图标与底部小字归纳为一小组，所以这十个图标与其下方的十段小字分别形成十个小组，而小组之间的整齐排列又形成一大组。在这一大组之外，上方的“客服服务”和下方的“功能卡片”与其距离较远，互不干扰。
Figure 2. The embodiment of the principle of proximity in interface design
图2. 界面设计中接近性原则的体现②
子栏目采用接近性原则，使十个小功能形成整体，相关的功能合理排布于一大组内，再根据颜色和不同的图标设计样式让用户直观地将其区分，并形成从左往右、从上往下的浏览顺序，使用户更直观地寻找到所需要的功能入口。
3.2. 连续性原则
连续性原则亦称为良好延续法则，人类视觉系统面对中断的线条或形状，会根据以往的经验或习惯产生视觉路径，并沿着既定的路径感知信息，将中断的线条或形状视为连续的整体，示意见图3。这一原则在引导用户视线和操作流程中具有重要作用。
Figure 3. Schematic diagram of the principle of continuity
图3. 连续性原则示意图①
如图4所示，在中国电信APP首页的置顶卡片中显示了3~4组连续的文字，分别是“账户余额”、“剩余通用流量”、“已用语音”和“剩……”，这些灰色小字上方有加粗放大的数字，突出显示用户当前账号的账户资金情况。根据接近性原则和相似性原则，加粗放大的数字和下方灰色小字自成一小组，而三个连续的小组自成一大组，这一大组位于屏幕左侧，并未居中，而右侧有一灰色小字“剩……”，强化了从左至右的视觉惯性，让用户沿着既定的路径联想到这也是完整的一小组，与左侧三小组是连续起来的，具有同样显示账户资金数据的功能，但由于空间不足而未完全显示，自然而然地想左滑查看完整信息。
底部的彩色卡片也同样使用了连续性原则，“星播客”、“权益超市”、“智慧宽带”、“办公专区”也形成了横向的视觉路径，“星播客”的字体最粗最显眼，具有着重强调的效果，而最右侧的“办公专区”的字体缩小淡化，具有渐隐弱化的效果，形成了卡片之间的堆叠感，以及从左至右翻阅卡片的视觉路径。
Figure 4. The embodiment of the principle of continuity in interface design
图4. 界面设计中连续性原则的体现②
既定的路径不仅适用于线条或是形状，也对文字有效果，成组的文字是连续的线条，而被打断的某一小组文字是被中断的线条，人眼会自动补全其功能归属，并引导用户形成相对应的阅读方式。
3.3. 共同区域原则
当一些元素处于一个封闭区域内，人脑会自动将其归类为一组，这就是共同区域原则，示意见图5。研究表明这一原则可以将形式美学特征有效纳入设计过程[11]。
Figure 5. Schematic diagram of the common regional principles
图5. 共同区域原则示意图①
如图6所示，中国电信APP首页中，有一部分具有导览功能的图标，其上下均有信息卡片，通过色彩差异，形成了以白色为底色的封闭区域，人眼自动将这十个图标视为一组。多样化布局软件界面，丰富页面设计的表达方式，最终提升用户识别信息的效率。
Figure 6. The embodiment of the principle of common area in interface design
图6. 界面设计中共同区域原则的体现②
4. 中国电信APP首页界面设计优化方案
4.1. 问题分析
根据格式塔心理学中主体与背景原则，人眼面对具有前景与背景之分的图案时，无法同时识别所有的图案信息，所以会自动将视线聚焦于其中某一信息，并根据人脑的思维意识，将突出、明显、容易理解的内容作为主体，提取为前景，其他内容则作为背景。
Figure 7. Schematic diagram of the subject and background principles and problems
图7. 主体与背景原则及问题示意图②
如图7所示，在中国电信APP中，最为突出的视觉元素就是顶栏的导航和账户余额卡片，顶栏的导航部分以渐变的蓝色为底色，而账户余额卡片以大面积的白色为底色，形成具有边缘阴影的圆角矩形，蓝色、白色和灰色阴影将二者区分开，构成以蓝色为背景、白色为主体的视觉效果。但二者包含的信息过载，让用户难以在短时间内高效筛选出有价值的信息：作为背景部分的导航栏字体过大，抢占了作为主体的账户余额信息，弱化了页面的主体性；主要的“充值”功能不够鲜明，难以突出；背景部分的“金豆”、“爱奇艺会员”、“618”、“客服人像”色彩均为色彩显著的红色和黄色，在冷色系中尤为凸显，抢占了视觉焦点，减弱了人眼对账户余额和充值的可识别性。该部分虽通过色彩和图形区分出主体和背景，但并未弱化次要信息，过强的视觉冲击力影响人眼识别信息的速度，降低了信息的可读性。
底部的黑色长条状信息提示板块与后方的推送卡片也形成了主体和背景，但主体和背景中均有黑色，主体字符小，而背景字符大，造成颜色雷同、字符大小悬殊的设计问题，使得作为主体的信息提示板块显得单一，没有凸显其引导浏览的特性，无法与背景划分层次。
相似性原则又称相似法则，具有相似视觉特征(如颜色、形状、大小、纹理等)的元素容易被感知为同一组或同一类别。这一原则在界面设计中常用于区分不同类型的信息或功能[12]。
Figure 8. Schematic diagram of similarity principle and problem
图8. 相似性原则及问题示意图②
仍以首页居中的子栏目为例，如图8所示，这十个子图标呈现出形状、大小的一致性，均为等大小的圆角正方形，但设计语言大相径庭。上排为蓝底白字，突出“中国电信”的公司名称和品牌LOGO，下排则使用简约风格的线条图案，用户会自动将其二次分类，把上下两排视为两组。在功能上，这十个图标均具有引导和跳转的作用，但由于视觉特征太过割裂，用户会误认为两排具有不一样的功能，却实则不然，最终造成界面信息混淆，弱化排列信息的逻辑性。
4.2. 优化目标
进行优化设计时，优先区分信息层级。中国电信APP作为一款便民服务类软件，“充值”是其首要功能；对于用户而言，需要快速区分当前账户归属，直观地查看账户余额，便捷地实现充值，所以信息层级顺序是“导航栏”、“充值”、“账户余额”，视觉层级顺序是“充值”、“导航栏”、“账户余额”。
其次将功能区间二次划分。将位于顶部的“充话费”和“充流量”与“账户余额信息”间隔开，作为重要功能独占顶部区域，重构功能阶梯；同时将居中的导览图标区域缩小，避免因间隔过宽造成的封闭性不够问题，重现其完整性。
再次是统一设计语言。色彩基调是渐变蓝色，将辅色统一为冷色系的渐变色，例如渐变绿、渐变紫；对于需要突出显示的部分采用更轻透的橙色，降低对比度，减少视觉刺激；紧要提示色为红色，针对红色的使用要做到少而精简，只在重要信息上使用红色。确定色彩基调后，需要统一图标的设计风格，尤其是居中的十个子图标，这十个图标运用了两种设计语言，但增加了人眼判断负荷，不便自动归类，所以删减图标，促进功能轻量化。
最后减少雷同素材，筛选优质信息。例如右上角的背景和居中的卡片都有同样的客服照片，造成信息重复；底部的黑色提示框过于突兀，显示一半的卡片信息足以吸引用户向下查阅，不必重复提醒。
4.3. 界面设计方案
在设计操作中，优先确定品牌主色调。主色调渐变蓝色给用户清新、高效、智能的色彩感受，容易令用户信赖该品牌，品牌辅助色为橙色，起到了柔和的突出显示。
随后，针对信息层级的梳理，先给中国电信APP的首要功能“充值”设计面积更大的卡片，采用大面积的区域占据用户的视觉中心，同时以蓝色背景衬托出主体，吸引用户充值，提高用户识别“充值”入口的认知效率，进而降低操作负荷；移动“账户余额”的卡片位置，放置于“充值”下方，将信息的层级合理化；针对顶部导航栏的字体，减淡其颜色，使其融合于背景中；将背景内红色、黄色的宣传图片和跳转信息进行删减和弱化，替换为有用信息。
面对设计语言差异过大的问题，采取删减下排五个图标的方式。因上排图标采用了“中国电信”的汉字元素和LOGO，极具特色，且蓝色图标与白底对比强烈，人眼更易区分；十个图标化为五个图标，缩小面积，使得组件之间更加紧凑；而后更改下方卡片基色，统一为接近蓝色的冷色调，便于人眼判定整体区间。
删减页面中部分重复信息，例如删去右上角过于抢眼的客服图片，留下信息更为丰富、完善的客服卡片，删去底部的黑色提示框，留下显示一部分外框的卡片。优化后的界面如图9所示。
Figure 9. Renderings of interface design optimization
图9. 界面设计优化效果图①
4.4. 优化效果检验
A/B测试也被称为分离测试，是一种测试不同版本产品合理性的简单方法，可以快速找到不同变量对于结果的影响，以判断哪个版本更好达到实验目标。眼动追踪在虚拟现实中的应用高度多样化[13]，可以有效探究优化设计效果。
因此，面对中国电信APP前后两个版本的设计更迭，为论证新版本的界面设计更适用于用户，将展开A/B测试研究优化设计的有效性。根据实验目的，拟定一个假设：改良后的界面将会令用户的视线更集中，更易于找到充值区域。为验证该假设，本研究准备了眼动仪作为实验设备，并选取12位长期使用中国电信APP的用户作为受试人员。测试方案为受试者依次注视每个版本各5秒，生成眼动热点图和注视轨迹图，最终分析十二组眼动热点图和注视轨迹图，判断视线是否更加集中，用户是否更容易注意到充值区域。
结果如图10所示。眼动热点图显示：优化前，受试者视线停留在“AI助手”、“在线客服”这两个板块上，较为分散，无法快速找到主要功能；优化后，视线主要集中于“充值”区域。注视轨迹图显示：优化前，视线首先落在空白区域，随后从上至下，最终停留在“在线客服”板块上，整体视线轨迹分散，视觉焦点在上偏中处；优化后，视线重心是充值区域，停留较长时间，只在其他位置短暂停留。结果均符合前期假设。
Figure 10. A/B test results
图10. A/B测试结果③
5. 结语
本研究基于格式塔心理学视角，以中国电信APP首页为例，对便民服务类APP的界面设计进行分析。以接近性原则、连续性原则、共同区域原则为依据分析该界面设计的合理之处，再以格式塔心理学中其他原则分析该界面设计的问题，并给出优化设计方案。结果表明该优化方案起到引导和突出视线焦点的作用，为用户带来了和谐、统一的视觉体验。
注 释
① 图1、3、5、9来源：作者自绘。
② 图2、4、6、7、8来源：中国电信APP 11.3.0版本使用界面截图。
③ 图10来源：眼动仪输出结果。
NOTES
*通讯作者。