建設應用型高校背景下的藝術設計項目化教學
——閩江學院網頁視覺設計探討

孟威妍

（閩江學院 美術學院，福建 福州 350000）

建設應用型高校背景下的藝術設計項目化教學
——閩江學院網頁視覺設計探討

孟威妍

（閩江學院 美術學院，福建 福州 350000）

針對閩江學院網站進行網頁視覺效果設計并在藝術設計課堂上進行探討和分析，作為項目化教學的案例.教學內容主要包括：風格定位；主色調、輔助色的選擇和運用以及版面設計；視覺流程及最佳視域；視覺沖擊力和藝術感染力等方面的研究.

閩江學院網頁設計；視覺審美；視知覺；建設應用型高校背景下的藝術設計；項目化教學

建設應用型高校背景下的藝術設計項目化教學.針對閩江學院網站進行網頁視覺效果設計并在藝術設計課堂上老師與學生共同進行探討和分析，作為項目化教學的案例.

互聯網代表著一種嶄新的信息交流方式，它使信息的傳播突破了傳統的地域、文化阻隔，傳達的范圍、速度與效率產生了質的騰飛.網絡媒體形象成為傳播領域重地，各實體單位爭相展示的新空間、新領域.校園網站既為一個濃縮的校園媒體形象，是向社會各界展示自我形象的平臺.進入網站進行信息的交流，感受撲面而來的學校氛圍，在這里進行信息匯聚、學術探討、情感交流.各大高校不斷建立完善網絡形象，以一個怎樣的網絡面貌呈現在觀者面前已經成為各高校不可忽視的“形象工程”.

人們在瀏覽網站時不但閱讀信息并且通過觀看到的版式、色彩等內容會產生不同的視知覺及心理感受，這種視知覺及感受總和形成對該網站的認知及判斷.感受來源于網頁視覺信息的傳達，設計時須考慮到人們視覺瀏覽次序舒適度，心理特征及視知覺規律以達到準確傳遞網站給觀者的視覺認知.

首先明確網站需承載的整體形象及風格，由此確定各種視覺構成元素之間的關系和秩序（距離、位置、面積）以及采用色彩比重和搭配.組織好自然流暢的視覺導向，確保網頁內容傳播的準確有效.網頁設計中，既要立足信息的傳達，又要符合人們的視覺和思維習慣，設計網頁時注意各種信息要素的合理分布，使各類信息要素的位置、間隙、大小保持一定的節奏感和美感，閱讀舒適性.

1 風格定位

確定網站整體風格、明確主題是網站設計至關重要的第一步，遵循視覺心理規律和形式表達原則將主題主動地傳達給觀賞者，使主題在瀏覽過程中不自覺地被人們捕捉和接收.閩江學院（以下簡稱閩院）是一個綜合性應用型大學，有著優良傳統和濃郁的學術氛圍.網站設計風格要與閩院的整體視覺風貌、學校發展定位、校園人文文化、師生傳統情感相吻合.在對學校歷史及校園文化進行市場調研后，確立網頁設計中突出幾個方面：

（1）銳意進取、勇于開拓的領導風貌；

（2）嚴謹創新學術氛圍；

（3）清新雅致的校園文化.新網站設計既有優良的傳承又能體現生機勃勃新風貌、新活力.

2 色彩運用

恰當使用色彩搭配，運用其蘊含的文化心理確立提升網站視覺效果，更有助于設計主題傳達和確立.

2.1 主色調

新的網頁設計傳承閩院固有的藍色為主色調，藍色有嚴肅莊重之感，樹立嚴謹的學術氛圍及穩重的大學形象.本次設計將傳統色彩中灰藍偏綠的調子進行處理，將明度提升，純度加強，色彩更加明朗和瑰麗.標題欄與浮動欄以及底部裝飾色彩統一，首尾呼應，明度、純度的變化使頁面豐富而不單調.標題欄漸變技法的處理表現光感效果.嚴謹穩重之余增加活力和俊朗的視覺感受.

2.2 一級輔助色

采用紅色作為一級輔助色彩，遵循“總體協調，局部對比”的原則，打破藍色的單調，注入鮮明活力，體現銳意進取，勇于開拓的領導風貌，突出強烈的視覺感染力和號召力.將標題欄下方輔助色條、“校訓”、浮動欄裝飾條、左下角圓形設計為紅色，使得整個頁面中的上部、中部、下部及左部、右部均有輔助色調和.色彩平衡流暢，貫穿始終，跳躍點睛.局部強烈的色彩對比給瀏覽者深刻豐富的印象，減少閱讀疲勞.

2.3 次級輔助色

選擇白色作為次級輔助色彩，平衡整體視覺效果，體現清新、典雅、純凈.其次為漸次搭配，色彩呼應.藍色的上下呼應，明度、純度的變化使頁面豐富而不單調.

3 版面設計

在網頁設計屬于二維平面設計范疇，遵循二維視覺設計原則，遵循人的視覺審美規律和特性，簡單總結為變化統一、條理與反復、對比和調和、均齊與平衡等.點、線、面是二維平面中共有的形式三要素，合理有效的運用三要素的搭配調整觀者的視覺感知，成為傳達界面的基本方法.

色彩、文字的位置安排達到視覺平衡，文字的大小和疏密排列自然導視閱讀次序.位置，使其成為人們瀏覽時的視覺焦點，從而產生深刻的印象.網頁設計中各構成要素在組合時，要注意其結構的輕重大小、虛實、多少等對比因素，加強視覺力度，以強化頁面的整體吸引力.

4 視覺流程及最佳視域

合理地運用視覺流程和最佳視域，制作出清晰、整體性的頁面,使人瀏覽起來產生愉悅感，更樂于主動接收信息.視覺規律的形成是由人的生理特征所決定的，瀏覽者的閱讀行為表現出恒定習慣.

首先是水平運動，常常是從左至右掃過網頁內容的最上半部分，因此，左側上部和中上部被稱為“最佳視域”.閩江學院標志和學校名稱是頁面中核心表現內容，將其安排在頁面的左上角成為視覺中心并搭配以白色背景，奠定清新雅致的基調，并在標志四周大范圍內無圖案及文字處理——去掉干擾，凸顯主題.

向下移，瀏覽下面區域.最后，從網頁左邊的部分進行垂直掃描.即，左到右，上到下，明到暗粗線條細線條，設計網頁一級瀏覽為左上的學校名稱和標志，二級瀏覽為右上的校訓及學校要聞.三級瀏覽為標題欄，學校要聞內容以及底部的圖標.遵循規律設計出自然流暢的視覺導向.

5 視覺沖擊力和藝術感染力

心理學研究表明視覺興奮點的捕捉即為情感與某一事物產生共鳴視線便會停留在這一事物上.閩江學院網站首頁采用校園建筑、景色為頁面中心主體視覺形象，照片的視覺沖擊力并有強烈帶入感，引起師生共同的感親切感以及認同感.

將本項目作為藝術設計專業課堂論題進行研究和探討.將項目條件分析過程和制作歷程進行逐一講解.讓學生感受每一個環節和制作細節，用真實的項目來增強實踐性和應用型高校的課程建設.

〔1〕魯道夫·阿恩海姆.藝術與視知覺（新編）[M].長沙：湖南美術出版社，2008.

〔2〕薛紅艷.設計的視覺語言[M].北京：化學工業出版社，2006.

〔3〕黃海燕,張輝.網頁設計和平面設計[J].包裝工程，2004（1）.

G642

A

1673-260X（2017）11-0142-02

2017-09-27

福建省教育廳社會科學研究項目資助（JAS160406）