基于视觉心理视角的网络课程界面设计研究

崔宁

摘 要 网络课程在国内各大高校远程教育、大规模企业培训、函授教育等领域已经得到普遍应用。从视觉心理角度来考察界面设计的优化策略，通过借助视觉心理的相关理论，提出优质网络课程界面设计的策略，希望能从视觉心理角度为网络课程界面设计提供一些启示。

关键词 网络课程；视觉心理；界面设计

中图分类号：G712 文献标识码：B

文章编号：1671-489X（2017）24-0065-03

Research on Network Curriculum Design under Psychological Perspective of Visual Interface//CUI Ning

Abstract Network courses in Chinese universities， distance educa-tion， large-scale enterprise training， correspondence education has

been widely used. This research mainly from the visual psycholo-gical perspective optimization strategy of interface design， put for-ward the optimization strategy of high quality web-based course interface design， hope from the visual psychological point of inter-face design for network course to provide some inspiration.

Key words network curriculum； visual psychology； interface design

1 前言

网络课程中的界面是学习者与课程交互的一个窗口，在网络课程学习过程中，学习者作为学习的主体，主要通过界面来获取学习信息。因此，良好的课程界面可以促进学习者有效获取知识，更有兴趣参与学习、参与互动。而界面效果不理想的网络课程，因其单调或者烦琐的界面设置，容易使学习者从心理上产生抵触情绪，从而降低学习效率。本文从视觉心理研究出发，试图为提高网络课程界面设计质量提供一定的启示。

2 视觉心理概论

视觉心理概念 视觉心理所关注的是视觉元素的合理定位、合理走向、合理分布，使呈现的视觉内容有明确的视觉焦点、清晰的视觉路线以及合理的空间分布。视觉心理是一个较为细化的分类，从人体学上讲，就是外界信息通过视觉器官引起学习者的心理机能反应，是一个由外在到内在的过程。这一过程较为复杂，因为外界信息丰富多彩，学习者内心心理机能复杂多变，两者在相互连接并发生转化时建立起千丝万缕的联系。因此，不同的学习者不同的学习信息，相同的学习者相同的学习信息，以及不同的学习者相同的学习信息和相同的学习者不同的学习信息，产生的心理反应是不同的。当然，也有一些共同的反应，它基于外在信息特征和学习者的基础知识特征以及受教育水平等，在不同程度上会对部分学习者产生相同的心理感觉或反应。

视觉心理基本理论

1）认知心理学理论。认知心理学也被称为狭义的认知心理学，是指把人的认知和计算机功能进行模拟，认为人脑也是一个信息加工系统。认知心理学研究的焦点并不是外部刺激和机体本身的反应，而是发生在两者之间的内部心理过程，这也符合视觉心理的研究范畴。

2）格式塔理论。格式塔心理学于1912年起源于德国，又称“完形”心理学。从内容上来说，格式塔心理学视直觉原理主要包括三个方面。

①感觉和直觉：一般来说，感觉和直觉是人类最常见的心理现象，但感觉和直觉在人类日常生活中的地位是不容忽视的。

②视知觉：格式塔心理学认为，视觉在作为一种观看活动的同时，更是一种理性思维活动。

③格式塔视知觉具有一定的组织特征：格式塔心理学认为，每个人对“形”都具有一种与生俱来的组织能力，并提出多项视知觉组织原则，如知觉的完形原则、简洁原则、视错觉原则等。

3 视觉心理视角下网络课程界面设计策略

整体优化策略 作为网络课程，除了要具备普通课程的教育性、科学性、艺术性之外，由于其特有的表现形式、运行方式及运载能力，下面就其整体优化策略加以分析。

1）主题鲜明、条理清晰。网络课程的内容表达的是一种意图和目的，有其明确的主题，要按照视觉心理的要求将要表达的课程内容传达给学习者。这就要求页面的内容不但要简洁、清晰和明确，而且要注重利用课程内容特有的风格和强烈的视觉冲击力鲜明地突出课程内容。要取得这种设计效果，一方面就要对课程内容有一个深入的分析，并运用逻辑规律加以条理化处理，使之符合学习者接受教学信息的心理模式和逻辑方式；另一方面，需要对网络课程的各构成元素进行艺术化处理，使之符合学习者的审美要求，极大地吸引学习者对课程内容的注意。

另外，在设计网络课程的页面时，有下面两种可供选择的页面都可以做到条理清晰。一种是“树状结构”。这种网络课程只有一个根节点，主要通过链接来建立站点，在每个网络上又有一个次一级的树枝。这种网络课程条理清楚，容易查找，但略显单调。另一种是“网状结构”。这种网络课程有一个主页，在该主页上又有其他网络课程的超链接。进入这种网络课程后，不仅可以学习本课程的教学内容，还可以查阅与该网络课程有关的其他站点以及参考书目等。

2）形式与内容统一。可以说任何事物都是形式和内容的综合体，网络课程自然也不例外，甚至更为注重形式与内容的统一。内容是构成网络课程教学内容的总和，是网络课程的基础，甚至可以讲是网络课程的“灵魂”。形式是網络课程内容的组成结构或者外在表现形式。显然，一个优秀的网络课程必然是内容和形式的统一。endprint

一方面，网络课程设计与制作所追求的形式美必须适合其课程内容的需要。只追求过于花哨的表现形式，或是只求内容而没有艺术性的表现形式，都是不合理的。形式美的法则包括单纯、对称、均衡、调和、比例、节奏、韵律、多样统一等元素。一般来说，形式美是其中最基本的原则。

另一方面，要表现出网络课程中每一个元素存在的必要性，不要为了炫耀而使用冗余的技术。

3）视觉整体和谐。这里可以运用格式塔心理学的有关原理对网络课程的优化提供借鉴。格式塔心理学认为，部分相加不等于总体，总体也不是部分的总和；整体决定着部分的性质和意义。因此，网络课程的整体设计要注意统筹规划，要做到整体的风格统一，特别要注意在突出部分特色的同时，要始终注意保持同整体的和谐。如在运用格式塔理论中的完形原则时，要注意被抠除的部分不破坏界面整体效果，不能因突出特色而影响整体的和谐，使学习者产生错觉。

具体优化策略

1）视觉焦点优化。通常，学习者在浏览网络课程时，其视觉焦点都有一定的顺序，例如：首先浏览课程的整个页面，接着视线便停留在课程的视觉焦点，然后移动视线，或精读或跳读或跳转到其他页面。这就说明学习者在瞬间只能产生一个视觉焦点，也就是说学习者的视线不可能停留在两处或两处以上。这就要求在网络课程的设计与制作时，要保证需要学习者了解到的教学信息不能被背景或其他起修饰作用的图案所覆盖。

2）视觉平衡优化。平衡给人的是一种心理感应。在网络课程设计时要注意课程的上下、左右的平衡，颜色的平衡等。使课程界面达到平衡的方法有很多种，比如可以设计一个上下、左右都对称的版面。这种平衡设计简单，但给人一种单调的感觉。事实上，平衡不一定就是对称，如常用的“黄金分割”“四分法”“三三黄金律”等，都可以对界面平衡的设计提供一些指导。图1为华南师范大学现代教育技术学网络课程的界面，采用黄金分割定律（页面的主体部分左右、上下比例均为0.618）来设计页面，给人一种和谐优雅的感觉。

3）视觉组合优化。在格式塔心理学中有一个靠近法则和相似法则。靠近法则指的是人们在观察两个相互靠近的视觉元素时，往往将其看成统一的整体加以观察。因此，在制作网络课程内容时，可以将教学图片及与其相关的文字靠在一起，这样便于学习者识记和学习；否则，学习者在误解图片所要表达的概念时很难找到相关的文字说明，造成时间上的浪费。相似法则讲的是学习者习惯于把外表相似的事物看成一个整体。因此，如果在同一个概念下有两个相似的部分，就可以运用相似的色彩、线条等加以表达，这样有利于学习者记忆，也有利于学习者对知识点更好地理解。

4 典型案例解析

这里选用华南师范大学现代教育技术网络课程（图2）作为典型案例，从视觉心理的角度探析优质网络课程的界面设计。该网络课程主要针对中小学各学科教师，是一门具有指导性、应用性、实践性的课程。

色彩柔和，界面设置合理 色彩方面，可以看出该网络课程的界面色彩较为柔和，以蓝色为课程界面的主色调，以黑色为主、白色为底。在几种颜色中，黑色给人一种稳重、深沉的感觉，蓝色给人的感觉是专业、理智、高深。主界面中深蓝色到浅蓝色的渐变，体现出一种朝气，与黑白色搭配显得格外和谐。白色给人一种纯洁、朴素、恬静之美，在它的衬托下，黑色字体显得更加鲜明。在蓝色背景下的白色大标题十分醒目、清晰，蓝色背景下的小标题显得格外稳重。整个界面给人一种友好、清晰、简洁、明朗的感觉，整体效果较好，不容易使学习者产生疲劳。

在主界面的上方，课程以工具栏的形式设置了全局导航，包括首页、课程简介、自主学习、专家引领、实践活动、课程作业、课程BBS等。并且在全局导航的下方设置了“关键词”搜索功能，便于学习者迅速定位教学信息。另外，在界面的右方还设置了支持服务、优秀课例、专家评价、学生评价等相关资源，利于学习者对相关学习资源的准确搜索。在界面的左下方有学生作品展示，使学生能够看到自己的作品，利于激发学生的学习兴趣。

布局清晰，便于学习者利用 从图2可以很清楚地看出，界面版式采用“T”型布局，主次分明、条理清晰，各种媒体元素搭配合理。页面的形象区域放置着华南师范大学的标志，左边设置一个电子书入口的动画设计，相当和

谐；形象区的下方是全局导航，将教学信息分成九个模块；中间部分是通知公告，用以提示学习者有关课程的准备、要求以及希望；界面右方的特色资源，如支持服务、优秀课例、专家评价、学生评价等，用以促进学习者更好地学习；底部用来设置版权信息。整个界面较为简洁，易于学习者操作。

角度全面，人文气息浓厚 从学习者的心理角度看，该网络课程的界面设计符合学习者的视觉习惯，给学习者以清晰流畅的视觉导向。以蓝色为主色调的界面能够让学习者感觉自己仿佛身在大自然中一般，很轻松地接受相关的教学信息，不容易引起视觉疲劳。整个界面设计合理、脉络清晰，界面的色彩简洁而不单调，没有用过于华丽的色彩冲击眼球。

从设计者的角度来说，可以说充分考虑到了学习者的视觉心理特征，整个网络课程的界面具有一种艺术美感，信息传达准确有效；蓝色和淡蓝色的搭配，不至于学习者在接受信息时感到疲劳；界面元素的位置安排合理，各元素之间的间隙适中，既遵循了网络课程界面设计的设计原则，又充分考虑了学习者的认知规律与视觉心理规律。

5 结语

本研究从视觉心理的相关理论出发，探析视觉心理在现代网络课程界面设计中的应用，试图为现代网络课程的制作与设计提供一些借鉴。在视觉心理部分介绍了视觉心理的基本概念和视觉心理的基本理论，然后从如何优化网络课程的界面设计出发，从视觉心理的角度分析了一些界面設计优化策略。本研究在后期还需要运用更多的实践加以检验，也会更多地进行相关实证研究。

参考文献

[1]李启色.网络课程中网页的视觉设计研究[J].电化教育研究，2004（7）：30-33.

[2]贾靖林.从视觉心理角度分析网络课程界面设计：以浙江师范大学《现代教育技术》国家级精品课程为例[J].浙江教育技术，2010（5）：12-16.

[3]屈爽，肖亚.格式塔心理学原理在平面设计中的应用研究[J].科教文汇，2010（6）：40-41.

[4]易霜，曾暇，黄云.激发学生认知心理之网页设计的视觉效应[J].软件导刊，2010（2）：187-189.

[5]慈冉冉.视频教学资源在网络课程中的设计与应用[D].济南：山东师范大学，2010：18-20.

[6]梁旭.基于学习者体验的精品资源共享课设计研究[D].江苏：江南大学，2010：49.

[7]皮连生.学与教的心理学[M].上海：华东师范大学出版社，1999：18-20.

[8]吴伟敏.网站设计与Web应用开发技术[M].北京：清华大学出版社，2009：40-44.endprint