!""!#" 中国电化教育 总第 !## 期
一!问题的提出
当我们由语言艺术时代进入视觉艺术时代时!
人们获取信息的方式发生了巨大变化! 根据科学实
验测定!现代人从外界获取的信息量中!视觉成分约
占总数的 !"#"$%## 现代社会的信息传播已经由
$说给我%&&’(( )’’阶段发展到$秀给我%&*+,- )’’
阶段!与文字性(概念性作品阅读方式相比较!视觉
感受无疑更直接!更形象!也更富整体性./0#
以网络教学为例! 页面是学习者与网络资源的
交互通道! 信息传输是否畅通很大程度上取决于页
面的设计#页面吸引学习者!主要是吸引学习者的视
觉!即通过人的视觉生理和心理机制!产生强大的视
觉冲击力!同时实现一种隐性的信息传播# 然而!纵
观国内网络教学的发展!从页面设计的角度来说!很
大一部分页面还存在许多不尽人意之处#
/1盲目$堆积%信息# 页面是传递信息的窗口!由
于受视窗大小的限制! 很多教学网站为了追求信息
传播的量!把大量文字(图片(动画等信息不加考虑
地堆积到页面上!从而忽视了学习者的视觉感受#从
视觉规律来分析!这种不符合视觉审美规律的页面!
非但不能提高信息传播的效率! 反而干扰了获得信
息的效率!只会使学习者感到烦躁不安#
23过分$炫耀%技术# 媒体技术的不断升级和功
能的不断优化! 给网页设计者提供了大显身手的手
段和方法! 于是 45678(98:;5(<:=: :>>8?6
等技术充斥了整个画面! 炫目耀眼的屏幕变成了展
现多媒体技术的一个特定场所#
@3忽视艺术性# 许多设计人员还把网络教学页
面设计停留在内容和功能上! 没有把它上升到艺术
的高度#从目前网络课程的开发情况来看!大部分都
用开发人员兼了艺术设计一职# 页面设计人员艺术
修养的缺乏很大程度上削弱了页面设计艺术性的表
现效果#
当然!目前页面设计上的不足还不止这些!其原
因除客观上网络技术发展的 $瓶颈%&如带宽限制’制
约了网络教学页面设计的观念(方法(表现手段的多
样化以外!最根本的问题是设计人员忽视了页面设计
的理论指导!忽视了人的因素!没有以人的心理和行
为作为设计目标# 技术是为人服务的!人机工程学早
已提出任何设计理念均须以人为本! 以人性为重!以
人的需要为出发点! 网络教学页面的设计同样如此#
如今人们更重视用户对友好页面的要求!提出了以用
户为中心!开发$人性化%人机界面的理念# 而要做到
这一点!就要研究人的感知规律!然后从这些规律出
发进行页面设计 # ;)A&+BCDE&&, 和 9A*+’D &/FF$"
/FFF’提出$屏幕在很大程度上取决于学习者的)视觉
感知*%.20#因此!感知规律应当作为网络教学页面视觉
设计和评估的基础#$格式塔%是一种与艺术有缘的心
理学理论! 其主要目标是探讨感知及其与学习的关
系!它所研究的出发点就是$形%# 它认为任何$形%都
是经验中的一种组织或结构!而且与视知觉活动密不
可分# 而对于网络教学页面来说!主要是通过视觉来
感知屏幕信息# 因此!研究格式塔理论与页面设计的
关系!对我们无疑具有很大的启发作用#
二!格式塔理论在网络教学页面设计中的应用
网络教学页面设计是将特定的视觉信息要素!
根据主题表达的需求在特定的页面上进行的一种编
辑和安排!其基础是视觉生理学和视觉心理学#近代
对视觉感知的生理研究! 慢慢地揭示了格式塔理论
背后的生理过程!提出了一系列视感知规律!其中就
格式塔理论在网络教学页面设计中的应用
周 静 "赵志靖
&扬州大学 教育技术系!江苏 扬州 ""#$$$’
摘要:视觉生理学和视觉心理学是页面设计的基础#本文将格式塔心理学派对视知觉的研究导入网络教学页面
设计"对格式塔理论在网络教学页面设计中的应用作了分析与探讨$
关键词:格式塔%页面设计%网络教学
中图分类号:G434 文献标识码:A
文章编号&!""#"$%#"&&""G’"!"""!G""@
学习资源
!G
总第 !!! 期 中国电化教育 !"""##
包含了!图底"这个核心概念#还有!简明原则"!靠近
原则"!相似原则"!闭合规律"等视感知特性$将这些
视感知规律引入页面设计# 有助于我们克服视觉时
代!形象过剩"状态下的盲目#从而使网络教学页面
设计得以优化#提高传情达意的速度和准确度$
!"图底原则与网络教学页面设计
格式塔心理学认为# 当眼睛看到两件或多件物
体时#会因种种的视觉数据#如线条%边界%形状%明
暗等#或是通过物体互相重叠遮挡#而辨别其中一部
分为形象# 一部分为背景# 形象和背景是明确区分
的$所以在具有一定配置的视觉空间内#有些对象突
现出来形成主体# 有些对象则退居到衬托的地位而
成为背景$ 一般来说#主体与背景的区分度越大#主
体就越突出而成为我们视觉感知的对象$ 这一点在
网上的页面中经常被忽视# 背景常常含有图案或颜
色#使正文显得不突出而难以辨认$图底原则告诉我
们#正文或图形应当与背景有足够的反差#确保背景
不影响主体信息的清晰度# 以便学习者容易辨别所
需了解的信息$因此无论在文字%色彩%图像#还是动
画和视频方面都要坚持图底原则$
#"简明原则与网络教学页面设计
$%&’()&!*+,’和 $%--./&!*01’提出#人们往往根
据由过去的经验所形成的预期# 无意识地去简化他
们感知的东西$当看到一幅复杂的图像时#人们会习
惯性地把它简化为自己能够理解的形式 &2345&6
7)/55%894:&();!**<(!***’$ 因此#比较理想的做法#
应当是在介绍一个图像时采用简化的形式# 然后逐
渐增加其难度# 这样学习者可以一步步地理解所要
求的复杂程度$ 这种由简至繁的过程有助于学习者
避免误解所提供的图像=0>$ 由简明原则我们得出)在
网络教学页面中使用图形%图像时#应避免包含分散
学习者的注意力的视觉内容*图形%图像应尽可能简
明#易于领会#若其复杂程度超出学习者的经验和能
力范围#学生就不能迅速准确地感知教学信息$如图
!所示$
使用简化图形引入了新信息$ !信息处理理论"
这一复杂的概念用非常简单的图形形式来介绍#使
学生对于基本概念可以有个总体的了解$目前#追求
简约化%体现秩序感已成为一种新的页面美学追求$
0"靠近原则与网络教学页面设计
靠近原则是格式塔理论可用于网络教学页面设
计的另一个方面$ 如果不同的文字或图形组成部分
位置靠近#学习者就比较容易看出它们是一起的$也
就是说#在处理视像资料时#视觉形成了!就近便是
一组"的规律$ 根据这一原理#对于页面上的任何元
素#如果在功能或内容上是相同或相近的#就应在一
定程度上保持相对较小的空间距离# 做到 !物以类
聚"$ 比如#页面中用以解释图形或用以表明某一部
分图形的文字就应当紧挨其所指的图形或部分图形
?如图 #@#不能模棱两可#否则学习者会误解文字所
说明的内容$
图 # 是一例融会了格式塔理论靠近原则的合理
的页面设计图$在设计页面布局时#把浏览与声音控
制安排在屏幕的一侧#而文字讲解安排在另一侧$这
样的布局将同类信息&在此例中分别是工具和信息’
归类#便于学习者看出各部分的功能$
+"相似原则与网络教学页面设计
根据相似规律# 人们倾向于把看起来相似的物
体看成整体$ 相似的物体很容易被认为是从属于一
个系统#具有相似的功能$ 因而#需要通过将学习者
注意力集中于视觉范围内的关键概念# 帮助他们获
得信息=+>&$%&’();!*+,’$ 在网络教学页面设计中#可
以通过强调%动画%对比色的使用或其他手段达到这
一目的$ 假如一个图形中的组成部分都属于同一风
格#这个图形就被视为一个整体$为了使学习者重点
关注图形中的特定部分# 对这一部分可采用不同的
颜色%动画%闪烁或其他区分方式$但是#如果一幅画
面中区别过多# 也会使学习者难以注意需要获得的
信息$因此#这些方法应该用于强调关键词语或图形
的关键部分#而不宜用于大片信息$
通过相似规律#我们可以得出另一个启示)在网图1 显示复杂概念的简化图形
图2 合理的屏幕布局
学习资源
,A
!""!#" 中国电化教育 总第 !## 期
! 上接第 30页" 是学习者可以带到学习过程的知
识!技能或能力"也成为学习新技能或信息的前提#
本研究发现具有良好计算机和会计背景知识的学习
者学习效果好于那些背景知识差的学习者" 并且学
习者以前的背景知识越强"学习效果越好$
四# 结论
本研究观察了适合和不适合学生场依赖和独立
型认知方式的全局路径%宽度优先版本&和局部路径
%深度优先版本&的学习材料之间的关系"证实了学
生在所假设适合的学习环境下 %场依赖型学生使用
宽度优先版本"场独立型学生使用深度优先版本&的
学习结果和学习态度与在不适合 %场依赖型学生使
用深度优先版本"场独立型学生使用宽度优先版本&
的学习环境下相比具有显著差异$ 实验所得结果说
明" 学习者认知方式是网上学习材料界面设计的一
个重要影响因素"教育工作者!软件开发商应该利用
认知方式设计合适的学习材料界面路径" 创造适合
的学习环境"以达到提升学生个人学习效果的目的$
参考文献$
!"#!$#%&’() *+ , -./00) 1+2+3+ 45&67879 -06&05985’ &7: ;7:8<8:=&> 2/?@
!B#+ ;70567&08/7&> B/=67&> /C D&7@D&.E875 -0=:85’) "FGH"
%I &’HJG(KLM+
!K#!N#2//A56) O , P&A>&7) O+ QE5 R5’897 /C 2/’0 ?&7&95?570 -S’05@
?’TQ5U0 &7: 2&’5’%H 3:+&!D#+V5W B56’5ST% X&>> "JFFY+
!Z#*5&6S) [+Q+ , O//75S) 2+B+R5’897 &../=70879 5:=.&08/7 0/ &.E85<5
\&>&: 8705>>=&> :5<5>/A?570!B#+ ;’’=5’ 87 ]../=70879 3:=.&08/7)
JFFZ"%H&’N^(G^+
!L#[80(87) X+]+) D//65) 2+]+) *//:57/=9E) R+O+) , 2/U) %+[+
_85>:@:5A57:570 &7: C85>:@87:5A57:570 ./97808<5 ’0S>5’ &7: 0E586 @
5:=.&08/7&> 8?A>8.&08/7’!B#+ O5<85W /C 3:=.&08/7&> O5’5&) JFGG"
‘ IGa ’J(NI+
!G#-05<57’) B+ ]AA>85: ?=>08<&68&05 ’0&08’08.’ C/6 0E5 ’/.8&> ’.’bZ6: 5:8
08/7a !D#+ D&EW&S) V5W B56’5ST 4& 36>\&=?"JFFN+
!收稿日期$2005年2月25日
责任编辑$李晓华
""""""""""""""""""""""""""""""""""""""""""""""
络教学页面中" 不仅要使一个页面上的元素具有相
似性"而且要使一系列页面都具有一定的相似性"即
页面设计要遵循一致性原则" 建立一致的个性与风
格"给学习者统一的感觉$ 就具体设计而言"页面统
一不仅是方便阅读的需要" 也是产生视觉美感的需
要"过多变化只能加重视觉负担$ 当然"一致性并不
是使所有的页面都相同"应该对课程内容进行分类"
每一类具有一致的版式" 而类别之间又不是完全雷
同"统一之中又有适当的变化$
L+闭合规律与网络教学页面设计
闭合规律表明" 人们会根据以往的经验来理解
不完整的图形或文字$应当避免不完整的图形"因为
学习者会花时间去琢磨图形的意义" 而不是从所提
供的信息中学到东西$ 比如" 如果给出一连串的虚
线"其基本形状是环行的话"人们往往会把点与点之
间的空白填满并且说这些点代表的是一个圆$ 人们
倾向于根据过去的经验补充说明并由此解释所感知
的内容$他们会力图对感知的对象进行理解"对于不
完整的信息便牵强附会地赋予其意义$ 在教学中不
完整的信息可能导致学习者对所提供信息的误解$
在网络教学页面设计中" 应当考虑学习者的理
解方式$人们或是直接从提供的信息中获取意义"或
是将模式强加于信息 " 以便赋予其意义 %P/E>56)
JF$G&$但是"当某一信息带有意义时"人们会学得更
快!L#%P/E>56)JF$GcP/CC(&)JFZL&$ 因此在页面设计时"
应当使材料的设计有利于)意义理解*"减轻学习者
阅读时的生理和心理压力$例如"在页面中显示的图
像和文字信息应便于学习者注意信息本身" 不应因
为信息不完整而让学习者花时间去琢磨其意义!N#$图
J 中的文字信息就会吸引学习者学习图形所介绍的
完整概念"而无需费心琢磨图形本身的意思$
三#结束语
将格式塔心理学引入网络教学页面设计" 目的
是希望页面设计向理性化的方向发展$ 随着网络教
学应用范围的不断拓宽" 学习者对页面的要求也越
来越高"但现在的页面设计大多还是从直觉出发"离
科学的页面设计还有相当的距离" 要想达到科学的
页面设计"就要在设计时遵照人类的认知规律"并且
将这些规律正确地应用到设计实现中$ 当然格式塔
视知觉原则并不能看作是严格的定律" 而只能算是
一种实用的启发式研究$而且"页面设计不同于一般
意义上的)艺术品*"它更接近于视觉艺术中的)装饰
艺术*"而装饰艺术品所具有的内容和形式必然要受
被装饰物功能的制约$也就是说"页面承载和传播信
息的功能从根本上决定了页面设计的方向$
参考文献$
!J# 阎安+报纸版式视觉优化探析!R1de4#+E00ATddWWW+f8g87+750d9\d
./70570dH^^Z@^ZdJNd./70570hHHJ^+E0?+
!H(L# !美#15<56>S ]\\5S+网络教育(((教学与认知发展的新视
角!D#+北京T中国轻工业出版社)H^^Z+
!N# 487:& 4+4/E6+ QE655 %>5’ /C % C/6 ;7’06=.08/7&> ;7056@
C&.5 R5’897!B#+3:=.&08/7&>
!收稿日期$2005年3月21日
责任编辑$马小强
学习资源
GG
