高校門戶網(wǎng)站Banner的設計應用研究

祝曉銘，王艷平

（1.山東理工大學，淄博　255049；2.山東省淄博第十七中學，淄博　255033）

高校門戶網(wǎng)站Banner的設計應用研究

祝曉銘1，王艷平2

（1.山東理工大學，淄博255049；2.山東省淄博第十七中學，淄博255033）

0　引言

Banner部分（以下簡稱Banner）是高校門戶網(wǎng)站主頁面中所占比重最大的圖片元素。圖片是一種參與深層語義過程的信息，人們在一個清晰的視覺回憶任務中，對文字和圖片的信息記憶是不同的，人們更傾向于記憶圖片信息［1］。

很多高校把有關(guān)于校園風景、人像的圖片直接運用在Banner以作頁面裝飾，形成網(wǎng)站視覺展示效果單一、內(nèi)容訴說信息缺乏的弊端。如何在高校門戶網(wǎng)站主頁面的視覺主體位置，創(chuàng)新運用Banner“廣而告之”的宣傳功能，使之成為新的視覺信息傳播焦點，是網(wǎng)站設計者對于Banner進行設計應用研究的新課題。

1　分析和啟示

《設計的法則》中提到：“用圖像優(yōu)勢效應來提高對關(guān)鍵信息的認知和記憶。用圖像和文字的結(jié)合來確保對關(guān)鍵信息的強化，已獲得最佳效果［2］。有鑒于此，少數(shù)高校門戶網(wǎng)站對主頁面的Banner設計進行了改進和創(chuàng)新行為，賦予了Banner新型的“圖說”功能。以“清華映像”為例——欄目以大幅圖片配合精煉文字的方式向關(guān)注清華大學的網(wǎng)絡用戶和社會大眾介紹清華大學在教學、科研、社會服務等方面的成就及師生生活中的亮點［3］。

通過研究可以看出，“清華映像”將主頁面Banner作為一個專門的“圖文”專題進行應用，充分發(fā)揮其“圖說”功能，將學校各方面的圖片素材，配以簡練精彩的標題文案，或輔以一定程度上的平面圖形創(chuàng)意，設計出兼具信息傳遞和廣告展示的精美圖片。充滿視覺張力的圖片極易引起受眾的注意力和瀏覽興趣，刺激受眾主動點擊、閱讀圖片鏈接指引的主題采寫信息，完成了前端圖片展示和后端信息讀取組成地完整的內(nèi)容傳遞過程。

2　方式和方法研究

2.1主題的確立

Banner作為圖文專題使用后，在前期選材和后期設計方面，要有明確的主題性。只有做到主題鮮明突出，一目了然，才能達到頁面設計的最終目標。而主題鮮明突出，是設計思想的最佳體現(xiàn)［4］。具體來講，Banner不只要起到頁面裝飾作用，也需要發(fā)揮更多的信息傳遞功能。因此，要優(yōu)先選取那些包含更多內(nèi)容性和敘事性的圖片素材進行使用。同時，在進行設計深加工的過程中，也要圍繞采寫信息的內(nèi)容進行創(chuàng)意，力求深扣主題，避免盲目炫技。

主題是Banner設計的靈魂，一定要表達出明確的主題訴求。在其素材的選取上，可重點圍繞以下方面進行選擇。

（1）教學和科研

教學和科研是高校最基本的兩項職能，其信息受到校內(nèi)師生和社會大眾的普遍關(guān)注。Banner設計的主題來源可以包括學校的課堂教學、實習實訓、名師訪談、專家報告、機構(gòu)簡介、項目動態(tài)、獲獎作品等諸多方面。

（2）大學文化

大學文化的本體功能是育人，其在不同精神、制度、行為、環(huán)境間的文化顯現(xiàn)是大學之間相互區(qū)別的重要標志和特征。Banner設計的主題來源也可以包括學校的校史檔案、名人名家、模范師生、誠信教育、職業(yè)操守、文體活動、團隊風采等諸多方面。

（3）社會服務

社會服務是人才培養(yǎng)和科學研究以外的高校的又一基本職能，在開放性辦學的環(huán)境要求下，及時展現(xiàn)科學技術(shù)發(fā)展作用于經(jīng)濟社會進步的推動力和影響力，是高校不容推辭的歷史使命和社會責任。Banner設計的主題來源還可以包括學校的服務地方、校企合作、成果轉(zhuǎn)化、幫扶支教、社會實踐等諸多方面。

（4）其他主題

國家規(guī)定的節(jié)假日、紀念日和重要節(jié)氣，特別是對于學校發(fā)展具有特殊紀念意義的時間節(jié)點，都可以作為Banner設計的主題來源。

在主題確立方面，要把主題與內(nèi)容加以深層次的聯(lián)想，然后通過具體的形象符號表達出網(wǎng)頁豐富的感情色彩，最后運用視覺審美體系的各構(gòu)成元素，把技巧和情感與各種視覺符號融為一體，轉(zhuǎn)化為生動精彩的網(wǎng)頁視覺形象［5］。網(wǎng)站設計者不必固執(zhí)拘泥于條條框框的限制，而應靈活機動、系統(tǒng)規(guī)劃，力求把與學校和師生密切相關(guān)地積極的信息源加以整合推送，形成信息發(fā)布專題，廣泛傳遞網(wǎng)絡“正能量”。

2.2形式的劃分

對于Banner形式的劃分，主要取決于其信息源的采集數(shù)量和更新時效。具體來講，一般高等院校和著名高等院校在辦學歷史、科研教學、文化建設、服務地方等方面存在著明顯的情況差異，信息供給來源與數(shù)量的稀少，直接影響了Banner“圖說”功能的發(fā)揮。同時，不同高校間對于信息化建設的認知水平和從事信息化工作人員的技術(shù)水平，也直接影響著高校門戶網(wǎng)站的建設水平。

基于此項實際，目前Banner的表現(xiàn)形式主要可以分為“時間軸”效果下的靜態(tài)單幅圖片展示和固定秒數(shù)切換效果下的動態(tài)多幅圖片展示。

（1）“時間軸”效果下的靜態(tài)單幅圖片展示

此類展示效果Banner為靜態(tài)單幅圖片，其特點是Banner只有一幅圖片，但其日間更新速率快，使其網(wǎng)站主頁面具備了“日日新”的展示效果；同時，其以日（月）歷標簽的形式可以呈現(xiàn)固定時間段內(nèi)的多個主題圖片信息，又使其具備了類似“年鑒”功能的展示效果。具備此類Banner展示效果的高校門戶網(wǎng)站數(shù)量極少，代表即為清華主頁的“清華映像”欄目，其精美的視覺展示效果和豐富的信息傳達效果，是Banner“圖說”功能運用的典型成功案例?！扒迦A映像”專業(yè)的運維團隊和完善規(guī)范的運維機制，則為其成功提供了完備的支撐保障。

（2）固定秒數(shù)切換效果下的動態(tài)多幅圖片展示

此類展示效果Banner為動態(tài)多幅圖片，其特點是Banner包含多幅圖片，圖片間依據(jù)JS語句控制下的時間參數(shù)，進行不同動畫效果的動態(tài)切換。這種運用，可以使Banner形成一個信息集群，對學校一定時期內(nèi)的多個來源信息進行集中展示，豐富了主頁展示效果，擴大了信息傳遞數(shù)量。目前絕大多數(shù)具備“圖說”功能的高校門戶網(wǎng)站主頁面的Banner都是此類展示效果，即是方便了受眾在信息源展示方面進行自主多選，彰顯了網(wǎng)站的人性化設計；也是減小了一些高校由于Banner信息來源的限制，造成的主題數(shù)量稀少和更新停滯帶來的負面影響。Banner采取動態(tài)多幅圖片展示效果，應注意控制圖片的數(shù)量，以三至五幅為佳，太多則易造成受眾的視覺混亂；還應綜合平衡整個網(wǎng)站主頁面的JS動態(tài)圖像的使用數(shù)量和面積大小，因為其它JS動態(tài)圖像太多或太大都會和Banner造成視覺抵觸，影響受眾的觀感。

2.3設計的技巧

網(wǎng)站設計者進行Banner設計應當遵循平面設計的形式美法則，既要注重畫面元素間的和諧，在對比中求得統(tǒng)一；也要講求Banner視覺重心的塑造，同時又不破環(huán)畫面的均衡比例；還要營造畫面的主題氛圍和聯(lián)想意境，以充滿節(jié)奏和韻律的構(gòu)造實現(xiàn)Banner的“圖說”功能。

（1）關(guān)于整體設計觀的運用

網(wǎng)站設計者要以整體設計的觀念做指導，明確Banner是作為主頁面的個體元素存在，避免“跳出整體做局部”的孤立設計效果出現(xiàn)。具體來講，Banner仍然要放在網(wǎng)站首頁面的效果圖中進行設計。出于對文件質(zhì)量大小影響軟件操作速度的考慮，可以將主頁效果圖做好備份后，把其它圖層做合并處理；分切Banner的上部（一般為Logo和導航部分）和下部（一般為內(nèi)容部分）為單一圖層；然后以Banner作為中間圖層區(qū)域，方便時刻觀察其在整個主頁面中的構(gòu)成關(guān)系和色彩關(guān)系；對于Banner的畫面組成元素，其大小、位置和色彩關(guān)系的確定，都要做到雙向兼顧，同時服務和滿足Banner與主頁面的視覺效果。

（2）關(guān)于圖片元素的使用

網(wǎng)站設計者要以如何充分展現(xiàn)Banner的主題，作為選擇和使用各種圖片素材進行設計的首要依據(jù)。通常情況下，可分為兩種情況加以不同的設計處理。

一種情況是Banner所用素材為人像、風景 （風光）、場景（實景）等圖片，以選取高質(zhì)量（高分辨率）的兼具視覺美感和影響力的圖片（照片）文件為先，這樣可以方便裁剪圖片的適當部分進行應用。此類應用不需要進行復雜、特殊的圖片效果設計，可以利用簡單基礎的調(diào)圖軟件（例如美圖秀秀等）進行圖片修飾，調(diào)整其色彩、明度和飽和度，使之與主頁面色調(diào)融合后即可應用。

另一種情況則是根據(jù)Banner的主題進行圖片設計。網(wǎng)站設計者依據(jù)如何表現(xiàn)主題來構(gòu)思Banner的創(chuàng)意效果和設計風格，并圍繞于此尋找相應素材，然后利用Photoshop等專業(yè)制圖軟件對各項素材進行圖片設計。在此過程中，要注意利用平面設計的規(guī)律與技巧，將最能夠表達主題創(chuàng)意的主體素材應用在畫面布局的重心位置，借以構(gòu)建視覺焦點；要平衡其它素材和主體素材之間的各種比例關(guān)系和虛實關(guān)系，使用蒙版技術(shù)處理好各項素材之間合理有序的圖層銜接；要通過色相、明度、飽和度、透疊模式和透明度的變化調(diào)整，促使風格和色系不同的素材趨于統(tǒng)一融合。

需要注意的是，文字是信息的主要載體和表達手段，具有思維向?qū)Ш蛨D形表意的作用［6］。作為Banner中的一項重要元素，網(wǎng)站設計者應根據(jù)不同的圖片主題、畫面氛圍和設計風格來選取和使用不同的字體。

3　結(jié)語

網(wǎng)站設計者應廣泛擴大Banner的信息采集來源，系統(tǒng)規(guī)劃和構(gòu)建Banner的主題內(nèi)容，精心創(chuàng)意和設計Banner的圖片形象，使之以強大的視覺展示效果和信息傳達功能，成為高校門戶網(wǎng)站主頁面中的傳播焦點和典型應用。

［1］［2］林歡，譚浩，趙江洪.圖片優(yōu)勢效應在網(wǎng)頁設計中的應用［J］.包裝工程，2014，9：13-16.

［3］清華大學.清華映像介紹［EB/OL］.http://www.tsinghua.edu.cn/publish/newthu/9362/index.html.

［4］嚴晨.網(wǎng)頁設計中的功能性與藝術(shù)性關(guān)系研究［J］.科技與出版.2011，6：59.

［5］章望圓，唐姣.插畫藝術(shù)在網(wǎng)頁設計中的運用［J］.作家，2012，10：247.

［6］王萍.淺談中國元素在當代網(wǎng)頁設計中的應用［J］.中國美術(shù)，2014，1：127.

College Portal Site；Homepage Design；Banner Theme；Picture Design

Research on Banner Design and Application in College Portal Site

ZHU Xiao-ming1，WANG Yan-ping2
（1.Shandong University of Technology，Zibo Shandong 255049；2.Shandong Zibo Seventeenth Middle School，Zibo 255033）

1007-1423（2015）33-0034-04

10.3969/j.issn.1007-1423.2015.33.010

祝曉銘（1977-），男，山東青州人，碩士，工程師，研究方向為計算機網(wǎng)絡和網(wǎng)站建設

2015-11-10

2015-11-20

高校門戶網(wǎng)站主頁面Banner設計的關(guān)鍵在于主題的確立，Banner圖片設計一定要表達出明確的主題訴求。網(wǎng)站設計者應著重圍繞教學與科研、大學文化、社會服務等方面來規(guī)劃和構(gòu)建Banner的主題；要根據(jù)Banner的主題內(nèi)容確定其表現(xiàn)形式和創(chuàng)意風格；要依據(jù)整體設計的觀念對不同類別的主題素材進行統(tǒng)一融合的藝術(shù)化處理。Banner是高校門戶網(wǎng)站主頁面新的視覺信息傳播焦點，是集聚視覺展示效果和信息傳達功能的典型應用。

高校門戶網(wǎng)站；主頁設計；Banner主題；圖片設計

王艷平（1977-），女，山東青州人，教師，從事領(lǐng)域為藝術(shù)教育

The key to the homepage Banner design in college portal site is the establishment of a theme.Banner picture design must be able to express explicit themes.Website designers should plan and construct Banner themes emphatically on teaching and science research，college culture，social service，etc.The displaying form and creative style should match Banner's subject matter.Materials of different themes should be integrated and dealt with artistically.Banner is a focus of new visual information transfer on the homepage of college portal site，as well as a typical application with functions of displaying visual effects and conveying information.