（教育技术学专业论文）教学网络页面视觉要素设计研究.pdf

摘要 摘要 当今社会，网络及计算机技术急速发展，这些技术被普遍应用在教学中，形成了新 的教学模式网络教学。在网络教学实施的过程中，学习者会受到多重的感官刺激， 这些刺激主要来自于网页的视觉要素。随着网络教学的发展，学习者对教学页面的要求 不再仅仅局限在教学性上，对教学网页视觉要素设计也提出了更高的要求，要求教学网 页要集教学性、科学性、美观性于一体。本文以认知心理学和格式塔心理学为理论基础， 针对现阶段教学网页视觉要素设计效果中存在的一些弊端，提出了进行教学网页视觉要 素设计时要遵循的引导与控制学生的注意力原则、符合与适应学生的视知觉心理原则、 激发与培养学生的学习动机原则、保障与益于学生的身心发展原则；结合具体案例的设 计，提出了教学网页的版面、文字、简短标题及提示语、图形图像、空间结构和色彩等 视觉要素设计的基本思路和要求，以期为教学网页视觉要素设计提供理论的指导和实践 的思路与方法。 关键词教学网络页面视觉要素格式塔理论 a b s t r a c t a b s t r a c t n o w a d a y s ，w i t ht h er a p i dd e v e l o p m e n to fn e t w o r ka n dc o m p u t e rt e c h n o l o g y , w h i c ha r e u s e dc o m m o n l yi ne d u c a t i o n , t h en e wt e a c h i n gm o d e li sf o r m e d n e t w o r kt e a c h i n g i nt h e p r o c e s so ft h ea c t u a l i z a t i o no fn e t w o r kt e a c h i n g ，t h el e a r n e r sr e c e i v em u c hp h y s i c a ls t i m u l i ， w h i c hm a i n l yc o m ef r o mt h ep a g e v i s i o n a le l e m e n t s w i t ht h ed e v e l o p m e n to fn e t w o r k t e a c h i n g ，t h el e a r n e r s r e q u i r e m e n t sa r en o tj u s tl i m i t e do nt e a c h i n g ，b u to nt h ed e s i g no f p a g e v i s i o n a le l e m e n t s 。t h et e a c h i n gp a g es h o u l db ea ni n t e g e ro fe d u c m i o n ，s c i e n c ea n d a r t i s t r y t h i sp a p e ri l l u s t r a t e st h a ti nd e s i g no fp a g e - v i s u a le l e m e n t sp o i n t i n ga ts o m ed e f e c t s i nd e s i g no fp a g e - v i s u a le l e m e n t sa tt h ec u r r e n ts t a g e ，s o m ep r i n c i p l e ss h o u l db ef o l l o w e d b a s eo nc o g n i t i v ep s y c h o l o g ya n dg e s t a l tp s y c h o l o g y ：t h ep r i n c i p l eo fc o n t r o l l i n ga n d g u i d i n gs t u d e n t s a t t e n t i o n ，t h ep r i n c i p l eo fa d a p t i n gt oa n dc o n f o r m i n gt os t u d e n t s v i s u a l c o n s c i o u sa b i l i t i e s ，t h ep r i n c i p l eo fc u l t i v a t i n ga n ds t i m u l a t i n gs t u d e n t s l e a r n i n gm o t i v a t i o n , t h ep r i n c i p l eo fb e n e f i t i n ga n dp r o t e c t i n gs t u d e n t s p h y s i c a la n dm e n t a ld e v e l o p m e n t w i t l l t h es p e c i f i cc a s e ，t h et h e s i sp u t sf o r w a r dt h eb a s i ci d e a sa n dr e q u i r e m e n t sa b o u tl a y o u t s ， c h a r a c t e r s ，b r i e ft i t l e s ，m a r k e dw o r d s ，g r a p h i c sa n di m a g e s ，s p a t i a ls t r u c t u r e s ，c o l o r sa n ds o o ni no r d e rt op r o v i d et h et h e o r e t i c a lg u i d a n c ea n dp r a c t i c a lm e t h o df o rd e s i g no f p a g e v i s u a l e l e m e n t si nn e t w o r kt e a c h i n g k e yw o r d st e a c h i n gn e t w o r kp a g e v i s u a le l e m e n t sg e s t a l tt h e o r y 河北大学 学位论文独创性声明 本人郑重声明：所呈交的学位论文，是本人在导师指导下进行的研究工作及 取得的研究成果。尽我所知，除了文中特别加以标注和致谢的地方外，论文中不 包含其他人已经发表或撰写的研究成果，也不包含为获得河北大学或其他教育机 构的学位或证书所使用过的材料。与我一同工作的同志对本研究所做的任何贡献 均已在论文中作了明确的说明并表示了致谢。 作者签名：易芳 日期：亟z 年笸4 月止日 学位论文使用授权声明 本人完全了解河北大学有关保留、使用学位论文的规定，即：学校有权保留 并向国家有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。 学校可以公布论文的全部或部分内容，可以采用影印、缩印或其他复制手段保存 论文。 本学位论文属于 1 、保密口，在年月日解密后适用本授权声明。 2 、不保密口。 ( 请在以上相应方格内打“”) 作者签名：日期：玉! z 年月且日 导师签名：垄益堑互：奄 日期：j 垃年上月丛日 第1 章前言 第1 章前言 1 1 课题的提出 随着互联网络的迅猛发展，信息传播面临着一场深刻的变革。网页设计作为一门新 兴的设计类别和网络的交叉学科应运而生，它以网络为载体，把各种信息以最快捷、方 便的方式传达给受众。网络教育随之迅速发展，它的普及不仅对推进素质教育、构建创 新教育模式、培养适应知识经济时代要求的创新型人才做出了贡献，同时也酝酿出一个 全新的设计领域教学网页设计。教学网页设计与一般的网页设计不同，它应以结构 严谨、内容规范、便于教育信息传递为原则，既要符合美学原理，又要具备科学性、教 育性、准确性、完备性等。教育心理学研究表明，在人们接受的信息中，通过视觉获得 的占8 3 ，听觉占1 1 ，嗅觉占3 5 ，触觉占1 ，由此说明视觉是人们接受信息的主要 通道。因此，在教学网页设计的诸多因素中，视觉设计占有很重要的地位。 视觉设计也可以表达为视觉要素设计。教学网页中的视觉要素是指受教育者所能看 到的所有页面元素中最重要的部分，基本涵盖了版面布局、文字、图形图像、简短标题 和提示语、页面空间及页面的色彩几部分。它们设计结果的好坏直接决定了学生的学习 是否有效。视觉要素是学生网上学习环境的重要组成部分，好的视觉要素设计可以引导 和控制学生的注意力，将学生起初的无意注意转化为有意注意，还可以帮助学生进行教 学内容的加工，有效地将短时记忆转化为长时记忆，这些功能在学生的学习中都起着非 常重要的作用；好的视觉要素设计是适合学习者视觉流程的，而且符合学习者视觉心理 需求，在学习过程中不但满足了学习者学习需要，还保证了学习者身心的健康；在培养 和激发学生学习兴趣方面，视觉要素设计也起到很关键的作用，好的设计不但可以引起 学生的学习兴趣，还可以使兴趣长时间地保留在重要内容上。 然而，在具体的实践过程中还存在着诸多问题：( 1 ) 教学信息主次不分明。很多 教学网站为了追求信息传播的量，把大量文字、图片、动画等信息不加考虑地堆积到页 面上，不分主次，不加以条理化、规范化，使人很难找到所需要的信息；( 2 ) 教学信 息缺乏整体感。许多教育网站，其网页采用很深的带有花哨图案的图片作为背景，严重 干扰了学习者的浏览和阅读，使之很难获取有效信息。同时有些网页还采用了颜色各异、 风格不同的图片、文字和动画，使页面五彩缤纷，没有整体感觉；( 3 ) 技术运用成分 1 河北大学教育学硕十学位论文 太重。媒体技术的不断升级和功能的不断优化给网页设计者提供了大显身手的手段和方 法，于是j a v as c r i p t 、动态的h t m l 等技术充斥了整个画面，对技术的利用违背了教 学的初衷；( 4 ) 缺少个性化特征。现在网页设计人员很少依据网站自身特点和教学的 需要去进行个性化设计，导致很多网页设计的效果非常相似，就像从同一个流水线上下 来的产品，无论版面布局还是文字图像设计几乎都没什么区别。 以上这些设计效果中现存的问题会分散学生对教学内容的注意力；破坏激发学习动 机的内外条件；违背学习者的视知觉心理；影响学习者的身心发展等，最终使学生无法 达到预定的学习目标。为达到教学网页预期的教学目的，就必须着重于网页的视觉要素 设计，本研究以认知心理学和格式塔心理学为理论基础，针对现阶段教学网页视觉要素 设计效果中存在的一些弊端，依据注意理论、格式塔的视感知原则、信息加工理论、视 觉流程理论、版面布局常见形式、色彩的对比与调和理论等，对网页的版面布局、文字 的编排与设计、简短标题及提示语的设计、图形图像的处理、网页空间的设计以及网页 色彩设计等方面进行了研究。 1 2 课题研究目的及意义 统计显示，人们通过i n t e r n e t 获取信息，超过9 5 的比例是通过浏览各种类型的 网页来实现的。网络教学成为了一种新型的教学形式，运用格式塔心理学、认知心理 学等知识分析学生的认知规律和个性特征，并结合平面设计理论及相关知识来指导网页 视觉要素设计，从而提高学生的学习效率和学习效果是网络教学所追求的目标，如何有 效提高教学网页设计的科学性和艺术性，以及网页视觉要素设计如何符合学生的认知心 理，最终实现教学最优化是本文的研究目的。 随着网络教学应用范围的不断拓宽，学习者对页面的要求也越来越高，而现在的教 学网页设计大多数还是从直觉出发，离科学的网页设计还有相当长的一段距离，要想科 学的设计教学网络页面就必须遵照人类的认知规律，并且正确的将这些规律应用到网页 设计中来。本研究的成果将是认知心理学和格式塔心理学的综合运用及色彩对比与调和 理论的有机结合，采用将黄金分割原则运用在版面分割和色彩搭配中的策略，并在设计 中将多种常用版面有效结合，创造出适合不同内容的版面布局形式，为网络教学搭建一 个优良的视觉平台，以吸引学生的注意力，激发学生的学习兴致，让学习成为学习者一 。李卓网页设计中的认知心理学与艺术设计理念 d 吉林大学设计艺术学专业 2 第1 章前言 种全身心的享受，进而提高学习者的学习质量，这就是本研究的意义所在。 1 3 国内外相关研究的现状 通过大量研读近年来国内外在网页设计方面的相关文献，本文将对网页视觉要素设 计领域的研究现状进行如下分析： 1 3 1 国内研究现状分析 现阶段，国内对网页视觉要素设计的研究主要有以下几个方面：从认知心理学角度 进行设计研究；以格式塔心理学为基础进行设计研究；从审美的角度进行设计研究等。 从认知心理学角度进行研究，侧重的是从人的认知心理出发，对人的长时记忆、短 时记忆和瞬间记忆的理论及原理进行剖析；对人的有意注意和无意注意如何发生和转化 进行分析。基于认知心理学的设计涉及到文字内容、图形图像、色彩因素、动画因素、 页面布局、版面布局等视觉要素，通过对视觉要素进行点化、线化、面化处理，来实现 网页在视觉认知过程中，向大众传达发布者的各种意图和信息，给人以清晰悦目的视觉 印象的功能。在具体设计中还融入了主题要鲜明、条理要清晰、形式与内容要统一等指 导思想。文献资料有唐良瑞、蔡安妮、孙景鳌的从认知心理及人机界面谈网页设计 世 寸。 从格式塔心理学角度进行研究，主要运用格式塔心理学家提出的图底原则、简明原 则、接近原则、类似原则、闭合原则等视感知特性来指导网页视觉要素设计。通过对网 页设计中版面的构成及文字、图片、颜色等视觉构成成分进行分析，结合人们在浏览信 息时的视觉习惯，分析出网页视觉信息如何设计才能更有效、更为合理地表现与传达。 文献资料有周静和赵志靖的格式塔理论在网络教学页面设计中的应用等。 从审美角度进行设计研究，主要应用的原则是主题鲜明、内容和形式统一、注重整 体。从这个角度进行研究，一般把网页视觉要素设计的内容概括为视听元素和版式设计 两方面，版式设计在于文字和图片的编排设计及要素色彩的设计。网页视觉设计被定义 为是一种兼容了传统平面设计特征、心理学、视觉设计美学及哲学等多方面的新的表现 形式，网页不仅要满足人的使用需求，还要使人有一种愉悦的视觉环境和阅读享受。文 献资料有王海燕、张正凯、任建浩的从美学角度浅谈网页艺术设计等。 河北大学教育学硕士学位论文 1 。3 2 国外研究现状分析 国外对网页视觉要素设计的研究主要包括版面设计、色彩设计、文字设计和技术应 用等四方面。 在版面设计中要注重空间感和要素的排列，并且要在常规设计方法中有所改进和突 破。由于人一般都有从左往右，从上到下看事物的习惯，所以网页设计也习惯性的设计 成适合人观看的形式，但是研究表明习惯的不一定是正确有效的，要敢于应用创新元素 的构想，但也提出了设计的创造性要基于习惯性的观点；色彩设计的作用不应是肤浅的 装饰，而是要使浏览者更容易接受页面信息；文字的设计要活泼，适于人们的交流，使 人们容易重新记起被忘记的页面信息；技术的运用不应以美工设计为重点，要成为学习 者和内容的中介，技术的应用使学习更为方便。部分研究者有所改进的将印刷版面设计 应用在了网页设计中，为网页设计提出了指导性的建议。文献资料有a d a p t i n gp r i n t d e s i g ns k i l l sf o r t h ew e b ) ) 和a l la b o u tb r e a k i n gw i t hc o n v e n t i o n 等。 综合上述分析，各国专家学者都认识到了网页设计的重要性，也就自己对网页视觉 要素的关注点提出了相关想法及设计方案，并且阐述了网页设计所要依据的一些新思 想，这对指导未来的教学网页视觉要素设计作出了一定贡献。但他们都是从自己所重视 的不同侧面提出的网页视觉要素设计理论。然而，要想使网页设计达到最佳效果，就必 须从整体着手，全面考虑要素间的结合，用最贴切的理论指导对应要素的设计，将色彩 设计贯穿于版面设计、文字设计、图片设计、简短标题和提示语的设计中。所以，本论 文将以认知心理学和格式塔心理学为理论基础，并引入色彩设计理论，首先提出进行教 学网页视觉要素设计所要遵循的整体设计原则，然后再根据提出的原则对各视觉要素进 行具体设计。 4 第2 章教学网页视觉要素的整体设计原则 第2 章教学网页视觉要素的整体设计原则 教学网页的视觉要素整体设计就是要求设计人员从学生的角度出发，运用心理学和 色彩学等相关知识合理的安排所有教学页面元素，使学习者更好的、更有效的接受页面 上的教学信息。这不仅涉及到对学生注意力的控制与引导，对学生视知觉心理的适应， 还要考虑如何激发和培养学生的学习动机，怎样设计能够有利于学生身心健康。 2 1 引导与控制学生的注意力原则 从认知心理学角度而言，学生对教学网页的访问分为有意注意和无意注意两种。有 意注意指的是有意识的去注意某一事物，其注意行为是特定的；而无意注意则是指没有 专门的意识去注意某一事物，其注意行为是偶然形成的。有意注意在学习中的作用是能 够使学生有一定学习需求的情况下，在其自身控制力的作用下，将其关注点稳定地停留 在目标学习区；无意注意在学习中的作用是能够使学生处于一定的外部环境刺激下，在 其自身好奇心的驱动下，自然而然地将其关注点停留在其应该注意的知识内容上。因此， 在进行教学页面设计时，既要使学生的有意注意和无意注意相结合，又要利用好有意注 意和无意注意之间的转化。 2 1 1 有意注意与无意注意相结合 对有意浏览网页的学生来讲，重点在于整个网站信息的排布和提取，使其最终可以 “满载而归 ；对无意中浏览到网页的学生来讲，他是一种冒然闯入的偶得，重点在于 在尽量短的时间内引起学生的注意，激发其兴趣，达到吸引的目的。无意注意容易发生 在外部刺激较强的情况下，将其控制好可以对学习有很大帮助，如果控制不好就使学习 者分心，干扰学习；有意注意一般发生在学生有一定学习目的的情况下，是自觉的，比 较稳定的，但是很难长时间维持的，任何学习都会在进行的过程中走向枯燥。在教学网 页设计中，如果能够将学习者的无意注意与有意注意相结合，就会得到良好的教学效果。 在实际教学中，主要依靠学生的有意注意来接受知识，但是，在整个教学过程中，完全 地利用有意注意是不容易也是不现实的，学习者不可能长时间地保持对知识的有意注 意。而无意注意对学习的作用又缺少目的性，这就需要对学生的认知驱动力进行引导和 控制。要将有意注意和无意注意结合起来交替运用，使学生的大脑有张有弛，多种心理 河北大学教育学硕士学位论文 曼蔓曼曼曼曼! 曼! 寡! ! 蔓曼曼曼量蔓蔓曼曼曼曼! m l l m m _ 鼍曼兰曼曼曼曼曼曼曼曼寰! ! ! ! 皇! ! 曼! 曼曼曼皇曼曼 机能积极参与，尽量地将注意长时间维持在学习活动中。 2 1 2 有意注意与无意注意的转化 在教学网页设计中，设计者既要注重对学生无意注意的利用，还需要考虑对学生有 意注意的运用，设计出既能够控制学生的有意注意，还可以引导学生无意注意的页面效 果。所以，在设计的过程中，要考虑无意注意与有意注意的转化问题，使学习者对学习 内容保持尽量长久的注意。 一般的教学网页都有一个良好的开端，但是逐步会走向失败，就是因为对学生一开 始的有意注意没有很好的控制，到后来有意注意就演变到失效了，而无意注意又没有得 到很好的重视，使得学习者的最终学习效果不尽如人意。有意注意和无意注意在一定的 条件下是可以相互转化的，所以，设计教学网页的时候，既要重视有意注意，也不能忽 视无意注意。 在设计过程中，首先，要创设一个有利于学生学习的网络环境，尽量减少网页中干 扰学习者的各种因素，这就需要设计者精心的设计版面、文字、图片、动画等视觉要素， 让网页既充实又生动，但又不显得拥挤繁乱。对学生来说，既亲切又实用，牢牢抓住学 习者的注意力。对那些学习过程中容易分心的学生要加强视觉引导力，使其能够自觉得 控制自己的注意力。其次，要运用学生有意注意和无意注意的转化来进行设计。有的学 习者本来对其所学知识不感兴趣，只是为了学习需要，不得不集中注意去学习，这时的 注意就是有意注意。但是，后来由于喜欢上了某门课程的学习环境，这种学习就渐渐引 起他的兴趣，他的注意就自然而然地集中到这种学习上去了。这时，原来的有意注意也 就转变为无意注意了。因为它是由有意注意通过努力学习而转化来的，所以称为“有意 后注意”，这种无意注意是不同于一般的无意注意的。这种无意注意是在教学中对学生 最需要培养的一种注意。 无意注意和有意注意都与个体认识水平和知识经验密切相关，随着认识水平的提 高，知识经验的丰富，人们的兴趣和需要在不断变化，原来必须做出一定意志努力才能 发生的有意注意，后来可能会成为自觉的行动；同样，原来很有兴趣的事情，后来也可 能慢慢失去兴趣。所以，在网络教学中，一方面要求学生自觉集中自己的学习注意力； 另一方面，要控制学生的有意注意和引导其无意注意，逐步实现有意注意向无意注意的 转化。 6 第2 章教学网页视觉要素的整体设计原则 2 2 符合与适应学生的视知觉心理原则 格式塔心理学也称为完形心理学，它是在对知觉进行了一整套心理学研究后而产生 的理论。在视觉要素设计中，不论在理论方面，还是在实践方面，许多格式塔理论及其 研究成果都得到了广泛应用。这些理论研究表明人的审美观对整体与和谐具有一种基本 的要求。简单来说，视觉形象首先是作为统一的整体被认知的，而后才以部分的形式被 认知，也就是说，我们先看到一个构图的整体，然后才看到组成这整体的各个部分。依 据格式塔理论在人认知活动方面的研究结果，应注意以下两个方面： 2 2 1 教学信息认知中眼脑的共同作用 格式塔心理学的主要目标是探讨感知及其与学习的关系，它所研究的出发点就是 “形”。它认为任何“形”都是知觉进行了积极组织或建构的结果或功能，而不是客体 本身就有的，而且是与视知觉活动密不可分的哪。 经过多年研究，格式塔心理学家们指出，人们在观察事物时，眼睛和大脑是共同作 用的，并不是从一开始就区分一个形象的各单一组成部分，而是将各组成部分组合起来， 使其成为一个更容易理解的整体。而且，他们还认为，在一个格式塔即一个单一视场或 一个单一参照系内，眼睛只能接受少数几个不相干的整体单位。而这种能力的强弱还要 取决于这些整体的不同度和相似度，以及它们之间的位置关系。如果一个格式塔中包含 了太多的互不相关的元素，眼睛和大脑就会试图将它简化，把各个元素加以组合，使之 成为一个知觉上容易处理的整体。如果做不到这一点，整体形象就会继续呈现出无序或 混乱状态，从而无法被正确认知，简单地说，就是让人看不懂或无法接受。格式塔理论 明确指出，眼睛和大脑的互动是一个不断组织、简化、统一的过程，正是由于这一过程， 才会产生出易于理解的、协调的整体。在设计时，要注意人心理的整体属性，使眼睛和 大脑能够共同作用，将相关元素整合成一个统一的整体，便于学习者对学习内容的整体 认知。 2 2 2 教学信息处理中眼脑的共同作用 网络教学页面设计是将特定的视觉要素根据主题表达的需求在特定的页面上进行 的一种编辑和安排，其基础是视觉生理学和视觉心理学。通过对人视知觉的研究，格式 鲁道夫阿恩海姆著，滕守尧译视觉思维一审美直觉心理学 m 光明日报出版社，1 9 8 6 ：3 7 河北大学教育学硕士学位论文 塔心理学家提出了图底原则、简明原则、接近原则、类似原则、闭合原则等视感知特性， 将这些视感知规律引入页面设计，可以使页面符合学习者的视觉习惯，提高传情达意的 速度和准确度。 2 2 2 1 突出主体信息 格式塔心理学认为，当眼睛看到两件或多件物体时，会因种种的视觉数据，如线条、 边界、形状、明暗等，或是通过物体互相重叠遮挡，而辨别其中一部分为形象，一部分 为背景，形象和背景是明确区分的。所以在具有一定配置的视觉空间内，有些对象突现 出来形成主体，有些对象则退居到衬托的地位而成为背景。一般来说，主体与背景的区 分度越大，主体就越突出而成为我们视觉感知的对象。这一点在网上的页面中经常被忽 视，背景常常含有图案或颜色，使正文显得不突出而难以辨认。图底原则告诉我们，正 文或图形应当与背景有足够的反差，确保背景不影响主体信息的清晰度，以便学习者容 易辨别所需了解的信息。因此，无论在文字、色彩、图像、还是动画和视频方面都要坚 持图底原则。 2 2 2 2 简化教学信息 k o h l e r ( 1 9 4 7 ) 和k o f f k a ( 1 9 3 5 ) 提出，人们往往根据由过去的经验所形成的预期，无 意识地去简化他们感知的东西。当看到一幅复杂的图像时，人们会习惯性地把它简化为 自己能够理解的形式。因此，比较理想的做法，应当是在介绍一个图像时采用简化的形 式，然后逐渐增加其难度，这样学习者可以一步步地理解所要求的复杂程度。这种由简 至繁的过程有助于学习者避免误解所提供的图像。由简明原则我们得出：在网络教学 页面中使用图形、图像时，应避免包含分散学习者的注意力的视觉内容；图形、图像应 尽可能简明，易于领会，若其复杂程度超出学习者的经验和能力范围，学生就不能迅速 准确地感知教学信息。使用简化图形引入了新信息，将复杂的概念用非常简单的图形形 式来介绍，使学生对于基本概念可以有个总体的了解。目前，追求简约化、体现秩序感 已成为一种新的页面美学追求。 2 2 2 3 归类相关信息 接近原则是格式塔理论可用于网络教学页面设计的另一个方面。如果不同的文字或 图形组成部分位置靠近，学习者就比较容易看出它们是一起的。也就是说，在处理视像 。周静赵志靖格式塔理论在网络教学页面设计中的应用 j 中国电化教育2 0 0 5 ( 7 ) 美 b e v e r l ya b b e y 网络教育一一教学与认知发展的新视角 m 中国轻工业出版社，2 0 0 3 8 第2 章教学网页视觉要索的整体设计原则 资料时，视觉形成了“就近便是一组”的规律。根据这一原理，对于页面上的任何元素， 如果在功能或内容上是相同或相近的，就应在定程度上保持相对较小的空间距离，做 到“物以类聚 。比如，页面中用以解释图形或用以表明某一部分图形的文字就应当紧 挨其所指的图形或部分图形，否则学习者会误解文字所说明的内容。融会了格式塔理论 靠近原则的合理的页面设计图，在设计页面布局时，应把浏览与声音控制安排在屏幕的 - - n ，而文字讲解安排在另一侧，这样的布局将同类信息归类，便于学习者看出各部分 的功能。 2 2 2 4 统一类似信息 根据类似原则，人们倾向于把看起来相似的物体看成整体，相似的物体很容易被认 为是从属于一个系统，具有相似的功能。假如一个图形中的组成部分都属于同一风格， 这个图形就被视为一个整体。为了使学习者重点关注图形中的特定部分，对这一部分可 采用不同的颜色、动画、闪烁或其他区分方式。但是，如果一幅画面中区别过多，也会 使学习者难以注意需要获得的信息。因此，这些方法应该用于强调关键词语或图形的关 键部分，而不宜用于大片信息。 通过分析类似原则，我们可以得出另一个启示：在网络教学页面中，不仅要使一个 页面上的元素具有类似性，而且要使一系列页面都具有一定的类似性，即页面设计要遵 循一致性原则，建立一致的个性与风格，给学习者统一的感觉。就具体设计而言，页面 统一不仅是方便阅读的需要，也是产生视觉美感的需要，过多变化只能加重视觉负担。 当然，一致性并不是使所有的页面都相同，应该对课程内容进行分类，每一类具有一致 的版式，而类别之间又不是完全雷同，统一之中又有适当的变化。 2 2 2 5 完善残缺信息 闭合原则表明，人们会根据以往的经验来理解不完整的图形或文字，应当避免不完 整的图形，因为学习者会花时间去琢磨图形的意义，而不是从所提供的信息中学到东西。 比如，如果给出一连串的虚线，其基本形状是环行的话，人们往往会把点与点之间的空 白填满并且说这些点代表的是一个圆。人们倾向于根据过去的经验补充说明并由此解释 所感知的内容，他们会力图对感知的对象进行理解，对于不完整的信息便牵强附会地赋 予其意义，在教学中不完整的信息可能导致学习者对所提供信息的误解。因此在页面设 计时，应当使材料的设计有利于“意义理解”，减轻学习者阅读时的生理和心理压力。 9 河北大学教育学硕士学位论文 例如，在页面中显示的图像和文字信息应便于学习者注意信息本身，不应因为信息不完 整而让学习者花时间去琢磨其意义。 2 3 激发与培养学生的学习动机原则 学习动机是指个人的意图愿望、心理需求或企图达到目标的一种动因、内在力量。 学习动机的培养是利用一定的条件把客观现实的要求变为学习者内在的学习需要，使动 机得以产生或发展。而学习动机的激发，则是利用一定的条件即诱因把学习者的学习动 机激活并调动起来，成为实际上起推动作用的内部动力。网络学习中，同样需要激发和 培养学生的学习动机，这就要在一定的原则指导下对视觉要素进行设计。 2 3 1 运用外部条件激发学习动机的产生 学习动机的激发和培养都是在一定条件下实现的，其实，它们的条件也往往是大致 相同的。在一定意义上讲，也可以说是在同一条件下作用过程的两个方面。在教学网页 设计中，运用外部条件激发学习动机要注意以下几个方面： 2 3 1 1 激发学生的学习兴趣 学习兴趣是诱发学习动机的主要因素，学习动机的形成离不开学习兴趣的激发。因 此，在进行教学网页设计之前，首先要明确学习群体的年龄、兴趣爱好和知识层次等几 个主要方面，以便使网页设计能够在此基础上进行。只有符合学习者的认知需求，才可 以激发学习者的学习兴趣，推动学习活动有效进行。 2 3 1 2 引发学生的求知欲 求知欲是促进学生学习动机得以激发的重要心理因素。网页设计者应努力探求学生 心理，努力使页面要素的设计引发学习者的求知欲，如将新旧知识分别设计到两个不同 但相邻的教学板块中，并通过简短提示语提醒学生两部分之间的关系，使学生在学习完 前一部分知识后自然转向后续内容的学习，这样就可以持续引发学生对知识的渴求。 2 3 1 3 提高学生的学习热情 学习热情可以维持学习动机的发展，学生的学习热情来自于教学网页上具有吸引力 的要素。心理学研究表明，人的潜意识会对众多的视觉要素进行筛选，如果情感上与某 一要素产生共鸣，视线就会停留在这一对象上，这样就激起了学习热情。学习热情往往 l i n d al l o h r t h r e ep r i n c i p l e so f p e r c e p t i o nf o ri n s t r u c t i o n a li n t e r f a c ed e s i g n j 】e d u c a t i o n a l t e c h n o l o g y 2 0 0 0 ，4 0 ( 1 2 ) - 4 5 5 0 1 0 第2 章教学网页视觉要素的整体设计原则 来自于那些与周围元素有着强烈对比或者形式新颖的视觉要素。这些要素可以使学生得 到精神上的满足，保持积极的学习热情，进而产生新的学习动机。所以，提高学生的学 习热情对促进学习动机的发展起到了强力的推动作用。 2 3 1 4 引导学生的学习迁移 学生对知识产生新的学习需要是引发学习迁移的关键因素，迁移是心理的相互影 响，对于学习目的不明确、动力不足的学生，可以利用图片或动画注释、色彩着重提示 等来因势利导地将注意力迁移到学习上来。例如，箭头图片的指示作用、提示语的巧妙 设计等。因此，利用迁移也是培养和激发学生学习动机的一条有效途径。 一2 3 2 激发内驱力促使学习动机的产生 学习动机可分为内部学习动机和外部学习动机。认知心理学家奥苏贝尔指出：“一 般称为学校情境中的成就动机，至少应包括三方面的内驱动决定成分，即认知内驱力、 自我提高的内驱力、附属内驱力。” 认知内驱力是一种要求了解和理解的需求，要求掌握知识的需要，以及系统地阐述 问题并解决问题的需要，也称之为内部学习动机。由内部学习动机激起的学习活动的满 足在学习过程本身，而不在学习活动之外的奖赏或分数，可以说是“乐在其中”。例如： 在教学网页中，可能文字设计不尽人意，但是如果给文字配上清晰的图片说明，并且图 文混排的效果很好，就可以在很大程度上缓解文字的设计缺陷，实现文字的阐述功能， 仍然可以激发学生内驱力形成学习动机。所以，为了实现这种内驱力的作用，就要使学 生达到学习的满足感。 自我提高的内驱力和附属内驱力也可统称为外部学习动机。自我提高的内驱力是个 体因自己的胜任能力或工作能力而赢得相应地位的需要。附属内驱力是学生为了获得和 保持长辈( 如家长、教师等) 的赞许与认可而表现出来的把学习搞好的一种需求。在教 学网页设计过程中，利用图片的形象表现或者提示语的积极反馈，都可以激起学习者内 心的自我认可，从而产生长久的学习动机。 无论是内部学习动机，还是外部学习动机，都是促使网络学习取得预期效果的重要 的支持性条件。激发内驱力来促使学习动机的形成在网络教学中是经常用到的，它不但 可以激发学生的内在学习动机，还可以促使外部学习动机的形成，学生在网页视觉要素 组成的环境中形成一种自身学习的需要，从而产生内部学习动机，而在网络学习环境下 河北大学教育学硕十学位论文 曼! ! 皇蔓! ! ! 苎! 曼! 曼! ! i n eo 曼曼曼曼曼曼曼曼! ! ! 蔓曼! ! ! 曼! 曼曼! 曼曼曼曼量曼! ! 皇! ! ! 鼍舅皇! ! ! 曼皇! 曼! 皇 解决问题后可以得到形象的动画和图片形式的认可性回馈，这就形成了外部动机。所以， 要使学生在网络教学中产生学习动机，其视觉要素的设计就需要激发学生的内驱动力。 2 4 保障与益于学生的身心发展原则 一般来讲，网络学习环境对学生身心健康的影响要远大于传统教学环境给予其的影 响。尤其是教学网页的视觉要素设计，更是对学生的身心发展具有重要影响，所以，在 进行页面设计时，要时刻关注学生的身心特征和身心需求，在确保有利于学生身心健康 的思想指导下进行教学网页的视觉要素设计。 2 4 1 网页自身视觉导向的形成 视觉是有选择性的，观察者可以随时指导视觉，把自己将要细细审视的视域置于最 集中和最敏感的目光之下。只要目光偏离中心视轴( 这是敏感性最高的区域) 1 0 度， 其敏感性程度便迅速降低，有时降低到原来的五分之一。由于视网膜的感受会受到如此 之大的限定，就要求眼睛必须在一次观看中挑选出某些特殊的部位，使之突出孤立出来， 变成视域的中心或主要部位。这意味着，每一次注视只能对准一件事物，而且必须把这 一主要的对象同周围其他一切东西区别开来。而对于物体或对象来说，它之所以被选择 出来加以注视，大约有两个自身方面的原因，一是它与周围一切事物相比显得突出；二 是它合乎观看者的需要。 由于人的这一视觉特征，形成了学习者在观看网页信息时的视觉流程。因为人眼晶 体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两处以上的地 方。人们在阅读一种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再 看什么。视觉流程往往会体现出比较明显的方向感，如从上到下、从左到右、从动态到 静态、由明到暗、由粗线条到细线条，人往往喜欢阅读内容或形式连贯的信息，它无形 中形成一种脉络，似乎有一条线、一股气贯穿其中，使整个版面的运动趋势有一个主旋 律。心理学的研究表明，在一个平面上，上半部让人感觉轻松和自在，下半部则让人感 觉稳定和压抑。同样，平面的左半部让人感觉轻松和自在，右半部让人感觉稳定和压抑。 所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和左侧被称为“最 佳视域”，也就是最优选的地方。 视觉流程是一种感觉而非确切的数学公式，在网页设计中，灵活而合理地运用视觉 鲁道夫阿恩海姆著，滕守尧译视觉思维一审美直觉心理学 m 光明日报出版社，1 9 8 6 ：6 9 1 2 第2 章教学网页视觉要素的整体设计原则 流程和最佳视域，组织好自然流畅的视觉导向，直接影响到学习者的视力是否能健康发 展。在网页的版面设计中，视觉导向是一个要点，成功的视觉流程安排，能使网页上的 各种视觉要素在一定空间内合理分布，能使页面上各视觉要素的位置、间隙、大小保持 一定的节奏感和美感，避免在突出的位置产生刺激视力的因素，保证学习者的视力在网 络学习中不受伤害。 2 4 2 学生内在审美心理的平衡 由于学习者对网页设计的审美需求是不断深入的，所以，网页不光追求把各种东西 放上去能看就行，还要考虑如何使学习者心理能够健康发展，有效的接受教学信息。这 就要从审美角度着手，制作出整体性好的页面，使人浏览起来心情愉快，接收信息更加 容易。网页设计的审美需求是对平面视觉传达设计美学的一种继承和延伸。两者的表现 形式和目的有一定的相似性，将传统平面设计中美的形式规律和现代的网页设计的具体 问题结合起来，把一些平面设计中美的基本形式运用到网页中去，增加网页设计的美感 和大众的视觉审美需求。 在网页设计中经常提到的，如变化和统一、条理与反复、对比和调和、均等与平衡 等，对网页中文字、图形、色彩的设计都是十分有效的指导思想，使教学性质的网页给 学习者一种心理上的平衡，有助于学生心理的健康发展。在具体设计中要注意以下几点： 首先，内容与表现形式统一。形式表现必须服从内容要求，不要为了表现形式的花 哨或片面追求视觉感染力而偏离主题，更不要为了炫耀而画蛇添足的增加一些没有存在 理由的元素和采用一些冗余的技术，给学习者带来心理压力。设计的重点要考虑怎样把 大量信息以合理的、统一的方式来排布，使其整体感强又有变化，脉络清楚又富有清晰 的视觉效果等等，形成一种符合学习者审美心理的表现形式。 其次，突出关键要素。在众多网页构成要素中突出一个清晰的主体，它应尽可能地 成为阅读时视线流动的起点。网页上的各种构成要素之间的视觉流程，能自然而有序地 达到信息诉求的重点位置。如果没有这个主体要素，浏览者的视线将会无所适从，或者 导致视线流动偏离设计的初衷。网页设计中各构成要素在组合时，要注意其结构的轻重 大小、虚实、多少等对比因素，使学习者轻松的定位学习重点，缓解学习时的心理压力。 最后，色彩搭配合理。色彩作用于人的感官，刺激人的神经，进而在情绪和心理上 产生影响。由于情绪稳定与心情愉快是心理健康的重要标志，所以，在设计网页色彩的 1 3 河北大学教育学硕士学位论文 时候，要注意色彩的合理搭配。在网络教学过程中，色彩对学习者心理活动同样有着重 要影响，色彩直接影响到学习者的心理感受，对人的情绪影响也很大，所以，教学网页 的色彩搭配要符合学习者的审美心理需求。 1 4 第3 章教学网页中各视觉要素的设计 第3 章教学网页中各视觉要素的设计 教学网页中各视觉要素设计必须从已有的整体设计原则出发，基于学习者视知觉心 理和审美心理，在科学的设计原则指导下进行设计。网页各要素的设计包括教学网页的 版面结构及设计、文字的编排及设计、简短标题与提示语的设计、图形图像的处理、网 页空间的设计和网页色彩的设计等六个方面：( 1 ) 版面布局。版面布局设计直接影响到 设计者整体设计思想的展现，版面设计将教学页面上不同功能的教学模块组成了一个完 整的网络学习空间；( 2 ) 文字内容。文字内容是网页设计中必不可少的元素，在教学网 页中占据相当大的面积，网页文字承担着传达各种教育信息的重任；( 3 ) 简短标题和提 示语。简短标题和提示语的作用是浓缩教学内容或者精炼链接语言，让学习者在最短的 时间内了解版面上的全部内容；( 4 ) 图形图像。图形图像是多媒体技术中的重要组成部 分，网页中的图片和图标通称为图形图像，图像信息所提供的直观效果是文字和语言不 可比拟的；( 5 ) 空间因素。网页的空间因素主要表现为网页的深度感和层次感，它可以 为学习者提供轻松的视觉感受，缓解学习压力；( 6 ) 色彩因素。色彩因素是一种对学习 者有着强烈情绪影响和心理暗示的视觉要素，在教学网页视觉要素设计中，色彩设计无 处不在。 3 1 网页的版面布局设计 版面布局设计的目的就是给学生一个清晰的网上学习环境，使学生把学习当做一种 视觉享受，而网页的组织结构是非线性的，这就给网页的版面设计带来了一定的难度。 在设计版面布局和处理版面元素的过程中，可以借鉴一些已有的常用版式，使网页的版 面能够在科学性原则的指导下，结合常用规律，创新出更加适合学生学习的形式。 3 1 1 常用版式及特点分析 网页设计中常用的版式设计归结起来有五种，每种都有不同的适用范围和特点，下 面就五种版式的特点及适用性进行分析： 3 1 1 1 “t 型结构布局 这种结构布局指的是页面顶部为横条网站标志，下方的左面是主菜单，右面显示网 谢田静关于网页设计的艺术性研究 j 市场周刊研究版2 0 0 5 ( 7 ) ：8 6 1 5 河北大学教育学硕士学位论文 页内容。这种布局的优势在于页面结构清晰、导航栏明确、内容显示区域占主导部分， 是教学网站比较常用的布局方式，它适用于大篇幅内容的展示，适合简单内容的传授。 它的不足之处在于版面布局略显呆板，表现内容的时候形式较单一，没有明确的为不同 性质的教学内容划分专区，如图3i 。 。日自一 司 p m # 日m # $ ! m f l 2 # # 。1 8 7 2 # 目鞭2 # * 7 t # e m # t i 日口- & 十 w $ 十2 t 女目日t 女tm e $ e 目镕日 e 啦：m e h m 础藕t n 瞠盖。n ， i e * n i ”t ! 自* w ：t * * * 十4 增日t 一 女g 口。 = - i i ( * i ) 稚置# 妈“十2 e6 m 茸嚣女t 取 t 女# 。r 4 # t s 4 张“目” 目 u 雨i 日t 镕iii 、t 、霰等# m t $ 目i 黼女x 瞄憾自z t 。r 目锋对r t t $ n _ 图3l “t ”型结构布局图 3112 “口”型布局 这是一个形象的说法，指的是网页上下各有个标志性的横条，左面是主菜单右 面足友情链接之类的部分，中间是主要内容展示区。这种布局在网络教学中的优势是充 分利用了教学版面，可以存放大量的教学信息，还可以提供相关知识资源，它适用于自 学性质的网页设计。它的缺点就在于页面