第4章 总体设计_用户界面设计.共37页文档
合集下载
用户界面设计课件
► ►
4.交互设计的目标
►
可用性目标：
可行性：可行性是最常见、最基本的目标，指的是产品是否“可行”。也就 是用户能否通过产品达到意图，还有达到意图的程度有多少。 有效性：有效性指的是用户在执行任务时，系统支持用户的方式是否有效， 从而避免繁琐的操作。
►
►
用户研究的内容
►
用户研究的内容包括: 目标群体的界定 用户心理模型的建构 用户需求分析 任务分析/工作流程分析 工作环境分析等
用户研究的方法
►
1.场景观察法
按照观察的场景条件，场景观察法可以分为“自然场景中的 观察”与“实验室观察”。 按观察者是否直接参与被观察者所从事的活动，场景观察法 可分为“参与式观察”与“非参与式观察”。
人—计算机系统组成
►
软件界面（狭义）
命令语言界面 菜单选择界面 对话框界面 WIMP界面（Windows, Icons, Menus, Pointing Devices）
►
UI：用户界面，User interface。从字面上看是用户与界面2 个组成部分，但实际上还包括用户与界面之间的交互关系。 所以界面设计的工作可分为3个方向，他们分别是：用户研 究与概念设计、交互设计、界面的视觉设计。
►
与界面设计相关的交叉领域
社会学与人类学
►
社会学主要涉及到人机系统对社会结构影响的研究，而人类学则涉及到人机系统 中群体交互活动的研究。
►
在用户研究中的许多研究手段、研究方法，都是从社会学和人类学中借鉴过来 的。比如说上下文调查、焦点小组、用户访谈和用户观察等。
人机工程学里的人机界面► Nhomakorabea►
在人机工程学中，人机界面是人与系统进行交互的操作方式， 即用户与系统互相传递信息的媒介，其中包括信息的输入和 输出。它可分为广义的人机界面和狭义的人机界面。 广义的人机界面：人机系统(Human-Machine System)包括人、机和环境三个组
软件工程4-4界面设计和过程设计
1、界面设计
字符界面设计 字符界面是基于命令行方式的用户界面，是交互式计
算机系统传统的用户界面， 设计时应考虑以下原则：
• 命令的设计应该适合预期用户的专业水平， 针对用户的不同情况，考虑规则。
• 提供风格一致的命令格式结构 。 • 命名名字时应意义明确，简短易记。 • 提供批处理命令和用户创建宏的能力。
1
菜单设计
菜单方式是在显示输出屏幕上提供一组可选的项目， 使用者可以通过键盘、鼠标、图形输入板、触笔等输入设 备选择其中某项。
➢ 菜单的设计应方便用户使用，简单易学。 ➢ 根据显示方式可以分为正文菜单和图形菜单。 ➢ 正文菜单是由若干正文项组成的列表。 ➢ 图形菜单基于符号、图符、色彩或者图画来描述
12
对话框就是显示于屏幕上一个固定或者活动矩形区 域的图形和正文信息，在该框内通常还要求用户输 入实现指定操作的正文或者选项信息。
• 模态对话框：用户必须回答有关信息或 者撤销当前会话。否则对话框不会消失， 系统也不执行其他操作。
• 非模态对话框：仅为用户提供当前操作 或者系统环境的参考信息。不需要用户 回答信息。
5
多窗口界面设计
➢窗口是在显示屏幕上表示一个任务执行状 态或者操作选项的视域(view-port)。
➢在多任务系统中，每个窗口可以看作一个 独立的逻辑屏幕(虚拟屏幕)。一个屏幕中 可以同时打开多个窗口，好像多个屏幕在 同时显示，各窗口之间还可以相互通信。
6
2、过程设计
从软件开发的工程化观点来看，在使用 程序设计语言编制程序以前，需要对所 采用算法的逻辑关系进行分析，设计出 全部必要的过程细节，并给予清晰的表 达。这就是过程设计的任务。
菜单项。
2
菜单类型
根据菜单在屏幕上的出现方式和位置，菜单又可 以分为固定菜单和活动菜单。
字符界面设计 字符界面是基于命令行方式的用户界面，是交互式计
算机系统传统的用户界面， 设计时应考虑以下原则：
• 命令的设计应该适合预期用户的专业水平， 针对用户的不同情况，考虑规则。
• 提供风格一致的命令格式结构 。 • 命名名字时应意义明确，简短易记。 • 提供批处理命令和用户创建宏的能力。
1
菜单设计
菜单方式是在显示输出屏幕上提供一组可选的项目， 使用者可以通过键盘、鼠标、图形输入板、触笔等输入设 备选择其中某项。
➢ 菜单的设计应方便用户使用，简单易学。 ➢ 根据显示方式可以分为正文菜单和图形菜单。 ➢ 正文菜单是由若干正文项组成的列表。 ➢ 图形菜单基于符号、图符、色彩或者图画来描述
12
对话框就是显示于屏幕上一个固定或者活动矩形区 域的图形和正文信息，在该框内通常还要求用户输 入实现指定操作的正文或者选项信息。
• 模态对话框：用户必须回答有关信息或 者撤销当前会话。否则对话框不会消失， 系统也不执行其他操作。
• 非模态对话框：仅为用户提供当前操作 或者系统环境的参考信息。不需要用户 回答信息。
5
多窗口界面设计
➢窗口是在显示屏幕上表示一个任务执行状 态或者操作选项的视域(view-port)。
➢在多任务系统中，每个窗口可以看作一个 独立的逻辑屏幕(虚拟屏幕)。一个屏幕中 可以同时打开多个窗口，好像多个屏幕在 同时显示，各窗口之间还可以相互通信。
6
2、过程设计
从软件开发的工程化观点来看，在使用 程序设计语言编制程序以前，需要对所 采用算法的逻辑关系进行分析，设计出 全部必要的过程细节，并给予清晰的表 达。这就是过程设计的任务。
菜单项。
2
菜单类型
根据菜单在屏幕上的出现方式和位置，菜单又可 以分为固定菜单和活动菜单。
用户界面设计
明确的输入 明确的动作 明确的取消 确认删除 提供反馈 允许编辑 提供复原（Undo） 自由格式 提示输入的范围
4.4 数据显示界面设计
数据显示的规则 • 只显示必要的数据 • 在一起使用的数据显示在一起 • 显示出的数据应与用户执行的任务有关 • 每一屏数据的数量不应超过整个屏幕面积的30%
屏幕布局规则 • 尽量少用代码和缩写 • 多个显示画面，应建立统一格式 • 提供明了的标题、标栏及其它提示信息 • 遵循用户习惯 • 采用颜色、字符大小、下划线、不同字体等方式
允许用户定制界面
§ 5 设计评估
初步设计
创建原型 #n界面
创建原型 #1界面
修改设计
用户评估 界面
设计者研究 评估结果
界面设计评价周期
HELP系统设计
HELP系统设计不属于界面设 计范围，涉及系统整体结构，是 结构级用户友好性设计。
HELP系统设计
帮助方式：
• 操作指南文档
(植入系统、未植入系统)
对话形式:
(1)必须回答式 (2)无需回答式 (3)警告式
对话实现方式:
(1)标准对话 (2)定做式对话
3. 功能键 4. 图符界面 5. 填表界面 6. 命令语言界面 7. 查询语言界面 8. 自然语言界面
2.2.3控制界面的设计
(1)用控制对话选择操作命令 (2)用菜单界面进行控制 (3)用功能键定义操作命令 (4)用图标表示对象或命令
四种模型可
能相差甚远， 界面设计人 员的任务就 是消除这些 差距，导出 一致的界面 表示
2.2 用户界面设计过程
用户界面设计过程包括四种不同的框架：
•用户、任务和环境分析及建模 •界面设计 •界面构造 •界面确认
4.4 数据显示界面设计
数据显示的规则 • 只显示必要的数据 • 在一起使用的数据显示在一起 • 显示出的数据应与用户执行的任务有关 • 每一屏数据的数量不应超过整个屏幕面积的30%
屏幕布局规则 • 尽量少用代码和缩写 • 多个显示画面，应建立统一格式 • 提供明了的标题、标栏及其它提示信息 • 遵循用户习惯 • 采用颜色、字符大小、下划线、不同字体等方式
允许用户定制界面
§ 5 设计评估
初步设计
创建原型 #n界面
创建原型 #1界面
修改设计
用户评估 界面
设计者研究 评估结果
界面设计评价周期
HELP系统设计
HELP系统设计不属于界面设 计范围，涉及系统整体结构，是 结构级用户友好性设计。
HELP系统设计
帮助方式：
• 操作指南文档
(植入系统、未植入系统)
对话形式:
(1)必须回答式 (2)无需回答式 (3)警告式
对话实现方式:
(1)标准对话 (2)定做式对话
3. 功能键 4. 图符界面 5. 填表界面 6. 命令语言界面 7. 查询语言界面 8. 自然语言界面
2.2.3控制界面的设计
(1)用控制对话选择操作命令 (2)用菜单界面进行控制 (3)用功能键定义操作命令 (4)用图标表示对象或命令
四种模型可
能相差甚远， 界面设计人 员的任务就 是消除这些 差距，导出 一致的界面 表示
2.2 用户界面设计过程
用户界面设计过程包括四种不同的框架：
•用户、任务和环境分析及建模 •界面设计 •界面构造 •界面确认
系统界面详细设计
系统界面详细设计1. 引言本文档旨在详细设计系统界面的各个组件和布局。
系统的界面设计是用户与系统之间的交互界面，对于用户来说，一个直观且易于操作的界面设计是至关重要的。
本文将围绕系统的整体布局、组件设计和交互细节展开阐述。
2. 整体布局2.1 导航栏系统的导航栏位于页面的顶部，以水平条形导航的形式展现，方便用户在各个页面之间进行切换。
导航栏中包含系统的Logo和主菜单栏，用于导航到系统的各个功能模块。
2.2 侧边栏系统的侧边栏位于页面的左侧，以垂直列表的形式展现。
侧边栏主要用于显示当前页面的子菜单，以及系统的一些常用功能快捷入口。
用户可以通过侧边栏快速切换子菜单或进行常用功能的操作。
2.3 内容区域系统的内容区域占据了页面的大部分空间，用于展示系统的主要内容。
内容区域的设计应根据具体功能模块的需求进行布局，保证信息的清晰可见，并且提供良好的交互体验。
2.4 底部信息栏系统的底部信息栏位于页面的底部，用于显示一些系统相关的信息，例如版权信息、联系方式等。
底部信息栏的设计应简洁明了，不占用过多的页面空间。
3. 组件设计系统界面的组件设计主要围绕以下几个方面展开：3.1 按钮系统中的按钮是用户最常用的组件之一，用于触发某个操作或切换页面。
按钮的设计应符合用户使用的习惯，并且有明确的交互反馈效果，例如按钮的颜色变化或点击动画。
3.2 表格系统中的表格用于展示大量的数据，表格的设计应考虑到数据的清晰展示和用户的交互体验。
表格的列名和内容应有清晰的对齐和分隔，且可以支持排序、搜索和批量操作等功能。
3.3 表单系统中的表单用于收集用户的输入信息，表单的设计应简洁明了，并且给予用户充分的输入提示和错误提示。
表单的字段应有合理的排列和分组，以便用户能够快速填写表单内容。
3.4 图表系统中的图表用于可视化数据分析和呈现，图表的设计应美观大方，并且具备良好的可交互性。
用户可以通过图表的交互操作切换不同的数据维度和视角，以便更好地理解数据。
用户界面设计
用户特性分析目的是要详细了解所有用户 的技能和经验，以此预测用户对不同界面 设计会做出何种反应，这样在更改界面时， 就能做出正确的判断。
1. 用户类型
外行型 初学型 熟练型 专家型 用户类型并非一成不变。因此，要做 用户特性测量，以此选择适合于大多 数用户使用的界面类型和支持级别。
2. 用户特性度量
界面设计的基本类型
界面设计类型
选用界面形式时，应考虑每种类型的优缺 点。一般从以下六方面考察，进行抉择：
使用的难易程度：对无经验用户，界面 使用难度系数。
学习的难易程度：学习该界面命令和功 能的难度系数。
操作速度：完成一指定操作时界面在操 作步骤、击键和反应时间等方面的效率。
复杂程度：界面提供何种功能、能否用 新方式组合这些功能以增强界面功能。
对话是一种辅助手段，它可用在系统执 行中，给出某种警告/提示信息。其在屏幕 上出现方式与弹出式菜单类似，即瞬时弹 出。与弹出式菜单区别的是，对话框在屏 幕上显示位置由系统所设置的。
有三种对话形式。
必须回答式 对话在屏幕出现时，用户必须给予回答，否 则系统不再做任何其他工作。
无需回答式 对话在屏幕上出现，仅是为了告诉用户参考信 息，用户无需回答。
2 层 ─ 若用户选中某一操作类时，屏幕上 将按垂直方向显示这组操作类的名称。 该层菜单项的内容与应用系统的具体某 项操作有关。
采用固定位置菜单对系统加以控制，其突 出的优点是层次清晰。
浮动位置菜单(弹出式菜单) 特点是：仅当需要时，才被瞬时显示出
来供选用，完成使命后即消失。显示 位置可根据用户操作或当时操作环境 决定。
灵活性
算法的可隐可显性 用户可依需要制定和修改界面方式 能按需求，提供详细程度不同的系统响 应信息 与其它软件系统应有标准的界面
1. 用户类型
外行型 初学型 熟练型 专家型 用户类型并非一成不变。因此，要做 用户特性测量，以此选择适合于大多 数用户使用的界面类型和支持级别。
2. 用户特性度量
界面设计的基本类型
界面设计类型
选用界面形式时，应考虑每种类型的优缺 点。一般从以下六方面考察，进行抉择：
使用的难易程度：对无经验用户，界面 使用难度系数。
学习的难易程度：学习该界面命令和功 能的难度系数。
操作速度：完成一指定操作时界面在操 作步骤、击键和反应时间等方面的效率。
复杂程度：界面提供何种功能、能否用 新方式组合这些功能以增强界面功能。
对话是一种辅助手段，它可用在系统执 行中，给出某种警告/提示信息。其在屏幕 上出现方式与弹出式菜单类似，即瞬时弹 出。与弹出式菜单区别的是，对话框在屏 幕上显示位置由系统所设置的。
有三种对话形式。
必须回答式 对话在屏幕出现时，用户必须给予回答，否 则系统不再做任何其他工作。
无需回答式 对话在屏幕上出现，仅是为了告诉用户参考信 息，用户无需回答。
2 层 ─ 若用户选中某一操作类时，屏幕上 将按垂直方向显示这组操作类的名称。 该层菜单项的内容与应用系统的具体某 项操作有关。
采用固定位置菜单对系统加以控制，其突 出的优点是层次清晰。
浮动位置菜单(弹出式菜单) 特点是：仅当需要时，才被瞬时显示出
来供选用，完成使命后即消失。显示 位置可根据用户操作或当时操作环境 决定。
灵活性
算法的可隐可显性 用户可依需要制定和修改界面方式 能按需求，提供详细程度不同的系统响 应信息 与其它软件系统应有标准的界面
第4章 总体设计_用户界面设计
5.14.2 一般交互原则
• • • • •
（1）一致性 （2）提供有意义的反馈 （3）执行有较大破坏性的动作前要求确认 （4）在数据录入上允许取消大多数操作 （5）减少在动作间必须记忆的信息数量
4.`4.2 一般交互原则
• （5）减少在动作间必须记忆的信息数量 • （6）在对话、移动和思考中提高效率。 • （7）允许用户非恶意错误，系统应保护自 己不受致命作物的破坏。 • （8）按功能对动作分类，并按此排列屏
4.15.2 菜单的设计
• 1）. 快捷键的设计 分类
面向事务的:
快捷键
Ctrl-D Ctrl-F Ctrl-I Ctrl-N Ctrl-S Ctrl-O Ctrl-R Ctrl-C Ctrl-H Ctrl-P Ctrl-V Ctrl-W Ctrl-X Ctrl-Tab Ctrl-Esc Ctrl-F4 Alt-F4 Alt-Tab Enter Esc Shift-F1
第4章详细设计_用户界面设计
● 用户与界面分类 ● 用户界面的设计思想（设计目标、友好的人机界 特征、设计思想4） ● 用户友好界面的风格分析 ● 用户界面的设计原则
● 用户界面设计方法
4.12
•
• • • •
用户界面的设计思想
用户界面的设计目标是：
（1）增加应用系统可用性； （2）界面友好化。 所以友好的人机界应该至少具备以下特征： (1)操作简单，易学，易掌握；
（1）初级用户 ： 第一次使用或使用次数较少，不要求高效，需要容易 使用，操作简单，只需要基本功能来完成简单的任务； （2）中间用户 ： 使用相对频繁，任务范围还不涉及高级的 功能，不是专业操作人员，但未来可能成为专业用户； （3）高级用户（专业用户，忠实用户） ： 曾熟练操作以前 的版本，熟悉高级功能， 专业从事人员，任务时间紧迫， 要求高效的操作 .
软件工程第四章
4.3.2、面向数据结构的设计方法 、
2、Jackson方法 (1) 分析并确定输入数据和输出数据的逻辑结构， 并用Jackson 图描绘这些数据结构。 (2) 找出输入数据结构和输出数据结构中有对应关 系的数据单元。
4.3.2、面向数据结构的设计方法 、
2、Jackson方法 (3) 用下述三条规则导出描绘程序结构的Jackson 图： ① 为每对有对应关系的数据单元，按照它们在数据结构图 中的层次在程序结构图的相应层次画一个处理框； ② 根据输入数据结构中剩余的每个数据单元所处的层次， 在程序结构图的相应层次分别为它们画上对应的处理框； ③ 根据输出数据结构中剩余的每个数据单元所处的层次， 在程序结构图的相应层次分别为它们画上对应的处理框。
4.2.2、模块独立性 、
1、耦合性 (4)内容耦合：出现下列情况之一就认为是 内容耦合：一个模块访问另一个模块的内 部数据；一个模块不通过正常入口而转到 另一个模块内部；两个模块有一部分程序 代码重叠；一个模块有多个入口。
4.2.2、模块独立性 、
1、耦合性 对于模块设计，尽量使用数据耦合，少用 控制耦合，限制公共环境耦合的范围，完 全不用内容耦合
4.3.2、面向数据结构的设计方法 、
面向数据结构的设计方法就是用数据结构作为程序 设计的基础。这种方法的最终目标是得出对程序处 理过程的描述，即在完成了软件结构设计之后，可 以使用面向数据结构的方法来设计每个模块的处理 过程。
4.3.2、面向数据结构的设计方法 、
1、Jackson图 (1) 逻辑数据结构 (2) Jackson图的优点 (3) Jackson图与层次方框图的比较
4.2.3、软件结构设计 、
软件结构图，是Yourdon 提出的进行软件 结构设计的有力工具。 主要的模块：传入模块、传出模块、变换 模块和协调模块。
《用户界面设计》PPT课件
主菜单 下拉菜单
子菜单
下拉式菜单 弹出式菜单
华侨大学
9.1.1 下拉式菜单设计
菜单通过菜单编辑器进行编辑
菜单属性设置区
编辑区
菜单项显示区
华侨大学
9.1.1 下拉式菜单设计
例 9-1 设计如图9-3所示的窗体，通过选择 菜单实现窗体中诗词文字的颜色修改（红色、 绿色、蓝色）和字型修改（加粗、加下划 线）。
MaxButton
MinButton
False
False
取消最大化按钮
取消最小化按钮
华侨大学
9.2.2自定义对话框
例如，图9-28是Visual Basic 6.0编辑菜单 中的“查找”对话框，它有4个命令按钮， 没有最大化和最小化按钮，也没有控制菜单 按钮，不能改变窗口的大小。
图9-28“查找”对话框
菜单栏与工具栏概述
菜单栏和工具栏 是Windows界面的 菜单栏 工具栏 重要组成部分， 几乎所有的应用 软件都是通过菜 单栏和工具栏来 实现各种操作的。 应用程序中菜单 栏和工具栏的位 置如图 9-1所示。
图 9-1菜单栏和工具栏
华侨大学
菜单栏与工具栏概述
VB的菜单分成下拉式菜单和弹出式菜单两种 基本类型。单击菜单栏所显示的是下拉式菜单， 而在操作时单击鼠标右键后显示的菜单是弹出 式菜单。
华侨大学
9.3 多重窗体的创建与操作
多重窗体是指一个应用程序中有多个并列 的普通窗体，每个窗体可以有自己的界面 和程序代码，完成不同的功能，其创建过 程如下： 1. 添加窗体 2. 设置启动对象 3. 与窗体相关的方法 4. 不同窗体间数据的存取
华侨大学
9.3 多重窗体的创建与操作
例9-5 编写一个打字游戏程序，具有两个窗体， 第一个窗体选择游戏难度，第二个窗体是打字 游戏的主界面，程序运行界面如图9-29和图 9-30所示。程序具有检测用户的输入，以及计 算正确的输入字符数，总字符数和打字正确率 的功能。
子菜单
下拉式菜单 弹出式菜单
华侨大学
9.1.1 下拉式菜单设计
菜单通过菜单编辑器进行编辑
菜单属性设置区
编辑区
菜单项显示区
华侨大学
9.1.1 下拉式菜单设计
例 9-1 设计如图9-3所示的窗体，通过选择 菜单实现窗体中诗词文字的颜色修改（红色、 绿色、蓝色）和字型修改（加粗、加下划 线）。
MaxButton
MinButton
False
False
取消最大化按钮
取消最小化按钮
华侨大学
9.2.2自定义对话框
例如，图9-28是Visual Basic 6.0编辑菜单 中的“查找”对话框，它有4个命令按钮， 没有最大化和最小化按钮，也没有控制菜单 按钮，不能改变窗口的大小。
图9-28“查找”对话框
菜单栏与工具栏概述
菜单栏和工具栏 是Windows界面的 菜单栏 工具栏 重要组成部分， 几乎所有的应用 软件都是通过菜 单栏和工具栏来 实现各种操作的。 应用程序中菜单 栏和工具栏的位 置如图 9-1所示。
图 9-1菜单栏和工具栏
华侨大学
菜单栏与工具栏概述
VB的菜单分成下拉式菜单和弹出式菜单两种 基本类型。单击菜单栏所显示的是下拉式菜单， 而在操作时单击鼠标右键后显示的菜单是弹出 式菜单。
华侨大学
9.3 多重窗体的创建与操作
多重窗体是指一个应用程序中有多个并列 的普通窗体，每个窗体可以有自己的界面 和程序代码，完成不同的功能，其创建过 程如下： 1. 添加窗体 2. 设置启动对象 3. 与窗体相关的方法 4. 不同窗体间数据的存取
华侨大学
9.3 多重窗体的创建与操作
例9-5 编写一个打字游戏程序，具有两个窗体， 第一个窗体选择游戏难度，第二个窗体是打字 游戏的主界面，程序运行界面如图9-29和图 9-30所示。程序具有检测用户的输入，以及计 算正确的输入字符数，总字符数和打字正确率 的功能。