第10章 多媒体教学软件交互界面与交互形式设计

1、学习目标学习目标1. 1. 了解人机交互界面设计了解人机交互界面设计 2. 2. 掌握设计多媒体教学软件主界面的方法掌握设计多媒体教学软件主界面的方法 3.3. 掌握设计多媒体教学软件子界面的方法掌握设计多媒体教学软件子界面的方法4. 4. 掌握交互界面设计的一般方法掌握交互界面设计的一般方法 第第1010章章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1.1 10.1.1 交互界面基本概念交互界面基本概念第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述1 1交互设计交

2、互设计 交互设计（交互设计（Interaction DesignInteraction Design）作为一门关注交互体验的新）作为一门关注交互体验的新学科于上个世纪八十年代产生，它由比尔莫格里奇在学科于上个世纪八十年代产生，它由比尔莫格里奇在19841984年一次设年一次设计会议上提出，并将交互设计命名为计会议上提出，并将交互设计命名为“软面（软面（Soft FaceSoft Face）”，后，后来更名为来更名为“Interaction Design”Interaction Design”（交互设计）。（交互设计）。2 2界面设计界面设计 用户界面（用户界面（UIUI）的本意是）的本意是Us

3、er InterfaceUser Interface也就是用户与界面的也就是用户与界面的关系。近年来，由于图形化界面软件的普及，用户对软件界面可操关系。近年来，由于图形化界面软件的普及，用户对软件界面可操作性以及操作的舒适性等方面提出了更高的要求，友好的人机界面作性以及操作的舒适性等方面提出了更高的要求，友好的人机界面设计已经成为教学软件开发的一个重要组成部分。设计已经成为教学软件开发的一个重要组成部分。10.1.1 10.1.1 交互界面基本概念交互界面基本概念第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界

4、面概述3 3交互设计与界面设计交互设计与界面设计 交互设计不等同与界面设计。交互设计更加注重教学软件和学交互设计不等同与界面设计。交互设计更加注重教学软件和学习者行为上的交互以及交互的过程，这一过程可以不倚赖于界面习者行为上的交互以及交互的过程，这一过程可以不倚赖于界面（声音指令也是交互）。界面主要指画面的素材组成，结构布局，（声音指令也是交互）。界面主要指画面的素材组成，结构布局，风格特征等，界面的作用是支撑有效的交互。反之，交互行为是界风格特征等，界面的作用是支撑有效的交互。反之，交互行为是界面设计的约束与参照，当交互设计完成时，就提出了对界面设计的面设计的约束与参照，当交互设计完成时，就

5、提出了对界面设计的要求。在进行界面设计时需要明确界面是为交互行为服务的，不可要求。在进行界面设计时需要明确界面是为交互行为服务的，不可以阻碍交互行为。以阻碍交互行为。10.1.2 10.1.2 界面设计的工作流程界面设计的工作流程第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述1 1结构设计结构设计Structure Design Structure Design 结构设计也成概念设计结构设计也成概念设计 （Conceptual DesignConceptual Design），是界面设计），是界面设计的

6、骨架。通过对用户研究和任务分析，制定出产品的整体架构。结的骨架。通过对用户研究和任务分析，制定出产品的整体架构。结构设计类似与教学软件中的界面脚本设计，可以通过基于纸质的设构设计类似与教学软件中的界面脚本设计，可以通过基于纸质的设计方案供集体讨论与修改。在结构设计中，需要完成目录体系设计计方案供集体讨论与修改。在结构设计中，需要完成目录体系设计以及逻辑分类和语词定义工作，并力求不在之后的工作中进行修改。以及逻辑分类和语词定义工作，并力求不在之后的工作中进行修改。10.1.2 10.1.2 界面设计的工作流程界面设计的工作流程第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界

7、面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述2 2交互设计交互设计 Interactive Design Interactive Design 交互设计的基本原则如下：交互设计的基本原则如下： 有清楚的错误提示。有清楚的错误提示。 让用户用尽可能少的操作控制界面，需要同时在画面上出现多让用户用尽可能少的操作控制界面，需要同时在画面上出现多个层次的目录结构。个层次的目录结构。 为同一种交互提供多种操作可能性。为同一种交互提供多种操作可能性。 允许中断。允许中断。 使用学习者易懂的文字与图示，避免技术术语。使用学习者易懂的文字与图示，避免技术术语。 提高交互反馈速度，避免学

8、习者等待。提高交互反馈速度，避免学习者等待。10.1.2 10.1.2 界面设计的工作流程界面设计的工作流程第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述 方便退出。方便退出。 灵活实用的导航功能，既可让用户知道自己当前的位置，又方灵活实用的导航功能，既可让用户知道自己当前的位置，又方便其自由跳转。便其自由跳转。 3 3视觉设计视觉设计Visual Design Visual Design 原则概括如下：原则概括如下：（1 1）界面清晰简约）界面清晰简约 在技术允许的情况下可让用户选择或定制界面。在技术

9、允许的情况下可让用户选择或定制界面。 完善视觉的清晰度。图片、文字的布局和隐喻不要让用户去猜。完善视觉的清晰度。图片、文字的布局和隐喻不要让用户去猜。 10.1.2 10.1.2 界面设计的工作流程界面设计的工作流程第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述（2 2）使用图形化设计）使用图形化设计 提供图形符号，尽量减少文字交互提示。提供图形符号，尽量减少文字交互提示。 图形符号的使用尽量符合日常生活的习惯。图形符号的使用尽量符合日常生活的习惯。 同样功能用同样的图形。同样功能用同样的图形。（3 3

10、）界面协调一致）界面协调一致 界面布局设计的协调一致（如退出按钮的位置设计等）。界面布局设计的协调一致（如退出按钮的位置设计等）。 色彩与内容。整体软件不超过色彩与内容。整体软件不超过5 5个色系，近似的颜色表示近似的个色系，近似的颜色表示近似的意思。意思。 10.1.3 10.1.3 教学软件交互界面设计原则教学软件交互界面设计原则第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述1 1操作简便操作简便（1 1）安装运行简便）安装运行简便（2 2）菜单简明合理）菜单简明合理（3 3）内容简洁明了）内容简洁

11、明了（4 4）提供帮助信息）提供帮助信息2 2布局合理前后一致布局合理前后一致（1 1）恰当布置，主体突出）恰当布置，主体突出（2 2）重点集中，视点明确）重点集中，视点明确（3 3）美观大方，前后一致）美观大方，前后一致10.1.3 10.1.3 教学软件交互界面设计原则教学软件交互界面设计原则第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.1 10.1 人机交互界面概述人机交互界面概述3 3色彩搭配协调色彩搭配协调（1 1）需要表现对比的颜色搭配）需要表现对比的颜色搭配（2 2）需要表现调和的颜色搭配）需要表现调和的颜色搭配（3 3）使用配色技巧

12、）使用配色技巧4 4界面组接流畅界面组接流畅（1 1）界面切换自然）界面切换自然（2 2）增加画面间的过渡）增加画面间的过渡（3 3）界面间的组接设计应遵循学习规律）界面间的组接设计应遵循学习规律10.2.1 10.2.1 教学软件界面结构设计特点教学软件界面结构设计特点第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2 教学软件界面结构设计教学软件界面结构设计 教学软件界面的结构设计包括界面对话设计，数据输入界面设教学软件界面的结构设计包括界面对话设计，数据输入界面设计，屏幕设计和控制界面设计等。计，屏幕设计和控制界面设计等。 在教学软件

13、的界面结构设计中，由于界面设计与程序设计的分在教学软件的界面结构设计中，由于界面设计与程序设计的分工，可将界面分为主界面与子界面。主界面设计是为了解决多媒体工，可将界面分为主界面与子界面。主界面设计是为了解决多媒体教学软件的不同画面（教学内容）之间的连接与跳转方式，子界面教学软件的不同画面（教学内容）之间的连接与跳转方式，子界面是主界面中的一个区域（如功能区）的交互界面设计。是主界面中的一个区域（如功能区）的交互界面设计。10.2.2 10.2.2 主界面结构设计主界面结构设计第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2 教学软件界面

14、结构设计教学软件界面结构设计一、分屏式设计一、分屏式设计 在这里制作一种向前和向后翻页的效果，当点击鼠标左键的时在这里制作一种向前和向后翻页的效果，当点击鼠标左键的时候将继续向下翻页，当点击鼠标右键的时候将后退翻页。在程序的候将继续向下翻页，当点击鼠标右键的时候将后退翻页。在程序的开始先用一个显示图标显示说明性的文字，然后用按钮交互制作一开始先用一个显示图标显示说明性的文字，然后用按钮交互制作一个开始按钮，最后用框架图标来实现翻页。通过这个程序主要掌握个开始按钮，最后用框架图标来实现翻页。通过这个程序主要掌握显示图标的使用方法，擦除图标的使用方法，交互图标、框架图标显示图标的使用方法，擦除图标

15、的使用方法，交互图标、框架图标以及导航图标的使用方法及其它们属性对话框的设置。以及导航图标的使用方法及其它们属性对话框的设置。10.2.2 10.2.2 主界面结构设计主界面结构设计第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2 教学软件界面结构设计教学软件界面结构设计二、分区式设计二、分区式设计 下面介绍一种使用分区式交互编写的程序，这个程序主要时根下面介绍一种使用分区式交互编写的程序，这个程序主要时根据用户填写的数据进行画线，这些数据包括线的长度，线的宽度和据用户填写的数据进行画线，这些数据包括线的长度，线的宽度和线的颜色（这里演示

16、使用线的颜色（这里演示使用RGBRGB值表示）。程序的开始使用一个显示值表示）。程序的开始使用一个显示图标来显示程序的背景，然后用文本响应交互来输入数值，并且应图标来显示程序的背景，然后用文本响应交互来输入数值，并且应用读取数字的系统变量来将输入的数字赋值给自定义的变量。在这用读取数字的系统变量来将输入的数字赋值给自定义的变量。在这个过程中用按钮交互来控制是否改变画线的颜色和是否画线和从新个过程中用按钮交互来控制是否改变画线的颜色和是否画线和从新画线。通过本程序掌握显示图标的使用方法，交互图标的使用，文画线。通过本程序掌握显示图标的使用方法，交互图标的使用，文本响应、按钮响应的属性的设置，以及

17、系统变量的使用等。本响应、按钮响应的属性的设置，以及系统变量的使用等。10.2.2 10.2.2 主界面结构设计主界面结构设计第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2 教学软件界面结构设计教学软件界面结构设计三、分屏分区混合式设计三、分屏分区混合式设计 在本例中点击相应按钮的话，将在整个屏幕中出现和这个按钮在本例中点击相应按钮的话，将在整个屏幕中出现和这个按钮相关的下一级选项。当需要进入另一层菜单的时候需要返回上一层相关的下一级选项。当需要进入另一层菜单的时候需要返回上一层的菜单后在点击要进入项的按钮。在整个界面变换的过程中还要出

18、的菜单后在点击要进入项的按钮。在整个界面变换的过程中还要出现一种向下滚屏的效果。这个程序主要使用显示图标来实现内容的现一种向下滚屏的效果。这个程序主要使用显示图标来实现内容的显示，用交互图标来控制进入的二级菜单等一系列用户可以执行的显示，用交互图标来控制进入的二级菜单等一系列用户可以执行的操作。主要掌握显示图标的使用方法，按钮交互的使用方法，显示操作。主要掌握显示图标的使用方法，按钮交互的使用方法，显示过渡效果和擦除过渡效果的设置，等待图标的设置和过渡效果和擦除过渡效果的设置，等待图标的设置和quitquit（）函数（）函数的使用等。的使用等。10.2.3 10.2.3 子界面结构设计子界面结

19、构设计第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2 教学软件界面结构设计教学软件界面结构设计一、子界面弹出式一、子界面弹出式 平时在使用一些程序的时候经常会遇到弹出对话框的情况，那平时在使用一些程序的时候经常会遇到弹出对话框的情况，那么如果在编写的程序种也可以弹出对话框的话，那么会使编写的程么如果在编写的程序种也可以弹出对话框的话，那么会使编写的程序更具有实用性。怎样使程序弹出一个对话框呢？在下面的例子中序更具有实用性。怎样使程序弹出一个对话框呢？在下面的例子中将向大家介绍。这里主要使用的是将向大家介绍。这里主要使用的是Authorw

20、areAuthorware中自带的中自带的WinapiWinapi.u32.u32中的中的MessageboxMessagebox（）这个外部函数。通过本例的学习掌握显示图标（）这个外部函数。通过本例的学习掌握显示图标的使用方法，按钮交互响应的使用，的使用方法，按钮交互响应的使用，quitquit（）等系统函数的使用和（）等系统函数的使用和MessageboxMessagebox（）等外部函数的加载和使用。（）等外部函数的加载和使用。10.2.3 10.2.3 子界面结构设计子界面结构设计第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2

21、教学软件界面结构设计教学软件界面结构设计二、子界面伸出式二、子界面伸出式 在使用软件的时候都已经接触过了下拉菜单，下面就像大家介在使用软件的时候都已经接触过了下拉菜单，下面就像大家介绍一种利用外部函数在绍一种利用外部函数在AuthorwareAuthorware中制作下列菜单的例子。过本例中制作下列菜单的例子。过本例掌握显示图标的使用方法，交互图标中的热区响应方式的使用方法，掌握显示图标的使用方法，交互图标中的热区响应方式的使用方法，临时库的创建和使用方法，外部菜单的编写方法以及控制下拉菜单临时库的创建和使用方法，外部菜单的编写方法以及控制下拉菜单的外部函数的使用方法及其格式、功能。的外部函数

22、的使用方法及其格式、功能。10.2.3 10.2.3 子界面结构设计子界面结构设计第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.2 10.2 教学软件界面结构设计教学软件界面结构设计三、子界面拖出式三、子界面拖出式 这是一个模拟浮动面板的例子，主要使用了条件响应的方式。这是一个模拟浮动面板的例子，主要使用了条件响应的方式。来侦测鼠标的动作，然后根据鼠标的动作来执行一些效果，包括拖来侦测鼠标的动作，然后根据鼠标的动作来执行一些效果，包括拖动、交互和将浮动面板转换乘固定菜单栏等。主要掌握条件响应的动、交互和将浮动面板转换乘固定菜单栏等。主要掌握条件响应

23、的使用方法，与鼠标动作有关的一些系统函数与变量的使用，移动图使用方法，与鼠标动作有关的一些系统函数与变量的使用，移动图标的使用等。标的使用等。10.3.1 10.3.1 教学软件中人机交互的发展教学软件中人机交互的发展第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.3 10.3 教学软件交互设计技巧与实现教学软件交互设计技巧与实现1 1命令语言用户界面命令语言用户界面2 2图形用户界面图形用户界面3 3多媒体用户界面多媒体用户界面4 4多通道用户界面多通道用户界面5 5虚拟现实技术虚拟现实技术6 6教学软件中人机交互的发展教学软件中人机交互的发展7

24、7使用使用AuthorwareAuthorware开发教学软件中的交互设计技巧开发教学软件中的交互设计技巧10.3.2 10.3.2 菜单型交互设计技巧菜单型交互设计技巧第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.3 10.3 教学软件交互设计技巧与实现教学软件交互设计技巧与实现 由于由于AuthorwareAuthorware软件的下拉菜单仅支持一层菜单，想要实现第软件的下拉菜单仅支持一层菜单，想要实现第子菜单功能则需要使用程序设计实现，本例就如何实现实现多层菜子菜单功能则需要使用程序设计实现，本例就如何实现实现多层菜单交互进行讨论。单交互进行

25、讨论。 由于篇幅有限，本例仅讨论使用热区交互设计三层菜单中一个由于篇幅有限，本例仅讨论使用热区交互设计三层菜单中一个分支的情况，读者可以推广到一般情况，灵活运用编辑理想的复杂分支的情况，读者可以推广到一般情况，灵活运用编辑理想的复杂菜单。菜单。10.3.3 10.3.3 输入型交互设计技巧输入型交互设计技巧第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.3 10.3 教学软件交互设计技巧与实现教学软件交互设计技巧与实现 在在AuthorwareAuthorware中，主要通过文本输入和按键交互两种交互方式中，主要通过文本输入和按键交互两种交互方式实现

26、信息的输入，使用文本输入交互方式可以运用系统变量实现信息的输入，使用文本输入交互方式可以运用系统变量NumEntryNumEntry、NumEntry2NumEntry2、NumEntry3NumEntry3、EntryTextEntryText分别记录输入的数分别记录输入的数字和文本。使用键盘输入交互则更为灵活，需要进行程序设计。字和文本。使用键盘输入交互则更为灵活，需要进行程序设计。10.3.4 10.3.4 触动型交互设计技巧触动型交互设计技巧第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交互界面与交互形式设计10.3 10.3 教学软件交互设计技巧与实现教学软件交互设

27、计技巧与实现 所谓触动式交互是指在教学软件设计中，由于内容较多，需要所谓触动式交互是指在教学软件设计中，由于内容较多，需要分成若干部分，由于界面设计的需要，将多个部分的内容使用某一分成若干部分，由于界面设计的需要，将多个部分的内容使用某一可以触动的场景中（如书架中的书籍、抽屉等），本例通过一个旋可以触动的场景中（如书架中的书籍、抽屉等），本例通过一个旋转的站柜设计，使用触动的方式使其旋转，完成交互界面的设计。转的站柜设计，使用触动的方式使其旋转，完成交互界面的设计。10.3.5 10.3.5 拖动型交互设计技巧拖动型交互设计技巧第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教学软件交

28、互界面与交互形式设计10.3 10.3 教学软件交互设计技巧与实现教学软件交互设计技巧与实现 在第五章中已经讨论了利用拖动型交互设计画面颜色的改变，在第五章中已经讨论了利用拖动型交互设计画面颜色的改变，本节中通过透镜成像的实例给出了边拖动边绘图的方法，很多课件本节中通过透镜成像的实例给出了边拖动边绘图的方法，很多课件制作者使用这种方法时遇到了制作者使用这种方法时遇到了“绘图速度太慢，一跟不上拖动速度绘图速度太慢，一跟不上拖动速度”的难题，其实这并不是的难题，其实这并不是“绘图速度太慢绘图速度太慢”造成，而是过早地再次进造成，而是过早地再次进入永久条件响应造成入永久条件响应造成 的，解决的方法是让绘图慢一些（而不是快的，解决的方法是让绘图慢一些（而不是快一些），具体做法是在绘图程序中插入一个等待图标（或透明显示一些），具体做法是在绘图程序中插入一个等待图标（或透明显示图标）。图标）。10.3.6 10.3.6 自然型交互设计技巧自然型交互设计技巧第十章第十章 多媒体教学软件交互界面与交互形式设计多媒体教