高校门户网站首页动态Banner的制作研究

孙慕梓

摘要：动态Banner是高校门户网站首页的重要信息传递区域，也是高校门户网站建设的重要工作。本文从策划、设计、制作与发布四个角度，探讨了动态Banner制作的常用工具与方法；并提出了高校门户网站动态Banner策划规则。设计师在策划和设计高校网站时，合理运用本文阐述的策略与规则，可以更加突出网站的高等教育特色，还可以极大地提升网站的视觉吸引力。

关键词：网站；Banner；Photoshop；Flash

中图分类号：TP393 文献标识码：A 文章编号：1009-3044（2016）02-0204-03

Abstract： Dynamic Banner is an important information delivery area of the home page of the university portal， but also the important work of the university portal website construction.From planning， design， production and release of the four aspects， this paper discusses the dynamic Banner production of common tools and methods； and proposed the university portal website dynamic Banner planning rules. In the planning and design of college website， the reasonable use of the strategy and the rules of this article can be more prominent website of the higher education features， but also greatly enhance the visual appeal of the site.

Key words：Website； Banner； Photoshop； Flash

随着互联网技术广泛应用于社会政治、经济、生活等各个方面，网站已经成为人们在Internet上发布和传递信息的重要渠道，同时，网站也成为人们检索和获取信息的重要方式。随着我国高等教育事业的蓬勃发展，门户网站建设已经融入高校校园文化建设中，业已成为加强高校对外宣传和对内管理不可缺少的一环。好的门户网站，能够给浏览者以清晰明确的信息展示，能够让浏览者高效地了解到学校的特色和内涵，也能够充分体现出校园文化建设的和谐与理性。

高校门户网站是凝聚高校特色文化与教育模式的载体，就如同一张网络“名片”，传递着大学的信息与风貌。然而，建设优秀的高校门户网站，除了丰富的校园静态信息外，最能体现网站特点的就是动态Banner的设计与制作。

网站动态Banner建设分为策划、设计、制作与发布四部分。其中，策划阶段的主要任务是在明确高校宣传定位的前提下提出设计规划；设计阶段的主要任务是按照Web特有设计规律制定出网站动态Banner美学方案；制作阶段的主要任务是使用最合适的方法完成动态Banner设计方案；发布阶段的主要任务是测试效果的连贯性与生成最终的格式。网站动态Banner建设既需要艺术上的美感，也需要技术上的精湛，是艺术与技术的融合与统一。通过艺术与技术的科学结合，高校可以根据自己的特点和性质量身定制出一套符合自身特点的动态网站Banner。

1 高校门户网站首页动态Banner

高校门户网站的首页通常由Logo、导航、Banner、内容、链接、版权六类元素组成[1] 。高校网站首页Banner是指，在一个高等学校的网站首页中，横向贯穿整个或者大半个页面，并且能够突出显示出学校网站的主题、主旨或者主要特色的图案区域。

Banner可以位于网页的顶部、中部、底部任意一个位置处，高校网站首页的Banner通常位于页面的顶部和中部，较少置于底部去显示。Banner既可以使用单幅静态图形展示，又可用多帧图像制作成动态效果展示。其中，多帧图像展示出的动态效果称为动态Banner。

动态Banner是目前高校门户网站建设的国际化发展方向。作为教育和成长相结合的统一体，高校承载了不同侧面的发展变化，仅通过单幅图片很难把一个高等院校的历史沿革与校园百态，恰当而又充分地展示出来。然而，表现形式极其丰富的动态效果有效地解决了这一问题，动态Banner可以更充分地展现出高等院校不同视角下的人文风采，也可以更充分地吸引住网站浏览者，让浏览者第一时间捕捉到高校的特色风格。因而，以哈佛大学为代表的欧美知名高校，已经率先采用了动态效果作为其门户网站首页的Banner；目前，国内高校也在积极的使用动态Banner作为其网站最大的设计特色。

2 高校门户网站首页动态Banner的策划原则

目前，可链接的国内高校网站超过1400所，虽然这些网站首页框架不同，但是绝大部分网站表现出了在视觉效果上雷同、在设计风格上相似的特点。原因在于：大部分高校网站的首页使用校园风景或人物图片作为Banner，没有经过科学有效的策划阶段，及时采用了动态效果，也只是多幅静态图片的延时刷新，因而这类动态Banner只能起到单一的页面装饰作用。

Banner通常是页面中面积最大的图片元素，高校网站首页在Banner策划上应遵循一定的原则。

1）高校门户网站首页动态Banner的定位

策划首页Banner，首先要了解网站的定位。随着生源数量与质量压力的加大，高校网站在定位上也产生了一定的变化，由展示演变为了推广。人才是高校的发展的主体，国内外高校都希望能够通过网站等宣传方式，在最大程度上吸引住最多、最优秀的考生。因而，高校网站动态Banner的定位，不仅仅是一般意义上的推广，更是一种准确、独特、及时、有效地体现出学校特色和办学内涵的传播。

2）高校门户网站首页动态Banner的策划原则

（1）简洁性原则

最有效的动态Banner策划通常具有简洁的特点。根据网页的7s定律，如果在7秒钟之内，高校网站的浏览者没有看出首页动态Banner传递的指定信息，那么该Banner可以认定为失败的产品。目前国际上比较流行的高校动态Banner风格为简洁，简洁才能够带来清晰和精炼，简洁才能够突出表达的重点。

动态Banner策划的简洁性并不等于简单化，而是一种平中见奇的构思，意料之外的创意，也是一种思想上亮点，形式上提纯。

（2）实时性原则

校园网站同校报、招生简章等传统纸质宣传媒体的最大不同之处，就在于实时性。高校网站的实时性不仅仅体现在新闻的上传和传播上，也体现在动态Banner的更新和推广上。针对特色新闻及人物，凭借网络大容量和多媒体的特点，可以从不同角度和内容策划动态Banner，进行横向报道和纵向深入。

（3）冲击性原则

网页能否最短时间吸引浏览者视线，其根本在于视觉冲击力。因而，在策划高校网站首页动态Banner时，要把握住冲击性原则，突出静态画面特征和动态技法特征。达到与人沟通的目的，以表达自己的思维和想法。好的办法能帮助设计师们达到这样的效果呢法。通过运用各种方式抓住和强调Banner主题特征，并将这些特征置于静态画面的主要视觉部位和动态效果的关键切换时间，使网站浏览者在接触到页面的瞬间即很快感受到，从而产生强烈的视觉冲击力。

（4）主线性原则

动态Banner不是毫无关系的图片堆叠，而是一个完整的主线，共同向浏览者阐明了一个真实的校园情怀故事。基于此，在策划高校网站动态Banner时，要设定好主线，通过时间、空间发展变化展现出想要表现的理念。

（5）加速性原则

优秀的动态Banner策划，一定是充分考虑到了加快下载速度的最有方案。互联网中有一条不成文的法则：如果整个页面下载时间超过30s，浏览者在心理上将对该网页产生极强的负面评价。动态Banner文件本身就比静态图片要大，如果高校网站在策划动态Banner启用了过多的动态效果，或者使用了分辨率过高的静态素材，网站首页的下载速度很难保持在浏览者心理愉悦的范围内。策划中，要规定好动态效果保持在3秒内，最多不能超过5秒。因此，为了保证网站对浏览者的吸引力，在动态Banner策划部分要强调加速性，保证页面的下载速度。

3 网站动态Banner的设计

根据网页的7s定律，浏览者对网页注意力只能集中在几秒内，所以对网页动态Banner的设计除了需要表现网站宣传主题外，还需要制定相应的设计方法并使用成熟的设计工具。太多过场动画，需第1时间进行产品的展示，命中主题。并配以鼓动人心的措辞口号引导用户。

1）动态Banner设计方法

（1）分析需求，完成动态Banner风格设计

需求分析就是确定要达到什么样的设计效果。在动态Banner设计过程中，首先要进行的需求分析。高校在不同的发展时期，网站会有不同的宣传目标，这样就会有相应的宣传主题。在需求分析过程中，设计师应系统地分析高校的宣传目的和需要，从而分析和寻求动态Banner设计方案中的主题。

确定好高校宣传主题，就等于确定了网页动态Banner的设计风格。在风格的设计过程中，要确保主题突出、不能喧宾夺主，更不能风格与主题相矛盾。这就需要设计师在完成动态Banner风格设计时，要减少过多的辅助干扰元素，不要追求传达过多的信息，减少过于细碎的切割处理，突出用户的浏览重心。

不同于传统静态Banner，动态Banner风格设计要确保画面效果和切换动画之间风格的统一性。统一的风格有助于加深浏览者对高校网站的印象。风格统一，并不意味要把每个画面的颜色及元素完成的相似，可以选用不同的色彩搭配及元素形式，关键是要让色彩及元素搭配合理，在变化的同时更加突出主题。

（2）突出中心，完成动态Banner布局设计

布局设计，就是经营动态Banner的画面。成功的布局设计可以充分吸引浏览者停留观看、了解内容、产生欲望。设计动态Banner的布局，必须要设定视觉的中心，视觉中心通常位于屏幕的中央或者中间偏上的位置处。确定好视觉中心后，还要通过均衡的手段，在布局设计上通过力量上的平衡感，使动态Banner的画面具有一定的稳定性；再通过对比的设计方法，使画面产生一定的空间感。

通过这三步的设计，设计师可以很好地把视点集中到了画面的最中心，从而引导用户的目光集中在画面的中心点上。重要的宣传卖点可以安排在这个部位，稍微次要的内容可以安排在视觉中心以外的地方，这样就突出了动态Banner的布局重点。

（3）相辅相成，完成动态Banner文字设计

文字承载了网站宣传的口号和说明性内容，是动态Banner设计中必不可少的环节和元素。虽然文字元素信息量大、缺乏生气，但是好的设计却能够让文字在体现自身内容的同时，表现出最理想的效果。好Banner设计，一定是文字与其他元素相辅相成、和谐统一的画面效果。

在文字设计过程中，首先要文字与图片的比例不能过大，这样就避免了页面的单调和凌乱；其次，要通过字号、颜色、排列、组合、字体和中英文之间的混搭，衬托出Banner内容的丰富性和灵活性。

（4）均衡色彩，完成动态Banner色彩设计

Banner规格尺寸大小不一，文件大小也有一定的限制，这就给动态Banner颜色设计上增加了许多障碍。具体表现在：动态Banner颜色不能太丰富，否则会在文件大小的限制下失真、也会无法突出重点。在动态Banner色彩设计上，仍然要遵循和谐、均衡和重点突出的原则。

在不同的色彩组合与搭配的过程中，动态Banner的美感要注重颜色至简性，在方寸间把握住平衡。也就是说，颜色设计上，要采用简洁明确、朴素有力的色彩方案，给浏览者带来的更强的视觉传达力，以及更突出的重量感和力量感。颜色过度的设计方案，虽然色彩种类多，但是却很难带来更好的视觉传达效果。因为，颜色过度首先使用会打乱色彩节奏，并减弱颜色间的对比，从而使设计整体效果变弱。

因而，在动态Banner的色彩设计上，颜色简单就是视觉传达的有力，从而以清晰快速的方式达到网络推广的目的。

2）动态Banner设计的技术实现

Adobe Photoshop，简称“PS”，是由Adobe Systems开发和发行的图像处理软件。Photoshop可以有效地进行动态Banner的静态设计效果的制作工作。

动态Banner的静态设计制作，主要包括背景图层的制作、中间层和内容层的制作、构图元素的勾画与编辑和文字表达的制作与排列。

使用Photoshop设计动态Banner的静态效果图像，主要应用了Photoshop中的放大、缩小、旋转、倾斜、镜像、透视等变换功能，以及修补、校色调色、滤镜等图像处理功能。并且，在制作过程中，要确保效果符合从左到右、从上到下的浏览习惯。制作完成后，设计师需要生成一个PSD格式的图像，交给动画制作师进行后续的动态效果的制作。

4 Flash技术实现网站动态Banner的制作

一些网页的设计师经常会给动态Banner中加入尽可能多的特效，以彰显页面的活泼性和多变性。高校网站首页在视觉传达上要体现出文化性和高尚性的特点，加入过多的特效往往会让表现力适得其反。在高校网站动态Banner制作过程中，要明确技术是为内容服务的，不要过分追求华而不实的动态特效。

1）网站动态Banner制作工具概述

可以实现动态Banner效果制作的工具有多种，如Javascript技术和Flash软件。其中，Javascript兼容性高、修改简单，但是不容易制作出复杂的动态效果，并且会减低访问速度。Adobe公司的Flash软件具有入门容易、操作相对简单、表现效果丰富、价格相对低廉和功能强大的特点，因而，目前网站动态Banner的制作通常使用Flash技术来完成。

Flash本身就是一个动画概念，通常一秒可播放12帧或24帧。同时，Flash可以增加很多特效，还可以编码、导入视频、编辑视频、添加音乐，还可以把成片发布到网络中。Flash动画入门也比较容易，一个有一定计算机基础的人，初步掌握Flash动画大概需要一个月。由于Flash的易操作性和崭新的视觉效果，Flash动画已经成为目前网站动态Banner的制作的主要技术。[2]

2）使用Flash实现动态Banner制作的常用流程

（1）背景绘制

使用Flash软件就可以绘制动态Banner的背景，但是鉴于Photoshop的强大绘图功能，通常动画制作师不必采用Flash完成背景，而是直接使用静态设计师在Banner设计阶段完的PSD格式文件中的背景图像。背景图像的绘制要充分考虑到设计稿规定的景别、角度以及结构框架绘制，并且要有摄像机意识，即空间距离意识和镜头关系意识。

（2）关键帧动画制作

关键帧动画的制作，是控制Banner动作轨迹特征和动态幅度的关键。虽然可以采用逐帧动画的方法来完成，即一幅一幅地绘制动画效果图。但是，由于逐帧绘制动画的方式工作量非常庞大、对美工要求太高，所以虽然逐帧动画看起来比较流畅，但这种方式很少使用于网站动态Banner的制作中。

网站动态Banner关键帧动画的制作，通常采用Flash中的补间动画方式。利用补间动画方式，动态Banner制作师只需要绘制开始和结束两个关键帧的内容，从开始到结束中间的过渡部分内容可以由Flash自动生成。正是因为补间动画的方式仅需绘制两帧图像，关键帧动画的制作时间就大大地缩短了。[3]

（3）交互性的制作

使用Flash完成的动态Banner，还可以具有交互性，从而是网页更具有生命力。Flash内置的ActionScript脚本语言，可以实现多种浏览者与网页互动的功能。即高校网站的动态Banner还可以嵌入一些链接，浏览者通过点击、选择等操作，对宣传元素进行全方位的深入了解，形成了更加立体的认识。

（4）修线上色

使用Flash完成的动态Banner的修线有两种方式：一种是将动画中的错误或多余的线条进行修改；第二种是为了给动画填充颜色而添加上去的线条，颜色填充完后再把线条删除。

使用Flash完成的动态Banner的上色，就是给场景中的背景、物体、人物以及动物填充颜色的过程，它可以看做动画的最后包装，也是运动主体的视觉包装。上色质量直接关系到动态Banner的视觉质量。[3]

（5）制作取景框

制作师在使用Flash制作动态Banner动画时，部分元件是安置在Flash的舞台以外的。网页内嵌的Flash播放器播放Banner动画时，在100%的比例下，浏览者看不到舞台外部；而全屏播放或者大于100%的比例播放时，舞台外的部分就会一览无余了，这就严重影响了到动态Banner的显示效果。为了让浏览者在播放器缩放时，也看不到舞台外的部分，一般需要在舞台周围绘制一个大大的纯色矩形外框，让它覆盖住场景以外所有的部分。

（6）添加音效

动态Banner的特效不仅体现在动画效果，更体现在与动画效果相伴的音效上。动态Banner的音效分为两种情况：背景音效和交互时的音效。通过Flash的导入功能，制作师可以将音乐和效果导入到库中，再把音乐从元件库拖到场景中，通过查看波形线确定音乐添加情况，最后，通过属性栏来控制音乐的音量效果及循环等等。通过音效的添加，一个动态Banner可以在拥有精美画面的同时，也拥有精彩的声音效果。[4]

5 网站动态banner的发布

Flash可以将动画同时发布成多个不同格式动态Banner文件。但是需要注意：在发布前最好先优化动画，使动态Banner的体积达到最小；同时，需要测试动画否有不连续的地方。因为需要保证动态Banner的浏览速度，所以制作师可以使用Flash的模拟网上下载功能，测试整个动态Banner动画的下载性能。最后，制作师把Flash发布为SWF格式的文件，并上传到网站上，供浏览者访问观看和欣赏。

6 结束语

目前高校的网站，都在朝着动态化的制作方向发展。通过动态Banner的策划、设计、制作与发布，可以形成一个多姿多彩的网络校园风貌和人文景观，最终成为高等院校的网络名片。

动态Banner并不是一劳永逸的，它是一项长变常新的工作，需要在多角度、全方位、实时性地宣传学校优点、发布学校的重大事宜与政策，增强浏览者与高校之间的交流，从而提高校园的管理效率。因而，一个高校网站首页动态Banner的制作需要更多的技术与支撑，特别是利用Flash内置的ActionScript与其他高级语言和数据库的完美结合，将成为高校网站首页动态Banner制作的发展方向。

参考文献：

[1] 祝晓铭，王艳平.高校门户网站Banner的“图说”功能研究[J].现代计算机（普及版），2014（12）.

[2] 冯友群.浅谈Flash动画制作及在网站中的应用[J].中国信息化，2013（14）.

[3] 常海霞.Flash动画在网页设计中的互动性研究[D]. 2008

[4] 吴韬，魏砚雨.Flash二维动画项目制作教程[M]. 上海交通大学出版社，2012（6）.