谈网页的转场设计

摘要：如果我们把网络比作一张网，那么网页就是这张网的总体框架，而"转场手段"则是使框架更为牢固的连接点。要让这张网接的结实不漏网,我们就要把这"转场手段"做得漂亮并且做得恰到好处.就像张网样,如果你点接的不牢固就容易蹿破,如果接的不合适就容易漏网,水中有大大小的鱼群,针对不同的鱼群我们就要织出对应的网来,要织出对应的网来就要灵活的掌握好接点,也就是所谓的"转场手段",把"转场手段"做好做的牢固做的恰倒好处,这样我们才会打捞到更多的鱼,获得成功.本论文将重点论述网页设计中的"转场"特色，并将试图从人们情感上出发，归纳几种经典的"转场"方式在网页设计中的运用规律及使用优势。文中列举了几个现在网络中的优秀案例，并结合自己的理念，进行了深入的分析和理论总结。

关键词：网页设计；转场；转场的情感中图分类号：G648文献标识码：B文章编号：1672-1578（2014）16-0013-01随着科学技术的变化和发展,网络技术日新月异,变化万千.在网络世界里，技术永远是起着先导作用的，永远跑在前端。网页设计则随着技术的改进而改上。浏览器的出现，给网络世界带来了新的大变化，这样的变化发展给网页设计带来了表现新天地,大量的"转场"也逐渐应用于网页中.使得我们的网页带来了丰富多采的画面,也使得信息传达与思想交流得以在网页中实现。

1.转场的概念

转场是指自一场景转至另一场景，或自一段落转至另一段落，所采用的种种方法都叫转场。作为电影，动画片几乎同一时期出现的视觉艺术它们有着及其相同的表现手法，在这些表现手法中，"转场"是起着关键作用的。在电影中的转场也就是动画片中的转场。它是构成电影.动画片的最小单位"镜头"。一个个镜头连接在一起形成的镜头序列叫做段落。每个段落都具有某个单一的、相对完整的意思，如表现一个动作过程，表现一种相关关系，表现一种含义等等。它是电影.动画片中一个完整的叙事层次，就像戏剧中的幕，小说中的章节一样，一个个段落连接在一起，就形成了完整的电影、动画片。因此，段落是电影.动画片最基本的结构形式，电影.动画片在内容上的结构层次是通过段落表现出来的。而段落与段落、场景与场景之间的过渡或转换就是转场。

在动画片中，转场是表示一段时间的经过，它会影响到动画影片的节奏和叙述的流畅性。因为作为动画片它与通常的电影而讲，动画片的剪辑更追求转场技术的丰富性，这是源于动画片更为丰富的非线性编辑和动画片本身更为丰富的动画语言特色所决定的。从角色设定，灯光设定，场景设定，镜头语言及转场方式的设计上，都有着巨大的表现空间与创作自由；在动剧情中也有着更为广阔的创作空间。话说："动画片中没有什么不可能。"这样给我们的转场提供了更为丰富的视觉和情感。

一部完整的动画作品是由多个情节段落组成，而每一个情节的段落则是由多个蒙太奇镜头组成，每一个蒙太奇镜头段落又由多个镜头组成。场面的转换首先是镜头之间的转换，同时也包括蒙太奇镜头段落之间的转换和情节段落之间的转换。为了使动画作品内容条理性更强、层次的发展更清晰，在场面与场面的转换中需要一定的手法"转场技巧 "。这样动画片中的转场就出现了。

随着科学技术的发展,转场也逐渐应用在网页中。网页，是网站中的一[页]。是构成网站中的基本元素，是承载各种网站应用的平台。我们用通俗的话来讲：你的网站是有网页所组成的。而所谓的网站是用于展示特定内容相关的网页的集合。这些网站集合在一起又成了我们今天的国际网路（因特网）。就这样作为单一元素的网页中的页与页之间的转换，每一个有多个网页组成的网站之间的转换就出现了现在网页设计中的转场，并且像动画片中一样它也有着相对的联系性、视觉性和情感在里面。它同样影响着阅览着的心情变化。

2.网页设计中的转场手法

在网页设计的转场中，转场效果也就是网页过渡效果，是指在进入或离开网页时，页面具有不同的效果，添加此效果可使页面看起来更具动感。更能带动人们的情趣，好奇心。它能同时得到视觉、听觉和思想三方面的享受。

网页设计的转场它是得宜以浏览器这个新技术的出现，使得信息传达与思想交流得以在网页中实现，图象、声音、影像等要素得以在网页中实现。这样先出现在出版印刷、广播电视以及光盘等媒体上的表现形式，逐渐地在网页设计上也同样的得到了表现的可能。只是在网页中它存在着两方面的冲突矛盾，至今还持续着，而且这种冲突将永远无法得到解决。因为各种技术都能用以网页中使得我们的网页下载时间成倍地增长，在更严重的情况下，任何情报也无法传达出去。所以说有利也有壁。但这样也难以影响到人们对网页设计中转场的设计，无论是网页设计师还是用户，都希望网页更有魅力，更有感染力。所以大量的转场还是应用在网页中。

在网页中的转场，就是把从一个页面到另一个不同页面连接起来的点。这个连接点我们要保证它的完整、流畅。我们可一把它称之为网页的转场，在这里我们可一把它划分为两部分动态转场和静态转场。

2.1动态转场。动态转场就是由一个页面动态的结束转到另一个页面动态的开始，动态转场也称之为我们的技巧转场，如电影、动画里的淡入淡出 划接 叠化 翻页 波状溶镜等这些技巧转场都属于网页中的动态转场，在转场的 这一段时间内会给读者带来一些时间的浪费，不知要做什么，只能白白的浪费掉，而我们在这一段时间中加入转场的技巧性转场也就是我们的动态转场，那么这一段时间就不会白白的浪费掉，在等待下一个页面的同时我们页可以享受转场带来的一些乐趣，如网页"鼎科.阿布阿布"。它是一家房地产的网页,在网页中它使用了动态转动态方式，点开网页它先显示出一块咖啡色的底色渐渐的阿布从画面中间破纸而出。然后到达进入下一页面的画面状态，接着点击按钮页面开时发生转场来到了下一个动态的画面。

这就是一个动态转动态的转场过程，也就网页中所谓的动态转场。也就是电影中的一个技术性转场。还有网页中用到的"叠化"，"叠化"是指前一个镜头的画面与后一个镜头画面相叠，前一个镜头逐步隐去，后一个镜头的画面渐渐地显现的过程。溶解镜头一般长度就是两三秒，在网页中页是如此，只是在网页中有网速的限制，但这丝毫没有影响到"叠化"在网页中的运用，因为它能勾起一个人的兴趣，进而得到下一步的情趣。来自福特旗下子品牌野马的广告网站里的页面，它用到了转场里的"叠化"。它在改变颜色时它用到了"叠化"，先是红色的车慢慢的淡去，后面蓝色的车渐渐的呈现出来。这样的转场会给人们带来一股淡淡的情意，不会突然的呈现。给人于转变的一个过程。在QQ空间相册中的动感影集中好多照片与照片的转场也常用"叠化"。图片我就不举了。

如上面所举的例子就是我们指的动态转场，就是由一个页面动态的结束转到另一个页面动态的开始的转场。关于动态转场的例子不再多提，下面我们进入用的最多，也就是最好运用的"静态转场"。

2.2静态转场。静态转场就是直接的转场，没有任何技术效果 ，页面直接转到下一个页面； 页面之间直接转换。例如现在的淘宝网中，页面与页面之间的转换就是直接的转场，没有加过任何效果，它是直接转换。直接转换它好在不用长久等待，它能够很快的得到信息，这一转场它常用于门户网站上，一般娱乐性的网站很不用，因为它的好处就是要很快的传递网页信息，它要求要快。一般都是文字性的东西。例如"百度"它就是要给你带来便捷，很快查到你想要了解的东西，还有"Google"这一类的网站常用，迅速跳转。

3.转场中的情感含义

网页转场是人们对网页的一种情感寄托,它能同时得到视觉、听觉和思想三方面的享受。影响着人们的情感。情感是态度这一整体中的一部分，它与态度中的内向感受、意向具有协调一致性，是态度在生理上一种较复杂而又稳定的生理评价和体验。概括而言，情感的重要作用主要表现在四个方面：情感是人适应生存的心理工具，能激发心理活动和行为的动机，是心理活动的组织者，也是人际通信交流的重要手段。总的来说情感就是对客观事物是否满足自己的需要而产生的态度体验。

人非草本，孰能无情？每个人在交往中都会产生情感，不同的情感会对交往产生不同的影响。不管是事还是物它都会产生情感。网页设计也是同样如此。人们赋予了它情感，它能影响着一个人的情感，而且这样的情感会使我们的网页更具生动性和互动性。

那么我们网页转场中所产生的情感含义指的是什么呢，就是我们在打开一个网页时有一个页面接到另一个页面时自然而然流露出来的对其而产生的太度体验。它分为三个方面的体验，视觉、听觉和思想上的体验。

从视觉上分析，人的思维有很大部分是通过视觉形式产生的。进行视觉思维就是在事件或计划之前，运用想象和视觉记忆将其呈现在脑海里，大多数情况下，我们制作一件成品，都要事先在脑海中想象它的样子，让单前的灵感自然而然地引出下一个灵感。因为人和动物感知外界大小事或物时，视觉是第一时间带来感受到的，它起着关键性的作用，在网页转场的那一刹那，首先带来的第一印象是视觉给你带来的享受。

科学技术日复一日，年复一年的不断发展。在这形形的信息时代，给技术穿上了人性化的外衣，对技术进行封装。因此有了人性化设计。人性化的设计给我们的网页带来极大、极强的吸引力。给我们的网页增添了思想情感。使它富有了人性化。其实这一切的得宜就是转场效果的人性化，给它赋予了人性化的"设计"。使它富有了情感。在视觉上营造了一种技术形态的复杂性心理效果。我们在转场中增加了细节形态、动态效果来使艺术创作中的平面作品更具生动性、互动性。

现在的许多个性网页设计作品中把转场增加了一些科幻成分使得我们的作品更具神秘性，像这样的作品我们大致说来有以下几点：

3.1在转场中增加复杂的细节，用复杂性的小细节去堵塞读者的理解通道，人为的建立读者与所描绘的页面之间的心理屏障、即营造了一种"敬畏"的情感。把观众的注意力带领到画面的整体视觉冲击力的直接杀伤范围内。例如：在VOLOV（沃尔沃）汽车官方网站里的转场它就考虑到了这一点，

3.2在转场中增加复杂性的现代视觉艺术效果给读者直观的心理感受。因为视觉效果是科技艺术与读者交流的必要手段。所以网页设计师们就用这种视觉上的具体复杂性的艺术效果来阐述并向读者传达奇幻绚丽的视觉感受和心灵感受。

3.3在转场中用细腻与真实的现实生活中的模拟来让观众更加身临其境。把观众带到现实中去，例如：在网页转场中我们模拟一个现实生活中翻书的一个动作，让观众觉得自己好象在真实的翻书一样。这也是我们一个未来网页发展的趋势。让观众领略到身临其境的心理感受。得到情感的宣泄与交流。

从听觉上来分析，的声音它能贴进人和人之间的亲和力，也能促进人和事物之间的情感交流。在网页转场中容入声效。使人与网页之间模拟出象现实生活中人们交流时的情景，使网页具备与人之间的情感交流。这样使读者在阅览时对此进行相互间的情感渗透和交流。在转场中我们不紧要得到视觉的享受而且如果能同时能感受到听觉的享受，那么会使我们的转场更具生动信和互动性。

从思想中来分析，读者的心情会随着转场中情节的变化而影响，奇幻的转场会给读者带来奇幻的色彩和想象，它能沟起读者的幻想空间。使读者心情和思维跟着网页一起变换。以上便是我对网页转场技巧在视觉、听觉、思想三方面的体会。

如果说网页转场只是考虑画面与画面之间的关系，还有听觉方面和思想方面的因素的话那也是不够的。因为它还存在着流量因素的影响。流量也非常重要。所以也不能只是为了好看达到更好的艺术效果。我们同时要考虑两方面的因素。因为流量会影响打开网页的速度。所以不一定好的转场，我们就一定要用，虽然好的转场会带动读者的情趣，但会给网页增加大的下载量从而影响到我们的网速，所以我们要慎用。每一个成功的网，都会同时运用到多种转场方式。但在具体运用时，无论是技巧转场或是无技巧转场都必须符合剧情和艺术风格，切不可滥用、乱用。用得巧妙，不仅会给观众带来艺术感染力，同时它会影响到视觉、听觉和思想的情感交流。参考文献:

[1]《网页设计视觉形态》解勇 辽宁美术出版社

[2]《幻想艺术》 2005年05期 黑龙江美术出版社

[3]《美学》第二卷 黑格尔著朱光潜译 商务印书馆1979年版

[4]《影视美学》彭吉象著.北京大学出版社2002年版