多媒体教学软件交互界面与交互形式设计PPT课件

1 2 3 10 1 1交互界面基本概念 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 3 交互设计与界面设计交互设计不等同与界面设计 交互设计更加注重教学软件和学习者行为上的交互以及交互的过程 这一过程可以不倚赖于界面 声音指令也是交互 界面主要指画面的素材组成 结构布局 风格特征等 界面的作用是支撑有效的交互 反之 交互行为是界面设计的约束与参照 当交互设计完成时 就提出了对界面设计的要求 在进行界面设计时需要明确界面是为交互行为服务的 不可以阻碍交互行为 4 10 1 2界面设计的工作流程 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 1 结构设计StructureDesign结构设计也成概念设计 ConceptualDesign 是界面设计的骨架 通过对用户研究和任务分析 制定出产品的整体架构 结构设计类似与教学软件中的界面脚本设计 可以通过基于纸质的设计方案供集体讨论与修改 在结构设计中 需要完成目录体系设计以及逻辑分类和语词定义工作 并力求不在之后的工作中进行修改 5 10 1 2界面设计的工作流程 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 2 交互设计InteractiveDesign交互设计的基本原则如下 有清楚的错误提示 让用户用尽可能少的操作控制界面 需要同时在画面上出现多个层次的目录结构 为同一种交互提供多种操作可能性 允许中断 使用学习者易懂的文字与图示 避免技术术语 提高交互反馈速度 避免学习者等待 6 10 1 2界面设计的工作流程 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 方便退出 灵活实用的导航功能 既可让用户知道自己当前的位置 又方便其自由跳转 3 视觉设计VisualDesign原则概括如下 1 界面清晰简约 在技术允许的情况下可让用户选择或定制界面 完善视觉的清晰度 图片 文字的布局和隐喻不要让用户去猜 7 10 1 2界面设计的工作流程 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 2 使用图形化设计 提供图形符号 尽量减少文字交互提示 图形符号的使用尽量符合日常生活的习惯 同样功能用同样的图形 3 界面协调一致 界面布局设计的协调一致 如退出按钮的位置设计等 色彩与内容 整体软件不超过5个色系 近似的颜色表示近似的意思 8 10 1 3教学软件交互界面设计原则 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 1 操作简便 1 安装运行简便 2 菜单简明合理 3 内容简洁明了 4 提供帮助信息2 布局合理前后一致 1 恰当布置 主体突出 2 重点集中 视点明确 3 美观大方 前后一致 9 10 1 3教学软件交互界面设计原则 第十章多媒体教学软件交互界面与交互形式设计10 1人机交互界面概述 3 色彩搭配协调 1 需要表现对比的颜色搭配 2 需要表现调和的颜色搭配 3 使用配色技巧4 界面组接流畅 1 界面切换自然 2 增加画面间的过渡 3 界面间的组接设计应遵循学习规律 10 11 10 2 2主界面结构设计 第十章多媒体教学软件交互界面与交互形式设计10 2教学软件界面结构设计 一 分屏式设计在这里制作一种向前和向后翻页的效果 当点击鼠标左键的时候将继续向下翻页 当点击鼠标右键的时候将后退翻页 在程序的开始先用一个显示图标显示说明性的文字 然后用按钮交互制作一个开始按钮 最后用框架图标来实现翻页 通过这个程序主要掌握显示图标的使用方法 擦除图标的使用方法 交互图标 框架图标以及导航图标的使用方法及其它们属性对话框的设置 12 10 2 2主界面结构设计 第十章多媒体教学软件交互界面与交互形式设计10 2教学软件界面结构设计 二 分区式设计下面介绍一种使用分区式交互编写的程序 这个程序主要时根据用户填写的数据进行画线 这些数据包括线的长度 线的宽度和线的颜色 这里演示使用RGB值表示 程序的开始使用一个显示图标来显示程序的背景 然后用文本响应交互来输入数值 并且应用读取数字的系统变量来将输入的数字赋值给自定义的变量 在这个过程中用按钮交互来控制是否改变画线的颜色和是否画线和从新画线 通过本程序掌握显示图标的使用方法 交互图标的使用 文本响应 按钮响应的属性的设置 以及系统变量的使用等 13 10 2 2主界面结构设计 第十章多媒体教学软件交互界面与交互形式设计10 2教学软件界面结构设计 三 分屏分区混合式设计在本例中点击相应按钮的话 将在整个屏幕中出现和这个按钮相关的下一级选项 当需要进入另一层菜单的时候需要返回上一层的菜单后在点击要进入项的按钮 在整个界面变换的过程中还要出现一种向下滚屏的效果 这个程序主要使用显示图标来实现内容的显示 用交互图标来控制进入的二级菜单等一系列用户可以执行的操作 主要掌握显示图标的使用方法 按钮交互的使用方法 显示过渡效果和擦除过渡效果的设置 等待图标的设置和quit 函数的使用等 14 10 2 3子界面结构设计 第十章多媒体教学软件交互界面与交互形式设计10 2教学软件界面结构设计 一 子界面弹出式平时在使用一些程序的时候经常会遇到弹出对话框的情况 那么如果在编写的程序种也可以弹出对话框的话 那么会使编写的程序更具有实用性 怎样使程序弹出一个对话框呢 在下面的例子中将向大家介绍 这里主要使用的是Authorware中自带的Winapi u32中的Messagebox 这个外部函数 通过本例的学习掌握显示图标的使用方法 按钮交互响应的使用 quit 等系统函数的使用和Messagebox 等外部函数的加载和使用 15 10 2 3子界面结构设计 第十章多媒体教学软件交互界面与交互形式设计10 2教学软件界面结构设计 二 子界面伸出式在使用软件的时候都已经接触过了下拉菜单 下面就像大家介绍一种利用外部函数在Authorware中制作下列菜单的例子 过本例掌握显示图标的使用方法 交互图标中的热区响应方式的使用方法 临时库的创建和使用方法 外部菜单的编写方法以及控制下拉菜单的外部函数的使用方法及其格式 功能 16 10 2 3子界面结构设计 第十章多媒体教学软件交互界面与交互形式设计10 2教学软件界面结构设计 三 子界面拖出式这是一个模拟浮动面板的例子 主要使用了条件响应的方式 来侦测鼠标的动作 然后根据鼠标的动作来执行一些效果 包括拖动 交互和将浮动面板转换乘固定菜单栏等 主要掌握条件响应的使用方法 与鼠标动作有关的一些系统函数与变量的使用 移动图标的使用等 17 18 10 3 2菜单型交互设计技巧 第十章多媒体教学软件交互界面与交互形式设计10 3教学软件交互设计技巧与实现 由于Authorware软件的下拉菜单仅支持一层菜单 想要实现第子菜单功能则需要使用程序设计实现 本例就如何实现实现多层菜单交互进行讨论 由于篇幅有限 本例仅讨论使用热区交互设计三层菜单中一个分支的情况 读者可以推广到一般情况 灵活运用编辑理想的复杂菜单 19 10 3 3输入型交互设计技巧 第十章多媒体教学软件交互界面与交互形式设计10 3教学软件交互设计技巧与实现 在Authorware中 主要通过文本输入和按键交互两种交互方式实现信息的输入 使用文本输入交互方式可以运用系统变量NumEntry NumEntry2 NumEntry3 EntryText分别记录输入的数字和文本 使用键盘输入交互则更为灵活 需要进行程序设计 20 10 3 4触动型交互设计技巧 第十章多媒体教学软件交互界面与交互形式设计10 3教学软件交互设计技巧与实现 所谓触动式交互是指在教学软件设计中 由于内容较多 需要分成若干部分 由于界面设计的需要 将多个部分的内容使用某一可以触动的场景中 如书架中的书籍 抽屉等 本例通过一个旋转的站柜设计 使用触动的方式使其旋转 完成交互界面的设计 21 10 3 5拖动型交互设计技巧 第十章多媒体教学软件交互界面与交互形式设计10 3教学软件交互设计技巧与实现 在第五章中已经讨论了利用拖动型交互设计画面颜色的改变 本节中通过透镜成像的实例给出了边拖动边绘图的方法 很多课件制作者使用这种方法时遇到了 绘图速度太慢 一跟不上拖动速度 的难题 其实这并不是 绘图速度太慢 造成 而是过早地再次进入永久条件响应造成的 解决的方法是让绘图慢一些 而不是快一些 具体做法是在绘图程序中插入一个等待图标 或透明显示图标 22 10 3 6自然型交互设计技巧 第十章多媒体教学软件交互界面与交互形式设计10 3教学软件交互设计技