第4章-总体设计-用户界面设计课件.ppt

1、软件工程软件工程E-mail:第4章 总体设计_用户界面设计 用户与界面分类用户与界面分类 用户界面的设计思想用户界面的设计思想 用户友好界面的风格分析用户友好界面的风格分析 用户界面的设计原则用户界面的设计原则 用户界面设计方法用户界面设计方法第4章总体设计_用户界面设计 4.11 4.11 用户与界面分类用户与界面分类 1 1用户类型用户类型 （初级、中间、高级用户初级、中间、高级用户 ）（1 1）初级用户初级用户 ：第一次使用或第一次使用或使用次数较少使用次数较少，不要求高效，需要容易，不要求高效，需要容易使用，操作简单，只需要基本功能来完成简单的任务；使用，操作简单，只需要基本功能来完

2、成简单的任务；（2 2）中间用户中间用户 ：使用使用相对频繁相对频繁，任务范围还不涉及高级的，任务范围还不涉及高级的功能，不是专业操作人员，但未来可能成为专业用户；功能，不是专业操作人员，但未来可能成为专业用户；（3 3）高级用户高级用户（专业用户，忠实用户）（专业用户，忠实用户）：曾熟练操作以前曾熟练操作以前的版本，的版本，熟悉高级功能熟悉高级功能，专业从事人员，任务时间紧迫，专业从事人员，任务时间紧迫，要求高效的操作要求高效的操作.第4章详细设计_用户界面设计 用户与界面分类用户与界面分类 用户界面的设计思想（用户界面的设计思想（设计目标、友好的人机界设计目标、友好的人机界 特征、特征、设

3、计设计思想思想4 4）用户友好界面的风格分析用户友好界面的风格分析 用户界面的设计原则用户界面的设计原则 用户界面设计方法用户界面设计方法用户界面的设计目标是：用户界面的设计目标是：（1）增加应用）增加应用系统可用性系统可用性；（2）界面）界面友好化友好化。所以友好的人机界应该至少具备以下特征：所以友好的人机界应该至少具备以下特征：(1)操作操作简单简单，易学，易掌握；，易学，易掌握；(2)界面界面美观美观，操作舒适；，操作舒适；(3)快速快速反应反应，响应合理；，响应合理；(4)用语用语通俗通俗，语义一致。，语义一致。4.12 用户界面的设计思想界面设计界面设计思想是思想是（以用户为中心、非

4、精确、高带宽、多通道）以用户为中心、非精确、高带宽、多通道）(1)(1)以用户为中心以用户为中心:以用户对以用户对界面的需求变化为出发点界面的需求变化为出发点，使用户界面的外在形，使用户界面的外在形式和内部机制能符合不同用户的需要，这就是以用户为中心的式和内部机制能符合不同用户的需要，这就是以用户为中心的设计思想。设计思想。(2)(2)非精确非精确:精确交互技术是指能用一种技术来完全说明用户交互目的精确交互技术是指能用一种技术来完全说明用户交互目的的交互方式，的交互方式，键盘和鼠标器键盘和鼠标器均需用户精确输入。均需用户精确输入。界面设计界面设计思想是思想是：(3)(3)高带宽高带宽:现在计算

5、机输出的内容已经可以快速、连续地显示彩色图现在计算机输出的内容已经可以快速、连续地显示彩色图像，其信息量非常大而人们的输入却还是使用键盘一个又一个像，其信息量非常大而人们的输入却还是使用键盘一个又一个地敲击，因而，计算机的地敲击，因而，计算机的输入带宽输入带宽是很低的。是很低的。(4)(4)多通道多通道 :多通道界面旨在充分利用多通道界面旨在充分利用一个以上的感觉和运动通道的互一个以上的感觉和运动通道的互补特性补特性来捕捉用户的意向，从而增进人机交互中的自然性。来捕捉用户的意向，从而增进人机交互中的自然性。人的感觉通道有视觉、听觉、触觉、嗅觉和平衡等；人的运人的感觉通道有视觉、听觉、触觉、嗅觉

6、和平衡等；人的运动通道有手、嘴、眼、头、足及身体等。动通道有手、嘴、眼、头、足及身体等。第4章 详细设计_用户界面设计 用户与界面分类用户与界面分类 用户界面的设计思想用户界面的设计思想 用户友好界面的风格分析（命令语言、菜单选项用户友好界面的风格分析（命令语言、菜单选项、点选界面（点选界面（WIMP）、自然语言使用、布）、自然语言使用、布局合理化原则）局合理化原则）用户界面的设计原则用户界面的设计原则 用户界面设计方法用户界面设计方法 1 1命令语言：命令语言：在图形显示、在图形显示、鼠标、鼠标、高速工作站等技术出现之高速工作站等技术出现之前前 现实可行的现实可行的界面界面方式方式只能是命令

7、和询问方式只能是命令和询问方式，通信完全以正文形式并通信完全以正文形式并 通过通过用户命令和用户用户命令和用户对系统询问的响应来完成。对系统询问的响应来完成。2 2菜单选项菜单选项 慢。慢。4.13 用户友好界面的风格分析 3 3面向窗口的面向窗口的点选界面点选界面:此类界面亦称此类界面亦称WIMPWIMP界面界面，即窗口、即窗口、图标、图标、菜单、菜单、指示器四位一体，形成桌面。指示器四位一体，形成桌面。4 4自然语言自然语言使用使用:自然语言与应用软件进行通信自然语言与应用软件进行通信，把第三代界面技，把第三代界面技术与术与超文本、多任务概念超文本、多任务概念结合起来，使用户可同时结合起来

8、，使用户可同时执行多个任务执行多个任务(以用户的观点以用户的观点)。4.13 用户友好界面的风格分析第4章 详细设计_用户界面设计 用户与界面分类用户与界面分类 用户界面的设计思想用户界面的设计思想 用户友好界面的风格分析用户友好界面的风格分析 用户界面的设计原则（用户界面的设计原则（设计原则设计原则9 9 、交互原则7、信 息显示原则、数据输入原则 用户界面设计方法用户界面设计方法 4.14.1 4.14.1 用户友好界面的设计原则用户友好界面的设计原则 （1)1)在在同一用户界面中同一用户界面中，所有的，所有的菜单选择、命令输菜单选择、命令输入、数据显示和其他功能入、数据显示和其他功能应保

9、持风格的一致性。应保持风格的一致性。（2)2)对所有可能造成对所有可能造成损害的动作损害的动作，坚持要求，坚持要求用户确用户确认认 。（3)3)用户界面应能对用户界面应能对用户的决定做出及时的响应用户的决定做出及时的响应，提高对话、移动和思考的效率，提高对话、移动和思考的效率，最大可能的减少击最大可能的减少击键次数键次数，缩短鼠标移动距离缩短鼠标移动距离，避免使用户产生无所，避免使用户产生无所适从的感觉。适从的感觉。（4)4)人机界面应该提供上下文敏感的求助系统人机界面应该提供上下文敏感的求助系统，让，让用户及时获得帮助，尽量用用户及时获得帮助，尽量用简短的动词和动词简短的动词和动词短语短语提

10、示命令。提示命令。4.14 4.14 用户界面的设计原则用户界面的设计原则（5)5)合理划分并高效使用显示屏。合理划分并高效使用显示屏。（6)6)保证保证信息显示方式与数据输入方式信息显示方式与数据输入方式的的协调一致协调一致，尽量减少，尽量减少用户输入的动作用户输入的动作，隐藏当前状态下不可，隐藏当前状态下不可选用的命令，允许用户选用的命令，允许用户自选输入方式自选输入方式，能够删除无，能够删除无现实意义的输入，允许现实意义的输入，允许用户控制交互过程用户控制交互过程。（7 7）坚持坚持图形用户界面（图形用户界面（GUIGUI）设计原则）设计原则，界面直，界面直观、对观、对用户透明用户透明

11、。（8 8）界面设计员应该明白软件中）界面设计员应该明白软件中用户用户是所有处理的是所有处理的核心，不应该有核心，不应该有应用程序来决定处理过程应用程序来决定处理过程，所以用，所以用户界面应当由户界面应当由用户来控制应用用户来控制应用如何工作、如何响应如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给，而不是由开发者按自己的意愿把操作流程强加给用户。用户。（9 9）界面设计必须经过）界面设计必须经过确认才能完成确认才能完成。4.14 4.14 用户界面的设计原则用户界面的设计原则5.14.2 一般交互原则一般交互原则（1 1）一致性一致性（2 2）提供有）提供有意义的反馈意义的反馈

12、（3 3）执行有较大破坏性的）执行有较大破坏性的动作前要求确认动作前要求确认（4 4）在数据录入上允许）在数据录入上允许取消大多数操作取消大多数操作（5 5）减少在动作间必须记忆的）减少在动作间必须记忆的信息数量信息数量4.4.2 一般交互原则一般交互原则（5 5）减少减少在动作间必须记忆的在动作间必须记忆的信息数量信息数量（6 6）在对话、移动和思考中）在对话、移动和思考中提高效率提高效率。（7 7）允许）允许用户非恶意错误用户非恶意错误，系统应保护自，系统应保护自 己不受己不受致命作物的破坏致命作物的破坏。（8 8）按功能对）按功能对动作分类动作分类，并按此，并按此排列屏排列屏 幕布局幕布

13、局，设计者应那里提高命令和，设计者应那里提高命令和 动作组织的内聚性。动作组织的内聚性。（9 9）提供语境相关的）提供语境相关的帮助机制帮助机制。（1 1）只显示与当前）只显示与当前用户语境环境有关用户语境环境有关信息信息（2 2）不要）不要用数据将用户包围用数据将用户包围，使用便于用，使用便于用户迅速吸取信息的方式表现信息；户迅速吸取信息的方式表现信息；（3 3）使用）使用一致的标记一致的标记、标准标准缩写和缩写和 可预测的颜色可预测的颜色，显示信息的含义应该，显示信息的含义应该非常明确，用户不必再参考其它信息源；非常明确，用户不必再参考其它信息源；（4 4）产生有意义的产生有意义的出错信息

14、出错信息。4.14.3 4.14.3 信息显示原则信息显示原则（5 5）使用使用缩进和文本来辅助缩进和文本来辅助理解；理解；（6 6）使用使用窗口分隔控件分隔不同类型信窗口分隔控件分隔不同类型信息息（7 7）高效地高效地使用显示器的显示空间使用显示器的显示空间。4.14.3 4.14.3 信息显示原则信息显示原则（1 1）输入量最小。尽量）输入量最小。尽量减少用户输入动作减少用户输入动作的数量；的数量；（2 2）信息显示和数据输入的一致性信息显示和数据输入的一致性；（3 3）输入）输入延迟最低延迟最低，交互灵活；，交互灵活；（4 4）屏蔽当前动作的语境中）屏蔽当前动作的语境中不用的按键不用的按

15、键；4.14.4 数据输入原则数据输入原则（5 5）让用户）让用户控制交互流控制交互流，用户可以跳过不，用户可以跳过不必要的动作、改变所需动作的顺序（如果必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从允许的话）以及在不退出系统的情况下从错误状态中恢复；错误状态中恢复；（6 6）为所有输入的动作）为所有输入的动作提供帮助提供帮助；（7 7）消除）消除冗余输入冗余输入。（8 8）输入数据早）输入数据早校验校验；（9 9）输入步骤）输入步骤少转换少转换，输入过程简单化。，输入过程简单化。4.14.4 数据输入原则数据输入原则4.14.5 布局合理化原则布局合理化原则 应注意

16、在一个窗口内部所有应注意在一个窗口内部所有控件的布局和信息组控件的布局和信息组织的艺术织的艺术性，使得用户界面美观。性，使得用户界面美观。在一个窗口中按在一个窗口中按tab键，移动聚焦的顺序不能杂乱键，移动聚焦的顺序不能杂乱无章，无章，tab 的顺序是的顺序是先从上至下，再从左至右。先从上至下，再从左至右。一屏中首先应输入的和重要信息的控件在一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前，顺序中应当靠前，位置也应放在窗口上较醒目的位置。位置也应放在窗口上较醒目的位置。布局力求布局力求简洁、有序、易于操作简洁、有序、易于操作。第4章总体设计_用户界面设计 用户与界面分类用户与界面分类

17、用户界面的设计思想用户界面的设计思想 用户友好界面的风格分析用户友好界面的风格分析 用户界面的设计原则用户界面的设计原则 用户界面设计方法（用户界面设计方法（界面一致性、菜单的设计、用户帮助设施、出错信息和警告基于Web的用户界面设计）4.15 用户界面设计方法用户界面设计方法 4.15.1 4.15.1 界面一致性界面一致性（1 1）标签提示标签提示 ；（2 2）日期日期 ；（3 3）对齐方法对齐方法.（4 4）分辨率分辨率为。为。（5 5）字体）字体缺省为宋替、五号、黑色缺省为宋替、五号、黑色。（6 6）底色缺省）底色缺省采用灰色采用灰色。4.15.2 菜单的设计菜单的设计1）.快捷键的设

18、计快捷键的设计分类分类 快捷键快捷键功能功能面向事务的面向事务的:Ctrl-D Ctrl-D Ctrl-F Ctrl-F Ctrl-I Ctrl-I Ctrl-N Ctrl-N Ctrl-S Ctrl-S 删除删除寻找寻找插入插入新记录新记录保存保存查询查询/列表列表:Ctrl-O Ctrl-O Ctrl-R Ctrl-R其它其它:Ctrl-C Ctrl-C Ctrl-H Ctrl-H Ctrl-P Ctrl-P Ctrl-V Ctrl-V Ctrl-W Ctrl-W Ctrl-X Ctrl-X 拷贝拷贝帮助帮助打印打印粘贴粘贴关闭关闭剪切剪切MS WindowsMS Windows保留保留键

19、键:Ctrl-TabCtrl-Tab Ctrl-Esc Ctrl-Esc Ctrl-F4 Ctrl-F4 Alt-F4 Alt-F4 Alt-Tab Alt-Tab Enter Enter Esc Esc Shift-F1 Shift-F1 下一窗口下一窗口任务列表任务列表关闭窗口关闭窗口结束应用结束应用下一应用下一应用缺省按钮缺省按钮/确认操作确认操作取消按钮取消按钮/取消操作取消操作上下文相关帮助上下文相关帮助 2）工具栏的设计工具栏的设计 工具栏工具栏可以让用户更方便地使用软件，为软件操可以让用户更方便地使用软件，为软件操作提供了一种快捷方式。其设计要简单易用，并作提供了一种快捷方式。其

20、设计要简单易用，并且应符合用户的使用习惯。且应符合用户的使用习惯。3）对话框的设计对话框的设计 对话框是最常见的对话框是最常见的人机交互界面人机交互界面，它既可以作为，它既可以作为系统显示提示或警告信息的窗口，又可以作为人系统显示提示或警告信息的窗口，又可以作为人机交流的窗口。机交流的窗口。鼠标与键盘对应原则鼠标与键盘对应原则 向导使用原则向导使用原则 系统响应时间系统响应时间 响应时间长度响应时间长度 界面设计界面设计0-10 秒秒鼠鼠 标标 显显 示示 成成 为为 沙沙 漏漏10 到到18 秒秒 由微帮助来显示处理进度由微帮助来显示处理进度18 秒秒 以以 上上 显示处理窗口，或显示处理窗

21、口，或显示进度条显示进度条一个长时间的处理完成时一个长时间的处理完成时 应给予完成警告信息应给予完成警告信息4.15.3 用户帮助设施用户帮助设施 1）进行系统交互时，提供进行系统交互时，提供部分帮助功能部分帮助功能，即：提供主，即：提供主要操作的帮助。要操作的帮助。2）用户可以通过帮助菜单、用户可以通过帮助菜单、F1键和帮助按钮键和帮助按钮（如果有（如果有的话）访问帮助。的话）访问帮助。3）表示帮助时根据需要表示帮助时根据需要提供三种方式的选择提供三种方式的选择：另一个：另一个窗体、微帮助和指出参考某个文档窗体、微帮助和指出参考某个文档。4）用户如何回到正常用户如何回到正常交互方式有两种选择

22、交互方式有两种选择：返回键和功能键返回键和功能键。5）帮助信息的构造：采用帮助信息的构造：采用分层式帮助分层式帮助。6）微帮助提供：由微帮助提供：由状态栏提供，或控件上的提示文本状态栏提供，或控件上的提示文本。4.15.4 出错信息和警告出错信息和警告 1）信息以用户可以理解的信息以用户可以理解的术语术语描述；描述；2）信息应提供如何从错误中信息应提供如何从错误中恢复的建设性恢复的建设性意见；意见；3）信息应指出错误可能导致那些不量后果，以便用户信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；检查是否出现了这些情况或帮助用户进行改正；4）信息应伴随着视觉上

23、的提示，如信息应伴随着视觉上的提示，如特殊的图像、颜色特殊的图像、颜色或信息闪烁。或信息闪烁。5）信息不能带有判断色彩，即任何情况下不能指责用信息不能带有判断色彩，即任何情况下不能指责用户户4.15.5 输入界面设计输入界面设计 输入界面设计的原则输入界面设计的原则 (1)可靠性高、容错性好可靠性高、容错性好。(2)操作简单操作简单，易学易用。，易学易用。(3)风格一致风格一致，布局合理。，布局合理。4.15.6 基于基于Web的用户界面设计的用户界面设计 1基于HTML 2脚本语言总之，用户界面设计要以人为本。用户界面设计迭代过程分析和理解分析和理解用户活动用户活动在纸上设计在纸上设计原型原

24、型与最终用户与最终用户一起评价一起评价设计原型设计原型产生动态产生动态设计原型设计原型与最终用户与最终用户一起评价一起评价实现最终的实现最终的用户界面用户界面可执行原型可执行原型二、用户界面的交互性 交互性是用户界面最重要的特性，按照交互形式分为5类：主要优点主要优点主要缺点主要缺点应用实例应用实例直接操纵直接操纵快速直观，容易快速直观，容易学习学习实现较难，适于对象和实现较难，适于对象和任务有视觉隐喻任务有视觉隐喻视频游戏视频游戏CAD系统系统菜单选择菜单选择避免用户错误只避免用户错误只需很少键盘输入需很少键盘输入对有经验的用户操作较对有经验的用户操作较慢慢,菜单项多时操纵复杂菜单项多时操纵

25、复杂一般用途的系统一般用途的系统表格填写表格填写简单的数据人口简单的数据人口易学习易学习占较多的屏幕空间占较多的屏幕空间库存控制库存控制个人贷款处理个人贷款处理命令语言命令语言强大灵活强大灵活较难学习较难学习错误管理差错误管理差操作系统，图书馆操作系统，图书馆信息检索系统信息检索系统自然语言自然语言适合偶然用户适合偶然用户容易控制容易控制需要键入的太多，自然需要键入的太多，自然语言理解的系统不可靠语言理解的系统不可靠时刻表系统时刻表系统,WWW信息检索系统信息检索系统 在用户界面中，加入丰富多彩的画面，将能够更加形象地为用户提供有用的信息，在用户界面中，加入丰富多彩的画面，将能够更加形象地为用

26、户提供有用的信息，以达到可视化的目的。主要的处理操作有：图象的隐蔽和再现、屏幕滚动和图案显以达到可视化的目的。主要的处理操作有：图象的隐蔽和再现、屏幕滚动和图案显示、动画等。示、动画等。图 形 对话框是在需要时，显示在屏幕上一个矩形区域内的对话框是在需要时，显示在屏幕上一个矩形区域内的图形和正文信息。以实现系统和用户之间的通信。图形和正文信息。以实现系统和用户之间的通信。其显示方式与弹出式菜单类似，即瞬时弹出。其显示方式与弹出式菜单类似，即瞬时弹出。有三种对话形式：有三种对话形式：必须回答式如图1所示无需无需回答式 如图2所示警告式 如图3所示图1 必须回答式对话框图2 无需回答式对话框图3

27、警告式对话框4 4、窗、窗口（口（window）图形学中称为视图区（图形学中称为视图区（Viewport），视为虚拟），视为虚拟屏幕。一个实用窗口，可包含部件：屏幕。一个实用窗口，可包含部件：菜单区（菜单区（menu bar）图标区（图标区（icon bar）标题区（标题区（title bar）移动区（移动区（move bar）大小区（大小区（size bar）退出区（退出区（quit bar）用户工作区（用户工作区（users work bar）横向滚动区（横向滚动区（horizontal scroll bar）纵向滚动区（纵向滚动区（vertical scroll bar）窗 口窗口举例 数据数据I/OI/O界面，是系统的重要组成部分。主要从输界面，是系统的重要组成部分。主要从输入速度和减少出错率考虑。入速度和减少出错率考虑。1.尽量减少输入工作量尽量减少输入工作量 对相同内容输入设置默认值对相同内容输入设置默认值 自动填入自动填入 列表选择或点击选择列表选择或点击选择2.输入屏幕与输入格式匹配输入屏幕与输入格式匹配 即屏幕显示按照数据使用频率、重要性、次序等组织。即屏幕显示按照数据使用频率、重要性、次序等组织。四、数据四、数据I/OI/O界面设计界面设计3.数据输入的一般规则数据输入的一般规则确定输入确定输入 交互动作交互动作确定删除确定删除 提供反馈提供反馈