高校門戶網(wǎng)站首頁動態(tài)Banner的制作研究

孫慕梓

摘要：動態(tài)Banner是高校門戶網(wǎng)站首頁的重要信息傳遞區(qū)域，也是高校門戶網(wǎng)站建設的重要工作。本文從策劃、設計、制作與發(fā)布四個角度，探討了動態(tài)Banner制作的常用工具與方法；并提出了高校門戶網(wǎng)站動態(tài)Banner策劃規(guī)則。設計師在策劃和設計高校網(wǎng)站時，合理運用本文闡述的策略與規(guī)則，可以更加突出網(wǎng)站的高等教育特色，還可以極大地提升網(wǎng)站的視覺吸引力。

關鍵詞：網(wǎng)站；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

隨著互聯(lián)網(wǎng)技術廣泛應用于社會政治、經(jīng)濟、生活等各個方面，網(wǎng)站已經(jīng)成為人們在Internet上發(fā)布和傳遞信息的重要渠道，同時，網(wǎng)站也成為人們檢索和獲取信息的重要方式。隨著我國高等教育事業(yè)的蓬勃發(fā)展，門戶網(wǎng)站建設已經(jīng)融入高校校園文化建設中，業(yè)已成為加強高校對外宣傳和對內(nèi)管理不可缺少的一環(huán)。好的門戶網(wǎng)站，能夠給瀏覽者以清晰明確的信息展示，能夠讓瀏覽者高效地了解到學校的特色和內(nèi)涵，也能夠充分體現(xiàn)出校園文化建設的和諧與理性。

高校門戶網(wǎng)站是凝聚高校特色文化與教育模式的載體，就如同一張網(wǎng)絡“名片”，傳遞著大學的信息與風貌。然而，建設優(yōu)秀的高校門戶網(wǎng)站，除了豐富的校園靜態(tài)信息外，最能體現(xiàn)網(wǎng)站特點的就是動態(tài)Banner的設計與制作。

網(wǎng)站動態(tài)Banner建設分為策劃、設計、制作與發(fā)布四部分。其中，策劃階段的主要任務是在明確高校宣傳定位的前提下提出設計規(guī)劃；設計階段的主要任務是按照Web特有設計規(guī)律制定出網(wǎng)站動態(tài)Banner美學方案；制作階段的主要任務是使用最合適的方法完成動態(tài)Banner設計方案；發(fā)布階段的主要任務是測試效果的連貫性與生成最終的格式。網(wǎng)站動態(tài)Banner建設既需要藝術上的美感，也需要技術上的精湛，是藝術與技術的融合與統(tǒng)一。通過藝術與技術的科學結合，高?？梢愿鶕?jù)自己的特點和性質量身定制出一套符合自身特點的動態(tài)網(wǎng)站Banner。

1 高校門戶網(wǎng)站首頁動態(tài)Banner

高校門戶網(wǎng)站的首頁通常由Logo、導航、Banner、內(nèi)容、鏈接、版權六類元素組成[1] 。高校網(wǎng)站首頁Banner是指，在一個高等學校的網(wǎng)站首頁中，橫向貫穿整個或者大半個頁面，并且能夠突出顯示出學校網(wǎng)站的主題、主旨或者主要特色的圖案區(qū)域。

Banner可以位于網(wǎng)頁的頂部、中部、底部任意一個位置處，高校網(wǎng)站首頁的Banner通常位于頁面的頂部和中部，較少置于底部去顯示。Banner既可以使用單幅靜態(tài)圖形展示，又可用多幀圖像制作成動態(tài)效果展示。其中，多幀圖像展示出的動態(tài)效果稱為動態(tài)Banner。

動態(tài)Banner是目前高校門戶網(wǎng)站建設的國際化發(fā)展方向。作為教育和成長相結合的統(tǒng)一體，高校承載了不同側面的發(fā)展變化，僅通過單幅圖片很難把一個高等院校的歷史沿革與校園百態(tài)，恰當而又充分地展示出來。然而，表現(xiàn)形式極其豐富的動態(tài)效果有效地解決了這一問題，動態(tài)Banner可以更充分地展現(xiàn)出高等院校不同視角下的人文風采，也可以更充分地吸引住網(wǎng)站瀏覽者，讓瀏覽者第一時間捕捉到高校的特色風格。因而，以哈佛大學為代表的歐美知名高校，已經(jīng)率先采用了動態(tài)效果作為其門戶網(wǎng)站首頁的Banner；目前，國內(nèi)高校也在積極的使用動態(tài)Banner作為其網(wǎng)站最大的設計特色。

2 高校門戶網(wǎng)站首頁動態(tài)Banner的策劃原則

目前，可鏈接的國內(nèi)高校網(wǎng)站超過1400所，雖然這些網(wǎng)站首頁框架不同，但是絕大部分網(wǎng)站表現(xiàn)出了在視覺效果上雷同、在設計風格上相似的特點。原因在于：大部分高校網(wǎng)站的首頁使用校園風景或人物圖片作為Banner，沒有經(jīng)過科學有效的策劃階段，及時采用了動態(tài)效果，也只是多幅靜態(tài)圖片的延時刷新，因而這類動態(tài)Banner只能起到單一的頁面裝飾作用。

Banner通常是頁面中面積最大的圖片元素，高校網(wǎng)站首頁在Banner策劃上應遵循一定的原則。

1）高校門戶網(wǎng)站首頁動態(tài)Banner的定位

策劃首頁Banner，首先要了解網(wǎng)站的定位。隨著生源數(shù)量與質量壓力的加大，高校網(wǎng)站在定位上也產(chǎn)生了一定的變化，由展示演變?yōu)榱送茝V。人才是高校的發(fā)展的主體，國內(nèi)外高校都希望能夠通過網(wǎng)站等宣傳方式，在最大程度上吸引住最多、最優(yōu)秀的考生。因而，高校網(wǎng)站動態(tài)Banner的定位，不僅僅是一般意義上的推廣，更是一種準確、獨特、及時、有效地體現(xiàn)出學校特色和辦學內(nèi)涵的傳播。

2）高校門戶網(wǎng)站首頁動態(tài)Banner的策劃原則

（1）簡潔性原則

最有效的動態(tài)Banner策劃通常具有簡潔的特點。根據(jù)網(wǎng)頁的7s定律，如果在7秒鐘之內(nèi)，高校網(wǎng)站的瀏覽者沒有看出首頁動態(tài)Banner傳遞的指定信息，那么該Banner可以認定為失敗的產(chǎn)品。目前國際上比較流行的高校動態(tài)Banner風格為簡潔，簡潔才能夠帶來清晰和精煉，簡潔才能夠突出表達的重點。

動態(tài)Banner策劃的簡潔性并不等于簡單化，而是一種平中見奇的構思，意料之外的創(chuàng)意，也是一種思想上亮點，形式上提純。

（2）實時性原則

校園網(wǎng)站同校報、招生簡章等傳統(tǒng)紙質宣傳媒體的最大不同之處，就在于實時性。高校網(wǎng)站的實時性不僅僅體現(xiàn)在新聞的上傳和傳播上，也體現(xiàn)在動態(tài)Banner的更新和推廣上。針對特色新聞及人物，憑借網(wǎng)絡大容量和多媒體的特點，可以從不同角度和內(nèi)容策劃動態(tài)Banner，進行橫向報道和縱向深入。

（3）沖擊性原則

網(wǎng)頁能否最短時間吸引瀏覽者視線，其根本在于視覺沖擊力。因而，在策劃高校網(wǎng)站首頁動態(tài)Banner時，要把握住沖擊性原則，突出靜態(tài)畫面特征和動態(tài)技法特征。達到與人溝通的目的，以表達自己的思維和想法。好的辦法能幫助設計師們達到這樣的效果呢法。通過運用各種方式抓住和強調(diào)Banner主題特征，并將這些特征置于靜態(tài)畫面的主要視覺部位和動態(tài)效果的關鍵切換時間，使網(wǎng)站瀏覽者在接觸到頁面的瞬間即很快感受到，從而產(chǎn)生強烈的視覺沖擊力。

（4）主線性原則

動態(tài)Banner不是毫無關系的圖片堆疊，而是一個完整的主線，共同向瀏覽者闡明了一個真實的校園情懷故事?；诖?，在策劃高校網(wǎng)站動態(tài)Banner時，要設定好主線，通過時間、空間發(fā)展變化展現(xiàn)出想要表現(xiàn)的理念。

（5）加速性原則

優(yōu)秀的動態(tài)Banner策劃，一定是充分考慮到了加快下載速度的最有方案?；ヂ?lián)網(wǎng)中有一條不成文的法則：如果整個頁面下載時間超過30s，瀏覽者在心理上將對該網(wǎng)頁產(chǎn)生極強的負面評價。動態(tài)Banner文件本身就比靜態(tài)圖片要大，如果高校網(wǎng)站在策劃動態(tài)Banner啟用了過多的動態(tài)效果，或者使用了分辨率過高的靜態(tài)素材，網(wǎng)站首頁的下載速度很難保持在瀏覽者心理愉悅的范圍內(nèi)。策劃中，要規(guī)定好動態(tài)效果保持在3秒內(nèi)，最多不能超過5秒。因此，為了保證網(wǎng)站對瀏覽者的吸引力，在動態(tài)Banner策劃部分要強調(diào)加速性，保證頁面的下載速度。

3 網(wǎng)站動態(tài)Banner的設計

根據(jù)網(wǎng)頁的7s定律，瀏覽者對網(wǎng)頁注意力只能集中在幾秒內(nèi)，所以對網(wǎng)頁動態(tài)Banner的設計除了需要表現(xiàn)網(wǎng)站宣傳主題外，還需要制定相應的設計方法并使用成熟的設計工具。太多過場動畫，需第1時間進行產(chǎn)品的展示，命中主題。并配以鼓動人心的措辭口號引導用戶。

1）動態(tài)Banner設計方法

（1）分析需求，完成動態(tài)Banner風格設計

需求分析就是確定要達到什么樣的設計效果。在動態(tài)Banner設計過程中，首先要進行的需求分析。高校在不同的發(fā)展時期，網(wǎng)站會有不同的宣傳目標，這樣就會有相應的宣傳主題。在需求分析過程中，設計師應系統(tǒng)地分析高校的宣傳目的和需要，從而分析和尋求動態(tài)Banner設計方案中的主題。

確定好高校宣傳主題，就等于確定了網(wǎng)頁動態(tài)Banner的設計風格。在風格的設計過程中，要確保主題突出、不能喧賓奪主，更不能風格與主題相矛盾。這就需要設計師在完成動態(tài)Banner風格設計時，要減少過多的輔助干擾元素，不要追求傳達過多的信息，減少過于細碎的切割處理，突出用戶的瀏覽重心。

不同于傳統(tǒng)靜態(tài)Banner，動態(tài)Banner風格設計要確保畫面效果和切換動畫之間風格的統(tǒng)一性。統(tǒng)一的風格有助于加深瀏覽者對高校網(wǎng)站的印象。風格統(tǒng)一，并不意味要把每個畫面的顏色及元素完成的相似，可以選用不同的色彩搭配及元素形式，關鍵是要讓色彩及元素搭配合理，在變化的同時更加突出主題。

（2）突出中心，完成動態(tài)Banner布局設計

布局設計，就是經(jīng)營動態(tài)Banner的畫面。成功的布局設計可以充分吸引瀏覽者停留觀看、了解內(nèi)容、產(chǎn)生欲望。設計動態(tài)Banner的布局，必須要設定視覺的中心，視覺中心通常位于屏幕的中央或者中間偏上的位置處。確定好視覺中心后，還要通過均衡的手段，在布局設計上通過力量上的平衡感，使動態(tài)Banner的畫面具有一定的穩(wěn)定性；再通過對比的設計方法，使畫面產(chǎn)生一定的空間感。

通過這三步的設計，設計師可以很好地把視點集中到了畫面的最中心，從而引導用戶的目光集中在畫面的中心點上。重要的宣傳賣點可以安排在這個部位，稍微次要的內(nèi)容可以安排在視覺中心以外的地方，這樣就突出了動態(tài)Banner的布局重點。

（3）相輔相成，完成動態(tài)Banner文字設計

文字承載了網(wǎng)站宣傳的口號和說明性內(nèi)容，是動態(tài)Banner設計中必不可少的環(huán)節(jié)和元素。雖然文字元素信息量大、缺乏生氣，但是好的設計卻能夠讓文字在體現(xiàn)自身內(nèi)容的同時，表現(xiàn)出最理想的效果。好Banner設計，一定是文字與其他元素相輔相成、和諧統(tǒng)一的畫面效果。

在文字設計過程中，首先要文字與圖片的比例不能過大，這樣就避免了頁面的單調(diào)和凌亂；其次，要通過字號、顏色、排列、組合、字體和中英文之間的混搭，襯托出Banner內(nèi)容的豐富性和靈活性。

（4）均衡色彩，完成動態(tài)Banner色彩設計

Banner規(guī)格尺寸大小不一，文件大小也有一定的限制，這就給動態(tài)Banner顏色設計上增加了許多障礙。具體表現(xiàn)在：動態(tài)Banner顏色不能太豐富，否則會在文件大小的限制下失真、也會無法突出重點。在動態(tài)Banner色彩設計上，仍然要遵循和諧、均衡和重點突出的原則。

在不同的色彩組合與搭配的過程中，動態(tài)Banner的美感要注重顏色至簡性，在方寸間把握住平衡。也就是說，顏色設計上，要采用簡潔明確、樸素有力的色彩方案，給瀏覽者帶來的更強的視覺傳達力，以及更突出的重量感和力量感。顏色過度的設計方案，雖然色彩種類多，但是卻很難帶來更好的視覺傳達效果。因為，顏色過度首先使用會打亂色彩節(jié)奏，并減弱顏色間的對比，從而使設計整體效果變?nèi)酢?/p>

因而，在動態(tài)Banner的色彩設計上，顏色簡單就是視覺傳達的有力，從而以清晰快速的方式達到網(wǎng)絡推廣的目的。

2）動態(tài)Banner設計的技術實現(xiàn)

Adobe Photoshop，簡稱“PS”，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。Photoshop可以有效地進行動態(tài)Banner的靜態(tài)設計效果的制作工作。

動態(tài)Banner的靜態(tài)設計制作，主要包括背景圖層的制作、中間層和內(nèi)容層的制作、構圖元素的勾畫與編輯和文字表達的制作與排列。

使用Photoshop設計動態(tài)Banner的靜態(tài)效果圖像，主要應用了Photoshop中的放大、縮小、旋轉、傾斜、鏡像、透視等變換功能，以及修補、校色調(diào)色、濾鏡等圖像處理功能。并且，在制作過程中，要確保效果符合從左到右、從上到下的瀏覽習慣。制作完成后，設計師需要生成一個PSD格式的圖像，交給動畫制作師進行后續(xù)的動態(tài)效果的制作。

4 Flash技術實現(xiàn)網(wǎng)站動態(tài)Banner的制作

一些網(wǎng)頁的設計師經(jīng)常會給動態(tài)Banner中加入盡可能多的特效，以彰顯頁面的活潑性和多變性。高校網(wǎng)站首頁在視覺傳達上要體現(xiàn)出文化性和高尚性的特點，加入過多的特效往往會讓表現(xiàn)力適得其反。在高校網(wǎng)站動態(tài)Banner制作過程中，要明確技術是為內(nèi)容服務的，不要過分追求華而不實的動態(tài)特效。

1）網(wǎng)站動態(tài)Banner制作工具概述

可以實現(xiàn)動態(tài)Banner效果制作的工具有多種，如Javascript技術和Flash軟件。其中，Javascript兼容性高、修改簡單，但是不容易制作出復雜的動態(tài)效果，并且會減低訪問速度。Adobe公司的Flash軟件具有入門容易、操作相對簡單、表現(xiàn)效果豐富、價格相對低廉和功能強大的特點，因而，目前網(wǎng)站動態(tài)Banner的制作通常使用Flash技術來完成。

Flash本身就是一個動畫概念，通常一秒可播放12幀或24幀。同時，F(xiàn)lash可以增加很多特效，還可以編碼、導入視頻、編輯視頻、添加音樂，還可以把成片發(fā)布到網(wǎng)絡中。Flash動畫入門也比較容易，一個有一定計算機基礎的人，初步掌握Flash動畫大概需要一個月。由于Flash的易操作性和嶄新的視覺效果，F(xiàn)lash動畫已經(jīng)成為目前網(wǎng)站動態(tài)Banner的制作的主要技術。[2]

2）使用Flash實現(xiàn)動態(tài)Banner制作的常用流程

（1）背景繪制

使用Flash軟件就可以繪制動態(tài)Banner的背景，但是鑒于Photoshop的強大繪圖功能，通常動畫制作師不必采用Flash完成背景，而是直接使用靜態(tài)設計師在Banner設計階段完的PSD格式文件中的背景圖像。背景圖像的繪制要充分考慮到設計稿規(guī)定的景別、角度以及結構框架繪制，并且要有攝像機意識，即空間距離意識和鏡頭關系意識。

（2）關鍵幀動畫制作

關鍵幀動畫的制作，是控制Banner動作軌跡特征和動態(tài)幅度的關鍵。雖然可以采用逐幀動畫的方法來完成，即一幅一幅地繪制動畫效果圖。但是，由于逐幀繪制動畫的方式工作量非常龐大、對美工要求太高，所以雖然逐幀動畫看起來比較流暢，但這種方式很少使用于網(wǎng)站動態(tài)Banner的制作中。

網(wǎng)站動態(tài)Banner關鍵幀動畫的制作，通常采用Flash中的補間動畫方式。利用補間動畫方式，動態(tài)Banner制作師只需要繪制開始和結束兩個關鍵幀的內(nèi)容，從開始到結束中間的過渡部分內(nèi)容可以由Flash自動生成。正是因為補間動畫的方式僅需繪制兩幀圖像，關鍵幀動畫的制作時間就大大地縮短了。[3]

（3）交互性的制作

使用Flash完成的動態(tài)Banner，還可以具有交互性，從而是網(wǎng)頁更具有生命力。Flash內(nèi)置的ActionScript腳本語言，可以實現(xiàn)多種瀏覽者與網(wǎng)頁互動的功能。即高校網(wǎng)站的動態(tài)Banner還可以嵌入一些鏈接，瀏覽者通過點擊、選擇等操作，對宣傳元素進行全方位的深入了解，形成了更加立體的認識。

（4）修線上色

使用Flash完成的動態(tài)Banner的修線有兩種方式：一種是將動畫中的錯誤或多余的線條進行修改；第二種是為了給動畫填充顏色而添加上去的線條，顏色填充完后再把線條刪除。

使用Flash完成的動態(tài)Banner的上色，就是給場景中的背景、物體、人物以及動物填充顏色的過程，它可以看做動畫的最后包裝，也是運動主體的視覺包裝。上色質量直接關系到動態(tài)Banner的視覺質量。[3]

（5）制作取景框

制作師在使用Flash制作動態(tài)Banner動畫時，部分元件是安置在Flash的舞臺以外的。網(wǎng)頁內(nèi)嵌的Flash播放器播放Banner動畫時，在100%的比例下，瀏覽者看不到舞臺外部；而全屏播放或者大于100%的比例播放時，舞臺外的部分就會一覽無余了，這就嚴重影響了到動態(tài)Banner的顯示效果。為了讓瀏覽者在播放器縮放時，也看不到舞臺外的部分，一般需要在舞臺周圍繪制一個大大的純色矩形外框，讓它覆蓋住場景以外所有的部分。

（6）添加音效

動態(tài)Banner的特效不僅體現(xiàn)在動畫效果，更體現(xiàn)在與動畫效果相伴的音效上。動態(tài)Banner的音效分為兩種情況：背景音效和交互時的音效。通過Flash的導入功能，制作師可以將音樂和效果導入到庫中，再把音樂從元件庫拖到場景中，通過查看波形線確定音樂添加情況，最后，通過屬性欄來控制音樂的音量效果及循環(huán)等等。通過音效的添加，一個動態(tài)Banner可以在擁有精美畫面的同時，也擁有精彩的聲音效果。[4]

5 網(wǎng)站動態(tài)banner的發(fā)布

Flash可以將動畫同時發(fā)布成多個不同格式動態(tài)Banner文件。但是需要注意：在發(fā)布前最好先優(yōu)化動畫，使動態(tài)Banner的體積達到最??；同時，需要測試動畫否有不連續(xù)的地方。因為需要保證動態(tài)Banner的瀏覽速度，所以制作師可以使用Flash的模擬網(wǎng)上下載功能，測試整個動態(tài)Banner動畫的下載性能。最后，制作師把Flash發(fā)布為SWF格式的文件，并上傳到網(wǎng)站上，供瀏覽者訪問觀看和欣賞。

6 結束語

目前高校的網(wǎng)站，都在朝著動態(tài)化的制作方向發(fā)展。通過動態(tài)Banner的策劃、設計、制作與發(fā)布，可以形成一個多姿多彩的網(wǎng)絡校園風貌和人文景觀，最終成為高等院校的網(wǎng)絡名片。

動態(tài)Banner并不是一勞永逸的，它是一項長變常新的工作，需要在多角度、全方位、實時性地宣傳學校優(yōu)點、發(fā)布學校的重大事宜與政策，增強瀏覽者與高校之間的交流，從而提高校園的管理效率。因而，一個高校網(wǎng)站首頁動態(tài)Banner的制作需要更多的技術與支撐，特別是利用Flash內(nèi)置的ActionScript與其他高級語言和數(shù)據(jù)庫的完美結合，將成為高校網(wǎng)站首頁動態(tài)Banner制作的發(fā)展方向。

參考文獻：

[1] 祝曉銘，王艷平.高校門戶網(wǎng)站Banner的“圖說”功能研究[J].現(xiàn)代計算機（普及版），2014（12）.

[2] 馮友群.淺談Flash動畫制作及在網(wǎng)站中的應用[J].中國信息化，2013（14）.

[3] 常海霞.Flash動畫在網(wǎng)頁設計中的互動性研究[D]. 2008

[4] 吳韜，魏硯雨.Flash二維動畫項目制作教程[M]. 上海交通大學出版社，2012（6）.