1、基于视觉认知理论的 网络课程设计开发,劳 玲 罗晓丹,知觉是获得感觉信息意义的过程，因此对界 面的认知是学习者通过媒体学习的第一环节。界面 信息的呈现方式是否符合学习者的视知觉特性，是否 有利于知觉的组织与加工，将关系到学习者学习网络 课程的效果和效率。在网络课程界面设计时，既要考虑知识内容的表 征形式设计和界面整体呈现形式设计，又要考虑界面中 各种组成要素的呈现形式设计。,基于视知觉理论的网络课程界面设计,一、界面内容信息表征形式设计 二、界面信息整体布局设计 三要素设计 四、图-文组合设计,一、界面内容信息表征形式设计,（一）信息表征形式要与知识的内容特性相一致 （二）信息表征形式要与学习
2、对象的知识背景和 知觉经验相一致 （三）信息表征形式要与网络传输的速度相一致,（一）信息表征形式要与知识的内容特性相一致不同的媒体形式具有不同的表征特点，要针对特定教学内容选用相应的信息表征形式。对学习者来说所需加工的信息量也较少，知觉也就越容易，有助于他们较快地掌握知识内容。,（二）信息表征形式要与学习对象的知识背景和知觉经验相一致,（三）信息表征形式要与网络传输的速度 相一致要求要尽量缩小信息表征的数据量。网络提供了多种媒体形式可供设计者选择，由于不同媒体的设计原理不同，其数据量大小特性也不同。 另外，每一种表征形式也有不同的文件格式，其数据量大小也不同,二、界面信息整体布局设计,（一）界
3、面布局结构设计 （二）界面对象视觉层级设计 （三）界面信息呈现顺序设计 （四）界面信息密度设计,（一）界面布局结构设计,1、分块布局的原则 2、一致性和灵活性相统一的原则 3、多媒体信息组合呈现原则 4、多媒体信息的组织设计。,1、分块布局的原则,知觉具有整体优先效应，界面布局结构越清楚，对内容对象的知觉就越快捷。常用的手段是使用框架将界面分割成不同的区域，每个区域呈现不同的内容,2、一致性和灵活性相统一的原则,3、多媒体信息组合呈现原则,在网络课程界面中应尽可能避免连续呈现同类型的 对象，尤其对于不同区块中的对象，应采用改变视 觉类型的方法，如将导航菜单做成图形按钮、教学 内容区域图文并现等
4、 。,4、另外，还要注意界面中 多媒体信息的组织设计。,寻求在吸引学习者注意、如何防止注意力分散之间 建立一种平衡，既要通过形式设计吸引注意力又要 防止形式过多地吸引并分散注意力，形式设计要清 晰、简洁、一目了然突出线索信息。并且应该做好 如何由形式导向内容的设计，使学习者将注意集中 到内容信息特征上面。,（二）界面对象视觉层级设计,视觉层级设计是为了通过界面布局设计、排版设计、插图等来安排视觉信息，引导学习者的视觉注意。,网络课程界面可根据网页的视觉浏览顺序分三 个视觉层级来设计：第一级是界面布局整体结构， 第二级是内容信息结构，第三级是内容对象主次 结构。 视觉层级设计主要通过色彩和空间来
5、实现。 首先，使用框架或网格将不同功能或内容的区域分开；其次，设计界面所呈现的不同功能、内容信息（子区域信息 的结构，每一个区域的色彩应在所在整体大色块的色系范围内 变化；然后，对相对较为具体的内容信息进行设计，突出内容中的 主题要素，以获得知觉的选择加工。,（三）界面信息呈现顺序设计,1、要符合学习者的视觉浏览顺序 视觉总有一种自然的流动习惯，形成一个流程。视觉流程往往会体现出比较明显的方向感，它无形中形成一种脉络， 心理学认为，人眼对一幅画面上各区域的优先注视频率和认读路线不同。,2、指引策略设计为了加快学习者浏览界面信息的速度，还需要运用各种手段来引导学习者的浏览顺序。刺激的外在物理特征
6、影响着注意的转移； 视觉形状等外在特征相似有利于实现注意的转移； 人们注视区域的水平方向范围要大于垂直方向的范围,（四）界面信息密度设计,人的注意选择目标对象的同时还包括对周围干扰项（即无关的分析刺激信息）的抑制，也会占用大脑资源，并且干扰项越多、刺激强度越大占用的大脑资源也就越多，进而会影响主体选择反应的速度和注意的稳定性。,常用的降低界面整体信息密度的手段，是利 用知觉的整体性规律来处理、排列界面中的信息，减 少知觉对象的个数。1、具有相近相似的形状、色彩、意义等性质的局部刺激易被知觉成一个整体（相邻性原则和相似性原则）； 2、能够组合并能生成某种意义的刺激常被知觉成一个整体对象； 3、封
7、闭的图形以及连续的刺激对象也常常被作为一个整体来知觉等。,三要素设计,网络课程界面是学习者学习时所面对的屏幕界面。课程内容的有效传达是通过各种界面构成要素来实现的。网络课程界面的要素包括，如文本、图片、背景、图标按钮、导航、色彩、视频、动画等。,（一）文字与文本设计,文本信息是由一系列连续的文字组成，擅长于表现抽象的事物。 设计者必须考虑文本信息的连续性和文字编排的整体视觉效果，使学习者易认、易懂、易读。,1.字体设计,同一界面上使用的字体种类不要太多，文本字体的更换不要太频繁。有人研究认为，一个界面中以不超过3-4种字体为宜。 网络课程设计者应该尽量使用目前计算机系统中的通用字体来设计课程界
8、面中的文本信息。,字体选择原则：首先，字体的选择要因文字所表现的内容而定。 其次，字体的选择还要考虑到不同字体文字本身的结构特性。宋体应是我们的首选， “Times New Roman”、 “Georgia”英文字体首选。,2.文字大小设计,首先，要保证文字的清晰易读。 其次，为了突出重点文字，引起学习者视觉注意，常常采用改变字体、增大字号、加粗、加色彩等手段。,3.文字色彩设计,文字色彩设计要考虑与背景的关系，因为文字的清晰度除了与文字的字体、大小有关外，还与背景在明度和色相的对比有重要的关系。 通过色彩提高文字清晰度的方法有：运用色相对比、明度和饱和度对比等。,易见度较高的色彩搭配有：白与
9、黑、黄与黑、黄与紫、蓝与白、绿与白、黄与蓝等。,色彩的亮度和浓度,当背景色的饱和度较高时刺激较强容易造成学习者的视觉疲劳。常用的解决方案有两种， 一种是降低背景色的饱和度，即浓度； 第二种是使用相应的图形图像作背景，并作适当的虚化处理，使之不干扰文字主体的呈现。,4.小文本块设计,根据知觉的整体性和简化性原则，为了避免大块的文字 内容排列过于密集或过于纷乱，常常以小文本块的形式来排列 文本内容，以促进内容信息简化。如再为每一个文本块加上标 题，将更便于学习者快速浏览信息。,划分文本块的手段有很多，如为不同内容文本设置不同的色彩、利用表格框架、利用线条间隔、使用留白空间等。受知觉相对性的影响，留
10、白空间的大小要受到字体大小和行间距的影响。一般采用800*600的屏幕分辨率格式；每一行文字合适行宽约为305个中文宋体四号字宽度；行间距为1.5倍行高。这时形成文本块的留白空间至少需要两到三倍行距。,（二）图片设计,图片也是网络课程界面中重要的组成元素。 在网页中图片常以多种方式呈现，如照片、表格、流程图、简笔画和图形格式文字、图形按钮等。 图片的位置、大小、数据量、格式等直接关系到课程界面的视觉传达效果，在选用界面图片时，应考虑图片在整体编辑计划中的作用，既要保证界面整体美观，又要注意能够突出重点信息。另外，还要兼顾网络传输的速度。,1、选择图片格式使用JPG和GIF格式的图片有利于减少页
11、面数据量，提高网络下载速度 2、控制图片的数据量除了选择数据量较小的文件格式以外，还可以通 过限制其分辨率和大小尺寸来实现 3、呈现方式设计第一，采用缩略图的呈现方式。第二，采用隔行显示的图片呈现方式。,（三）背景设计,为了保证背景信息不会影响教学内容信息的有效传播，常常使用比较清淡的图片或色彩作为背景，以减少背景内容的信息量和背景信息的刺激强度。 在背景的色调搭配上应注意尽量避免有强烈的对比，特别是同时使用大面积的互补色彩对立。 要注意背景图片都具有一定的数据量，可能会增加网页下载打开的时间。,（四）色彩设计,色彩是影响网络课程界面整体形象的关键元素之一，界面的背景、图片、文字、图标、边框、
12、超链接等都要用到色彩。1、合理使用色彩搭配，突出对象，吸引注意 2、合理使用色彩搭配，缓解视觉疲劳 3、合理使用色彩，形成界面色彩风格,另外，在色块设计时要注意：,第一，色块的面积大小对比要能够达到视觉的 整体平衡； 第二，在屏幕界面中不要同时使用太多的颜色，尤其是面积较大的不同色块，一般以四、五种为限，因为过多的颜色会增加信息量，延长学习者的反应时间，还会使得界面色彩风格凌乱，增加知觉负担；,（五）导航超链接设计,在网络课程设计时，考虑到其内容以及相关资源的庞杂性以及学习者不同的学习特性，常常采用超文本这种表达形式来组织教学信息，以满足学习者以联想的方式进行知识学习的需要。 常用的超链接有两
13、种：首先是基于文字的超链接（即热字）；其次是基于多媒体信息的超链接。,1、文字超链接设计区别超链接与其它内容 使超链接具有较高的易读性2、图标按钮超链接设计与习惯相一致 大小要适当 突出按钮 呈现风格的一致性 配以相应的文字提示 清晰易辨，又协调一致 合理使用三维图标按钮,3、超链接导航策略设计（1）为网络课程提供内容结构导航一般来说，为了给学习者一个清晰的网络课程内容结构的概念，常常在网络课程学习一开始（如课程首页）就呈现给学习者，或者是以单独的界面来呈现，或者是对网页采用框架式结构永久性呈现课程内容结构信息。,（2）浮动面板导航 通过层设计可以将网络课程内容结构导航信息以一个 浮动面板的形
14、式来呈现，保证它始终呈现在学习者当前的 学习界面中，甚至可以让其呈现在屏幕界面中的一个固定的 位置。 在应用浮动面板呈现课程内容结构导航信息时应注意，浮动面板始终不能遮挡内容信息，而且浮动面板在学习者滚屏时的移动速度要合适，一般来说，在学习者滚屏操作结束后的一秒钟之内，浮动面板就应当到达其停止位置。,（六）动画设计,在网络课程界面中使用动画的作用有： 表明热点或重点信息，以期引起注意； 吸引学习者注意某事物状态随时间的转变； 表明导航的方向； 创建运动图标，来传达呆板静止图片所无法清楚传达的信息等。,动画的呈现方式丰富多样，如将静态图片中的文字不断变化、跳动、交替色彩或渐变，或使文字或图片沿着一定的路径（路径可控：界面的固定位置、屏幕的相对位置、随鼠标变化位置等）不断移动等。使用动画要注意：运动速度不要太快；不要将持久的动画放在界面中心处；切勿盲目的滥用。,四、图-文组合设计,（一）文图组合布局关系分析 （二）界面中文图组合注意事项,（一）文图组合布局关系分析,1、文字位于图像上方 2、文字环绕图片 3、文字半包围图片 4.文图分离，图独立空间,（二）界面中文图组合注意事项,1、要注意在一个界面中，图片的数量应该有所限制。 2、要注意根据文字和图片表征信息的特点来进行图-文搭配。 3、要注意界面中各图片的关系。 4、要注意图-文的位置排列方式。,
