多媒体教学软件交互界面与交互形式设计省公开课一等奖全国示范课微课金奖课件

学习目标1.了解人机交互界面设计2.掌握设计多媒体教学软件主界面方法3.掌握设计多媒体教学软件子界面方法4.掌握交互界面设计普通方法第10章多媒体教学软件交互界面与交互形式设计1/2310.1.1交互界面基本概念第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述1．交互设计交互设计（InteractionDesign）作为一门关注交互体验新学科于上个世纪八十年代产生，它由比尔莫格里奇在1984年一次设计会议上提出，并将交互设计命名为“软面（SoftFace）”，以后更名为“InteractionDesign”（交互设计）。2．界面设计用户界面（UI）本意是UserInterface也就是用户与界面关系。近年来，因为图形化界面软件普及，用户对软件界面可操作性以及操作舒适性等方面提出了更高要求，友好人机界面设计已经成为教学软件开发一个主要组成部分。2/2310.1.1交互界面基本概念第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述3．交互设计与界面设计交互设计不等同与界面设计。交互设计愈加重视教学软件和学习者行为上交互以及交互过程，这一过程能够不倚赖于界面（声音指令也是交互）。界面主要指画面素材组成，结构布局，格调特征等，界面作用是支撑有效交互。反之，交互行为是界面设计约束与参考，当交互设计完成时，就提出了对界面设计要求。在进行界面设计时需要明确界面是为交互行为服务，不能够妨碍交互行为。3/2310.1.2界面设计工作流程第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述1．结构设计StructureDesign结构设计也成概念设计（ConceptualDesign），是界面设计骨架。经过对用户研究和任务分析，制订出产品整体架构。结构设计类似与教学软件中界面脚本设计，能够经过基于纸质设计方案供集体讨论与修改。在结构设计中，需要完成目录体系设计以及逻辑分类和语词定义工作，并力争不在之后工作中进行修改。4/2310.1.2界面设计工作流程第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述2．交互设计InteractiveDesign交互设计基本标准以下：●有清楚错误提醒。●让用户用尽可能少操作控制界面，需要同时在画面上出现多个层次目录结构。●为同一个交互提供各种操作可能性。●允许中止。●使用学习者易懂文字与图示，防止技术术语。●提升交互反馈速度，防止学习者等候。5/2310.1.2界面设计工作流程第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述●方便退出。●灵活实用导航功效，既可让用户知道自己当前位置，又方便其自由跳转。3．视觉设计VisualDesign标准概括以下：（1）界面清楚简约●在技术允许情况下可让用户选择或定制界面。●完善视觉清楚度。图片、文字布局和隐喻不要让用户去猜。

6/2310.1.2界面设计工作流程第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述（2）使用图形化设计●提供图形符号，尽可能降低文字交互提醒。●图形符号使用尽可能符合日常生活习惯。●一样功效用一样图形。（3）界面协调一致●界面布局设计协调一致（如退出按钮位置设计等）。●色彩与内容。整体软件不超出5个色系，近似颜色表示近似意思。7/2310.1.3教学软件交互界面设计标准第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述1．操作简便（1）安装运行简便（2）菜单简明合理（3）内容简练明了（4）提供帮助信息2．布局合理前后一致（1）恰当布置，主体突出（2）重点集中，视点明确（3）美观大方，前后一致8/2310.1.3教学软件交互界面设计标准第十章多媒体教学软件交互界面与交互形式设计10.1人机交互界面概述3．色彩搭配协调（1）需要表现对比颜色搭配（2）需要表现调和颜色搭配（3）使用配色技巧4．界面组接流畅（1）界面切换自然（2）增加画面间过渡（3）界面间组接设计应遵照学习规律9/2310.2.1教学软件界面结构设计特点第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计教学软件界面结构设计包含界面对话设计，数据输入界面设计，屏幕设计和控制界面设计等。在教学软件界面结构设计中，因为界面设计与程序设计分工，可将界面分为主界面与子界面。主界面设计是为了处理多媒体教学软件不一样画面（教学内容）之间连接与跳转方式，子界面是主界面中一个区域（如功效区）交互界面设计。10/2310.2.2主界面结构设计第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计一、分屏式设计在这里制作一个向前和向后翻页效果，当点击鼠标左键时候将继续向下翻页，当点击鼠标右键时候将后退翻页。在程序开始先用一个显示图标显示说明性文字，然后用按钮交互制作一个开始按钮，最终用框架图标来实现翻页。经过这个程序主要掌握显示图标使用方法，擦除图标使用方法，交互图标、框架图标以及导航图标使用方法及其它们属性对话框设置。11/2310.2.2主界面结构设计第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计二、分区式设计下面介绍一个使用分区式交互编写程序，这个程序主要时依据用户填写数据进行画线，这些数据包含线长度，线宽度和线颜色（这里演示使用RGB值表示）。程序开始使用一个显示图标来显示程序背景，然后用文本响应交互来输入数值，而且应用读取数字系统变量来将输入数字赋值给自定义变量。在这个过程中用按钮交互来控制是否改变画线颜色和是否画线和从新画线。经过本程序掌握显示图标使用方法，交互图标使用，文本响应、按钮响应属性设置，以及系统变量使用等。12/2310.2.2主界面结构设计第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计三、分屏分区混合式设计在本例中点击对应按钮话，将在整个屏幕中出现和这个按钮相关下一级选项。当需要进入另一层菜单时候需要返回上一层菜单后在点击要进入项按钮。在整个界面变换过程中还要出现一个向下滚屏效果。这个程序主要使用显示图标来实现内容显示，用交互图标来控制进入二级菜单等一系列用户能够执行操作。主要掌握显示图标使用方法，按钮交互使用方法，显示过渡效果和擦除过渡效果设置，等候图标设置和quit（）函数使用等。13/2310.2.3子界面结构设计第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计一、子界面弹出式平时在使用一些程序时候经常会碰到弹出对话框情况，那么假如在编写程序种也能够弹出对话框话，那么会使编写程序更含有实用性。怎样使程序弹出一个对话框呢？在下面例子中将向大家介绍。这里主要使用是Authorware中自带Winapi.u32中Messagebox（）这个外部函数。经过本例学习掌握显示图标使用方法，按钮交互响应使用，quit（）等系统函数使用和Messagebox（）等外部函数加载和使用。14/2310.2.3子界面结构设计第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计二、子界面伸出式在使用软件时候都已经接触过了下拉菜单，下面就像大家介绍一个利用外部函数在Authorware中制作以下菜单例子。过本例掌握显示图标使用方法，交互图标中热区响应方式使用方法，暂时库创建和使用方法，外部菜单编写方法以及控制下拉菜单外部函数使用方法及其格式、功效。15/2310.2.3子界面结构设计第十章多媒体教学软件交互界面与交互形式设计10.2教学软件界面结构设计三、子界面拖出式这是一个模拟浮动面板例子，主要使用了条件响应方式。来侦测鼠标动作，然后依据鼠标动作来执行一些效果，包含拖动、交互和将浮动面板转换乘固定菜单栏等。主要掌握条件响应使用方法，与鼠标动作相关一些系统函数与变量使用，移动图标使用等。16/2310.3.1教学软件中人机交互发展第十章多媒体教学软件交互界面与交互形式设计10.3教学软件交互设计技巧与实现1．命令语言用户界面2．图形用户界面3．多媒体用户界面4．多通道用户界面5．虚拟现实技术6．教学软件中人机交互发展7．使用Authorware开发教学软件中交互设计技巧17/2310.3.2菜单型交互设计技巧第十章多媒体教学软件交互界面与交互形式设计10.3教学软件交互设计技巧与实现因为Authorware软件下拉菜单仅支持一层菜单，想要实现第子菜单功效则需要使用程序设计实现，本例就怎样实现实现多层菜单交互进行讨论。因为篇幅有限，本例仅讨论使用热区交互设计三层菜单中一个分支情况，读者能够推广到普通情况，灵活利用编辑理想复杂菜单。18/2310.3.3输入型交互设计技巧第十章多媒体教学软件交互界面与交互形式设计10.3教学软件交互设计技巧与实现在Authorware中，主要经过文本输入和按键交互两种交互方式实现信息输入，使用文本输入交互方式能够利用系统变量NumEntry、NumEntry2、NumEntry3、EntryText分别统计输入数字和文本。使用键盘输入交互则更为灵活，需要进行程序设计。19/2310.3.4触动型交互设计技巧第十章多媒体教学软件交互界面与交互形式设计10.3教学软件交互设计技巧与实现所谓触动式交互是指在教学软件设计中，因为内容较多，需要分成若干部分，因为界面设计需要，将多个部分内容使用某一能够触动场景中（如书架中书籍、抽屉等），本例经过一个旋转站柜设计，使用触动方式使其旋转，完成交互界面设计。20/2310.3.5拖动型交互设计技巧第十章多媒体教学软件交互界面与交互形式设计10.3教学软件交互设计技巧与实现在第五章中已经讨论了利用拖动型交互设计画面颜色改变，本节中经过透镜成像实例给出了边拖动边绘图方法，很多课件制作者使用这种方法时碰到了“绘图速度太慢，一跟不上拖动速度”难题，其实这并不是“绘图速度太慢”造成，而是过早地再次进入永久条件响应造成，处理方法是让绘图慢一些（而不是快一些），详细做法是在绘图程序中插入一个等候图标（或透显著示图标）。21/2310.3.6自然型交互设计技巧第十章多媒体教学软件交互界面与交互形式设计10.3教学软件交互设计技巧与实现自然型交互是一个仿真界面下交互设计，实现自然型交互，能够经过在Authorware中实现虚拟现实自然使用ActiveX技术实现（严格说不是Authorware编程技巧），同时还能够提升素材设计水平和程序编辑水平实现仿真界面，本节经过播放器界面设计，探讨自然型交互设计技巧。本例中交互设计严格来说既属于自然型交互又属于拖动型交互（曲线拖拽交互）。22/23第十章多媒体教学软件交互界面与交互形式设计10.4本章小结以学习者为中心人