邢梦霞

摘要：界面信息结构设计在网页界面设计中占着举足轻重的作用。文章通讨对网页中信息元素的分析，挖掘网页界面中信息结构关系。从格式塔原理入手，结合实际网页界面案例，分析各原理对信息元素的组织与加工，体现人的视觉系统对信息结构的处理。

关键词：信息元素;界面结构关系;格式塔原理

中图分类号：J524 文献标识码：A

文章编码：1672-7053（2019）01-0082-03

面对新的时代，网络成为获取信息最有效的窗口，网页界面成为人与信息互动的载体。网页界面是指人与计算机之间以网络为平台的信息界面，它是一种由非物质化数字设计形态与人进行交互的[1]。在用户与网页界面交互的过程中，实现信息的传达与接受。网页界面设计属于人际交互设计的一种，因其自身的特殊性，信息设计需要具有自身的特点和原则，通过美学和人机交互原理对网页界面中的信息元素进行组织与排列，使信息更好的传达。网页设计的过程是设计师将原始数据转化成视觉信息的过程，是信息的编排与组织的过程。通过对信息元素的合理规划，实现有效的视觉引导效果，强化用户浏览思路，引导用户快速获取信息。

1 网页界面的信息元素

网页界面通过元素的组织向用户传递信息，组织效果的优劣直接影响用户的信息认知。网页界面中信息元素主要包括文字、色彩和图形图像，用户通过浏览界面获取信息。文字作为信息传递的主要手段，是网页界面中必不可少的元素，在信息的描述和解释中起着重要的作用。色彩是网页界面设计考虑的重要因素，人的视觉系统对色彩的敏感度非常高。界面中的色彩可以给人不同的感受，从而使用户产生想象[2]。通过色彩的吸引与引导，可以促使用户在界面中完成一些交互操作，提高操作效率。色彩的区别变化，可使用户得到及时的信息反馈，对用户的操作引导起着重要的作用。图像在网页界面中具有明显的优势，与文字相比，图像所传达的信息量远大于文字所传达的信息量，具有更强的视觉冲击力。图像既包含了静态的图片素材，又包括动态的Flash、视频等元素。网页中的图片类型可根据网站风格和内容进行不同选择，例如对于新闻网站，图片需要真实且高清，与文字相呼应;针对儿童网站，可考虑整体使用插画风格图片，凸显网站的个性化和差异化。图像有效地避免了单独文字描述可能出现的表述不清、理解差异问题。在网页界面中，图形的一般表现形式是几何形态。网页图形的表现形式主要有几何图形、表现符号等。图像和几何图形的结合丰富了网页效果，增添了趣味性和时尚感。

2 网页界面的信息结构关系

作为一个体系庞大的系统，网页界面设计既要考虑显性信息的准确传达，又要注意信息组织的有效作用。通过认知心理学原理可以得知，受生理和心理的影响，人们在视觉信息感知的过程中，视线流动是有一定顺序的，视线的接受特性被称为视觉流程。根据设计意图引导用户的视觉焦点，因此，向受众发送的网页信息将清晰、流畅、快速[3]。在设计优良的网页界面中，视觉流程是按照一条引线进行的，能够有效引导用户浏览网站，给予用户清晰的获取信息线索，也能使页面更加紧凑美观。界面结构可以分为显性的界面元素布局和隐性的信息结构化表现。

2.1 界面元素布局

在网页界面中，设计师根据一定的美学原理，在有限的页面空间中，组织各种视觉信息，如文字、色彩、图形图像。网页界面中的显性信息是指用户能直观察觉的，可通过阅读和浏览被感知到。有效地视觉信息交流或是将内容组织设计成块成为我们设计的核心任务[4]。结合用户视觉习惯和认知特点网站通过良好的视觉元素布局使界面具有艺术美感，用户更容易获取信息。

2.2 信息结构化表现

网页界面中的隐性信息是通过界面中的各种显性视觉元素所表现出来的隐藏性信息。界面中的隐性结构关系其实是对视觉信息构建结构，实现信息的结构化。通过对文字、图片等信息元素的组织和编排展现所需传达的信息，搭建合理的信息结构和内容组织对用户认知网页效果至关重要，良好的界面环境对帮助用户认知有很大的促进作用。因此合理规划界面中的元素，在界面设计过程中注重界面信息结构的表达，提高用户对界面信息的认知效率。网页界面以传达信息为目的，信息的组织关系有并列、关联、包含等。当界面中呈现多种信息时，有些信息可能是相关的，可以利用接近、相同形态等方式表现信息的并列关系;信息间的关联关系，可能是一对一或者一对多的关系，将关联的信息放置在一起，保留合适的留白，既能保持元素的联系性，又能提高网页的适用性;网页信息也存在着包合关系，通过对信息合理区分，将页面中的信息进行纵向延伸，减少单页面的信息量，缩减用户的搜索时间。

3 网页界面的格式塔原理应用

界面中元素的组织对界面信息认知有直接影响，因此合理规划界面中的元素至关重要。在界面设计中运用格式塔原理为设计师提供了一种新的思路，通過显性的界面元素布局，传达隐合信息关系，有效提高用户对界面信息的认知效率，提升用户体验。格式塔原理分析人的眼脑视觉规律，从整体角度把握事物的知觉结构，对信息进行简化、组织、加工来规划界面信息，使界面更加协调，易于理解。通过对格式塔原理的分析，提醒设计者在设计时保证让界面上的信息适应人的视知觉规律，提高界面的可视性。对于静态网页界面设计，最重要的格式塔原理有以下几条：接近性原理、相似性原理、连续性原理、封闭性原理、对称性原理和主体与背景原理。

3.1 接近胜和相似性原理

接近性和相似性原理都倾向于把信息经过梳理和归纳进行分组，将一大段信息分割成更易于浏览和阅读的若干块，降低认知难度。接近性原理是指人的视觉习惯会根据信息元素的相对物理位置远近，感知信息是如何组织在一起的。在一定的平面区域内，互相靠近的对象看起来是一组，距离较远的则被分为另一组。如图1，蓝色圆形在纵向排列上的距离相对横向上更短，人眼容易将图形认知成四条“竖线”;而右侧黄色圆形在横向排列上的距离相对纵向上更短，人们倾向将图形认知成四条“横线”，同时下方三条“横线”间距更小，所以人们会先将整体图形认知为上下两部分，再区分出上方一条“横线”和下方三条“横线”。

在网页界面中，相关联的信息元素可以利用接近性原理进行整合，利用设计元素的位置距离实现信息关系的表达。如图2，网页功能为展示图片信息，独立的图片模块包括一张图片、名称文字、标签图形三个元素，相关联的三个元素之间的距离明显小于模块与模块的间距。网站通过运用合理的留白方式，改变了使用分栏线区分信息的方式，减轻无关元素的视觉干扰，更具设计感。

相似性原理指的是对于具有相同或相似形状、颜色、结构特征的元素，人眼倾向于将它们归为一组信息。如图3，人眼将圆形归为一组信息，将矩形归为另一组信息，运用形状区分信息种类;颜色相同的蓝色圆形被认知为一组信息，黄色圆形则为另一组信息，通常颜色不同的信息更为突出，运用颜色区分和强调信息;对于结构上存在差异的元素，人眼首先将结构特征相同的归为一组，人们将大矩形视为一个整体，四个小矩形视为另一个整體，结构特征的不同可实现信息分类和区分信息层级。

在网页界面中，相似性原理应用情景一般有两种。一种是利用有共性的元素或元素组织形式表现信息，表示该信息具有相似的功能，满足了同一个任务需求。如图4，推荐的店铺信息包合七种，分别为店浦图片、店铺名称、星级图标、点评数量、菜系类别、位置信息、人均价格。这些信息元素采用一致的排列布局，具有相同的结构特征，用户倾向将界面中的信息感知为三个具有同一功能的模块，增强信息的关联性与整体性。另一种是利用元素的差异表示不同功能，并强调形状、颜色或结构特征独特的元素。如图5，主功能操作为四个按钮图标，其中“发送”按钮样式在颜色和图标上区别于其余三个，从而突出了重点功能，获得用户更多视线关注，提升操作效率。

3.2 连续断口封闭性原理

连续性和封闭性原则倾向于让信息以完整形态的方式呈现，将不熟悉的形式转换成符合以往认知的对象，自动补齐缺少的部分，从整体上把握事物。连续性原理是指人们倾向利用物体运动的趋势，将没有连接在一起的个体加工成连续的，将零散的信息认知成一个相互联系的整体。如图6，人眼在识别断断续续的线段时，会将断裂的部分在脑海中连接，同时连接成的整体是具有方向倾向，在识别图形时，会将图形认知为两条相交的直线和交叉延伸的弧线。如图7，在视频网页界面的“播放记录”信息中，节目图片最下方用线条元素表示观看进度，通过不同灰度的线段表示已观看和未观看的节目长度。用户在认知该信息时，不会独立地去理解这两条线段，而是根据方向的引导，将两条线段连接起来，理解线段合义。

封闭性原理指的是人们根据自身经验，更倾向于识别一个完整熟悉的物体，会自觉将存在缺漏的物体补充完整。如图8，左侧图形为四个扇形，人眼在识别时，倾向将图形认知为一个熟悉且完整的图形——圆形，自主将缺少的空白区域在脑中填充。封闭性强调信息的完整，呈现出的元素存在空缺，人们意识中仍会将元素当作完整的整体处理。如图9，“用户”和“星标”图形因重叠组合与前后遮挡的关系变得不完整，而人眼会根据已有经验，将后面的“用户”形象补充完整。采用不完整图形作为图标，使图标更透气，更具节奏感，且不会给用户感知理解造成困难。

3.3 对称断口主体与背景原理

对称性和主体与背景原理具有简化对象的倾向。对称性原理是指在面对复杂的对象时，我们的视觉系统会按照最简化的形式来认知对象，更易感知匀称的物体，倾向将对称的元素感知为一个整体。如图10，当人们看到左侧的图形时，人眼趋向将复杂的图形简单化，寻找具有秩序与稳定的元素，把图形认知为左右两个方形，从而降低图形复杂度。如图11，在网站中，对称的元素看起来是舒适、和谐的。

主体与背景原理是指在一个场景中突出强调某些元素，占据人们主要注意力，而其余元素退后成背景，起衬托作用。该原则为图像营造一种层次感，主体元素在视觉上更靠前，人们会优先感知主体部分，背景则不容易引起注意，从而通过这种形式简化人们的认知过程。如图12，人们的视线会先被面积较小的圆形吸引，面积大的矩形在之后才被感知。如图13，在网页界面中，在背景之上添加蒙版是常用手法。主体元素在蒙版之上，是页面中最突出的元素;背景在蒙版下面，进行弱化处理，用户仍能知道他们所处的环境。

3.4 格式塔原理的综合应用

格式塔原理是描述人们如何直观的感知对象。格式塔原理中各原理并不是孤立的，而是共同起作用的，它们之间具有强关联性，是相辅相成的关系，可以根据具体需求和用户场景，进行组合运用。但各原理之间存在着相互作用，同时使用某几个格式塔原理进行设计的时候，可能产生违反预期效果的情况。为了消除这种影响，当设计好页面之后，逐一的用各个原理来考量各设计元素之间的关系是否符合设计初衷，以达到最好的网页视觉效果。

4 结语

通过对网页界面中信息结构的分析，得知优秀的网站除了具有视觉上的美观，更重要的是信息结构设计。以格式塔原理为指导，界面上的信息以结构化的形式呈现，挖掘信息之间的相互关系和规律。这样的网页界面适应人的视知觉规律，提高网页的可视性。

参考文献

[1]乔柳.网页界面设计中的信息图形化研究[D].上海交通大学，2010.

[2]谭先联.开放性网络基于超链接的信息组织策略的应用[J].科技资讯，2010（22）：19-20.

[3]Shi P.Visual Information Interactive Design on Web Interface[J].Advances in Multimedia，Software Engineering and Computing，2011，（2）：457-462.

[4]黄琳斯.视觉层级下的网页布局设计研究[D].中南民族大学，2014.