网络课程的视觉传达设计

范晓姝，范晓琪，于顶红

(通化师范学院 物理系，吉林 通化 134002)

网络课程是运用计算机网络技术和多媒体数字技术，让不同地域的学习者在数字化环境下进行交互式学习的网络教育平台.在这种学习过程中，学习者接触最多的就是网络课程的页面，页面设计的好坏直接影响着学习者的学习情感与学习效率.近年来，网络课程的设计，在网络教育情感的传达和视觉艺术表现形式的结合方面做得还不够，大部分网络课程单纯注重内容和技术的发挥而导致了视觉设计人性化与艺术美的缺憾.笔者认为，对网络课程的视觉信息设计进行研究，对于构建人性化、艺术化、情感化的网络学习平台，对于创设学习者积极的愉悦的学习情境，提升网络课程的教育教学质量具有极为重要的意义.因此，如何创造性地运用视觉传达设计的特点和原则，为网络课程设计出优质的、和谐的、高效的网页视觉信息，并以其独特的风格为网络学习者提供亲切美好的学习体验，是一个值得探讨的课题.

1 视觉传达设计的产生及网络视觉设计的发展

视觉传达设计(Visual Communication Design)是指利用视觉符号来传递各种信息的设计.设计师是信息的发送者，传达对象是信息的接受者.视觉传达设计这一术语在1960年日本东京举行的世界设计大会中被广泛的使用，人们把有关内容传达给眼睛从而进行造型的表现性设计统称为视觉传达设计，简而言之，视觉传达设计是“给人看的设计，告知的设计”[1].从发展的角度来看，视觉传达设计是科学、严谨的概念名称，蕴含着未来设计的趋向.

近年来，随着信息技术的日新月异，以网络为媒体的数字技术飞速发展，给人们带来了革命性的视觉体验.于是，网络中的视觉传达设计便应运而生.网络视觉传达设计是通过网络视觉媒介表现并传达给受众的设计，体现着设计的时代特征和丰富内涵.随着网络技术的进步，网络视觉传达设计正与其他领域相互交叉，形成了一个与其他视觉媒介关联并相互协作的设计新领域.网络视觉传达设计主要是围绕网页的布局、版式、文字、符号、图形、图片、图像、色彩等元素而展开的艺术创作，所以也称为网页的视觉传达设计[2].它起着沟通浏览者—信息—网络的桥梁作用，在精神文化领域以其独特的艺术魅力影响着现代人的感情和观念.网络视觉传达设计就是要使各种视觉符号在网页空间内合理分布，保持一定的形式美法则，能按照人的视觉流程的心理和生理特点，引导浏览者清晰、流畅、愉悦、快捷地接受网页所传达的信息.

2 视觉传达设计在网络课程中的优势

在师生彼此分离的网络教育中，视觉信息的传递是否灵活有效是设计者们讨论的主要话题.除了网络课程本身的内容之外， 视觉传达设计是最值得关注的元素，它对于吸引和挽留学习者起到了决定性作用.主要表现为：

(1)视觉传达设计的艺术感染性有助于提高网络学习者的学习兴趣.网络视觉传达的设计元素丰富，表现形式多样，具有十分强烈的艺术情绪与感染力.生动的网络课程视觉信息设计，不仅能有效地传递教育信息，而且还影响着学习者的感觉、知觉、智力与情感，使学习者在提高科学文化水平的同时，自身的思想、情感、气质、修养也能够在潜移默化中得到升华与陶冶.

(2)视觉传达设计的引导性会促进网络学习者情感的协调发展.伴随着网络的发展，视觉传达设计领域已经不再似纯艺术那样，具有浓厚的个人情感色彩，它受到理性、法则和公众需求的限制.当信息社会创造了越来越多的机遇与挑战时，视觉传达设计的引导性开始越来越广泛地凸显于网络远程教育当中，它不仅积极地发挥着教育信息和价值观念的引导作用，同时也在学习者—网络—社会之间，建立起交流融通的纽带，协调着各种情感矛盾和心理冲突[3].因此，如何在设计中正确对待新事物、新理念、新媒介，并将其合理地运用、引导、传递给学习者，是每一位网络教育设计者必须思考的问题.

(3)视觉传达设计的动态交互性有利于网络课程页面内容的快速更新.视觉传达设计是人们为达到某种目的而进行的有计划的信息传递和交流活动.传统视觉传达设计的交互性是断续的、延迟的，而在网络教育环境下，视觉传达设计的交互性是同步的、持续的.这种持续的交互不像印刷品的视觉信息设计那样，一经发表之后就意味着设计的结束，它的存在意味着网络课程的设计者们一定要随时关注课程的动态，根据发展的步伐与学习者的反馈及时对课程信息进行调整与修改，使网络课程的视觉信息从外在到内在全方位地推陈出新.

(4)视觉传达设计的多元化有助于提升网络课程的传播效率.视觉传达设计是一种多元化的视觉综合设计.一直以来，网络课程给学习者带来的都是一片枯燥和刻板的视觉印象，无法达到高效的教育传播目的.多元化的网络视觉传达设计将文字、符号、图形、图像、色彩等视觉元素在网络空间内加以创新、综合与重组，为网络学习者构建最优化的视觉流程，势必会大幅度提升网络课程的传播效率.

3 网络课程页面设计中存在的问题

(1)网络课程的页面设计者对视觉传达设计的理论与原则缺乏认识.作为“为传达而设计”的视觉传达设计，如何充分而有效地传达信息是每一个设计者面临的中心问题.目前，网络课程的视觉信息设计由于受到各种设计软件的影响，多少带有无序和混乱的局面.很多网络课程单纯地追求页面的花哨风格和所谓的形式美而忽略了网络课程视觉信息的基本要素设计.这些问题大都源于网络课程的设计者缺乏对视觉传达设计理论的深入认识.网络视觉传达设计是建立在视觉心理学和视觉生理学的基础上，对各种视觉元素进行系统的了解与设计，并通过主观意向与客观内容的恰当结合，最终利用形式美法则创造出的视觉形象.它强调对视觉信息的愉悦表达与积极互动，既要激发学习者的学习兴趣，又要吸引学习者与网络页面信息进行适时的情感交流.如果网络课程的页面设计者能够本着艺术表现与学习者情感交流相一致的原则，从教育内容的客观要求出发，将美学与心理学完美地结合起来，将会使网络教育事半功倍，无“网”而不利.

(2)网络课程的页面设计过于机械化和技术化，缺乏对学习者人性化的关怀与理解.网络视觉传达设计本身就是一个新的设计领域，网络课程的视觉传达设计更是对设计者提出了更高的要求，准确地把握被设计对象的心理，是设计能否获得成功的关键.许多网络课程一味强调内容的逻辑性和技术的先进性，而忽略了网络教育教与学时空分离的局限，忽视了学习者的认知规律、学习情感需求和视听觉感官特点，导致了网络教育效果的严重削弱[4].因此，网络课程的设计者必须克服传统的思维定势，摆脱技术权威的刻板思想，立足“以人为本”的基本原则，从人的视觉心理效应、视觉习惯、认知结构以及认知情感出发，将各种视觉元素与技术内容进行人性化地整合与重组，破除一切违背学习规律和视觉规律的现象，运用网络视觉传达设计的原理，穷尽一切艺术与技术之长，有效地实现网络教育环境下教与学的再度整合.

4 视觉传达设计在网络课程中的具体分析和运用

视觉传达设计是网页设计的核心和灵魂，尤其是在网络课程中，视觉信息的传达更应放在首要地位进行设计.只有那些具备良好视觉传达设计的网络课程，才能在最短的时间内吸引并锁定学习者，激发学习者的学习兴趣和愉悦的学习情感.因此，在网络课程的整体设计中一定要注意灵活运用视觉传达设计的特点和原则，以教育传播为导向，把握视觉传达设计艺术的自然与变化、多样与集中、节奏与平缓、协调与整齐、对比与统一的设计理念，为学习者呈现出一个网络环境下的温馨和谐、流畅爽朗的学习空间.下面，笔者从空间布局、文字、图片、色彩等一些最基本的视觉要素入手，谈一谈有关网络课程页面信息的设计.

(1)页面空间的设计.网页界面与传统媒体不同，其借助由代码语言编程所实现的各种交互式效果，增加了网页空间设计的生动性和复杂性，也使得设计者需要更多地考虑页面元素的排布和优化.按照信息组织的类型，网络课程的页面空间结构可以分为序列型、层级型、网格型和网状型.无论哪种类型都包含有平面构成和立体构成.立体构成主要依据内容呈现的规律及次序，前后衔接，形成层次.而平面构成相对复杂，需要将多种视觉元素进行精心配置.良好的平面构成能使页面整体视觉效果美观和谐，便于阅读和学习.网络课程的平面构成宜采用“同”字型、框架型、封面型和Flash型等，具体如下：

“同”字型是很多网络课程的页面所喜欢的类型，即最上面是课程的标题以及横幅标语，接下来就是网页的主要内容，中间是主体部分，左右两边分列一些较小而独立的信息模块(研究表明，较小而分立的信息比较长而不分立的信息更为有效和便于浏览)，最下面是网络课程的一些基本交流讯息.这种平面类型具有稳定完整的特点，整个页面结构自然紧凑，平衡和谐.

框架型分为：左右框架型和上下框架型.左右框架型是一种左右分为两页的框架结构类型，一般左面是导航链接，有时最上面会有一个小的标题或标志，右面是正文(上下框架型与其类似，区别仅仅在于它是一种上下分为两页的框架).论坛性教育内容非常适合这种结构，它的特点是一目了然，页面层次感强，简洁流畅.在这种类型中，应该注意导航栏的设计，导航栏的作用是能让学习者在浏览时很容易地到达不同的页面，一般来讲，导航栏在“第一屏”就应该显示出来，但是左右分开的类型有时第一屏可能不会呈现出导航栏，因此，横向放置的上下框架型要优于纵向设置的左右框架型.

封面型常用于网络课程的首页，大部分为一些精美的图片设计，也可结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接，也多用于个人主页的设计，如教师的个人主页.这种类型如果运用得当，会带来一种淡雅清新、宁静致远的视觉体验.Flash型与封面型类似，只是这种类型采用了目前非常流行的Flash动画，由于Flash强大的功能，使得页面所表达的视觉信息更加生动，充满激情.如果动画效果逼真，所带来的视觉冲击力绝不会逊色于真实的客观世界，这是目前最吸引学习者浏览和关注的一种结构类型.

此外，网络课程的页面设计中还要考虑空间的留白.没有空白，页面常常会显得拥挤堵塞，从而降低了整体的视觉效果.善于运用空白是增强网络课程信息传达的有效手段，同时也是分隔页面上其他元素的最有效方法，设计空白还有助于集中学习者的视觉焦点，提升传播效率，若能巧妙地使用，常常能创造“此时无声胜有声”的意境.而且，在行间段落使用空白还可以为学习者的眼睛提供休息的机会，从而使学习者的学习节奏有张有弛、疏密有致.

(2)文字的设计.从网络课程网页最初的纯文字界面发展至今，文字仍是其他任何元素无法取代的重要构成.原因是文字所占的存储空间小，节省了学习者下载和浏览的时间.文字的排布对页面整体设计影响很大，即使整个页面图形修饰较少，如果文字编排得当，分类条例清晰，版面同样可以生动活泼，并不会给人单调乏味的感觉.

网络课程中的文字主要包括标题、信息、热字链接等几种主要形式.标题是主体内容的简要说明，一般比较醒目，应优先编排.设计文字首先从标准字体开始.标准字体是指用于标志、标题、主菜单的特有字体.一般网页默认的是宋体，如果为了体现课程 “与众不同”的个性风格，也可以根据需要选择一些特别的字体.但字体不宜过多，尽量不要使用超过三种以上的字体.简单、简洁、简约是文字设计的主要原则.因为字体太多会显得杂乱，没有主题.通常，标题的字体较正文大，颜色也应有所区别.字号要合适，字号过大，会浪费版面空间，字号过小，又不能吸引学习者的注意力，而且容易使眼睛产生疲劳.不同内容的字号要有所区别.字距与行距不是绝对的， 应根据实际情况而定，字距与行距的加宽或缩紧， 要能体现主题的内涵.

一般情况下，网络课程的页面中会不可避免地要出现一些按钮和图标，可以将这些按钮和图标设计成动感的文字及特殊字体，多种浏览器都可以支持，页面也不会显得太过呆板.此外，网络课程会有许多只有文本的页面，这是令人乏味的，并且也浪费Web的潜力.如果有大量的基于文本的文档，应当以Adobe Acrobat格式的文件形式来放置，以便学习者能离线阅读.

(3)图片的设计.图片在网络课程的视觉传达设计中因其独特的个性成为吸引学习者视觉的重要元素.图片给人的视觉印象要优于文字，图片易于引起学习者的注意，并激发学习者的阅读情趣，合理地设计和运用图片，可以直观、形象地表现主题内容，起到画龙点睛、帮助理解的作用，更可以使整个页面布局立体、富于变化.图片还具有导读性，它能具体而直接地把知识信息高质量地准确地表达出来，使本来枯燥无味的内容变成强烈而有感染力的逼真画面.

图片的大小以及位置安排直接关系到整个页面的构图与布局，所以应根据人的最佳视域与视觉流程原理来安排和选择.图片的大小不同，释放出的情感因素也不同，小图片能产生精密细致的感觉，大图片能强化瞬间的视觉效果，形成强烈的视觉识别攻势.一般情况下，要将重要的、吸引学习者注意力的图片放大， 从属的图片缩小， 形成主次分明的格局.但是，图片不能过大，最多不要超过屏幕宽度的75%.图片的位置安排应考虑到学习的视觉右撇现象，依主次从左到右顺序安排能够创造视觉空间的延伸感.如果只有一张图片，那么最好是将其放在页面的黄金分割点上.需要特别指出的是背景图片的作用，以图片为背景更能衬托主题信息的表现，会更加增强页面的空间感，使教学内容富于美感和韵致.

(4)色彩的设计.色彩是视觉艺术表现的基本设计要素之一.设计标准色彩是网络课程色彩设计的第一步.标准色彩是指能体现课程性质和延伸内涵的色彩，是网络给学习者的第一印象，不同的色彩搭配能产生不同的情感效应，从而影响到学习者的学习情绪.例如：绿色调给人一种收获希望的情感，黄色调给人一种活泼向上的情感，蓝色调给人一种安静理智的情感等[5].在网络课程的师生交互环境中，为了让学习者感受到亲切的情感氛围，感受到一种浓浓的关注，一定要以柔和的色调作为主色调.通常情况下，网络课程的标准色彩不要超过3种，色彩太多会让学习者眼花缭乱，影响学习的效果.

注意邻近色与对比色的搭配使用.例如绿色和蓝色，红色和黄色就互为邻近色，采用邻近色进行设计可以使页面避免色彩杂乱，易于达到信息的和谐统一.反之，采用对比色可以突出重点，产生强烈的视觉效果，明暗冷暖的对比使用，能够让内容更加鲜明、重点突出.还要提到的是灰色的运用，灰色在色彩中是万能色，不仅可以和任何彩色搭配，而且还可以帮助两种对立的色彩进行和谐的过渡.

另外，网络学习的一个主要特点就是要长时间面对着显示器.长时间观察注视某些内容，会造成视觉的严重疲劳，降低学习效率.因此，设计者一定要注意色彩的自然性和舒适性，要根据均衡和重点突出的原则，对色彩进行合理的搭配.例如：持续的观看暖色调物体容易使人产生烦躁情绪，注意力很快分散，而冷色调的物体则带来安静的感觉，易于长时间集中精力学习和工作.根据这一特点，可以把那些需要长时间学习观看的内容设计成冷色调，而需短时引起注意的内容设计成暖色调，重点内容提高明度，使之静中有动、动中有静，让学习者在一种鲜活、灵动的画面色彩中学习和掌握知识.

总之，网络课程的视觉传达设计需要设计者综合多方面的知识，它与网络教育、设计原理、心理学、生理学、美学等领域都有着极为密切的联系.网络课程的设计者们应本着一切为学习者服务的宗旨，创造性地运用视觉传达设计的原则，从学习者的认知规律出发，从学习者的内心情感出发，构筑或稳重、或严谨、或活泼、或幽雅的布局新颖的课程网页，建立起网络视觉生态环境与学习者情感之间的和谐与均衡.相信随着视觉传达设计研究的不断深入，网络课程在带给学习者更多知识的同时，也会带给学习者更多的情感关怀和美的感受.

[1]芦影.平面设计艺术[M].北京:中国人民大学出版社，2005.

[2]黄在贤.设计师谈精彩网页设计[M].北京:电子工业出版社，2004.

[3]Thomas A Powell.Web设计大全[M].北京:机械工业出版社，2001.

[4]黄瑶.浅谈视觉传达设计与心理学[J].台声·新视角，2006(1).

[5]谢舒潇，叶长茂.浅谈网络课程的页面设计[J].高等理科教育，2004(1).