（2）增加画面间的过渡
（3）界面间的组接设计应遵循学习规律
多媒体教学软件设计 教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.2 教学软件界面结构设计
10.2.1 教学软件界面结构设计特点
教学软件界面的结构设计包括界面对话设计，数据输入界面设
计，屏幕设计和控制界面设计等。 在教学软件的界面结构设计中，由于界面设计与程序设计的分 工，可将界面分为主界面与子界面。主界面设计是为了解决多媒体 教学软件的不同画面（教学内容）之间的连接与跳转方式，子界面
风格特征等，界面的作用是支撑有效的交互。反之，交互行为是界 面设计的约束与参照，当交互设计完成时，就提出了对界面设计的
要求。在进行界面设计时需要明确界面是为交互行为服务的，不可
以阻碍交互行为。
多媒体教学软件设计
教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1 人机交互界面概述
（2）重点集中，视点明确
（3）美观大方，前后一致
多媒体教学软件设计 教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1
10.1.3
3．色彩搭配协调
人机交互界面概述
教学软件交互界面设计原则
（1）需要表现对比的颜色搭配
（2）需要表现调和的颜色搭配 （3）使用配色技巧 4．界面组接流畅 （1）界面切换自然
是主界面中的一个区域（如功能区）的交互界面设计。
多媒体教学软件设计
教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.2 教学软件界面结构设计
10.2.2 主界面结构设计
1. 分屏式设计
在这里制作一种向前和向后翻页的效果，当点击鼠标左键的时 候将继续向下翻页，当点击鼠标右键的时候将后退翻页。在程序的
以及逻辑分类和语词定义工作，并力求不在之后的工作中进行修改。
多媒体教学软件设计
教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1 人机交互界面概述
10.1.2 界面设计的工作流程
2．交互设计（Interactive Design）
交互设计的基本原则如下： ● 有清楚的错误提示。
多媒体教学软件设计 教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1
（2）使用图形化设计
● 提供图形符号，尽量减少文字交互提示。 ● 图形符号的使用尽量符合日常生活的习惯。
人机交互界面概述
10.1.2 界面设计的工作流程
● 同样功能用同样的图形。
（3）界面协调一致 ● 界面布局设计的协调一致（如退出按钮的位置设计等）。
● 色彩与内容。整体软件不超过5个色系，近似的颜色表示近
似的意思。
多媒体教学软件设计
教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1
10.1.3
1．操作简便
人机交互界面概述
教学软件交互界面设计原则
（1）安装运行简便（2）菜简明合理 （3）内容简洁明了（4）提供帮助信息
2．布局合理前后一致 （1）恰当布置，主体突出
● 让用户用尽可能少的操作控制界面，需要同时在画面上出现
多个层次的目录结构。 ● 为同一种交互提供多种操作可能性。
● 允许中断。
● 使用学习者易懂的文字与图示，避免技术术语。 ● 提高交互反馈速度，避免学习者等待。
多媒体教学软件设计 教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1.2 界面设计的工作流程
1．结构设计（Structure Design）
结构设计也成概念设计 （Conceptual Design），是界面设计 的骨架。通过对用户研究和任务分析，制定出产品的整体架构。结 构设计类似与教学软件中的界面脚本设计，可以通过基于纸质的设 计方案供集体讨论与修改。在结构设计中，需要完成目录体系设计
10.1.1 交互界面基本概念
1．交互设计 交互设计（Interaction Design）作为一门关注交互体验的新 学科于20世纪80年代产生，它由比尔莫格里奇在1984年一次设计会 议上提出，并将交互设计命名为“软面（ Soft Face ）”，后来更 名为“Interaction Design”（交互设计）。 2．界面设计 用户界面（UI）的本意是User Interface也就是用户与界面的 关系。近年来，由于图形化界面软件的普及，用户对软件界面可操 作性以及操作的舒适性等方面提出了更高的要求，友好的人机界面 设计已经成为教学软件开发的一个重要组成部分。
第 10 章 多媒体教学软件交互界面与交互形式设计
学习目标
1. 了解人机交互界面设计 2. 掌握设计多媒体教学软件主界面的方法 3. 掌握设计多媒体教学软件子界面的方法
4. 掌握交互界面设计的一般方法
多媒体教学软件设计
教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1 人机交互界面概述
10.1
● 方便退出。
● 灵活实用的导航功能，既可让用户知道自己当前的位置， 又方便其自由跳转。
人机交互界面概述
10.1.2 界面设计的工作流程
3．视觉设计(Visual Design)
原则概括如下： （1）界面清晰简约
● 在技术允许的情况下可让用户选择或定制界面。
● 完善视觉的清晰度。图片、文字的布局和隐喻不要让用户去 猜。
开始先用一个显示图标显示说明性的文字，然后用按钮交互制作一
个开始按钮，最后用框架图标来实现翻页。通过这个程序主要掌握 显示图标的使用方法，擦除图标的使用方法，交互图标、框架图标 以及导航图标的使用方法及其它们属性对话框的设置。
多媒体教学软件设计
教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.2 教学软件界面结构设计
10.2.2 主界面结构设计
2. 分区式设计
下面介绍一种使用分区式交互编写的程序，这个程序主要时根 据用户填写的数据进行画线，这些数据包括线的长度，线的宽度和
多媒体教学软件设计 教育技术学专业
第 10 章 多媒体教学软件交互界面与交互形式设计
10.1 人机交互界面概述
10.1.1 交互界面基本概念
3．交互设计与界面设计
交互设计不等同与界面设计。交互设计更加注重教学软件和学 习者行为上的交互以及交互的过程，这一过程可以不倚赖于界面
（声音指令也是交互）。界面主要指画面的素材组成，结构布局，