教学网页的视觉设计研究（网上转载）

随着互联网络的迅猛发展，信息传播面临着一场深刻的变革。网络教育的迅速发展和普及不仅对推进素质教育、构建创新教育模式、培养适应知识经济时代要求的创新型人才做出了贡献，同时也酝酿出一个全新的设计领域——教学网页设计。教学网页设计与一般的网页设计不同，它应以结构严谨、内容规范、便于教育信息传递为原则，既要符合美学原理，又要具备科学性、教育性、准确性、完备性等。在教学网页设计的诸多因素中，视觉设计占有很重要的地位。有科学研究表明，在人们接受的信息中，通过视觉获得的占83%，听觉占11%，嗅觉占3.5%，触觉占1%，由此说明视觉是人们接受信息的主要通道。本文分析了教学网页设计中的视觉因素，探讨了网页视觉信息如何更有效、更为合理地表现与传达。
一、教学网页视觉设计的基本要素
教学网页的视觉要素范围很广，但从设计角度来说，主要由文字、图形图片、色彩、图标及按钮、版面布局五部分组成。
（一）文字
文字作为信息传达的主要手段是网页设计的主体，文字是网页中必不可少的元素，也是网页中的主要信息描述要素。在网页中，文字将占据相当大的面积，发挥相当大的作用，文字表现的好与坏将影响到教学网页的整体效果。①字体：字体的设计、选用是版面构成的基础。在教学网页版面构成中，选择两到三种字体为最佳视觉效果。否则，会显得繁杂凌乱，而影响教学信息传递的有效性。在选用的这两、三种字体中，可用加粗、变细、拉长、压扁或调整行距来变化字体的形状，同样能产生丰富多样的视觉效果。②字号：字号是表示字母大小的术语。在网页设计中选用大字号会产生视觉上强烈的冲击，而小字号则造成视觉上连续的吸引。标题文字大小和正文文字大小的比率叫做跳跃率，跳跃率高，则版面生动活泼；跳跃率低，则显得整体、清秀。在教学网页设计时，应避免跳跃率太高而造成学习者的视觉疲劳，影响教学信息的传达。
（二）图形图片
教学网页的图形图片主要包括：图形、图片、照片、图表等。一般而言，客观的教学内容适合用文字来表达，而情绪性、主观性、意象性、无法用文字表达的意念，则适合用图形图片的方式表达。
图形图片有二重含义：一是从属性，是再现和补充文字语言所表达的视觉形象，使学生深入理解传达的思想内涵；二是独立性，突出页面形式之美，增强学习的趣味性，丰富页面的视觉效果。在使用图形图片时要注意：①图片要明晰，有强烈的视觉性；②传达上要有简洁明了的易懂性；③图形上要有引向文字的导读性；④背景与主体在明度上有强烈的对比性。
（三）色彩
色彩是一种对观察者有强烈情绪影响和心理暗示作用的视觉因素。色彩设计在创造视觉冲击力、吸引受众注意力上起着重要作用。过于调和、灰暗、陈旧的色调，由于不会引起受众注意，反而会导致设计页面被视而无睹，达不到视觉传达的目的。
色彩被分为冷色调（如蓝色、紫罗兰色、绿色、青色等）、暖色调（如红色、橘红色、黄色、洋红色等）和中间色调（如黑色、白色、灰色、褐色等）。心理学研究表明，冷色调会减缓人们的时间知觉，从而使人们对事物的知觉注意力得到持续；反之，虽然暖色调容易引起视觉注意，但是由于其加快了人们的时间知觉，长时间注意容易使人们产生视觉疲劳；而中间色调具有比较稳定的情绪特征。当然，每一种色彩都有与之对应的具体情绪，在网页设计时可遵循这样一个基本规律：网页的主要色彩，一般应选择冷色调或中间色调；与此同时，可以适当地应用暖色调色彩来强调和刺激学习者的学习。
（四）图标及按钮
图标及按钮在网页设计中虽然所占的空间较小，但它却是设计的亮点，是设计构思的浓缩。用一些有象征意义的形状、图标或按钮传达与文字相近的概念性的内容，甚至比用文字语言表达更形象。在按钮的设计时要注意： ①在页面较单调的情况下，可设计按钮来调整气氛；②要配合页面的整体要求，避免过于高调活泼和喧宾夺主；③如果选用插图或字体进行配合，应考虑字迹清晰和色彩简练；④按钮设计要小而精，点缀页面，为页面增加趣味性。
（五）版面布局
版面指的是通过浏览器看到的完整的一个页面，布局就是以最适合浏览的方式安排图片和文字在页面上的位置。网页版面的设计同报刊杂志等平面媒体的版式设计有共同之处，它在网页的艺术设计中占据着重要的地位。但网页的排版与书籍杂志的排版又有很多差异。印刷品有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版面设计带来了一定难度。所以，在版式上，将页面中各视觉要素作通盘考虑，合理地布局导航链接、标题、小图标、表格、按钮等元素，以周密的组织和定位来获得页面的秩序感，即使运用“散”性结构，也是经过深思熟虑之后的决定，整个网站内部的页面，都应统一规划、统一风格，让浏览者体会到设计者完整的设计思想。
二、
教学网页的动感表现
网页中的动感是由构成动态的各种因素形成的，所谓动态因素，应包括点、线、面、动画及视频图像等，是网页设计中特殊的视觉构成因素。
动、光、色是影响视觉的最活跃的三大因素，其中动的影响最大，在网页设计艺术中“动”受到各界的广泛青睐，是因为动感往往使人联想具有现代感和生命力极强的事物。在教学网页中增加动感因素，可以突破屏幕的二维空间限制而表现三维空间的结构和形态，可以使大脑产生刺激，强化易记性，可以深化趣味空间，让学生在轻松愉快地学习的同时留下奇趣的回味。
（一）点、线、面
点、线、面作为视觉语言中的基本元素，可以被用来进行互相穿插，互相衬托构成最佳的页面效果，组合成各种各样的视觉形象和千变万化的视觉空间。网页设计中点、线、面的结合运用将有助于表达完美的设计意境。
1．点：在网页中，点可以是一个相对微小、单纯的视觉形象，如一个按钮、一个标识等。点是构成网页的最基本单位，点在页面中使用得当，可做画龙点睛之笔。
2．线：点动成线。线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。直线条的效果是流畅、挺拔、规矩和整齐，直线在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果，一般应用于比较庄重、严肃的教学内容。线的放射、粗细和渐变可以体现三维空间的感觉，水平线的重复排列还可以形成一种强烈的形式感和视觉冲击力，能够使学习者第一眼就产生兴趣，达到吸引注意力的目的。曲线的效果是流动、活跃并具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快和富有活力的视觉效果。一般用于青春、活泼的主页题材。
3．面：线动成面。面是无数点和线的组合，面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说视觉冲击力更大、更强烈。面的形状可以分为：方、圆、三角形、多边形有机切面、不规则形面和意外因素形成的随意形面。面具有自己鲜明的个性和情感特征，在网页的版面设计上，不同形状的面之间的相互关系和整体的和谐需要设计者去把握。只有合理地安排好面的关系，才能设计出充满美感、实用的网页作品。
（二）动画
动画具有的变化性对视觉有极强的作用。动画装饰表现手法除了具有教学内容的表现功能外，还能提高人们观赏页面的兴趣，增加浏览页面的情趣。动画在教学网页设计中可以参与教学内容设计、片头设计、图标及按钮设计。[2]
片头一般多采用动态或动、静结合的页面设计，如整个页面复杂的背景，轻松、自然的文字有序地排列移动；通过文字的移动并叠置于图形上，形成多层次空间而产生空间运动的节奏感；整个页面靠文字和图形的二维或三维移动、渐进、旋转、翻转、变形等手法产生有序或无序的节奏，突出动感表现。
将图标和按钮处理为动态效果，如跳动、闪动、扭动、摆动、抖动加上精美的造型设计，使之成为浓缩的“亮点”。
在做动态处理时，应当注意：①动态与静态部分要有密切关系，搭配和谐；②动态变化不能过多，否则反而会削弱动态效果，分散学生的注意力。
（三）视频图像
照片记录的是人或事物瞬间的展现，在屏幕上仍然是静止的。而摄像机在表现形式上可以做到集时间与空间、视觉与听觉、表现与再现于一身的有目标有主题的运动。通过恰当而巧妙地运用各种镜头、不同景别及剪接等艺术创造手段，使浏览者可以获得艺术的享受。视频图像用于网页设计中，会比静态画面表现更灵活、细致和深刻。随着流媒体技术的日益成熟，视频图像的应用将会越来越广泛。
三、结束语
教学网页设计是综合性的设计工作，能将声音、图片、文字、动画有效结合，营造一个独特的传媒世界，与学习者相互交流。在教学网页设计的诸多因素中，视觉设计占有很重要的地位。本文从视觉传达的角度对网页设计进行了阐述与分析，明确精美的网页设计除应考虑其内容上的精益求精外，还应对学习内容的表现形式进行合理有效的视觉编排，创造一种愉悦的视觉环境，使学习者在获得知识的同时，得到一种全身心的享受与共鸣。

教学网页好难做啊！我真的好佩服你啊！呵呵！:lol