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