国内儿童网站界面设计的调查分析.pdf

国内儿童网站界面设计的调查分析 陶漪刘桂峰 ( 南通大学现代教育技术中心，江苏南通2 2 6 0 1 9 ) 摘要】一个网站的质量如何，不仅取决于网站的内容，也取决于网站对其内容的设计安排。本 并可以使用的部分儿童网站，对其界面设计进行简要的调查和分析，概括出目前国内儿童网站界面设计 关键词】儿童网站；界面设计；布局；色彩；视听 1 引言 儿童本身是一类特殊的群体，他们的思维认知阶段处于 前运算阶段与具体运算阶段，抽象和概括能力都比较差，认识 活动更多地依赖于感觉、知觉和表象，那么针对儿童这一特殊 受众而设计的网站是不是已经考虑到儿童的特殊性呢? 网站 的内容当然首先是一个及其重要的方面，但一个网站如果仅 仅是图片和文本材料这些内容的简单堆积，而没有经过精心 的设计，这个网站必然不会形成独特的风格，那么也必然无法 给儿童留下深刻的印象。因此，儿童网站的设计不仅要注重网 站的内容，更重要的是关注网站的界面设计。从儿童的认知角 度出发，设计出符合儿童需求的网站。 2 界面设计简述 界面本身的概念很广，这里所指的界面就是人机接口，是 用户和计算机进行信息交换的通道，它提供了一种控制方法 或操作模璎。从心理学意义来分，界面可分为感觉( 视觉、触 觉、听觉等) 和情感两个层面。感觉层面是我们通过知觉器官 可以直接接收到的信息。情感性层面是界面传递给人的感受， 与人取得的感情共鸣，是与人的心理相互作用后产生的复杂 结果。 简单地说，界面通常包含了图形、文字等存在于层面上的 所有素材。而界面的设计，则是对所有素材取舍及组织形式的 处理手段。这些处理包括界面整体的布局、文字图片的编排、 色彩的搭配等多个方面的内容。一个优秀网站的界面设计必 然是可以在情感层面上可以与人产生共鸣的，这样的网站才 能最大限度的发挥其功效。 3 儿童网站样本选择 对于研究对象的儿童网站的选取，本次调查中采取使用 较为广泛的搜索工具，百度搜索、G o o g l e 搜寻、新浪爱问搜寻 以及多种网址搜索工具进行选样。本文主要选取各大综合类 型的儿童网站，并不局限于某一类别，同时本文也扣除了幼儿 园、小学各个班级所自行架设的网站、校园网站及儿童个人主 页等。搜寻结果发现，就目前而言国内儿童网站无论是在数量 还是质量上其实都还处在一个起步的阶段。本研究从中共选 择了2 0 个儿童网站作为分析的样本，这些嘲站都是三大搜寻 及网址搜寻网站的结果中皆有出现 都是目前可以运行使用的网站。 4 样本的简要分析 伴随网络技术的发展，以往单指平面设计的静态界面定 义中又增加了新的内容，如声音、动画等。换句话说，本文所指 界面是包括了文字、图形、图像、动画、音效和视频等多种设计 元素而成为一种新的集合。 本文将从页面的布局、色彩的搭配、文字的变化、图片的 处理等几个方面进行简要的分析，从中了解目前儿童网站在 界面设计上的一些基本情况及存在的问题。 4 1 界面设计中的布局排版 页面的布局指网页中的各组成要素的整体构成，设计就 是协调这构成中的种种关系，将页面上的各要素进行有机的 排列组合，顺应视觉感受，从而打动观看者，得到我们期望的 效果。一般网页布局大致可分为“国，字型、拐角型、标题正文 型、左右框架型、上下框架型、综合框架型、封面型、F l a s h 型、变 化型。 所选样本儿童网站中的布局情况如表l 所示： 衷1样本布局类型统计表 布局该类网站个数所占比例 国字型63 0 拐角型52 5 封面型21 0 F l a s h 型42 0 变化型3 1 5 从框架布局结构看，可以发现儿童网站具有两大特点： ( 1 ) 传统型布局结构的网站还是占了很大的优势( 国字型 + 拐角型) ，大约占了整体的一半以上。 “国”字型也可以称为“同”字型，即最上面是网站的标题 以及横幅广告条，接下来就是网站的主要内容，左右分列一些 两小条内容，中间是主要部分，与左右一起罗列到底，最下面 是网站的一些基本信息、联系方式、版权声明等。拐角型布局 这种结构与上一种布局结构只是形式上的区别，其实是很相 作者简介：陶漪，女，江苏南通人，硕士，初级实验员，研究方向：网络技术。 一6 3 接 较 样 的 但 上 么 站 放 上几个简单的链接或者仪是一个“进入”的链接甚至直接在首 页的图片上做链接而没有任何提示。这类布局方式在儿童网 站中也有出现，但小多，一般都是在第一层上使用。 再次是F l a s h 型，这种方式与封面型结构是类似的，只是 这种类型采用了目前非常流行的F l a s h ，它与封面型布局结构 的不同是由于F l a s h 强大的功能，页面所表达的信息更十富， 其视觉效果及听觉效果若处理得当，绝不差于传统的多媒体。 这种布局町以呈现出一种生动形象的虚拟场景，对儿章来说 情景学习是比较适合的方式，由于儿童特殊的认知特点，抽象 和概括能力还比较差，认识活动更多地依赖于感觉、知觉和表 象，那么在儿童网站中设计具体事物的模拟仿真环境，代替书 本或仅用抽象语言的描述，应该更容易理解得多。安排儿童熟 悉的场景，让儿童自己去探索发现，从儿童的认知特点来说， 自我发现和自我探索最能够引起学习者的兴趣，激发学习动 机，保证学习的持久性，并能够较长时间地保留学习成果。因 此F l a s h 场景式布局结构应该是最适合儿童网站的布局结构。 4 2 界面设计中的色彩心用 页面中的用色设计不是单纯的运用，还要考虑剑众多方 面的因素。例如，访问者的类别、社会背景、心理需求和场合的 差异等等。色彩给人视觉上造成的冲击应该是最为直接与迅 速的。 从样本中我们也可以发现，饱和度大的色彩如鲜红、翠 绿、明黄、宝蓝等在儿童网站色彩设计时经常被使用，而且还 是作为一个网站的主体色、重点色。这类色彩较鲜艳浓烈，易 引起人的注意。儿童网站中大多使用鲜艳浓烈的色彩，这样给 观看者一个强有力的视觉冲击。在最初一瞬间，色彩就已经牢 牢地捕捉住观看者的眼光，达到引起关注的目的，达到更有效 的传递目的。 界面的整体色彩对这个界面所要表达的主题和美感具有 极大的影响，也会进一步影响到浏览者的学习情感和求知欲 望。所以在网站界面设计时要考虑界面的整个颜色基调。颜色 基调主要体现为色彩结构在色相及纯度上的整体印象。对颜 色基调的把握主要在于对色量的控制，可以形成调和色调和 对比色调。 所选样本中的界面色调情况如表2 所示： 。 6 4 - - 裹2 样本网站色调类型统计裹 色调具有该色调的网蚺数量所占比例 调和51 5 对比1 57 5 从表2 中可以看出一般的儿童网就色调而言：调和色调 采用的比较少，调和色调是让主色的面积大到足以使整体的 色彩效果倾向于它，根据需要再适当搭配其他对比色。这类颜 色应用画面效果柔和、含蓄、统一，色彩接近而显得单调。这类 色调适合儿童文学网站，视觉效果比较温和，不易产生视疲 劳。儿童网站中大部分采用的是鲜明的对比色调，并且在界面 中大量使用彩色色块，而非彩色系列( 黑白灰1 应用的比较少。 这是与一般网站相比一个比较大的不同之处。对比色调是用 不同色彩产生强烈对比，使界面形成生动、活泼、鲜明的视觉 效果。当画面中明亮色占优势并有强烈的对比时，这样的色调 可以表现出活跃热烈的气氛。儿童阶段对色彩的认知还处在 比较低级的阶段，儿童嘲站采用这种鲜明的对比色调容易对 儿童产生强烈的视觉冲击效果，便于加深对整个画面的印象。 4 3 界面没计中的文字与图片 文字，图片，图像，动画都是界面设计中的重要视觉要素， 这些要素的合理安排十分重要，好的网站的界面设计绝不是 这些要素的简单堆积。 经过对样本的研究发现儿童网站中关于文字和图片的使 用具有以下几个特点： ( 1 ) 文字内容比较少，图片的数量较多。就整个界面而言出 现的文字的总体数量较一般的网站要少。文字排版的间距也 是比较稀疏。 ( 2 ) 特殊类字体和特殊类图片使用较多，例如美术类字体 或经过变体设计的字体。儿童网站的图片中大量出现卡通人 物，如儿童熟悉的白雪公主、米老鼠等。另外图片的风格有很 多是儿童插画风格，这些画的风格与现在儿童使用的教科书 上的画风基本相类似。 在一个界面中，文字占有重要的比重，它往往是界面个性 的基木组成部分，并反映着不同的情调。创意性的文字编排， 文字本身的变化组合都是极其重要的，它将产生新颖的界面 效果。儿童网站中文字的编排要尽可能的简洁清晰、突出重 点，易读性显得尤为重要。 图片内容比较直观形象，适应儿童的认知特点。对儿童来 说图片比文字容易理解，所以儿童网站中大量应用图片来表 示内容。儿童嘲站中使用的图片中很大部分都是所熟悉事物 及象征物。在界面中使用熟悉的象征物做菜单、图标、按钮时， 用户能较快地了解其功能，节省学习界面的时间。在网站中使 用儿童熟悉的卡通人物形象可以增加整个网站的亲和力，对 于自己熟悉喜欢的东西一般更容易接受。 4 4 界面设计中的声音 网站中的声音应该包括背景音乐、音效( 如按钮声音) 、解 说。本次样本网站中，无任何声音输入有1 5 个约占7 5 。有背 景音乐的2 个占1 0 ，按钮有音效的有2 个占1 0 ，卡卡乐园 是唯一一个全程配以童声解说的网站。我们可以看出大部分 网站中提供给儿童的仅是单一的视觉系统。 视觉和听觉这两个知觉系统各有其不同的心理特点，但 是这两者对于信息的接受，应该是相辅相成、互为补充的。从 心理学意义上讲，视觉刺激与听觉刺激同时作用于人的耳、眼 等感官时，人的中枢神经系统接受两种不同感官通道的信息， 更易对其整合分析，做出反映。视听结合比任何一种单一通道 获取信息都更为有效、准确。所以应尽可能使儿童发挥多种知 觉系统的作用，而不仅仅是单一的视觉。目前大部分儿童网站 并没有把视听结合这个特性显著发挥出来。视听结合的心理 效应具有1 + 1 2 的优势，因此在儿童网站界面设计中，要对视 觉听觉的运用给予同等的重视，更为重要的是不要忽视对声 音的必要地运用；要针对具体情况，力求找到视听的最佳结合 点，以更大限度发挥视听结合的优势，使学习者获得最大的信 息。 5 结束语 目前儿童网站的设计开发中界面设计的问题已经开始被 关注，但是大部分网站的设计还是停留在一般网站设计的层 面上。没有把儿童对象这个特殊性表现出来。所以今后在儿童 网站开发过程中，应该对界【l I 设计给与更多的重视，并与审美 培养结合起来。儿童网站设计开发不仅仅是一项技术的挑战， 更是一项艺术的挑战! 网站设计者只有在艺术和技术两个领 域中都具备较高的素质，才能合理运用各种技术和艺术手段 设计出既实用又令人赏心悦目适合儿童的网站。 参考文献： 【l 】侯春在基于文化适应的解释：儿童心理发展的成长论观点 【J 】教育理论与实践，2 0 0 5 2 5 ( 1 2 ) ：5 5 - 5 8 【2 】龙雪梅，瞿坌教学软件界面设计的视觉文化因素阴电化 教育研究。2 0 0 2 ，( 5 ) ：4 5 4 8 【3 】蒙应杰，王海涛，林和I n t e r a c t 交互界面设计规范的研究 们甘肃科学学报。2 0 0 l ，1 3 ( 4 ) ：2 6 - 3 0 【4 】王愉，隋涌论网页视觉要素设计 J 】北京印刷学院学报 2 0 0 5 。1 3 ( 4 ) ：5 9 6 2 【5 】文喜华论网页设计中的艺术与技术【J 】邵阳学院学报( 社 会科学版) ，2 0 0 5 。4 ( 6 ) ：1 1 5 - 1 1 6 【6 】吴呜浅谈色彩在多媒体课件中的运用阴武汉冶金管理干部 学院学报，2 0 0 5 ，1 5 ( 3 ) ：7 7 - 7 8 T h eI n q u is it io nA n a l y s isa b o u tI n t e r f a c eo fD e s ig no fH o m eC h il d r e n SW e b s it e T a oY i L iuG u if e n g ( M o d e mE d u c a t io n a lT e c h n o l o g yC e n t e ro f N a n t o n gU n iv e r s it y ，N a n t o n g2 2 6 0 1 9 ，J ia n g s u ) 【A b s 缸a c t 】T h eq u a l it yo faw e b s it eisd e c id e dn o to n l yb yt h ec o n t e n titc o n t a in s b u ta l s ob yt h ed e s ig na n da r r a n g e m e n t T h is p a p e rh a sin v e s t ig a t e da n da n a l y z e dt h ed e s ig no ft h es e l e c t e dc h il d r e n sw e b s it e sine x is t e n c e ，g e n e r a l iz e ds o m eb a s icc ir c u m s t a n c e ，a n d a l s op u tf o r w a r ds o m ev