高校門戶網站Banner的設計應用研究

祝曉銘，王艷平

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

高校門戶網站Banner的設計應用研究

祝曉銘1，王艷平2

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

0　引言

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

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

1　分析和啟示

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

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

2　方式和方法研究

2.1主題的確立

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

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

（1）教學和科研

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

（2）大學文化

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

（3）社會服務

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

（4）其他主題

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

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

2.2形式的劃分

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

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

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

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

（2）固定秒數切換效果下的動態多幅圖片展示

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

2.3設計的技巧

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

（1）關于整體設計觀的運用

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

（2）關于圖片元素的使用

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

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

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

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

3　結語

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

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

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

［4］嚴晨.網頁設計中的功能性與藝術性關系研究［J］.科技與出版.2011，6：59.

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

［6］王萍.淺談中國元素在當代網頁設計中的應用［J］.中國美術，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-），男，山東青州人，碩士，工程師，研究方向為計算機網絡和網站建設

2015-11-10

2015-11-20

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

高校門戶網站；主頁設計；Banner主題；圖片設計

王艷平（1977-），女，山東青州人，教師，從事領域為藝術教育

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.