视差滚动类网页的特点、问题及应用原则

　　视差滚动作为一项应用于网页设计中的新型视觉技术，它所带来的视觉观感虽不及3D视角下呈现给观者的既虚幻又真实的视觉触感，但在虚拟空间的技术呈现上带给观者的深度感知特性与3D技术带给观者的视觉观感无异，而且在观看沉浸程度上，叙事性的介入也使其丝毫不亚于柏拉图的“洞穴隐喻说”和现代影院的观看情境。

　　一、视差滚动的构成及技术原理

　　视差滚动的运用使多重图层随着鼠标对页面的滚动而在横向或纵向上产生各自不同速度和位置的移动，其文本层通常设置背景层和前景层，背景层的运动最慢，前景层的运动和页面的滚动基本一致，贴图层介于背景层和前景层之间，可以跟据页面的需要适当添加，运动速度比背景层略慢。在视觉呈现上，除了设置文本层的滚动速率各异外，还可限定相应文本的显示范围。比如页面滚动时快要超出视域范围的文本会被褪色隐藏，只突出视域范围的中心内容，形成被遮挡的视觉上的分层效果。

　　眼睛在观看物体时形成立体感的因素有：“双目视差、运动视差、适应性调节、视差图像融合等”，视差滚动形成的视觉景深感主要是由运动视差的干涉效应造成的。当观者和视觉对象发生相对运动时，视觉对象的大小和位置在视网膜上的投射也会发生改变，近处物体的投影移动较快，变化稍大，远处物体的投影移动略慢，变化较小，这种由于相对运动造成的视觉对象的变化叫运动视差。例如我们乘座交通工具向窗外观望时，近处的物体运动较快，而远处的物体运动较慢，从而给观者以视觉纵深感和空间感。

　　二视差滚动类网页的特点及原因

　　1、图像文本为主要内容

　　此类网页一般是由分辨率较高的多幅图像彼此并列、交织或暗含所构成的，这里的图像不仅包含图片元素，还应包含动画和视频等文本形式。以图像文本为主要内容并不是对其它文本的摒弃，而是其它文本都融合进入图像中，成为依附于图像文本的一个次文本形式。

　　以图像文本为主要内容，一是因为高清图像的选择能迅速吸引受众的注意，带给观者极强的视觉冲击和美感享受；二是图像的信息量要远远大于文字等文本形式，图像中不仅包含用户看到的信息，也包含其潜移默化接受了但没有意识到的信息，这种信息更多是基于图像学和阐释学的；三是图像在拟态环境的空间塑造性上要远远强于文字等符号形式，因为“根据能指与所指之间的不同关系，符号体系可分为两类：由‘任意性关系’所形成的语言文字符号体系和由‘拟似性关系’所形成的影像符号体系。

　　”由于影像符号中能指和所指之间的拟似性和天然联系，使得图像文本在信息传播中具有方便快捷、直观易懂和形象确切等天然优势。

　　除了上述内部因素外，外部因素的诉求也是以图像文本为主要内容的重要原因。从结构形式来说，图像的分层设立是形成视觉空间感的必要因素之一，图像更容易跟随鼠标滚动而出现聚合、分离、隐藏、显现等视觉表现，这既不影响观者进行阐释和解读，也是奇观呈现的一部分；就技术应用而言，视差滚动更多是基于图像的，图像文本是其效果实现的必要条件，这从视差滚动最初在游戏场景中的运用就可见一斑，在没有文字文本参与的情况下依然可以呈现出视差滚动的效果；从信息传播的角度来说，受众面对海量的信息需要花费大量时间和精力选择性观看，而视差滚动同时呈现的多层视图使占据版面大量繁琐、枯燥和抽象的文字信息得以图形化、形象化和视觉化，缩短了观者的阅读、思考和解释时间，易使观者产生视觉说服和认同；从时代发展来讲，我们已经进入了图像时代，“作为文本的世界已经被作为图像的世界所取代。自有文字记载以来，文字作为一种交流与传播的媒介在其历史发展的漫长进程中一直占据着霸主地位，而借助现代性的传播手段使一系列静态和动态图像文本的地位大大提升。

　　2、单页面排版为主要形式

　　此类网页大多采用单一页面的排版形式，这种排版通常舍弃了子网页，以一个超出屏幕视框数倍尺寸的页面排满整版，通过鼠标的滚动使页面产生横向或纵向的运动，页面的各级元素也随之呈现出视差滚动的效果。

　　此种排版异于长短不一和子网页繁杂的其它页面。究其原因，首先，是视域扩大的需要。在一个较大版面中，屏幕相当于观看视图的窗口，页面滚动是为了给观者呈现更大的场景和视域范围变化，受众也能获取到更多的信息资源；其次，是交互性开发的需要。视差滚动需要用户使用鼠标滚动网页来实现，这一交互进程需要输入（用户）、媒介（鼠标滚动）、输出（网页效果）。较长的页面能调动用户频繁使用鼠标滚动，进而呈现出奇观动画的效果，激发用户深入往下探索；再次，是沉浸性延伸的需要。较长的页面可以让用户延长浏览时间，其中无限制向下滚动的页面设计既保证了用户体验的连贯性和渐进性，也使这种沉浸性不易中断和抽离。但是，较长的页面对网页的导航设计也提出了更高要求，用户必须对自己所处的位置非常清晰，也能通过导航快速定位，否则会产生适得其反的效果。最后，此种排版形式也是为了符合图像文本内容的需要，把所有内容都排在一个版面上，图像场景的叙事性进程就像一个纵贯始末的分段轴线，有开始、转折、高潮和结果，单一性的页面可使这种叙事性的表现更加流畅和完整，如图1就是用视差滚动表现电影《少年派的奇幻漂流》的故事情节变化。

　　三视差滚动类网页所面临的问题

　　视差滚动类网页不仅给观者呈现了一种深度错觉，还使网页富有动态的层次感，促使受众产生一种探究感和视觉欲，乐于探索各文本模块的内容。但技术的应用从来都是一把双刃剑，此类网页亦面临着许多亟待解决的时代局限：

　　1、文本加载的流畅性

　　以图像文本为主要内容的页面同时加载过多高分辨率的的图像时，会造成加载时间过长，而网页的加载速度对用户体验有重要影响。此外，当各图层随视差滚动而实时更新时，可能由于网速限制造成视觉上的断层和迟滞，这样不仅不能完美呈现出视差滚动的效果，反而还会造成信息传播的不畅、损耗和缺失等情况。

　　2、文本之间的融合性

　　单一图层不仅包含图像文本，还包含文字等次文本形式，次文本是对图像文本的补充，它们之间的融合性更多是版式设计的内容，此乃部分与部分的关系。但视差滚动类网页包含多种图层，不同图层文本要素之间运动或静止时的位置、距离和形态要根据用户滚动鼠标的速度进行精密测算，这要求设计师不仅要处理好部分与部分的关系，还要注意部分文本与整体文本之间的融合性。

　　3、视差滚动与网络设备的适用性

　　虽然响应式布局设计可以在手机、平板电脑和台式电脑等不同网络设备上实现统一的页面效果，但由于手机、平板电脑等移动设备的屏幕视框、分辨率和交互模式与台式电脑不尽相同，又受到其适时使用环境和网络信号的影响，所以会造成视差滚动类网页在移动设备的网络页面上效果不明显等问题。

　　4、视差滚动与页面内容的适用性

　　并不是所有网页都适合采用视差滚动，设计师判断其适用与否的标准在于：首先，其文本内容是否以图像为主，或者能否将其文本形式转化为图像文本；其次，能否采用单页面为主的排版方式，将所有内容编排在一个较长甚至无限长的版面上；再次，能否将现有文本整理为一个叙事性线索，将其故事化或场景化。目前采用视差滚动的网页大都以图像展示类网站为主（如图2），其它类型的网站是否适用还有待考证。

　　四、视差滚动在网页设计中的应用原则

　　尽管视差滚动的应用还存在很多弊端，但这丝毫不减观者对此类网页的浏览热情。因为相对于被动接受型的观看方式来说，观者更倾向于互动探索型的观看方式，这不仅关系到视觉当中的触觉性问题，而且还涉及到视觉权利的转移问题。为了发挥视差滚动在网页设计中的最大优势，务必把握好以下主要原则：

　　1、平面与立体相结合

　　平面与立体的结合，首先是二维与三维空间特性的结合。视差滚动本质上呈现了一个虚拟的立体空间，这个虚拟的立体空间是建立在“实体”的平面空间的基础上的。单页面的布局提供了一个二维的展示空间，而独立滚动的背景层、贴图层和前景层则提供了一个三维的展示空间。

　　不同图层的划分在鼠标静止时是融合在一起的整体，在鼠标滚动时又是相互独立的个体，静止时形成的二维空间与运动时形成的三维空间是一个有机联系的整体。其次是二维与三维文本特性的结合，二维层面的文本即单一图层上的文本，三维层面的文本即呈现三维空间的所有图层文本。不同文本层的作用及相互关系各不相同，背景层上的文本往往起到烘托故事化或场景化空间气氛的作用，贴图层是为了达到更好的视觉效果，主要起到衬托背景层的作用，但要避免对背景层和前景层造成视觉干扰，前景层作为表现主体，是最重要的文本层，对用户的展示也是最优先和集中的。平面与立体的结合不仅要注意空间特性的结合，更要注意文本图层上的结合，这样才能以空间展示文本，以文本构成空间。

　　2、叙事与展示相结合

　　叙事与展示的结合，即图像化叙事与奇观性展示的结合。视差滚动类网页以图像文本为主要内容，这与以文字文本为主的网页有明显区别。由文字文本为主到以图像文本为主的转换，把原本枯燥的文字信息转化为一个视觉化的图像场景空间，如果说文字信息给人一种天马行空的想象美，那么图像信息给人的就是一种直观可见的意境美。图像化的叙事并不是素朴性的呈现，而是一种奇观性展示，“奇观”本是电影影像艺术的表现形式，引申于此是因为视差滚动制造的“动画奇观”无论从视觉表现还是技术手段上都较为符合周宪对于“奇观”的解释：“是非同一般的具有强烈视觉吸引力的影像和画面，或是高科技电影手段创造出来的奇幻影像和画面及其所产生的独特的视觉效果”。视差滚动在二维平面上利用层层图像给观者制造出推拉摇移的镜头感、立体纵深的空间感和动静隐现的画面感等都带给观者别样视觉体验。图像化叙事重在传达图像文本信息的内容，奇观性展示重在表现视觉艺术变幻的形式，只有把图像叙事的内容与奇观展现的形式结合起来，才能使观者快速获知信息的同时，又能享受一场视觉的饕餮盛宴。

　　3、视觉与听觉相结合

　　视差滚动类网页要想让观者沉浸更深层次，不仅需要奇观性的视觉呈现，还必须把视听统一起来，即其网页的视觉效果要有音效设计相匹配。在平面信息时代，网页设计只注重了文本的视觉信息，而页面背景音频的采样率和比特率都较低，无法达到完美的视听合一效果。但是，“当一个时代凸显某种感觉系统时，其他的感觉系统会在整个平衡机制里被削弱从而导致机制失衡。但它们之间又会谋求新的平衡，其在某种意义上的削弱，会以另一种形式得以弥补”。到了立体信息时代，听觉上的音效设计得以强化，并逐渐摆脱了低音质的束缚。由于声音的空间信息要比视觉广泛，因此音效可以增强虚拟环境的空间信息，通过高保真的多声道立体声进行空间纵深感模拟，制作出能够满足场景视觉表现的音效，既烘托了整个页面的环境气氛，也悄无声息的降低了观者对视觉的依赖。此外，音效设计还提供了一种人机交互的新方式，页面文本的部分视觉信息可以通过声音传达给观者，使用户产生一种身临其境的临场感，进而启动周身的感官融入到虚拟的场景空间中。

　　五、结语

　　2012年12月20日，纽约时报官网发表了一篇《雪崩》（SnowFall）的报道（如图3），几天就吸引了数百万的访问量，该文作者约翰·布兰奇为此获得本年度普利策特稿写作奖。这篇报道的创新之处在于综合运用了文字、图片、动画、视频和音效等多种视听元素，并结合视差滚动将大型背景形式的图片和动画嵌入到页面中。从纸质媒介到电子媒介的转变并不是把传统的文本内容照搬到网络页面上，而是要综合运用各种交互形式，通过页面各层次内容之间的互补和配合，以形象化、多样化的交互的方式表现出来，带给观者非凡的视觉体验。