（教育技术学专业论文）教育主题网站视觉语言整合优化的研究.pdfVIP

山东师范大学硕士学位论文 中文摘要 教育主题网站是针对特定的人群，围绕特定的学习主题、教学科研主题、学习素材主题完 成特定信息的搜索与提供、组织与发布，或者提供互动学习平台的教育网站。它的特殊性体现 在网站受众的特殊性、网站目标的特殊性、网站内容的特殊性以及网站实现功能的特殊性。 针对其特殊性，教育主题网页的设计应以传递教育信息为原则，不仅需要技术的支撑，又要 符合美学原理，达到技术与艺术的统一，形式与内容的统一，以起到有效视觉传达的作用。 近年来，随着我国网络教育理论和实践的发展，国内教育主题网站如雨后春笋般涌现， 但网站的建设质量良莠不齐。针对这一现象，本文首次将艺术设计领域的“视觉语言概念 应用到教育主题网站的设计中。视觉语言是由视觉基本元素和设计原则两部分构成的一套传 达意义的规范或符号系统。教育主题网站的设计应在遵循网站设计形式美原则下，对学习者 心理、认知习惯以及视觉美学等诸多方面进行研究探索的基础上，对网页中的文字、导航、 图形图像、色彩等视觉语言进行整合优化，使网页不仅能够有效地传递丰富的教学信息，同 时还能给学习者以美的艺术享受。对于设计的创作而言，这种整合优化的创意活动过程不仅 体现着对视觉语言的理解，同时也意味着视觉语言的升华。这项研究的意义在于通过视觉语 言的整合优化，把教育教学信息与设计有机地结合在版面上，努力挖掘教育主题网站作为教 育教学信息传播媒介的潜力，以期为提高教育教学信息传播的有效性提供一种思路。对于设 计的创作而言，这种创意活动过程不仅体现着对视觉语言的理解，同时也意味着视觉语言的 升华。 论文第一章首先介绍了教育主题网站和视觉语言的相关概念，接着针对我国教育主题网 站视觉语言设计存在的问题进行分析，最后介绍了国内外研究的历史演变与发展现状。 论文第二章介绍了教育主题网站视觉语言整合优化的理论支点和设计原则。在设觉设计 理论的指导下，对版面设计的形式美原则统一变化、对称均衡、对比调和的理解作了讨论， 为整合视觉语言奠定了整体的结构法则。 论文第三章分别对构成教育主题网站视觉语言的各视觉元素进行分析研究，并提出相关 设计原则，以对视觉元素有透彻了解，为视觉语言的整合优化奠定基础。 论文第四章按照设计的思路从整体规划、局部设计和细节规范方面深入研究介绍视觉语 言的整合优化，在理解视觉语言的基础上，实现视觉语言整合的升华。 论文第五章以摄影基础教育主题网站为例，系统地分析了其视觉语言整合优化的成 功和不足之处，将教育主题网站视觉语言整合优化由理论上升到实践的层次。 一 生奎堕翌奎堂婴主堂垡丝苎 _ _ _ _ _ _ _ _ _ _ - - _ - _ - _ _ _ l - - - - _ l _ _ _ _ _ _ _ _ _ _ _ _ l l - _ _ _ _ _ _ _ - _ _ _ - _ - _ _ _ _ _ _ _ _ _ _ _ _ _ - _ - _ - _ - _ _ _ i _ _ _ _ _ _ 一一一一一一一 论文第六章总结了此次研究及论文撰写过程中存在的不足和在今后的研究过程中应该注 意的问题，并提出了后续研究的主要内容。 【关键词】教育主题网站；视觉语言；格式塔；视觉流程 【分类号】g 4 3 4 l i 山东师范大学硕士学位论文 a b s t r a c t e d u c a t i o nt h e m ew e b s i t ei sf ll 【i n do fe d u c a t i o nw e b s i t ef o rs p e c i f i cg r o u p so f p e o p l e w h i c hi s f o c u s i n go nas p e c i f i cs t u d ys u b je c t ，t e a c h i n ga n dr e s e a r c ht o p i c ，s t u d ym a t e r i a l t oa c h i e v et h e s e a r c ha n dt h ep r o v i s i o n ，t h eo r g a n i z a t i o na n dt h ep u b l i c a t i o no fs p e c i f i ci n f o r m a t i o n ，o rt op r o v i d e a ni n t e r a c t i v e l e a r n i n gp l a t f o r m i t ss p e c i f i c i t yi s a b o u tw e b s i t e sa u d i e n c e ，w e b s i t e st a r g e t ， w e b s i t e sc o n t e n ta n dw e b s i t e sa c h i e v ef u n c t i o n f o ri t ss p e c i f i c i t y , e d u c a t i o nt h e m ew e b s i t e s h o u l db ed e s i g n e dt od e l i v e re d u c a t i o n a li n f o r m a t i o n t h a tr e q u i r e sn o to n l yt e c h n i c a ls u p p o r tb u t a l s oi nl i n ew i t ht h ea e s t h e t i cp r i n c i p l e s i nt h a tw a yi tc a l la c h i e v et h eu n i t yo ft e c h n o l o g ya n dt h e a r t sa n dt h eu n i t yo ff o r ma n dc o n t e n ts oa st op l a yar o l ei ne f f e c t i v ev i s u a lc o m m u n i c a t i o n i nr e c e n ty e a r s ，w i t ht h ed e v e l o p m e n to fo u re d u c a t i o n a lt h e o r ya n dp r a c t i c e ，o u re d u c a t i o n t h e m ew e b s i t es p r u n gu pi n c l u d i n gt h eg o o da n dt h eb a dq u a l i t y i nr e s p o n s et ot h i ss i t u a t i o n ，t h i s p a p e r a p p l yt h e ”v i s u a ll a n g u a g e ”c o n c e p ti nt h ef i e l do fa r ta n dd e s i g nt ot h ed e s i g no fe d u c a t i o n t h e m ew e b s i t e v i s u a ll a n g u a g ei sas e to fn o r m so rs y m b o ls y s t e mt oc o n v e ym e a n i n g i ti s c o m p o s e do ft h eb a s i ce l e m e n t so fv i s i o na n dd e s i g np r i n c i p l e s t h ed e s i g no fe d u c a t i o nt h e m e w e b s i t ei st oo p t i m i z ea n di n t e g r a t ev i s u a ll a n g u a g ei nt h ew e b p a g e ，s u c ha sc h a r a c t e r , n a v i g a t i o n ， g r a p h i ci m a g e s ，c o l o ra n ds oo n t h ed e s i g ni si nc o m p l y i n gw i t ht h ep r i n c i p l e so fw e bd e s i g n f o r m a la n da tt h eb a s i so fr e s e a r c h i n gl e a r n e r sp s y c h o l o g i c a l ，c o g n i t i v eh a b i t s ，a e s t h e t i cv i s i o na n d m a n yo t h e ra s p e c t s s ot h a ti tc a n n o tn o l yd e l i v e raw e a l t ho ft e a c h i n gi n f o r m a t i o ne f f e c t i v e l yb u t a l s og i v el e a r n e r st h ee n j o y m e n to fa r t sb e a u t y f o rt h ec r e a t i v ed e s i g n ，t h ec r e a t i v ec o u r s er e f l e c t n o to n l yt h eu n d e r s t a n d i n go fv i s u a ll a n g u a g eb u ta l s ot h es u b l i m a t i o no fv i s u a ll a n g u a g e t h e s i g n i f i c a n c eo ft h es t u d yi st oc o m b i n ee d u c a t i o n a li n f o r m a t i o nw i t hd e s i g na tt h el a y o u ta n dt o m i n ep o t e n t i a lo fe d u c a t i o nt h e m ew e b s i t ea se d u c a t i o ni n f o r m a t i o nc o m m u n i c a t i o n a lm e d i a t h r o u g ho p t i m i z ea n di n t e g r a t i o no fv i s u a ll a n g u a g e ，a t ) a st op r o v i d et h ei d e a so fi m p r o v i n gt h e e f f e c t i v e n e s so fe d u c a t i o ni n f o r m a t i o n sd i s s e m i n a t i o n t h ef i r s tc h a p t e ri n c l u d e st h ec o n c e p t so fe d u c a t i o nt h e m ew e b s i t ea n dt h ev i s u a ll a n g u a g e ，t h e a n a l y s i s o ft h ep r o b l e m so fo u re d u c a t i o nt h e m ew e b s i t e sv i s u a ll a n g u a g ed e s i g n ，h i s t o r i c a l e v o l u t i o na n dd e v e l o p m e n ts t a t u so ft h es t u d ya th o m ea n da b r o a d t h es e c o n dc h a p t e ri n t r o d u c et h et h e o r yf u l c r u ma n dd e s i g np r i n c i p l e so fe d u c a t i o nt h e m e w e b s i t ev i s u a ll a n g u a g e si n t e g r a t i o na n do p t i m i z e u n d e rt h eg u i d a n c eo fd e s i g nt h e o r y , i no r d e rt o e s t a b l i s ht h eo v e r a l ls t r u c t u r eo ft h el a wf o rt h ev i s u a ll a n g u a g e si n t e g r a t i o na n do p t i m i z e ，t h e 1 1 1 坐变堕翌奎兰婴主兰些丝兰 _ - _ _ _ - _ _ _ - - _ _ _ _ _ - - _ - - _ _ _ l _ _ - _ _ - _ l _ - - _ _ _ - _ - _ _ - - - - - _ _ _ _ _ - _ _ _ _ - _ - _ - _ _ _ _ - - _ _ _ _ - _ _ _ _ _ - - _ _ _ _ _ _ _ _ _ _ _ - - 一一一一 p a p e rd i s c u s s e st h ec o m p r e h e n s i o no fl a y o u td e s i g n sf o r m a lp r i n c i p l e si n c l u d i n gu n i t ya n dc h a n g e ， s y m m e t r i c a la n db a l a n c e ，c o n t r a s ta n dr e c o n c i l e t h et h i r dc h a p t e rs t u d ys e p a r a t e l yt h ev i s u a le l e m e n t sw h i c hc o m p r i s ee d u c a t i o nt h e m e w e b s i t e sv i s u a ll a n g u a g e t h ep a p e ra l s o p r o p o s e sr e l e v a n td e s i g np r i n c i p l e s t ot h o r o u g h l y u n d e r s t a n dt h ev i s u a le l e m e n t sa n dt ol a yt h ef o u n d a t i o nf o rv i s u a ll a n g u a g e si n t e g r a t i o na n d o p t i m i z e t h ef o u r t hc h a p t e rd e e p l yi n t r o d u c ev i s u a ll a n g u a g e si n t e g r a t i o na n do p t i m i z ef r o mo v e r a l l p l a n n i n g ，l o c a ld e s i g na n dd e t a i l ss p e c i f i c a t i o na c c o r d i n gt od e s i g ni d e a s t h a tw i l lr e a l i z e t h e s u b l i m a t i o no fv i s u a ll a n g u a g e si n t e g r a t i o na n do p t i m i z eo nt h eb a s eo fu n d e r s t a n d i n go fv i s u a l l a n g u a g e t h ef i f t hc h a p t e rs y s t e m a t i c l ya n a l y z et h es u c c e s s f u la n di n a d e q u a c i e so fv i s u a ll a n g u a g e s i n t e g r a t i o na n do p t i m i z ei nae d u c a t i o nt h e m ew e b s i t en a m e d t h ea r to fp h o t o g r a p h y , w h i c hw i l l b r i n gv i s u a ll a n g u a g e si n t e g r a t i o na n do p t i m i z ef r o mt h e o r yt op r a c t i c e t h es i x t hc h a p t e rs u m su pt h ed e f e c t si nt h ep r o c e s si nt h i st h e s i ss t u d y i n g ，a n dh a sl o o k e di n t o t h ed i s t a n c et ot h ef o l l o w u ps t u d y i n ga n dd e v e l o p i n gd i r e c t i o na b o u tt h ec u l t i v a t i o no f v i s u a l l a n g u a g e si n t e g r a t i o na n do p t i m i z e k e yw o r d s e d u c a t i o n a lt h e m ew e b s i t e ；v i s u a ll a n g u a g e ；g e s t a l t ；v i s u a lp r o c e s s 【c l a s s i n c a t i o nn u m b e r g 4 3 4 i v 独创声明 本人声明所呈交的学位论文是本人在导师指导下进行的研究工作及取得的研究成果。 据我所知，除了文中特别加以标注和致谢的地方外，论文中不包含其他人已经发表或撰写 过的研究成果，也不包含为获得( 注：如没有其他需要特别声明的，本 栏可空) 或其他教育机构的学位或证书使用过的材料。与我一同工作的同志对本研究所做 的任何贡献均已在论文中作了明确的说明并表示谢意。 学位论文作者签名：羞鲲暑 导师签字印杠巧 学位论文版权使用授权书 本学位论文作者完全了解堂拉有关保留、使用学位论文的规定，有权保留并向国 家有关部门或机构送交论文的复印件和磁盘，允许论文被查阅和借阅。本人授权堂撞可 以将学位论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等 复制手段保存、汇编学位论文。( 保密的学位论文在解密后适用本授权书) 学位论文作者签名：善嘞荡 导师签字： 即插 签字日期：2 1 年争月) 日签字日期：棚年妒月加日 i 山东师范大学硕士学位论文 第一章绪论 1 1 教育主题网站的概念界定 教育主题网站是指那些针对特定的人群，围绕特定的学习主题、教学科研主题、学习 素材类事物主题，完成特定信息的搜索和提供、组织与发布，或者提供互动学习平台的教 育网站。教育主题网站是网络信息资源的重要组成部分，是远程教学、网上科研、个性化 学习的有效支持平台，是支持新型学习方式的虚拟学习空间。3 按照其服务对象、基本内 容和实现的功能可将其分为3 类：互动学习类教育主题网站、主题咨询类教育主题网站和 教育科研类教育主题网站。 1 2 教育主题网站视觉语言的概念界定 “视觉语言”这一名词源于英文“l a n g u a g e o fv i s i o n ”，它是由视觉基本元素和设 计原则两部分构成的一套传达意义的规范或符号系统。乜3 其中，基本元素包括：线条、形 状、明暗、色彩、质感、空间等等，它们是构成一件作品的基础，相当于建一栋房屋所需 要的砖、瓦、水泥、钢材。而设计原则是艺术家用来组织和运用基本元素传情达意的原则 和方法。如果把视觉基本元素比喻为文章的单词，那么视觉语言就相当于按照一定语法和 结构而组成的句子，其中的语法和结构即相当于设计原则。视觉元素作为传达各种信息的 符号，构成了现代设计中的视觉语言。每一个设计作品的形成，都以它特有的视觉符号组 合向人们传递着各种信息。3 视觉语言一词真正广泛见诸于设计类刊物及词典，还是近几十年艺术与科技飞速发展 时代的事，它一般被人界定于形象思维的范畴，限定在艺术造型中的审美领域。如要我们 给视觉语言做一个浅易的解释，那就是视觉语言其实源于科学的造型理论，在造型艺 术领域里，这种可以传达情感、理念和信息的形象以及图形、色彩等因素所构成的视觉样 式，被称为视觉语言。 对教育主题网站设计来说，视觉语言的使用是否确切、是否得当，很大程度上决定了 教育主题信息是否能够得到准确有效地传播。网页设计的创意活动就是将所要表达的观 念、思想或某种意图转换为某种视觉样式，使之成为一种学习者可以看得懂的视觉形象， 使教育主题信息能够得到有效传达。因此对于网页设计的创作而言，其创意活动过程不仅 1 山东师范大学硕士学位论文 体现着对视觉语言的理解，同时也意味着视觉语言的升华。 1 3 我国教育主题网站视觉语言设计存在的问题 教育主题网站的页面设计是对学习者心理、视觉美学、认知习惯等诸多方面的研究探 索，依照设计目的和要求自觉地对教育主题网站视觉语言的构成元素进行艺术规划的创造 性思维活动，既照顾到学习者审美心理的需要，也有助于实现学习的目标。一个视觉语言 规划好的教育主题网站才能真正成为优秀的网络信息组成部分、教师教学的得力助手、新 型学习方式的有力支持工具、学习者自主学习的有效支持环境，使教育主题网站能够名副 其实的担当起重任，为提高我国教师与学生的信息素养，促进教育信息化做出应有的贡献。 可是目前我国还没有形成一整套关于教育主题网站的视觉语言设计的指导思想和理 论，还处在摸索中前进的发展阶段。大部分教育主题网站的设计都是盲目的借鉴普通网站 的设计原则，尽管内容上是教育信息，可是在设计上各种视觉语言只是的简单的组织和罗 列，没有鲜明的教育功能，与教育学习理论的要求相悖。造成了设计的教学页面要么臃肿 华丽而教育主题不突出，要么死板贫乏而缺乏教学个性。下面是本文对目前我国教育主题 网站视觉语言设计存在问题的几点总结： 1 华而不实 有些教育主题网站的界面做得很漂亮，但是设计者没有考虑到教育主题网站教育的本 质，太过花哨将会分散学习者的注意力，这样的教育主题网站缺乏其真正的内涵和艺术价 值。另外，随着多媒体技术的发展，动画、图形、声音也实现了在教育主题网站的应用， 于是，这样的教育主题网站经常出现打开页面，映入学习者眼帘的是到处乱动的动画 及视频，以及干扰视听的背景音乐。这些教育主题网站运用了大量的技术，但是忽视了技 术要为内容服务的宗旨。另外，过多的多媒体手段对带宽及硬件提出了更高的要求，不仅 降低了教学信息传递的速度，而且阻碍了教育主题网站的普及。 2 视觉语言过于死板 教育主题网站的设计是设计者对学习者心理、视觉美学、认知习惯等诸多方面的研究 探索，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动。而 据调查，我国教育主题网站视觉语言大都太过于死板，网页界面单一以静态图像为主，缺 乏动态效果。这样的网站相当于将课本知识简单的搬家，不仅不会激发学生的学习兴趣， 甚至会让学习者失去信心。所以教育主题网站的设计切忌过于花哨，更切忌过于死板，这 两个极端均不可取。 2 山东师范大学硕士学位论文 3 内容的简单堆砌 教育主题网站是传递教学信息的教育网站，网站中的各项内容组合都应该为提高教学 信息传递有效性来考虑。而有些教育主题网站并没有考虑到这一点，整个页面只是简单的 多功能的堆砌：主题重点不突出、布局混乱、逻辑不清晰、超链接出现错误等等。这些问 题的存在大大抹杀了学习者的学习动机，是教育主题网站的大忌。 4 形式与内容不符 黑格尔曾经讲过“内容和完全适合内容的形式达到独立完整的统一，因而形成一种自 由的整体，这就是艺术的中心。 h 3 形式和内容是统一事物的两个方面，对于任何一个具体 的事物来说，形式是事物存在和表现的方式，内容则是事物存在的基础。在内容和形式的 关系中，内容决定形式，形式依赖于内容。教育主题网站的设计也应符合这个哲学观点。 而有些教育主题网站却忽视了这一点，形式与内容严重脱节，明明是面向儿童的网站，整 个页面却死气沉沉没有生气；明明是关于数学逻辑推理的网站，整个页面却五彩缤纷华丽 不1 e 。 1 4 国内外研究现状及本论文的创新之处 1 4 1 国外研究现状 “视觉文化”作为概念，最早是著名匈牙利美学家贝拉巴拉兹在1 9 1 3 年提出来的。 那些以图像符号为构成元素、以视知觉可以感知的样式为外在表现形态的文化统称为“视 觉文化”，而视觉语言正是视觉文化的外在表现形态，起到传达和发扬视觉文化的作用。 视觉语言随着视觉文化被提出，最初仅仅停留在影视摄影、新闻报纸、绘画、广告、 建筑、游戏等层面上，很少涉及到网页艺术，更少涉及到教育主题网页这个有着特殊功能 和受众群体的设计中。二十世纪七十年代出现有关教学文本设计的书籍，随着计算机技术 的发展，二十世纪七十年代至今有关人机界面设计( 包括屏幕的设计) 的书籍逐渐增多。在 有关审美的研究中，穆尔特和赛诺( m u l l e ta n ds a n o ) 的视觉界面设计：以技术为指向 的交流( d e s i g n i n gv i s u a li n t e r f a c e s ：c o m m u n i c a t i o no r i e n t e dt e c h n i q u e s ) 提出优 美和简单( 通过整体、精细和适合来实现) 、比例和对比( 通过清晰、和谐、活动、控制来 实现) 等原则。尽管这些和教育主题网站视觉语言的设计相互渗透并联系着，但从国外这 些研究总体特点来看，这些研究只是分别对文字、图形图象、色彩、版式、导航、多媒体 等这些视觉元素的设计原则进行研究，并未涉及网页视觉语言的整体设计，缺乏系统成果。 3 山东师范大学硕士学位论文 1 4 2 国内研究现状 通过“中国优秀博硕士学位论文全文数据库调查，从1 9 9 9 年到2 0 0 4 年之间，中国 大陆以“视觉语言整合”或相关主题作为研究内容的硕士学位论文只有一篇，是四川大学 文学与新闻学院博士生陈雪奇所写的博士论文，整合版面视觉语言研究，这篇文章主要 论述了通过视觉语言的整合，把新闻内容与设计有机地结合在报纸版面上，为我国当前报 纸版面设计的创新研究提供条思路。若以“视觉语言 为主题来搜索，得到许多相关的 文章，但这些文章涉及的方面主要是在广告、服装、建筑业、电视、绘画等等方面，还没 有将“视觉语言的概念搬到教育主题网页的设计这方面来。 就目前已有的研究成果看，从研究数量看，总量还比较少，说明在教育主题网页中整 合视觉语言在其研究力度上还有待大幅度提高，期望能受到更多的重视和研究。从研究内 容看，对视觉语言的研究还仅仅停留在艺术设计领域，但没有就教育主题网页设计方面提 出系列的解决问题的策略。而与本论文选题相关的“教育主题网页视觉语言整合优化”的 文献则几乎是空白，正因如此让我们看到本课题所潜在的创新价值和研究价值，但同时也 致使本选题将富有相当大的挑战性。 1 4 3 本论文的创新之处 1 本文首次将艺术设计领域的“视觉语言概念应用到教育主题网站的设计中，系统 地阐述了教育主题网站的各视觉语言之间的功能与设计原则，并进一步从整体规划、局部 设计以及细节规范对视觉语言的整合优化进行了探究。 2 本文以视觉理论、教育理论、网页设计为理论奠基，将教育理论与艺术设计理论相 融合并运用于教育主题网页的设计的实践中，理论指导性强。 3 本文各章节的内容均穿插渗透着具体的教育主题网页的实例分析，有很强的参照 性、实用性和借鉴性。最后一章对本人参与的山东师范大学教育技术系省级精品课程摄 影基础进行深层次的剖析，指出其页面视觉语言整合优化的成功与失败，并对其将来的 建设和完善提出自己的观点和建议。 4 山东师范大学硕士学位论文 第二章教育主题网站视觉语言整合优化的理论支点与设计原则 2 1 教育主题网站视觉语言整合优化的理论支点 教育主题网站各种视觉语言的整合优化也就是实现各种视觉语言从简单组合走向视 觉设计，使整个网站更好的传递教育主题信息，更好的为学习者服务。而从简单组合到视 觉设计的飞跃，需要一定的理论做支点。本文主要运用视觉心理学和格式塔理论作为教育 主题网站视觉语言整合优化所依照的理论支持。 2 1 1 视觉心理学 1 最佳视域 受生理结构限制，人眼只能产生一个焦点，而视觉最有效的感知部位，在视网膜上只 占很小的比例，这决定了视觉在一定时间内只能容纳少量的视觉信息。而最先吸引学习者 注意的区域，就称为最佳视域。 根据视觉心理学的研究，页面中不同的视域，注目程度不同，给人心理上的感觉也不 同。一般而言，上部给人轻快、漂浮、积极、高昂之感；下部给人压抑、沉重、限制、稳 定的印象；左侧给人轻便、自由、舒展，富于活力之感；右侧给人局促却庄重。所以在平 面中，上方的视觉影响力强于下方，左侧强于右侧。因此平面的上部和中上部被称为最佳 视域。在教育主题网站的设计中，网页中的重要信息，如网站的l o g o 、网站的主要栏目、 每天更新的内容等应放置在这个位置。 2 视觉虚空间 根据视觉物理美学原理，每个实空间占据定位置后，一定要有一定量的虚空间来调 节视节度，使其张力、动势得以释放与延伸。实际上，视觉心理学中的虚空间就是页面设 计领域的“留白。嵋3 留白不是空间的挥霍和浪费而是视觉设计的需要和有机组成部分， 其重要性不亚于色彩、图像和文字，应作为一种页面元素来加以运用。当然，空白区域不 一定是白色，可以选择与页面整体色调相吻合的相近颜色。留白甚至可以引导视觉流程， 周围留有大片空白的视觉语言由于孤单而显得独特，视觉冲击力很容易得以强化而成为视 觉中心，成为学习者的视觉强势。 视觉虚空间的种类有- 5 山东师范大学硕士学位论文 ( 1 ) 页边虚空间：页面内容与浏览器边框的留白处理，不仅符合人类的视觉习惯， 而且可以避免使整个页面显得局促，给视觉留下宝贵的休息时间。 ( 2 ) 文字虚空间：我们平常所设置的文字的字间距、行间距及段落间距等也是视觉 虚空间的应用的一方面，文字在教育主题网站承担传递教育教学信息的作用，适当的留白 间距可以有效的缓解视疲劳，提高文字信息的传达效率。 ( 3 ) 周边虚空间：为突出某图形图像或某段文字等视觉语言而在其周围特意留下的 大片空间，使其更加醒目而形成视觉强势，起烘托和突出主题的作用。 3 视觉流程 人们在观察物体时，视线并不是沿着直线平稳地运动，而是有一系列的跳动和注视。 根据心理学专家的研究，不同的形状会引起不同的视觉流程。垂直线会引导视线做上下的 视觉流动；水平线会引导视线向左右的视觉流动；斜线比垂直线、水平线有更强的视觉诉 求力；矩形的视线流动是向四方发射的：圆形的视线流动是辐射状的；三角形则随着顶角 之方向使视线产生流动；各种图形从大到小渐层排列时，视线会强烈地按照排列方向流动。 嵋1 由于人眼晶体结构的生理构造，只能产生一个焦点，而不能同时把视线停留在两处或两 处以上的地方。因此人们在阅读时，视觉总有一种自然的流动习惯，先看什么，后看什么， 再看什么，这就是所谓的视觉流程，是页面内容的一种视觉传达过程，是以人的生理和心 理习惯的认知模式来进行的，是将各种构成要素在视觉运动的规定下进行空间定位，即从 注意力的捕捉起，通过视觉流向的诱导，直至最后的印象留存。一般来说，我们的视觉习 惯于从左向右看从上向下看，所以一个空白的网页给我们带来的自然视觉流程是从左上方 到右下方的一个弧形曲线。在这个弧形曲线上，视觉优势从上到下递减。 视觉流程是一种感觉而没有定式可言，我们可以人为的创造视觉兴奋点而改变视觉流 程的流向。当然视觉流程的创造要符合学习者认识过程的心理和思维发展的逻辑顺序，网 页上的各种视觉语言在一定的空间内按照主次合理分布，各视觉语言的位置、间隙、大小 保持一定的节奏感和美感，从而引导学习者的视线流动，做到视觉流程的自然、合理、畅 快。视觉兴奋点可以通过视觉语言色彩的对比、大小的对比以及视觉虚空间来创造。 。图2 1 是西南政法大学民法学教育主题网站的课程简介页面，页面的上方是该网站本 身所固有的最佳视域，网站所属学校及l o g o 、网站标题、网站导航按照视觉心理学原理均 放在这个区域。而最有视觉冲击力的要属页面中间部位的图片了，它就是页面的视觉兴奋 点，其四周大面积的视觉虚空间使该图片得以强调，突出了该页面的主要内容。网页设计 者这样安排将改变视觉流程的起点，学习者进入该页面首先被那张孤立的图片所吸引，而 6 m 东m m 学硕学位论土 不再是网页的中上部最佳视域。 。譬。厂：瑚。1 y ： 攀誓r 一0 o j l a 幽2i 民注学教育主题网站( h t t p ：c o u r s es w u me d uc n 7 2 1 2 格式塔理论 格式塔心理学是西方现代心理学的主要流派之一，1 9 1 2 年在德国诞生，后来在美国得 到进一一步发展，其主要代表人物是韦太默、柯勒和考走卡，它主张心理学研究现象的经验。 在观察现象的经验时要保持现象的本来面貌不能将它分析为感觉元素并认为现象的经验 是整体的或完形的( 格式塔) ，所以称格式塔心理学。格式塔心理学所研究的出发点是“形”， “格式塔”是德文字g e s t a t 的译音，中文一般将其译为“完形”，它既不是一般人所说 的外物的形状，也不是一般艺术理论中笼统指的形式，它是经由知觉活动组织成的经验中 的整体是视知觉经验中的一种组织或结构。格式塔心理学认为，在一个“完形”中。 整体的结构取决于各个部分的结构，而部分的结构又依赖于整体的结构。相互之间的关系 可进一步地描述为，知觉到的东西要大于眼睛见到的东西任何一种经验的现象其中的每 一成分都牵连到其他成分每一成分之所以有其特性，是因为它与其他部分具有关系。由 此构成的整体，并不决定于其个别的元素，而局部过程却取决于整体的内在特性。完整的 现象具有它本身的完整特性，它既不能分解为简单的元素，它的特性又不包台于元素之内。 。9 山东师范大学硕士学位论文 格式塔有两个最基本的特征。第一个特征是，凡是格式塔，虽说都是由各种要素或成 分组成，但它决不等于构成它的所有成分的和。一个格式塔是一个完全独立于这些组成它 的成分的全新的整体。这里的新，是相对于原来的构成成分而言。也就是说，它是从原来 的构成成分中“突现”出来的，因而它的特征和性质都是在原来构成成分中找不到的。比 如说，一个三角形是从三条线的特定关系中“突现 出来的，但它决不是三条交叉线条的 和。同样的，一个圆也不是相互邻近的无数个点的集合，一个曲调也不是某些乐音的连续 相加。格式塔的第二个基本特征是“变调性”。也就是说，一个格式塔，即使它的各个构 成成分，如它们的方向、大小、位置等均改变，格式塔仍然存在( 或不变) 。举例说，一个 长方形，不管将它的线条画出还是用色彩画出，不管是红的画出还是用黑的画出，不管它 变小还是变大，不管用石块还是用木条筑成，它仍然是一个长方形。因此，所谓形，就是 经验中的一种组织或者结构，而且与人的视知觉活动是密不可分的。这种组织是伴随人的 知觉活动进行的，不能把它理解为一种静态的或者是不变的印象，决不能把它看成是各部 分简单相加的结构，或者说是先有各部分的感觉，然后把这些感觉加在一起，凑成一个总 的印象。“形”是一种直接的、更是同时性组织活动的产物。格式塔的含义比“形”的宽 泛，前者不但包括视觉意象之外的一切被视为整体的东西，还包括构成一个整体的独立成 分。所以，可以说，不管是一种意象、一个句子、一首曲调，甚至一种颜色都可以被视为 格式塔。哺3 格式塔心理学家们认为，人们自然而然地观察到的经验，都带有格式塔的特点，它们 均属于心物场和同型论。他们把心物场和同型论作为格式塔心理学的总纲，由此派生出若 干亚原则，而为这些亚原则被他们称为组织律。在他们看来每一个人都是依照组织律经验 到有意义的知觉场的。这些良好的组织原则体现在教育主题网站的视觉效果设计时，包括 “整体大于部分之和 、临近律、相似律、封闭律、简明律、图形一背景反差和对称平衡 等规律。 1 “整体大于部分之和 与教育主题网站视觉效果设计 整体大于部分之和，正如格式塔的第一个特征所说：凡是格式塔，虽说都是由各种要 素或成分组成，但它决不等于构成它的所有成分的和。一个格式塔是一个完全独立于这些 组成它的成分的全新的整体。这里的新，是相对于原来的构成成分而言，是对原来构成成 分的一种超越，产生一种全新、更整体的印象。 在教育主题网站视觉设计中，为使学习者在浏览网页时对整个网站版面有个整体性的 认识，我们要调动版面上所有的视觉语言去营造一个视觉整体效果。这就要求整个教育主 8 山东师范大学硕士学位论文 题网站的风格要统一，各个分页在突出个性的同时也要保持风格一致，达到多样统一的视 觉效果。特别是各个分页的设计，文字、图形图像、色彩、导航等各种视觉语言的设计都 要统筹规划，使局部服从整体；各分页之间以及分页与主页之间的视觉语言要能够形成恰 当而优美的联系，而不是孤立的。学习者在浏览网页时对网站的整体印象，不是像文字、 图形图像等视觉元素直接写进网页中的，它是构成各种各样的视觉语言相互和谐作用下所 形成的一种全新效果，所以整体不等于且大于各部分之和。 2 临近律与教育主题网站视觉效果设计 韦太默称临近律为“接近性或相近性规则 ，阿思海姆则把它分解为“位置的相似 和“连贯形状”两个原理。其意义是，某些距离较短或互相接近的部分，容易组成整体。 例如，图2 2 表明，距离较近而毗邻的两线，自然而然地组合起来成为一个整体。 图2 - 2 格式塔临近律旧1 临近律通俗的讲，如果不同的文字或图形图像组成部分位置靠近，学习者就容易把它 们看成是一起的。所以，用以解释图形图像或用以表明某一部分图形图像的文字应当紧挨 其所指的图形图像或部分图形图像。否则学习者会将这部分文字作为正文内容一起看待， 这样将给学习者的正常理解产生不必要的麻烦。 3 相似律与教育主题网站视觉效果设计 人们倾向于把外表相似的物体归为一类，相似的物体往往被视觉组成一个整体，这就 是相似律。这是由韦太默首先提出的“组合原则”，阿思海姆则把它作“相似性原理”， 其含义是单位与单位之间可以依照“大小”、“形状 、“亮度、“色彩 和“位置”等进行 组合的原则。例如，如果各部分的距离相等，但它的颜色有异，那么颜色相同的部分就自 然组合成为整体，这说明相似的部分容易组成整体。如图2 3 所示，白色圆圈与黑色圆圈 均匀分布，但是观察者很容易将该图形看作一列列黑白相间的垂线，而非以横线排列。 9 山东师范大学硕士学位论文 图2 - 3 格式塔相似律旧。 因此，需要通过将学习者注意力集中于视觉范围内的关键概念，帮助他们获得信息。 可以通过强调、动画、对比色的使用和其他一些手段到达这个目的。相似律原也就是视觉 区域划分的理论基础，如果一个网页的某部分区域属于同一风格，这个区域就会被视为一 个小整体。 4 封闭律与教育主题网站视觉效果设计 封闭律告诉我们，人们会根据以往的经验去理解不完整的图形或文字，将一种不连贯 的有缺口的图形尽可能在心理上使之趋合。如果给出一连串的虚线，其基本形状是环行的 话，人们往往会把点与点之间的空白填满并且说这些点代表的是一个圆。如图2 4 所示。 观察者总会将此视作猫头鹰图形，而不会视作其他分别独立的线条或圆圈。完整和闭合倾 向在所有感觉中都起作用，它为知觉图形提供完善的定界、对称和形式。所以在教育主题 网站的设计中，有些视觉元素的设计做到点到为止即可，不必要求面面俱到，反倒给人一 种画蛇添足的感觉。 1 0 图2 - 4 格式塔封闭律9 3 5 简明律与教育主题网站视觉效果设计 人们往往根据由过去的经验所形成的预期，无意识地去简化他们所感知的东西，这就 山东师范大学硕士学位论文 是简明律。当看到一幅复杂的图象时，人们会习惯性地把它简化成自己能够理解的形式。 在网页设计中，我们没有必要去过分的在意各种视觉语言设计的精美与否，而是应该关注 所提供的形式是否是学习者生活中所习惯的式样和形式。因此，在教育主题网站的设计中， 要尽可能的追求简约化、注重整体性、体现秩序感。比如抛弃繁冗的花条，变来变去的字 体，可有可无的花网，化整为零，统一字体统一风格。 6 图形一背景反差与教育主题网站视觉效果设计 在具有一定配置的场内，我们对其中的对象并不是都很明显地感知到的，有些对象突 现出来而形成图形，有些对象退居到衬托的地位而形成背景，这就是图形一背景反差律。 一般说来，图形是具有一定界线的组织比较严密的对象，背景则是没有界线的同一性的空 间或时间，图形是被包围的比较小的对象，背景则是包围着的比较大的对象。图形与背景 的区别愈大，图形愈可突出而为学习者所感知。图形与背景的区别愈小，学习者就不易把 图形与背景分开。 在教育主题网站的视觉设计中，除了关注图形图像与背景之间的反差规律，同时也包 括文字与背景之间，主体需要与其背景对比鲜明。正文或图形图像应当与背景有足够且适 度的反差以便学习者容易辨认所需获取的信息。但同时不可忽略的是，过于强烈的反差会 造成学习者眼睛的极度疲劳。而适度反差的度是需要设计者去准确把握的，它与教育主题 网