祝曉銘，王艷平

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

高校門戶網(wǎng)站Banner的設(shè)計(jì)應(yīng)用研究

祝曉銘1，王艷平2

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

0　引言

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

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

1　分析和啟示

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

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

2　方式和方法研究

2.1主題的確立

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

主題是Banner設(shè)計(jì)的靈魂，一定要表達(dá)出明確的主題訴求。在其素材的選取上，可重點(diǎn)圍繞以下方面進(jìn)行選擇。

（1）教學(xué)和科研

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

（2）大學(xué)文化

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

（3）社會服務(wù)

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

（4）其他主題

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

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

2.2形式的劃分

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

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

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

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

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

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

2.3設(shè)計(jì)的技巧

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

（1）關(guān)于整體設(shè)計(jì)觀的運(yùn)用

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

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

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

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

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

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

3　結(jié)語

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

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

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

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

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

［6］王萍.淺談中國元素在當(dāng)代網(wǎng)頁設(shè)計(jì)中的應(yī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-），男，山東青州人，碩士，工程師，研究方向?yàn)橛?jì)算機(jī)網(wǎng)絡(luò)和網(wǎng)站建設(shè)

2015-11-10

2015-11-20

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

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

王艷平（1977-），女，山東青州人，教師，從事領(lǐng)域?yàn)樗囆g(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.