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

《第4章总体设计用户界面设计课件.ppt》由会员分享，可在线阅读，更多相关《第4章总体设计用户界面设计课件.ppt（37页珍藏版）》请在三一办公上搜索。

1、软件工程,E-mail:,主讲: 徐 晓林,第4章 总体设计_用户界面设计, 用户与界面分类 用户界面的设计思想 用户友好界面的风格分析 用户界面的设计原则 用户界面设计方法,第4章总体设计_用户界面设计,4.11 用户与界面分类1用户类型 （初级、中间、高级用户 ） （1）初级用户 ： 第一次使用或使用次数较少，不要求高效，需要容易使用，操作简单，只需要基本功能来完成简单的任务； （2）中间用户 ： 使用相对频繁，任务范围还不涉及高级的功能，不是专业操作人员，但未来可能成为专业用户； （3）高级用户（专业用户，忠实用户） ： 曾熟练操作以前的版本，熟悉高级功能， 专业从事人员，任务时间紧迫，

2、要求高效的操作 .,第4章详细设计_用户界面设计, 用户与界面分类 用户界面的设计思想（设计目标、友好的人机界 特征、设计思想4） 用户友好界面的风格分析 用户界面的设计原则 用户界面设计方法,用户界面的设计目标是：（1）增加应用系统可用性；（2）界面友好化。所以友好的人机界应该至少具备以下特征：(1)操作简单，易学，易掌握；(2)界面美观，操作舒适；(3)快速反应，响应合理；(4)用语通俗，语义一致。,4.12 用户界面的设计思想,界面设计思想是（以用户为中心、非精确、高带宽、多通道） (1) 以用户为中心: 以用户对界面的需求变化为出发点，使用户界面的外在形式和内部机制能符合不同用户的需要

3、，这就是以用户为中心的设计思想。 (2) 非精确: 精确交互技术是指能用一种技术来完全说明用户交互目的的交互方式，键盘和鼠标器均需用户精确输入。,界面设计思想是：(3) 高带宽: 现在计算机输出的内容已经可以快速、连续地显示彩色图像，其信息量非常大而人们的输入却还是使用键盘一个又一个地敲击，因而，计算机的输入带宽是很低的。 (4)多通道 : 多通道界面旨在充分利用一个以上的感觉和运动通道的互补特性来捕捉用户的意向，从而增进人机交互中的自然性。 人的感觉通道有视觉、听觉、触觉、嗅觉和平衡等；人的运动通道有手、嘴、眼、头、足及身体等。,第4章 详细设计_用户界面设计, 用户与界面分类 用户界面的设

4、计思想 用户友好界面的风格分析（命令语言、菜单选项 、 点选界面（WIMP）、自然语言使用、布局合理化原则） 用户界面的设计原则 用户界面设计方法,1命令语言： 在图形显示、 鼠标、 高速工作站等技术出现之前 现实可行的界面方式只能是命令和询问方式， 通信完全以正文形式并 通过用户命令和用户对系统询问的响应来完成。 2菜单选项 慢。,4.13 用户友好界面的风格分析,3面向窗口的点选界面: 此类界面亦称WIMP界面， 即窗口、 图标、 菜单、 指示器四位一体，形成桌面。 4自然语言使用: 自然语言与应用软件进行通信，把第三代界面技术与超文本、多任务概念结合起来，使用户可同时执行多个任务(以用户

5、的观点)。,4.13 用户友好界面的风格分析,第4章 详细设计_用户界面设计, 用户与界面分类 用户界面的设计思想 用户友好界面的风格分析 用户界面的设计原则（设计原则9 、交互原则7、信 息显示原则、数据输入原则 用户界面设计方法,4.14.1 用户友好界面的设计原则 （1) 在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。 （2) 对所有可能造成损害的动作，坚持要求用户确认 。（3) 用户界面应能对用户的决定做出及时的响应，提高对话、移动和思考的效率，最大可能的减少击键次数，缩短鼠标移动距离，避免使用户产生无所适从的感觉。（4) 人机界面应该提供上下文敏感

6、的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。,4.14 用户界面的设计原则,（5) 合理划分并高效使用显示屏。 （6) 保证信息显示方式与数据输入方式的协调一致，尽量减少用户输入的动作，隐藏当前状态下不可选用的命令，允许用户自选输入方式，能够删除无现实意义的输入，允许用户控制交互过程。（7）坚持图形用户界面（GUI）设计原则，界面直观、对用户透明 。（8）界面设计员应该明白软件中用户是所有处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应用如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。（9）界面设计必须经过确认才能完成。,4

7、.14 用户界面的设计原则,5.14.2 一般交互原则,（1）一致性（2）提供有意义的反馈（3）执行有较大破坏性的动作前要求确认（4）在数据录入上允许取消大多数操作（5）减少在动作间必须记忆的信息数量,4.4.2 一般交互原则,（5）减少在动作间必须记忆的信息数量（6）在对话、移动和思考中提高效率。（7）允许用户非恶意错误，系统应保护自 己不受致命作物的破坏。（8）按功能对动作分类，并按此排列屏 幕布局，设计者应那里提高命令和 动作组织的内聚性。（9）提供语境相关的帮助机制。,（1）只显示与当前用户语境环境有关信息（2）不要用数据将用户包围，使用便于用户迅速吸取信息的方式表现信息；（3）使用一

8、致的标记、 标准缩写和 可预测的颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；（4） 产生有意义的出错信息。,4.14.3 信息显示原则,（5） 使用缩进和文本来辅助理解；（6） 使用窗口分隔控件分隔不同类型信息（7） 高效地使用显示器的显示空间。,4.14.3 信息显示原则,（1）输入量最小。尽量减少用户输入动作的数量；（2）信息显示和数据输入的一致性；（3）输入延迟最低，交互灵活；（4）屏蔽当前动作的语境中不用的按键；,4.14.4 数据输入原则,（5）让用户控制交互流，用户可以跳过不必要的动作、改变所需动作的顺序（如果允许的话）以及在不退出系统的情况下从错误状态中恢复；（6

9、）为所有输入的动作提供帮助；（7）消除冗余输入。 （8）输入数据早校验；（9）输入步骤少转换，输入过程简单化。,4.14.4 数据输入原则,4.14.5 布局合理化原则,应注意在一个窗口内部所有控件的布局和信息组织的艺术性，使得用户界面美观。在一个窗口中按tab键，移动聚焦的顺序不能杂乱无章，tab 的顺序是先从上至下，再从左至右。 一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前， 位置也应放在窗口上较醒目的位置。 布局力求简洁、有序、易于操作。,第4章总体设计_用户界面设计, 用户与界面分类 用户界面的设计思想 用户友好界面的风格分析 用户界面的设计原则 用户界面设计方法（界面一致

10、性、菜单的设计、用户帮助设施、出错信息和警告基于Web的用户界面设计）,4.15 用户界面设计方法,4.15.1 界面一致性（1）标签提示 ； （2）日期 ；（3）对齐方法. （4）分辨率为。（5）字体缺省为宋替、五号、黑色。（6）底色缺省采用灰色。,4.15.2 菜单的设计,1）. 快捷键的设计,2）工具栏的设计工具栏可以让用户更方便地使用软件，为软件操作提供了一种快捷方式。其设计要简单易用，并且应符合用户的使用习惯。3）对话框的设计对话框是最常见的人机交互界面，它既可以作为系统显示提示或警告信息的窗口，又可以作为人机交流的窗口。,鼠标与键盘对应原则向导使用原则 系统响应时间,4.15.3

11、用户帮助设施,1） 进行系统交互时，提供部分帮助功能，即：提供主要操作的帮助。2） 用户可以通过帮助菜单、F1键和帮助按钮（如果有的话）访问帮助。3） 表示帮助时根据需要提供三种方式的选择：另一个窗体、微帮助和指出参考某个文档。4） 用户如何回到正常交互方式有两种选择： 返回键和功能键。5） 帮助信息的构造：采用分层式帮助。6） 微帮助提供：由状态栏提供，或控件上的提示文本。,4.15.4 出错信息和警告,1） 信息以用户可以理解的术语描述；2） 信息应提供如何从错误中恢复的建设性意见；3） 信息应指出错误可能导致那些不量后果，以便用户检查是否出现了这些情况或帮助用户进行改正；4） 信息应伴随

12、着视觉上的提示，如特殊的图像、颜色或信息闪烁。5） 信息不能带有判断色彩，即任何情况下不能指责用户,4.15.5 输入界面设计,输入界面设计的原则 (1) 可靠性高、容错性好。 (2) 操作简单，易学易用。 (3) 风格一致，布局合理。,4.15.6 基于Web的用户界面设计,1基于HTML2脚本语言,总之，用户界面设计要以人为本。,用户界面设计迭代过程,二、用户界面的交互性,交互性是用户界面最重要的特性，按照交互形式分为5类：,2、图 象 在用户界面中，加入丰富多彩的画面，将能够更加形象地为用户提供有用的信息，以达到可视化的目的。主要的处理操作有：图象的隐蔽和再现、屏幕滚动和图案显示、动画等

13、。,图 形,3、对话框 对话框是在需要时，显示在屏幕上一个矩形区域内的图形和正文信息。以实现系统和用户之间的通信。其显示方式与弹出式菜单类似，即瞬时弹出。有三种对话形式：,必须回答式如图1所示无需回答式 如图2所示警告式 如图3所示,图1 必须回答式对话框,图2 无需回答式对话框,图3 警告式对话框,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/O界面，是系统的重要组成部分。主要从输入速度和减少出错率考虑。,1.尽量减少输入工作量 对相同内容输入设置默认值 自动填入 列表选择或点击选择,2.输入屏幕与输入格式匹配 即屏幕显示按照数据使用频率、重要性、次序等组织。,四、数据I/O界面设计,