建设应用型高校背景下的艺术设计项目化教学——闽江学院网页视觉设计探讨

孟威妍

（闽江学院 美术学院，福建 福州 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）