浅议教育网站页面设计的感性因素

☆ 汪翠义 张新明

（安徽师范大学教育科学学院，安徽芜湖 241000）

教育网站是随着因特网的的普及和教育技术学理论研究的不断深化而逐步发展起来的。教育网站的页面设计是教育网站设计的最重要也是最核心的部分。教育网站页面的设计与其他类别网站的网页设计有着一些不同点，教育网页的设计更强调感性设计。要设计出以人为本的网页，就必须对一般的教育网站页面的感性因素进行提取与分析。

一、感性与感性设计

据《现代汉语词典》，“感性”一词是“指属于感觉、知觉等心理活动的认识”。该词来自日本语，是明治时代的思想家西周在介绍欧洲哲学时所造的一系列用语之一，如：“哲学”、“主观”、“客观”、“理性”、“悟性”等词一直沿用至今。《辞苑》对“感性”一词解释为：感觉能力，直观力和感受性，是人感受事的能力，即基于人类身体的感觉而产生的情感冲动和欲求。从认知学的角度来讲，人对事物的认识首先是感性的，感性认识是基于事物表面现象的认识，主要是通过人的感觉器官对事物的感知。从理论角度出发，能够用语言和表情等方式来描述这种期待和感受。[1]

当产品的形态、色彩、肌理、触觉等方面给人一种“美”的感觉和体验，而使产品具有人情意味时，我们称之为“感性设计”。[2]感性设计是一种新兴的设计理念，是一项以人的感性因素和多元需求为目标的产品开发技术。感性设计强调感性的思维方法和感性的表现形式，即在设计过程中设计者用感性思维进行创造，同时，注重人的情感与感觉。

感性是相对理性而言的，理性的特点是逻辑性强，强调思辨性。感性是感官知觉，人类对事物的感知最初是通过感觉器官进行的，这些事物的信息以各种形式的形象作为载体，通过感觉器官传达给人类大脑，从而形成诸如视觉、听觉、味觉、触觉、嗅觉等感觉形象类型。感性是设计者对客观事物的直观认识，这就要求在设计过程中，要充分地体现以人的直观感觉的“美”为特征。尤其在设计教育网站页面时，不仅强调页面的资源丰富、结构合理，更要关注什么样的学习者来浏览这样的教育网页。总之，感性引导下的教育网站页面设计就是要求关注教育网页的各个细节以为学习者提供无微不至的服务，让学习者感受“美”的存在，激发学习者的学习兴趣。

二、教育网站页面分析

（一）网页

网站的页面简称网页。它是指网站的用户页面，包括网站画面中的按钮、动画、文字、声音、窗口等与网页用户直接或间接接触的网页设计元素。

网站页面是人和网站之间的信息交流页面。网站页面的设计是指对网站中为用户提供交互功能的视觉元素进行规划、设计的活动。它的设计直接关系到人与网站关系的和谐和人在此网站学习中的主题地位，以及网站可使用性和效率。可见，研究网站的页面就是研究网站怎样适应人的有效学习的问题。

页面是网站的构成部分，网站页面是网站界面的重要组成部分。网站页面强调的是相对静态的页面本身，而界面则不仅考虑到页面本身还考虑到用户实际情况和用户的互动作用，以及信息是如何交流的。因此，网站界面设计包含网站页面设计。

（二）网页的通用元素

1.导航

如何对一个网站进行导航设计是网站设计中必须要考虑的问题。首先，应当确定网站的主要栏目页，并在主导航栏中显示。关于网站导航设计存在一个普遍的错误观念，那就是设计者往往认为导航设置得越详细越好，他们总是倾向于在页面上放置尽可能多的链接，这种做法导致的结果很可能就是：罗列的信息过多，反倒使用户不能有效地获取和使用这些信息。太多的选择和太少的选择一样都会让人无所适从。其实，只要有从一个链接通向下一个页面的明确路径，用户是会继续深入访问网站的。页面中一个清晰而简单的导航，会给访问者带来舒适的感觉，从而提高网页的点击率。

2.LOGO

绝大多数网站页面都有一些标示所有权的品牌图像、网站标识或标头，这就是LOGO。例如：Yahoo网站中几乎每一个页面在其左上方都有一个网站标识，其中附加有你正在访问的页面所属的大栏目的名称，如“Travel（旅游）”、“Movies（电影）”、”Autos（汽车）”等等（如图1所示）。安徽师范大学网站页面中的LOGO是由左边的校徽图案和郭沫若题写的“安徽师范大学”五个汉字组成（如图2所示）。

图1 Yahoo的LOGO

图2 安徽师范大学网站的LOGO

3.搜索引擎

页面的顶部标题部分(横跨页面顶部)可以不仅仅包含网站标识，还可以包含或附加上主导航栏。此外，还可以加上搜索栏，搜索引擎的嵌入可以让用户直接搜索网站的内容和信息，而不用通过使用菜单和链接来导航。搜索框的位置可以根据网页的实际布局来定。

4.页脚

页脚部分(页面最下端的部分)应包含一些额外的信息，如版权声明，以及指向有用的辅助页面（如“About This Site（关于本网站）”、“Terms＆ Conditions（使用条款和条件）”、“Contact Us（联系我们）”)的链接等。

三、教育网站页面设计的感性因素

教育网站页面的感性因素是指在页面上能够直接给学习者带来情感反应的页面的设计元素，包括色彩布局要素、文字图形要素和声音动画要素等。

（一）案例分析

笔者以中国少年儿童教育网站主页面为例来进行分析，图3是主页面的部分截图。

图3 中国少年儿童教育网站主页面

此页面主要以醒目的黄绿色点缀、白色背景，蓝色字为主，白底蓝字，黄绿图案给少年儿童带来了强烈的视觉冲击，也符合少年儿童的心理和生理需求，能够激发学生的学习兴趣，吸引学生的注意力。

中国少年儿童教育网站页面布局采取的是综合框架型，既有左右框架型又有上下框架型，这是相对复杂的一种框架结构。此网站的页面有五行主框架，其中第一行中有三列，第二行中有两列，第三行中有一列，第四行中有两列，第五行中有三列。这种构图，内容丰富、主题突出、模块化强，学习者容易找到所需要的学习资源。

页面以醒目的白底蓝字为主且以宋体五号字显示主要内容，在黄绿分割条中，则用突出的白色字来搭配作为一个栏目的说明。中国少年儿童教育网在网页的适当位置配置了大小、类型适当的图片，更能满足少年儿童的心理需求。

声音动画也是一个不可忽略的因素，尤其是面向少年儿童的网页，声音动画对他们的感官刺激比那些抽象的文字和静止的图片的刺激要强烈得多。因此，中国少年儿童网几乎每个子网页中都包含声音动画内容和一些简单的互动的操作，这样更能强化学习者的学习。

中国少年儿童教育网最凸显感性设计的就是在导航条下面设置了提问与回答板块，还有一个非常显眼的长长的搜索框。这对于少年儿童这样一个特殊的学习群体来说是一种“美”的体验，这样一个细节的设置，不仅考虑到网页的美观，更考虑到少年儿童的学习习惯与需求。

（二）教育网站页面的感性因素

1.色彩和布局要素

颜色和布局是页面设计的重要组成部分。合理利用色彩和布局的划分，能使学习者对一个教育网页的结构和重点一目了然，而根据排列组合的不同，网页带给用户的心理感受也不尽相同。通过色彩和布局的不断优化，使学习者感到舒适、满意，在学习过程中能保持愉悦的心情。从而激发学习者的学习兴趣。

在页面设计中，色彩设计必须注重给人带来的生理和心理反应，通过色彩色相、比例、位置等的比较和调和进行综合设计，以带给用户最佳的心理感受。同时，也要注意到色盲、色弱等特殊人群对色彩的感受性不同，在设计中达到通用设计的标准。[3]

教育网站的页面布局通常包含以下要素：网站标识、导航栏（全局导航与局部导航）、内容信息、其他标识（区域标识与局部标识）、底部导航栏、各种附带连接。

一个网站最重要的布局页是它的首页即导航页，它是用户对网站产生第一印象的窗口，用户通过它在短时间内了解整个网站布局，因此，首页布局多强调秩序感，以带给用户专业、可信赖的感觉。

2.文字图形要素

教育网页设计的另一感性要素是文字。文字带给用户的感性认识，不但与人的阅读习惯相关，也与使用的语法相关。

通常阅读文字的过程分为2种，扫视和凝视。扫视是有经验的阅读者快速浏览文本的一种方式，他们从辨别文字的形状到理解其含义速度较快，在阅读时以行数为单位而非字节为单位对文本进行快速扫视，寻找关键字词。而凝视则是对文本的认知过程，如果文本难以理解，则凝视的时间会增长，也就减慢了阅读速度。[4]

而在教育网站页面中，由于不同屏幕设置和网页滚动条的存在，不同长度的文本带给人的心理感受也不同。除去小说网站，通常在网站上人们不会沉浸于持续阅读的文字流中，而主要通过扫视检索感兴趣的字词来完成，因此，通过设置大小、色彩、样式等强调关键词，能提高学习者的心理体验。如面向儿童的教育网站的页面文字，将关键词直接用大号文字、粗体表现出来，给用户新颖而又易读的感受。

3.语音动画要素

除了视觉认知要素以外，听觉要素也是提升网页感性度的重要途径。通常语音和听觉要素被用来辅助视觉认知有障碍的用户感知页面状态。研究表明，人们对语音和声音的反应比对视觉刺激的反应更快。语音在帮助人在虚拟环境下的真实体验方面起到不可缺少的作用。但在一个教育网站页面中，人们通常习惯扫描浏览而非线性接听一个语音指示，因为这样更快速。但值得注意的是，一个突兀的刺激的声音会带给用户一种界面不受自己控制的感觉，而在操作错误时听到一声刺耳的“嘟”声也并不能带来良好的心理感受，因此，在教育网页的设计中使用语音和听觉要素必须十分谨慎。

在网页设计中，一般由Dreamweaver软件来完成，做成静态页面，也有些网站的引导页面做成Flash动画形式，当然，大部分页面还是静态呈现。某些网站虽然不是整体的动态呈现，但页面却包含各种各样的动态元素，如：网页中的Flash网络广告、网站导航栏动画、图片展示动画、Flash交互动画、由Flash制作完成的网站注册、登陆、计算等系统。在教育网站页面中如果包含这些动态元素，无疑能让页面更生动，充分调动学生的学习积极性。但是，页面不宜太花哨、太乱，否则，就会起到反作用，使学习者目不暇接、眼花缭乱，产生烦躁的情绪。

4.以人为本的细节因素

在页面的设计过程中，不仅要设计出美观的页面，更重要的是要充分考虑到使用对象即用户的体验。因此，在设计时，不仅要抓住百分之九十九的宏观构架，还要考虑到百分之一的细节。在艺术设计中，细节大于整体。整体再好，如果没有注意到细节或者细节安排不当，都会适得其反，破坏整体。例如：很多的教育网站的页面都有中英文切换的功能，充分考虑到学习者的实际情况。有很多面向中小学生的教育网站页面中都设置了在线答疑或留言的功能，这符合中小学生的实际情况，因为，他们的思维都非常活跃，发散思维能力强，教育网站中的教学资源远远也不能够满足他们的好奇心与求知欲，在线答疑或留言则为他们提供了自由发问，解决问题的途径。还有些教育网站对一些资源配置了声音说明，这样可以解决部分有视觉障碍的学生的学习困难。这些充分考虑用户以人为本的细节设计，是完善教育类网站设计的途径之一。

[1]孙琦.基于产品意象的感性设计研究[D].哈尔滨:哈尔滨工程大学,2010.

[2]梁莹莹.感性设计方法应用研究[D].济南:山东大学,2009.

[3]李晓蕙.网页游戏中页面设计的研究和应用[D].上海:上海交通大学,2008.

[4]张舒予.视觉文化概论[M].江苏:江苏人民出版社,2004.