第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）高级用户（专业用户，忠实用户） ： 曾熟练操作以前 的版本，熟悉高级功能， 专业从事人员，任务时间紧迫， 要求高效的操作 .
界面设计思想是： (3) 高带宽: 现在计算机输出的内容已经可以快速、连续地显示彩色图
像，其信息量非常大而人们的输入却还是使用键盘一个又一个
地敲击，因而，计算机的输入带宽是很低的。 (4)多通道 : 多通道界面旨在充分利用一个以上的感觉和运动通道的互 补特性来捕捉用户的意向，从而增进人机交互中的自然性。 人的感觉通道有视觉、听觉、触觉、嗅觉和平衡等；人的运 动通道有手、嘴、眼、头、足及身体等。
布局力求简洁、有序、易于操作。
第4章总体设计_用户界面设计
● 用户与界面分类 ● 用户界面的设计思想 ● 用户友好界面的风格分析 ● 用户界面的设计原则 ● 用户界面设计方法（界面一致性、菜单的设计、用 户帮助设施、出错信息和警告基于Web的用户界面设 计）
4.15 用户界面设计方法 • • • • • • • 4.15.1 界面一致性 （1）标签提示 ； （2）日期 ； （3）对齐方法. （4）分辨率为。 （5）字体缺省为宋替、五号、黑色。 （6）底色缺省采用灰色。
• 鼠标与键盘对应原则 • 向导使用原则 • 系统响应时间
响应时间长度
0-10 秒 10 到18 秒 18 秒 以 上 一个长时间的处理完成时
界面设计
鼠标显示成为沙漏 由微帮助来显示处理进度 显示处理窗口，或显示进度条 应给予完成警告信息
4.15.3 用户帮助设施
• 1） 进行系统交互时，提供部分帮助功能，即：提供主 要操作的帮助。 • 2） 用户可以通过帮助菜单、F1键和帮助按钮（如果有 的话）访问帮助。 • 3） 表示帮助时根据需要提供三种方式的选择：另一个 窗体、微帮助和指出参考某个文档。 4） 用户如何回到正常交互方式有两种选择：
4.14.3
信息显示原则
（5） 使用缩进和文本来辅助理解； （6） 使用窗口分隔控件分隔不同类型信息 （7） 高效地使用显示器的显示空间。
4.14.4 数据输入原则
（1）输入量最小。尽量减少用户输入动作 的数量； （2）信息显示和数据输入的一致性； （3）输入延迟最低，交互灵活； （4）屏蔽当前动作的语境中不用的按键；
移动区（move bar）
大小区（size bar）
退出区（quit bar）
用户工作区（user’s work bar） 横向滚动区（horizontal scroll bar） 纵向滚动区（vertical scroll bar）
窗口例
窗 口
四、数据I/O界面设计
数据I/O界面，是系统的重要组成部分。主要从输 入速度和减少出错率考虑。 1.尽量减少输入工作量 对相同内容输入设置默认值 自动填入 列表选择或点击选择
2.输入屏幕与输入格式匹配 即屏幕显示按照数据使用频率、重要性、次序等组织。
3.数据输入的一般规则 确定输入 交互动作 确定删除 提供反馈
4.14.4 数据输入原则
（5）让用户控制交互流，用户可以跳过不 必要的动作、改变所需动作的顺序（如果 允许的话）以及在不退出系统的情况下从 错误状态中恢复； （6）为所有输入的动作提供帮助； （7）消除冗余输入。 （8）输入数据早校验； （9）输入步骤少转换，输入过程简单化。
4.14.5 布局合理化原则 • 应注意在一个窗口内部所有控件的布局和信息组 织的艺术性，使得用户界面美观。 • 在一个窗口中按tab键，移动聚焦的顺序不能杂乱 无章，tab 的顺序是先从上至下，再从左至右。 一屏中首先应输入的和重要信息的控件在tab 顺序中应当靠前， 位置也应放在窗口上较醒目的位置。
功能
删除 寻找 插入 新记录 保存
查询/列表:
其它:
拷贝 帮助 打印 粘贴 关闭 剪切 下一窗口 任务列表 关闭窗口 结束应用 下一应用 缺省按钮/确认操作 取消按钮/取消操作 上下文相关帮助
MS Windows保留 键:
• 2）工具栏的设计 • 工具栏可以让用户更方便地使用软件，为软件操 作提供了一种快捷方式。其设计要简单易用，并 且应符合用户的使用习惯。 • 3）对话框的设计 • 对话框是最常见的人机交互界面，它既可以作为 系统显示提示或警告信息的窗口，又可以作为人 机交流的窗口。
软件工程
E-mail:xu201@
第4章 总体设计_用户界面设计
● 用户与界面分类 ● 用户界面的设计思想 ● 用户友好界面的风格分析 ● 用户界面的设计原则 ● 用户界面设计方法
第4章总体设计_用户界面设计
• 4.11 用户与界面分类
• 1．用户类型 （初级、中间、高级用户 ）
幕布局，设计者应那里提高命令和
动作组织的内聚性。 • （9）提供语境相关的帮助机制。
4.14.3
信息显示原则
（1）只显示与当前用户语境环境有关信息 （2）不要用数据将用户包围，使用便于用 户迅速吸取信息的方式表现信息； （3）使用一致的标记、 标准缩写和 可预测的颜色，显示信息的含义应该 非常明确，用户不必再参考其它信息源； （4） 产生有意义的出错信息。
必须回答式 如图1所示 无需回答式 如图2所示 警告式 如图3所示
图2 无需回答式对话框
图1 必须回答式对话框
图3 警告式对话框
4、窗口（window）
图形学中称为视图区（Viewport），视为虚拟 屏幕。一个实用窗口，可包含部件：
菜单区（menu bar）
标题区（title bar）
图标区（icon bar）
第4章 详细设计_用户界面设计
● 用户与界面分类 ● 用户界面的设计思想 ● 用户友好界面的风格分析（命令语言、菜单选项 、 点选界面（WIMP）、自然语言使用、布 局合理化原则）
● 用户界面的设计原则
● 用户界面设计方法
4.13 用户友好界面的风格分析
1．命令语言： 在图形显示、 鼠标、 高速工作站等技术出现之前 现实可行的界面方式只能是命令和询问方式， 通信完全以正文形式并 通过用户命令和用户对系统询问的响应来完成。 2．菜单选项 慢。
直接操纵
快速直观，容易 实现较难，适于对象和 学习 任务有视觉隐喻 避免用户错误只 对有经验的用户操作较 需很少键盘输入 慢,菜单项多时操纵复杂 简单的数据人口 占较多的屏幕空间 易学习 强大灵活 适合偶然用户 容易控制 较难学习 错误管理差 需要键入的太多，自然 语言理解的系统不可靠
菜单选择 表格填写 命令语言 自然语言
4.14 用户界面的设计原则
（5) 合理划分并高效使用显示屏。 （6) 保证信息显示方式与数据输入方式的协调一致 ，尽量减少用户输入的动作，隐藏当前状态下不可 选用的命令，允许用户自选输入方式，能够删除无 现实意义的输入，允许用户控制交互过程。 （7） 坚持图形用户界面（GUI）设计原则，界面直 观、对用户透明 。 （8）界面设计员应该明白软件中用户是所有处理的 核心，不应该有应用程序来决定处理过程，所以用 户界面应当由用户来控制应用如何工作、如何响应 ，而不是由开发者按自己的意愿把操作流程强加给 用户。 （9）界面设计必须经过确认才能完成。
•
• •
(2)界面美观，操作舒适；
(3)快速反应，响应合理； (4)用语通俗，语义一致。
界面设计思想是（以用户为中心、非精确、高带宽、多通道） (1) 以用户为中心: 以用户对界面的需求变化为出发点，使用户界面的外在形 式和内部机制能符合不同用户的需要，这就是以用户为中心的
设计思想。
(2) 非精确: 精确交互技术是指能用一种技术来完全说明用户交互目的 的交互方式，键盘和鼠标器均需用户精确输入。
2、图 象 在用户界面中，加入丰富多彩的画面，将能够更加形象地为用户提供有用的信息， 以达到可视化的目的。主要的处理操作有：图象的隐蔽和再现、屏幕滚动和图案显 示、动画等。
图形
3、对话框
对话框是在需要时，显示在屏幕上一个矩形区域内的 图形和正文信息。以实现系统和用户之间的通信。 其显示方式与弹出式菜单类似，即瞬时弹出。 有三种对话形式：
设计原型
产生动态 设计原型
与最终用户 一起评价