天津 重庆 南京 成都 济南 义乌 广州 佛山 贵阳 西安

教学网页的视觉设计研究(网上转载) - 技术与教育 - 教育技术思考 打造国内最优秀的教育...

发布时间:2022年3月30日责任编辑:赵小云

教学网页的视觉设计研究(网上转载)

随着互联网络的迅猛发展,信息传播面临着一场深刻的变革。网络教育的迅速发展和普及不仅对推进素质教育、构建创新教育模式、培养适应知识经济时代要求的创新型人才做出了贡献,同时也酝酿出一个全新的设计领域——教学网页设计。教学网页设计与一般的网页设计不同,它应以结构严谨、内容规范、便于教育信息传递为原则,既要符合美学原理,又要具备科学性、教育性、准确性、完备性等。在教学网页设计的诸多因素中,视觉设计占有很重要的地位。有科学研究表明,在人们接受的信息中,通过视觉获得的占83%,听觉占11%,嗅觉占3.5%,触觉占1%,由此说明视觉是人们接受信息的主要通道。本文分析了教学网页设计中的视觉因素,探讨了网页视觉信息如何更有效、更为合理地表现与传达。

一、教学网页视觉设计的基本要素

教学网页的视觉要素范围很广,但从设计角度来说,主要由文字、图形图片、色彩、图标及按钮、版面布局五部分组成。

(一)文字

文字作为信息传达的主要手段是网页设计的主体,文字是网页中必不可少的元素,也是网页中的主要信息描述要素。在网页中,文字将占据相当大的面积,发挥相当大的作用,文字表现的好与坏将影响到教学网页的整体效果。①字体:字体的设计、选用是版面构成的基础。在教学网页版面构成中,选择两到三种字体为最佳视觉效果。否则,会显得繁杂凌乱,而影响教学信息传递的有效性。在选用的这两、三种字体中,可用加粗、变细、拉长、压扁或调整行距来变化字体的形状,同样能产生丰富多样的视觉效果。②字号:字号是表示字母大小的术语。在网页设计中选用大字号会产生视觉上强烈的冲击,而小字号则造成视觉上连续的吸引。标题文字大小和正文文字大小的比率叫做跳跃率,跳跃率高,则版面生动活泼;跳跃率低,则显得整体、清秀。在教学网页设计时,应避免跳跃率太高而造成学习者的视觉疲劳,影响教学信息的传达。

(二)图形图片

教学网页的图形图片主要包括:图形、图片、照片、图表等。一般而言,客观的教学内容适合用文字来表达,而情绪性、主观性、意象性、无法用文字表达的意念,则适合用图形图片的方式表达。

图形图片有二重含义:一是从属性,是再现和补充文字语言所表达的视觉形象,使学生深入理解传达的思想内涵;二是独立性,突出页面形式之美,增强学习的趣味性,丰富页面的视觉效果。在使用图形图片时要注意:①图片要明晰,有强烈的视觉性;②传达上要有简洁明了的易懂性;③图形上要有引向文字的导读性;④背景与主体在明度上有强烈的对比性。

(三)色彩

色彩是一种对观察者有强烈情绪影响和心理暗示作用的视觉因素。色彩设计在创造视觉冲击力、吸引受众注意力上起着重要作用。过于调和、灰暗、陈旧的色调,由于不会引起受众注意,反而会导致设计页面被视而无睹,达不到视觉传达的目的。

色彩被分为冷色调(如蓝色、紫罗兰色、绿色、青色等)、暖色调(如红色、橘红色、黄色、洋红色等)和中间色调(如黑色、白色、灰色、褐色等)。心理学研究表明,冷色调会减缓人们的时间知觉,从而使人们对事物的知觉注意力得到持续;反之,虽然暖色调容易引起视觉注意,但是由于其加快了人们的时间知觉,长时间注意容易使人们产生视觉疲劳;而中间色调具有比较稳定的情绪特征。当然,每一种色彩都有与之对应的具体情绪,在网页设计时可遵循这样一个基本规律:网页的主要色彩,一般应选择冷色调或中间色调;与此同时,可以适当地应用暖色调色彩来强调和刺激学习者的学习。

(四)图标及按钮

图标及按钮在网页设计中虽然所占的空间较小,但它却是设计的亮点,是设计构思的浓缩。用一些有象征意义的形状、图标或按钮传达与文字相近的概念性的内容,甚至比用文字语言表达更形象。在按钮的设计时要注意: ①在页面较单调的情况下,可设计按钮来调整气氛;②要配合页面的整体要求,避免过于高调活泼和喧宾夺主;③如果选用插图或字体进行配合,应考虑字迹清晰和色彩简练;④按钮设计要小而精,点缀页面,为页面增加趣味性。

(五)版面布局

版面指的是通过浏览器看到的完整的一个页面,布局就是以最适合浏览的方式安排图片和文字在页面上的位置。网页版面的设计同报刊杂志等平面媒体的版式设计有共同之处,它在网页的艺术设计中占据着重要的地位。但网页的排版与书籍杂志的排版又有很多差异。印刷品有固定的规格尺寸,网页则不然,它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且,网页的组织结构不像印刷品那样为线性组合,这给网页的版面设计带来了一定难度。所以,在版式上,将页面中各视觉要素作通盘考虑,合理地布局导航链接、标题、小图标、表格、按钮等元素,以周密的组织和定位来获得页面的秩序感,即使运用“散”性结构,也是经过深思熟虑之后的决定,整个网站内部的页面,都应统一规划、统一风格,让浏览者体会到设计者完整的设计思想。

二、

教学网页的动感表现

网页中的动感是由构成动态的各种因素形成的,所谓动态因素,应包括点、线、面、动画及视频图像等,是网页设计中特殊的视觉构成因素。

动、光、色是影响视觉的最活跃的三大因素,其中动的影响最大,在网页设计艺术中“动”受到各界的广泛青睐,是因为动感往往使人联想具有现代感和生命力极强的事物。在教学网页中增加动感因素,可以突破屏幕的二维空间限制而表现三维空间的结构和形态,可以使大脑产生刺激,强化易记性,可以深化趣味空间,让学生在轻松愉快地学习的同时留下奇趣的回味。

(一)点、线、面

点、线、面作为视觉语言中的基本元素,可以被用来进行互相穿插,互相衬托构成最佳的页面效果,组合成各种各样的视觉形象和千变万化的视觉空间。网页设计中点、线、面的结合运用将有助于表达完美的设计意境。

1.点:在网页中,点可以是一个相对微小、单纯的视觉形象,如一个按钮、一个标识等。点是构成网页的最基本单位,点在页面中使用得当,可做画龙点睛之笔。

2.线:点动成线。线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。直线条的效果是流畅、挺拔、规矩和整齐,直线在页面上的重复组合可以呈现井井有条、泾渭分明的视觉效果,一般应用于比较庄重、严肃的教学内容。线的放射、粗细和渐变可以体现三维空间的感觉,水平线的重复排列还可以形成一种强烈的形式感和视觉冲击力,能够使学习者第一眼就产生兴趣,达到吸引注意力的目的。曲线的效果是流动、活跃并具有动感。曲线和弧形在页面上的重复组合可以呈现流畅、轻快和富有活力的视觉效果。一般用于青春、活泼的主页题材。

3.面:线动成面。面是无数点和线的组合,面具有一定的面积和质量,占据空间的位置更多,因而相比点和线来说视觉冲击力更大、更强烈。面的形状可以分为:方、圆、三角形、多边形有机切面、不规则形面和意外因素形成的随意形面。面具有自己鲜明的个性和情感特征,在网页的版面设计上,不同形状的面之间的相互关系和整体的和谐需要设计者去把握。只有合理地安排好面的关系,才能设计出充满美感、实用的网页作品。

(二)动画

动画具有的变化性对视觉有极强的作用。动画装饰表现手法除了具有教学内容的表现功能外,还能提高人们观赏页面的兴趣,增加浏览页面的情趣。动画在教学网页设计中可以参与教学内容设计、片头设计、图标及按钮设计。[2]

片头一般多采用动态或动、静结合的页面设计,如整个页面复杂的背景,轻松、自然的文字有序地排列移动;通过文字的移动并叠置于图形上,形成多层次空间而产生空间运动的节奏感;整个页面靠文字和图形的二维或三维移动、渐进、旋转、翻转、变形等手法产生有序或无序的节奏,突出动感表现。

将图标和按钮处理为动态效果,如跳动、闪动、扭动、摆动、抖动加上精美的造型设计,使之成为浓缩的“亮点”。

在做动态处理时,应当注意:①动态与静态部分要有密切关系,搭配和谐;②动态变化不能过多,否则反而会削弱动态效果,分散学生的注意力。

(三)视频图像

照片记录的是人或事物瞬间的展现,在屏幕上仍然是静止的。而摄像机在表现形式上可以做到集时间与空间、视觉与听觉、表现与再现于一身的有目标有主题的运动。通过恰当而巧妙地运用各种镜头、不同景别及剪接等艺术创造手段,使浏览者可以获得艺术的享受。视频图像用于网页设计中,会比静态画面表现更灵活、细致和深刻。随着流媒体技术的日益成熟,视频图像的应用将会越来越广泛。

三、结束语

教学网页设计是综合性的设计工作,能将声音、图片、文字、动画有效结合,营造一个独特的传媒世界,与学习者相互交流。在教学网页设计的诸多因素中,视觉设计占有很重要的地位。本文从视觉传达的角度对网页设计进行了阐述与分析,明确精美的网页设计除应考虑其内容上的精益求精外,还应对学习内容的表现形式进行合理有效的视觉编排,创造一种愉悦的视觉环境,使学习者在获得知识的同时,得到一种全身心的享受与共鸣。

网站简介 联系方式 隐私政策 投诉及建议 发展历程 垃圾信息处理邮箱tousu572@163.com
icp备案号 浙ICP备10048612号 不良信息举报平台 互联网安全管理备案 Copyright 2021 www.100jianzhan.com All Rights Reserved