２０１ １年第３期 总第１１５期 中国她代孝 袭备 ＳＣＮ１ＳＮ１１６７２．１４３８ ４９９４ｆｒ －教学软件界面的视觉艺术性设计策略 孙海英 程会杰 李振亭 １．河北机电职业技术学院２．河南师范大学河北邢台０５４０４８ 河南新乡４５３００７ 摘 要：教育教学软件是重要的数字化教学资源，教学软件质量的高低直接影响着教学效果。本文从美学的角度，运用编 排设计的视觉艺术理念，重点从教学软件界面的教学信息元素造型、布局、色彩搭配、视觉特性等方面探讨教学软件界面 视觉艺术效果的设计策略。 关键词：教学软件；屏幕界面；编排设计；视觉艺术 教育性、科学性和艺术性是多媒体教学软件评价 指标体系的３个主要指标。教育性体现在软件设计的 目的和目标；科学性是软件设计教学内容、教学过程 和教学方法正确的保障；艺术性则是体现教育软件质 量、提高教育绩效的重要途径。 软件的界面设计是教学软件艺术性设计的主要内 为人类视觉形象和构成的基本元素，就像组成完整文 章的文字、符号、词语一样，是编排设计的基本造型 成分，与人类视知觉密切相关。 例如，当画面中只有一个点时，人们的视线会被 这一个点吸引；当画面中出现两个大小相同的点时， 人们的视线会在二者之间来回移动；当画面中的两点 容。要给学习者构造良好的学习环境，提供优秀的学 习资源，必须提高教学软件界面视觉的艺术性。一个 视觉优美的界面，精巧的界面设计和合理的色彩搭配 大小不同时，人们通常会先注意到大的，然后逐渐向 较小的移动；当画面中出现多个点时，人们会自动地 将这些点联系起来，形成抽象线条，进而形成虚拟的 意象。 线是最富表现力的视觉形态，不仅具有方向性， 将课件中抽象、枯燥的教学内容转化为形象生动、富 有感染力的信息，为学习者创造了一个轻松愉快的学 习环境，提高了学习质量。 本文通过充分利用艺术学中编排设计的相关原则 而且具有位置、长度、宽度、形状等特性。在教学软 件中，恰当地运用不同属性的线条或不同形状的线性 和内容，从屏幕信息元素的造型、内容布局和色彩搭 配、视觉流程设计几方面来探讨教学软件界面视觉效 果设计的基本策略。 组合，不仅可以提高画面的张力，而且可以丰富软件 画面的视觉效果。线条的表现力能引导观察者的目光 和思想透过画面空间引发想象。例如：水平线暗示稳 定或平静；曲线或波浪线表示悠闲或优雅；垂直线表 １信息元素的造型 造型指的是运用点、线、面、形、体、色彩、 光、材料等手段来显现视觉对象。点、线、面、体作 示庄重和古板，也表示力量或威力；锯齿线暗示危 险；斜线则可带来生气、活力和动感。 面可以是点的扩大，也可以是线移动的轨迹。面 与线结合可以组成各种形状，大致可以分为几何形和 自由形两大类。几何形简洁、明快、有序。比如，方 形给人端庄稳重之感；圆形给人柔和、饱满和充实之 收稿日期；２０１０—１０—１０ 作者简介：孙海英，本科，实验师。程会杰，在读硕士研 感：三角形给人危险迫近之感。自由形随意洒脱，给 人新鲜灵妙的感觉。 究生。李振亭，本科，教授。 基金项目：河南省教育厅自然科学研究项目（编号：２００８Ａ ６３００６４）。 体是具有长、宽、高的几何体。立体图打破了 传统平面图像的一成不变，为人们带来了新的视觉感 ４７ ２０１１年２月 ＳＳＮ１６７２．１４３８ ＣＮ１１ ９９４，Ｔ 中国砚代孝 装备 ２０总第１１ １年第３ １５１１１期 １ 受，使人过目难忘。立体画、立体图，使前景更突 出、背景更深邃，从而使物体更逼真。 通常说“点动成线，线动成面，面动成体”， 这些造型元素的变化与组合，会形成一幅幅生动的图 形。教学软件中文字、图像、动画、视频等信息的位 置、方向都可以应用点、线、面、体的特性，做出合 理的安排。譬如，设计标题时，除了利用基本的点、 线、面、体造型外，还可以把一个字、词看作一个 点；一个标题形成一条线；一段文字就是一个面。 设计教学软件屏幕时，适当运用人们对点、线、 面、体的几何视觉特性，创造有创意的信息元素造 型，策划教学信息的表达形式，能够做到主题明确、 重点突出，易理解、好记忆。 ２信息的合理布局 界面布局指的是在同一页面中各种元素、各种媒 体的相互搭配和各自所处的位置。教学软件的界面布 局要求在主体突出的前提下，各元素之间相互协调， 整齐美观。为了将界面设计得精巧且有深度，应该遵 循几点基本原则。 ２．１一致性 信息内容传达上的逻辑一致性与编排设计形式 上的视觉效果，有着不可分割的内在联系。所谓一致 性，是指在整个软件屏幕教学信息的设计中，同一类 信息的大小、位置、色调等要保持一致，不可花样百 出，不伦不类，让人难以琢磨。 ２．２简洁性 屏幕空间有限，要充分利用有限的空间去有效地 传递有用的信息，屏幕信息组合易简不易繁。简洁的 界面复杂度低、清晰度高，便于记忆。根据短时记忆 的规律，语言文字要精炼，意义明确：图形要直观、 清晰；动画要形象生动、切合主题。与教学目标无关 的信息会分散注意力，要坚决避免。 ２．３均衡性 学习者在自然的平衡中才能得到和谐的韵律和节 奏感。空间的分割，使各种意义和功能不同的信息元 素进行有序的组合和分离。界面上的信息不仅要在一 定空间内合理分布，而且各信息点间的位置、问隙、 大小要保持一定的平衡感。例如，界面中的各要素要 分区显示：标题、正文内容，多是居于界面的中间部 位；而导航目录多是居于屏幕左侧或右侧；帮助、前 进和后退按钮多是居于左、右两侧的上部或下部。 因此，教学软件界面信息的分布，要主次分明且 简洁清晰，风格一致且均衡协调。 ３色彩的合理运用 色彩是教学软件界面构图的重要组成部分，是丰 富画面形象的最好的表现手段，对活跃画面、丰富画 面层次、吸引学生注意力、烘托和渲染教学氛围起着 举足轻重的作用。 ３．１运用色彩的特性，确定界面色彩基调 色彩可分为单色和彩色两大类。单色可以是单一 颜色或包含深浅不同的灰色。彩色指包含黑白系列以 外的各种颜色。彩色有纯度、明度、冷暖之分。暖色 系中高明度、高纯度的色彩给人兴奋感，低明度、低 纯度的色彩给人沉静感。 界面的色彩基调，应该与教学目标、内容、教学 模式以及教学对象相吻合。例如，以幼儿、中小学生 为对象的学习界面，采用高纯度、明度的色彩，营造 出活泼、轻松的视觉效果：而以成人为对象的界面， 或政治、文化、科技、专业知识内容类的界面，则应 以中性色为主，体现出一种朴实、庄重、和谐优雅的 情景。 ３．２利用色彩的视觉效果，提高界面的视觉美感 界面的追求是：利用赏心悦目的页面视觉效果， 创造一个有利于学习的平和的知识传播氛围。 为了使界面色彩丰富而有条理，一定要注意色与 色之问的和谐联接。单一色彩反差小，给人单调、呆 板的感觉。添加黑白色可以增强其反差，活跃图像。 ３．３利用色彩的对比关系，突出主体教学信息 色彩对比，是设计界面的基本规范。色彩有大 小、主次、轻重之分。色彩的重量感是通过色彩的冷 暖、明度、纯度表现出来的。不同重量感的色彩在画 面中组合起来，会形成不同的意境、格调及情感体 验。 重量感强的色彩在画面组合中，会形成阴沉的低 调；重量感弱的一些色彩在画面组合中，会形成爽朗 的高调。暖色和高明度色组合有扩大、膨胀感，冷色 和低明度色组合则有显小、收缩感。例如两个面积相 同的正方形，一个用亮色填充，另一个用暗色填充， 会让人产生凸凹的感觉，引人注意的同时，为平淡的 画面增添了立体感。 ３．４利用色彩间的相互关系，确保界面和谐均衡 界面均衡是指界面给人一种稳定、完整、和谐、 ２０１１年２月 ２０１ １年第３期 总第１１５期 中国观代孝 蒙各 律。 ４．２．２视觉流程规律的运用 ＳＳＮ１ＣＮ１ １ ６７２—１４３８ ４９９４ｆｒ －平衡的感觉，是人们审美的基本要求。因此色彩的 布局要注意“主题信息鲜艳夺目，辅助内容轻描淡 写”，做到色彩均衡，主次分明；色彩的应用要注意 繁简得当，而且繁而不乱，简而不单，丰富而不奢 上到下、从右到左的阅读习惯），这就是视觉流程规 通常人们对给定视野区的“最佳视域区”和“焦 华，素雅而有内涵。 ４视知觉和视觉流程规律的应用 学习者在利用软件学习时，主要是通过视觉观察 屏幕上显示的信息来获取知识，而屏幕上信息的显示 效果与学习者的视觉生理特性、视知觉和观察事物的 视觉流程规律密切相关。 人眼的视觉生理特性包括人眼生理上的分辨力、 对比度和色差度等；视知觉指一种将到达眼睛的可见 光信息解释，并利用其来计划或行动的能力。 ４．１遵循视觉生理及心理特性 ４．１．１分辨力 分辨力是指人通过视觉器官辨认外界物体细节的 能力。正常视力的人，其分辨力受观察距离、被观察 物的大小以及与背景亮度的相对对比度、照明环境的 影响。视物过大或过小、视距太近或太远、光线过亮 或太暗都会造成视觉疲劳，影响学习效果。 ４．１．２对比度 光度学理论表明：人眼分辨力不仅与被观察物体 的亮度平方根成正比，还与物体和背景亮度的相对对 比度成正比。 对一般教学软件而言，对比度的亮度分析难度 较大。设计时依据主题鲜明突出，视觉舒适自然的原 则，提高对比度，提高屏幕教学信息的显示质量。比 如，需要强调的文字通过加粗、加亮、加下划线等方 式加以突出，图形采用立体、暗影等效果彰显，背景 采用图案淡化、过度色调等方法烘托主体。 ４．２遵循视觉流程规律 人们在长期生活实践中形成了观察事物的视点先 后顺序、视觉焦点和余光等视觉习惯。在界面教学信 息的设计中，利用视觉流程规律，对优化界面和提高 教学效果有着重要意义。 ４．２．１视觉流程规律 界面中心线的左、上部ｌ／３处，是视野区的视 觉“焦点”部位，该焦点四周是所谓的“最佳视域 区”。长期以来，人们在审视和观察事物和阅读文 字的过程中，形成了“从左到右、从上到下、从大到 小、先明后暗……”的视觉习惯（已经扬弃了古时从 ２０１１年２月 点”，是最先被关注的位置。按照视觉的生理特性和 流程规律，优化屏幕界面视觉效果的主要任务是考虑 教学信息的位置设计、教学信息浏览的逻辑顺序设 计、内容信息的层次条理设计和色调对比艺术设计 等。 ４．２．３视觉流程规律的方法 ①对比法 对比在画面中能产生强烈的视觉吸引力。它不仅 可以使画面摆脱平庸和刻板，而且可以使画面富有冲 击力与层次感。最具有冲击力的部分是画面中最先被 关注的地方：而层次感能够引导学习者接受信息的先 后顺序。 ②调和法 调和对近似加以强调。它利用视觉要素的共性带 来相互问的呼应，实现各信息元素在空间各区域有效 的穿插、联系，使学习者在阅读时按照习惯性，将同 等属性的视觉元素联系在一起。这种自觉、跳跃的获 取信息的阅读过程符合学习者的视觉流程，使他们接 受起来比较自然，记忆也比较容易。 ③捆绑法 ＬｕＣｋ和Ｖ０ｇｅ ｌ提出的视觉工作记忆特性的捆绑方 法，即把现在看到的东西和以前的经验作比较，加以 分类、整合，再储存在大脑中。ＬｕＣｋ和Ｙｏｇｅｌ的观点 可应用于教学软件界面的艺术设计中，将新信息与旧 知识结合，增加学生的记忆累积，细化信息分类，以 提高学生区别、分辨信息的能力。 ５结束语 通过教学软件来传播教学信息，达到教学最优化 已是普遍现象。为了使学习者真正体会到多媒体教学 的乐趣，掌握艺术编排设计知识的运用特点，充分利 用大众经验及视觉特性的原理和规律，从学习者的角 度设计制作课件，对教学软件界面的视觉艺术效果是 非常重要的。 参考文献 ［１］李振亭，刘合英，孔繁士．多媒体课件设计理论与实践 ４９ ｌＳＳＮ１６７２—１４３８ ＣＮ１１＿４９９４，＿ｒ ［Ｍ］．北京：清华大学出版社，２００６ 中国砚代孝 装备 多媒体教学效果［Ｊ］．中国电化教育，２００５，２ ２０总第１１ １年第３１５期 期 ［２］龙晓苑．数字化艺术［Ｍ］．北京：北京大学出版社，２００１ ［３］张晓晶．多媒体课件的页面构设［Ｊ］．中国科技信息， ２００８，２２ ［７］张宁．画面的视觉效果在紫砂文化课件中的作用［Ｊ］．中国 电化教育，２００４，１１ ［８］Ｗｈｅｅｌｅｒ Ｍ Ｅ．Ｔｒｅｉｓｍａｎ Ａ Ｍ．Ｂｉｎｄｉｎｇ ｉｎ ｓｈｏｒｔ—ｔｅｒｍ ［４］丰明高，蒋尚文，莫钧．编排设计［ ．湖南：湖南大学出 版社，２００４ ［５］张勤．多媒体课件色彩的人性化设计［Ｊ］．教育信息化， ２００５，１７ ｖｉｓｕａｌ ｍｅｍｏｒｙ［Ｊ］． Ｊｏｕｒｎａｌ ｏｆ Ｅｘｐｅｒｉｍｅｎｔａ１ Ｐｓｙｃｈｏｌｏｇｙ： Ｇｅｎｅｒａｌ，２００２，１３１：４８￣６４ ［９］榍宇明，傅小兰．视觉工作记忆中的特征捆绑［Ｊ］．心理科 学进展，２００５，１３（４）：４２ｌ～４２７ ［６］江文杰，曾学文，林亚风．利用人眼生理视觉特性，提高 Ｔｈｅ ｄｅｓｉｇｎ ｓｔｒａｔｅｇｉｅｓ ｉｎ ｔｈｅ ｖｉｓｕａｌ ａｒｔｉｓｔｒｙ ｏｆ ｓｏｆｔｗａｒｅ ｉｎｔｅｒｆａｃｅ Ｓｕｎ Ｈａｉｙｉｎｇ ，Ｃｈｅｎｇ Ｈｕｉｊｉｅ ，Ｌｉ Ｚｈｅｎｔｉｎｇ １．Ｈｅｂｅｉ ｉｎｓｔｉｔｕｔｅ ｏｆ ｍｅｃｈａｎｉｃａｌ ａｎｄ ｅｌｅｃｔｒｉｃａｌ ｔｅｃｈｎｏｌｏｇｙ，Ｘｉｎｇｔａｉ，０５４０４８，Ｃｈｉｎａ ２．Ｈｅｎａｎ ｎｏｒｍａｌ ｕｎｉｖｅｒｓｉｔｙ，Ｘｉｎｘｉａｎｇ，４５３００７，Ｃｈｉｎａ Ａｂｓｔｒａｃｔ：ＴｈｉＳ ｐａｐｅｒ ｆｒｏｍ ａｎ ａｅｓｔｈｅｔｉｃ ｐｏｉｎｔ ｏｆ ｖｉｅｗ，ｕｔｉ１ｉｚｅｓ ｌａｙｏｕｔ ｄｅｓｉｇｎ ｏｆ ｖｉｓｕａｌ ｃｕｌｔｕｒｅ ｔｈｅｏｒｙ，ｅｘｐｌｏｒｅｓ ｉｎｔｏ ｔｈｅ ｐｒｉｎｃｉｐｌｅｓ ａｎｄ ｓｔｒａｔｅｇｉｅｓ ｔｏ ｍａｋｅ ｖｉｓｕａｌ ｅｆｆｅｃｔｓ ｏｆ ｔｈｅ ｓｃｒｅｅｎ ｉｎｔｅｒｆａｃｅ ｍｏｒｅ ｏｐｔｉｍａｌ ｂｙ ｐａｙｉｎｇ ｃｌｏｓｅ ａｔｔｅｎｔｉｏｎ ｔｏ ｔｈｅ ａｓｐｅｃｔｓ ｏｆ ｍｏｄｅｌｉｎｇ，ｌａｙｏｕｔ，ｃｏｌｏｒ ｍａｔｃｈｉｎｇ，Ｖｉｓｕａｌ ｃｈａｒａｃｔｅｒｉｓｔｉｃｓ ａｎｄ ＳＯ ｏｎ．Ｗｅ ｈｏｐｅ ｔｈａｔ ｔｈｉＳ ｐａｐｅｒ ｃａｎ ｐｒｏｖｉｄｅ ａｎ ｅｆｆｅｃｔｉｖｅ ｔｈｅｏｒｅｔｉｃａｌ ｋｎｏｗｌｅｄｇｅ ａｎｄ ｔｅｃｈｎｉｃａｌ ｒｅｆｅｒｅｎｃｅ ｆｏｒ ｔｈｅ ｄｅｖｅｌｏｐｍｅｎｔ ａｎｄ ｍａｎｕｆａｃｔｕｒｅ ｏｆ ｅｄｕｃａｔｉｏｎ ｃｏｕｒｓｅｗａｒｅ． Ｋｅｙ ｗｏｒｄｓ：ｅｄｕｃａｔｉｏｎ ｃｏｕｒｓｅｗａｒｅ：ｓｃｒｅｅｎ ｉｎｔｅｒｆａｃｅ：ｖｉｓｕａｌ ａｒｔ：ｖｉｓｕａｌ ｅｆｆｅｃｔ （上接４６页） 处理部分也规范和漂亮。 ３结束语 用计算机处理实验数据，克服了图解法手工 处理数据误差大且繁琐的缺点，实践中发现利用 ＥＸＣ ｅ １２００７强大的做图和“规划求解”非线性最小二 乘拟合功能，可不用编写复杂的程序，简便快速一气 参考文献 ［１］姚思童，张进．基础化学实验［Ｍ］．北京：化学工业出版 社，２００９ ［２］任占冬，朱玉婵，张开诚．利用ＥｘＣｅｌ和ＬａｂＶｉｅｗ软件处 理表面张力的实验数据［Ｊ］．计算机与应用化学，２００８，２５（１１）： １４２４￣１４２８ 呵成地完成溶液表面吸附量的计算和 —Ｃ及Ｆ—ｃ关系 曲线的绘制，过程简单，结果正确。通过在实验教学 中应用，学生也反映应用Ｅ Ｘ Ｃ ｅ １２００７处理实验数据， 简便、省时、准确，并且实验报告中所打印出的数据 ［３］汤桂梅，汪永涛．计算机在溶液表面张力测定中的应用 ［Ｊ］．雁北师范学院学报，２００１，１７（６）：２１－－２４ ［４］谢祖芳．用Ｏｒｉｇｉｎ处理溶液表面张力实验数据［Ｊ］．中国现 代教育装备，２００７，３：５０￣５１ Ｔｈｅ ａｐｐｌｉｃａｔｉｏｎ ｏｆ Ｅｘｃｅｌ ｓｏｌｖｅｒ ｏｎ ｈａｎｄｌｉｎｇ ｄａｔａ ｉｎ ｈｅ ｓｕｒｆａｃｅ ｔｔｅｎｓｉｏｎ ｅｘｐｅｒｉｍｅｎｔ Ｚｈａｎｇ Ｊｉｎ，Ｙａｏ Ｓｉｔｏｎｇ，Ｌｉｕ Ｌｉ，ＬｖＤａｎ Ｓｈｅｎｙａｎｇ ｕｎｉｖｅｒｓｉｔｙ ｏｆ ｔｅｃｈｎｏｌｏｇｙ，Ｓｈｅｎｙａｎｇ，１ １０８７０，Ｃｈｉｎａ Ａｂｓｔｒａｃｔ：Ｅｘｃｅｌ２００７ ｓｏｌｖｅｒ ｆｕｎｃｔｉｏｎ ｗａｓ ｕｓｅｄ ｔｏ ｇｅｔ ｔｈｅ ｕｎｋｎｏｗｎ ｐａｒａｍｅｔｅｒｓ ａ ａｎｄ ｂ ｂｙ ｎｏｎｌｉｎｅａｒ ｌｅａｓｔ—ｓｑｕａｒｅｓ ｆｉｔｔｉｎｇ ｂｅｔｗｅｅｎ ｔｈｅ ｓｕｒｆａｃｅ ｔｅｎｓｉｏｎ ａｎｄ ｔｈｅ ｃｏｎｃｅｎｔｒａｔｉｏｎ，ｉｎ ｈａｎｄｌｉｎｇ ｄａｔａ ｏｆ ｔｈｅ ｓｕｒｆａｃｅ ｔｅｎｓｉｏｎ ｅｘｐｅｒｉｍｅｎｔ． Ｔｈｅ ｖａｌｕｅ ｏｆ ｓｕｒｆａｃｅ ａｄｓｏｒｐｔｉｏｎ ｑｕａｎｔｉｔｙ Ｗａｓ ｅａｓｉｌｙ ｇｏｔ ａｃｃｏｒｄｉｎｇ ｔｏ ｅｍｐｉｒｉｃａｌ ｆｏｒｍｕｌａ ａｎｄ ｇｉｂｂｓ ａｄｓｏｒｐｔｉｏｎ ｆｏｒｍｕｌａ，ａｎｄ ｔｈｅ ｃｕｒｖｅ ｂｅｔｗｅｅｎ ｓｕｒｆａｃｅ ａｄｓｏｒｐｔｉｏｎ ｑｕａｎｔｉｔｙ ａｎｄ ｔｈｅ ｃｏｎｃｅｎｔｒａｔｉｏｎ ａｌｓｏ ｃａｎ ｂｅ ｍａｐｐｅｄ ｂｙ Ｅｘｃｅ１．Ｔｈｅ ｗｂｏｌｅ ｐｒｏｃｅｓｓ ｏｆ ｈａｎｄｌｉｎｇ ｄａｔａ ｎｅｅｄ ｎｏｔ ｗｒｉｔｅ ｐｒｏｇｒａｍ，ａｎｄ ｉＳ ｑｕｉｃｋ，ｅａｓｙ ａｎｄ ａｃｃｕｒａｔｅ． Ｋｅｙ ｗｏｒｄｓ：ｓｕｒｆａｃｅ ｔｅｎｓｉｏｎ：Ｅｘｃｅｌ：ｓｏｌｖｅｒ：ｄａｔａ ｈａｎｄｌ ｉｎｇ ２０１１年２月
