基于视觉认知规律和信息传播理论的网页信息视觉流研究

王 伟

（上海视觉艺术学院，上海201620）

一、关于眼睛

人的眼睛主要依靠两种细胞（视杆细胞和视锥细胞）来获得感光的能力，利用视网膜成像，经视神经传入到大脑视觉中枢。眼睛通常能接收和识别一些基本的信息，包括亮度、形状、颜色、运动、立体空间和表面细节等情况。至少有80%以上的外界信息经视觉获得。识别总视场范围近 200 度，中间部分大概有 120 度是双眼视觉区域，两侧各 40 度是单眼视觉区域。[1]实际上，双眼直视的自然舒适区域只有40度左右。

以笔记本电脑屏幕为例，经过测算，用户（这里指成人用户，中国大陆男性平均身高169.7厘米，女性158.2厘米）[2]操作键盘的曲臂和屏幕的距离大约在45～50厘米之间。目前，市面上最符合良好体验度的笔记本电脑显示尺寸是15英寸，按4:3的标准屏来计算，物理尺寸大约为30厘米×23厘米，按72分辨率计算，屏幕尺寸正好为1080像素，这种屏幕尺寸的体验度最佳，使用起来感觉最舒服。通常，用户使用的屏幕存在物理尺寸和显示分辨率并不一致，规划和设计网络界面时，一般建议不宜超出此实际物理尺寸的范围。

二、眼睛的运动

眼睛寻找目标有其独特的机制。下图准确地描述了眼睛运动的工作机制(图1)。[3]

图1 眼睛运动驱动信息流的作用机制

眼睛在一个封闭的视域空间里搜索目标，通过视觉器官接收信息，并通过大脑控制中枢来决定是否进入下一个目标，眼睛的运动轨迹正是通过这种不断的反馈机制，驱使眼睛通过转动头部来获取更多的目标信息，从而形成一条甚至多条的视觉线。

三、视知觉和记忆

物像通过视觉器官将引起一系列的心理反应，这是一个由外向内传输信息的过程，科学家们从不同的角度来诠释这种现象，如内省理论①内省理论实验始于冯特，认为人的直接经验的获得需要借助内省。、S-R理论②S—R（S:stimulus;R:response）理论又称刺激—反应理论，其代表人物是赫尔、商代克、巴普洛夫、华生。、信息编码理论③信息编码理论是通过信息基本原理来解释人类大脑对信息输入、信息加工、信息输出的过程和方法。、建构主义理论④建构主义理论(constructivism)的重要概念是图式，该理论认为图式是人类认识事物的基础，是个体对世界的知觉理解和思考的方式。该理论认为认知发展受三个过程的影响：同化、顺应和平衡。其代表人物是皮亚杰、科尔伯格、斯滕伯格、卡茨等。、情景认知理论⑤情景认知理论强调认知是在实践和情景脉络中共同协商的结果，知识是一种动态的建构与组织。等。以维特海默、科夫卡、克勒为代表的格式塔心理学认为视知觉具有整体性、具体化、组织性和恒常性特征。格式塔心理学认为视知觉行为是一种整体的认知行为，即依据整体性“印象”来识别对象，并擅于将散落的形象具体化。在一定范围内改变知觉条件的情况下，人们对物体或性质仍会保持恒定的知觉倾向，如被观察对象的形状、大小、颜色、明度、方向、距离、位置具有恒常性特征。正是由于这种恒常性，当物象发生某些变化时，我们的眼睛依然可以辨认出其原本特征。这些认知特征使同类型的对象之间形成视觉线倾向。以皮亚杰为代表的日内瓦学派认为失去平衡是促进认知发展的动力，每个人在儿童期就具有了某种图式，在认知和知识之间的不平衡中，通过顺应和同化促成智力成长，这种成长过程是信息在大脑中匹配、同化或顺应地构建有序的过程，这种有序化过程，为相关语义之间的连接提供预设视觉线机会。借助这些理论来构建网络信息流，将大幅提升信息传播效果。

大脑如何构建有序的信息？过去曾一度认为，人的大脑特定区域对应这某一识别类别。最近，神经科学也在视觉记忆方面获得了最新的进展。美国加州大学伯克利分校的科学家绘制出惊人的人类“大脑地图”，并发表在《神经元》杂志上，揭示大脑如何能够将我们看到的不同物体和活动进行有序排列。(图2)

图2 大脑地图

科学家将这种大脑地图称之为“一个连续的语义空间”。[4]研究人员发现一些类别之间存在有意义的联系，例如拥有相同“邻域语义”的人类和动物。两者之间没有类似的关系则很难建立这种类型的语义空间，例如走廊和桶。这种发现，为我们提供了一种新的信息组织关系，为构建信息流提供了一种新的设计方法,可以利用这种“邻域语义”现象来预设视觉流轨迹，让用户更便利地获取信息,而这种关系也加强了阅读和理解的流畅性。例如在描绘一个有关美食的信息时，与其相关的“领域语义”可能是各种各样的精美的厨具、新鲜食材、丰富的调味品、鲜艳的色彩、漂亮的形状，也可能是享受美食的表情和肢体语言等。

四、视觉运动规律

视觉流是认知和记忆机能所表现出来的自然现象。视觉流不仅具有线性特征，也具备方向性特征。

马斯洛认为，寻求安全感是人在获得基本生理需求之外的第二基本需求。个体出于安全需要，眼睛首先会寻找主体所处环境的边界，这种现象在刚出生的幼儿期就会表现出来。例如，当人进入某个陌生空间时，通常先寻找这个空间的边界。当某个物象进入人的视野时，同样会在第一时间寻找物象的边界。当人的眼睛浏览网页时，眼睛即会对网页边界做出确认的动作反应。由于视觉活动所表现出来的衡常性具有接近律、相似律、闭合律、连续律、成员特性律等规律。眼睛一旦执行确认边界和寻找焦点以后，在相应的空间内会从焦点开始连续寻找相关要素，视线会向信息相关的方向移动，如向着和焦点相同或相近的指向、颜色、大小、距离空间或语义等，这就形成了视觉流现象。这种现象在大脑里绘制出了一张张“连续的语义空间”的知识记忆图谱。

根据观察，当物象进入眼睛的视野时，视觉活动轨迹从哪里开始，到哪里结束，有其特定的规律，这些规律反映了视觉线、视觉焦点和安全空间之间的关系:

1.当眼睛进入某个视域时，眼睛具有停留在画面左上角的倾向。

2.眼睛总具有从视觉第一焦点沿着顺时针看一张图片的倾向。

3.眼睛对图片中的人总抱有特别的兴趣，然后才注意到其他的物体。

4.形状、色彩、方向、大小等对象属性的对比度越高越容易成为视觉焦点，视线容易根据视觉刺激强度级次由强向弱的方向流动，形成视觉流。

5.人们的视觉焦点总是最先停留在刺激力强度最大的地方，然后向弱方向流动。

6.视线流动的顺序，还容易受到人的生理及心理的影响，一个共情的对象更容易受到视觉的关注。

7.由于眼睛的水平运动比垂直运动快，更容易，更省力，因而在观察物象时，容易先注意水平方向的物象，然后才注意垂直方向的物象。人的眼睛对于画面左上方的观察力优于右上方，对右下方的观察力又优于左下方。

8.由于人们的视觉运动是一种积极主动的行为，具有很强的自主选择性，往往先选择所感兴趣的视觉物象，而忽略其他要素，从而造成视觉流程的不规则性与不稳定性。

9.视觉具备格式塔认知心理特征，能有将相似的对象组织在一起的记忆能力，从而形成各种不同的视觉线和形状，如相似的形状、大小、色彩、位置等。

视觉流具有长度属性和运动时间属性，这些长度属性又可以分为字的长度、阅读时间的长度、视线扫描的长度。研究表明，在不同性质的网络媒体上，视觉流长度对信息传播的效果影响非常明显。

通过对文本的长度对传播的影响研究，结果表明在Twitter与Facebook上的统计表现比较迥异，但是和Demian Farnworth在Google上的发现比较接近。研究机构Buddy Media和Track Social认为，Twitter文字的理想长度是100字符，根据统计结果,Twitter长度在71—100字之间的转发量最高。Facebook帖子的理想长度不超过40字符，Jeff Bullas 通过分析帖子的受“喜欢”率和评论率发现，帖子内容少于40字者获得的互动率要高86%。Demian Farnworth发现Google标题理想长度不超过60字符。他的建议是标题最好一行解决。Kissmetrics的研究结果发现，标题的理想长度为6个字，受众最关注的是标题的前 3 个字和后 3 个字。[5]

社交媒体专家 Derek Halpern发现，段落的理想宽度为40～60字符[6]，内容宽度决定了媒体给人留下的印象。内容宽度大小决定了文章给人的观感是简单还是复杂，同时也是让读者理解程度最大化的关键，这种研究对网页设计的网格化设计进一步提供了科学依据。按照英文的单词平均长度来看，大概相当于8～11个单词。相对而言，中文的信息压缩率更高。因此，在网页设计布局时，无论是960网格系统还是1200网格系统⑥960网格系统和1200网格系统是由MIT媒体实验室开发的适应多屏幕显示阅读的网页设计技术框架，主要由HTML、CSS、Javascript三项技术组合完成，可以通过合并拆分来自由组合网页的版式，已经广泛应用于网络前端项目开发中。，每两个单元能够容纳12个汉字。

博客网站Medium的研究结果表明，博客的理想篇幅是7分钟、1600字。Medium衡量文章表现的标准并非点击量而是关注度。他们通过研究发现，文章的受关注度(阅读时间)随篇幅上升，到7分钟篇幅时到达顶峰，此后受关注度便逐步下降。如果是图片较多的文章则字数以1000字左右为宜。

种种研究表明，视觉流的长度在不同的网页类型中所表现出来的影响和要求并不一致。在网页设计过程中，需要充分考虑其长度属性对信息传播效果可能的影响，利用视觉跟踪技术可以精确掌握视觉活动的特点，以便于优化视觉流，增强传播效果。

五、精确测量视觉运动

过去，视觉设计的传播效果常常由设计者或者决策者的经验来决定，随着技术的发展，人类的行为和信息的传播方式、评估方法均发生了很大的变化。网络、移动终端普及使人类的接受信息的行为变得越来越碎片化，这种粗放式的设计方法已经不再适应现代传播的要求。我们需要借助一种新的设计和评估方法来解决有效传播问题。

眼球跟踪技术广泛运用于实验心理学、应用心理学、工程心理学、认知神经科学等领域。现在，很多企业和信息传播研究机构使用这项技术来测试页面传播效果。眼球跟踪技术除了需要一台摄像机和一台显示器，不需要任何专业硬件，所以部署这种技术经济便捷，只要使用一台标准摄影机，这种系统鉴别用户的准确度就可以高达97%。用眼球跟踪技术，我们可以精确地发现页面信息之间的关系。

眼球跟踪仪工厂利用跟踪仪对不同的网页进行了视觉兴趣点的跟踪实验。通过该实验，可以精确统计在不同的区域视觉对内容的反应。这里记录了平均驻留点时间、首次驻留点时间、关注的比例，精确的数据可帮助改善网页信息的传播效果。图3测试计量了视觉运动的方向及其第一次关注的时间、平均视线驻留的时间、及其关注的人数比例。

图3 眼睛跟踪仪统计的Linkin网站页面的眼球热图区域

在图4的案例中，通过视觉跟踪仪测试的用户数据后改善的传达效果和未改善时的信息传达效果对比，我们可以发现：画面中红色越浓，眼睛在此驻留的时间越长，红色区域表现出来的椭圆形，带有一定的指向，透露出了被测试者的视线轨迹移动方向。

图4 画面改善前和改善后视觉跟踪仪测量的眼球热图结果对比

在图5中，我们可以发现在右下角的那个热区，它并不符合视觉规律，但确是一个很热的区域。笔者认为有三个原因导致这样的结果。第一，左侧指向性线条将关注点引导此位置；第二，白底红字的强烈对比强化了视觉效果；第三，留白的使用，突出了内容。由此可见，视觉线在页面信息传播中发挥了积极引导视觉移动的重要作用。

图5 视觉跟踪仪所测试的klout网页热点

六、制造和改善视觉流

利用视觉运动规律和构建信息流方法能够有效改善传播效果。

信息流（Information flow）是指信息的传播与流动，人们采用各种方式来实现信息交流，从面对面的直接交谈到采用各种现代化的传递媒介，包括信息的收集、传递、处理、储存、检索、分析等渠道和过程。

随着眼睛的运动轨迹，大脑在不断地进行收集、传递、处理、存储、检索和分析看到的相关信息。信息流的形成过程有赖于大脑活动；大脑活动是一种有目的地组织信息的行为。强化视觉运动，通常有两种途径来促进这种行为的发生。一种方法是利用相关的研究成果构建一种人为的视觉流方式，常常采用图形、位置、大小、方向等要素制造某种序列方式来实现；另一种方法是通过人脑对语言单位的连续意义的存储及理解的模式来构建视觉流方式，从而增强信息传播的效用，文本常常采用这种方法。利用以上两种方法进行有效组织视觉认知路径，可以增强传播效果。

巧用视觉形态制造序列关系来构筑视觉流，通过有意识地设计某种线性结构，引导眼睛的运动方向，例如直线、S型线条、Z型线条等等。这些结构形式，促使眼睛跟随着相关预先设定好的路径浏览，大脑试图跟随这些路径去理解和记忆这种结构上的某些文字的连续性信息或者图形信息。这种预设能提升信息认知和记忆的流畅性，增强信息传播效果。

视觉通过图像和文字来获取信息，选择和组织图像和文字，即运用图形记忆法的工作原理，将图像和要记忆的文字从发音或感觉上建立某种联系，或者通过技术处理语义之间的关系，可进一步提升信息传播效果。

英国著名语言学家Michael Hoey 教授在关于“Lexical Priming and the Properties of Text”[7]的报告中从三个方面阐述了他对词汇触发和文本属性的认识，提出词汇搭配和词汇习得的研究问题和语义触发对语言习得的解释，指出任意一个词项或多词单位以一种特殊的语义关系、衔接关系、结构关系构成了词汇的触发因素。这种连续性的触发将引导视觉线的发生。

对视觉形态的预处理和对语言单位的处理，在形式上和内容上构建出了一个完整的信息流，眼睛在这条路径上移动，形成有效的传播效果。

七、结语

2016年，Google的搜索量突破了2万亿次。2019年底，中国互联网页面将突破3000亿个，现在没有人能够说清楚全球页面的规模，在这种情况下，借助大数据的处理手段来分析、设计和优化网页信息是未来设计的一个重要趋势。视觉流是眼睛运动的一种自然现象，也是获取视觉信息的一种方式，依托眼动跟踪仪捕捉大数据可以帮助优化视觉流，或者通过预设视觉流中的上下文语义结构关系，这将促进用户对信息的解读和理解，增强信息传播效果。