第四篇(2)几种典型界面的设计

合集下载
相关主题
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
特点
菜单条目有限,用户无需培训、无需大量记 忆
菜单条目分组,方便用户理解 菜单条目过多或层次过深将妨碍用户的使用 菜单条目占用屏幕空间
4.2.1 菜单界面的结构设计
结合用户任务确定菜单选项和结构 结合屏幕考虑显示的菜单选项数目 菜单选项的类型
命令项,执行一条命令 子菜单项,保护一组相关命令项 窗口,弹出关联的对话框
典型界面的设计
内容概要
命令语言界面的设计 菜单界面的设计 数据输入界面的设计 帮助和出错界面的设计 图形界面的设计 网页界面的设计 移动设备界面的设计
4.1 命令语言界面的设计
源于操作系统命令,是最早、最强的人 机界面交互形式
特点
面向高级或专业用户 用户驱动、响应快速、效率高 功能强大、灵活性好、占用屏幕空间少 对用户输入的命令有严格的语法要求,用户
填表式输入界面显示
电话号码:(区号)-4位,4位
手机号码:4位-3位-4位
身份证号: 6位 - 8位 - 4位
时间:12/24小时
日期:YYYY-MM-DD
货币金额:¥
.00
4.4 帮助和出错界面的设计
人总是要犯错的!
重要的是有错能改 不范同样的错误
帮助系统可以减少出错 错误处理系统可以改正错误
直接操纵
把操作的对象、属性和关系直接表示在界面 中,通过指点设备进行形象化的命令和数据 操作。
直接操纵的特点
面向对象,如命令、数据或对数据的操作 以指点和选择取代键盘输入 操作结果即时可见,操作可逆 形象化的表示,难以表示复杂抽象语义
所见即所得
显示的交互行为与执行的结果一致
4.5.2 GUI的设计原则
缩放
窗口框架的拖放
移动
矩形窗口拖放标题栏 不规则窗口拖放任何区域
活动/钝化
用户当前工作的窗口处于 活动状态
通过色彩、亮度标识活动 状态
4.5.3.4 辅助窗口的基本构成
框架
定义窗口的形状边界 通常不能改变窗口大
小源自文库
工作区
窗口的主要区域 用户进行参数设置的
区域
标题栏
只有文本标题
4.1.4 命令语言的设计原则
一致性
命令命名及缩写、命令语法结构、错误信息
达意的独特的命令 避免不必要的复杂性 允许用户重用已经输入过的命令 必要的帮助 必要的命令菜单
4.2 菜单界面的设计
系统驱动,向用户提供与一系列功能对 应的条目列表,用户选择适当的条目, 完成任务。适合结构化的系统。
条形文本菜单
所有菜单项显示在一行 显示在屏幕的顶部或底部
条形图标菜单
所有菜单项显示在一行,位置可以任意拖动 用图标形象表示菜单选项,易于理解和使用 可能产生歧义,需要附加提示文字 占用屏幕空间
下列菜单
主菜单只有一行的条形菜单 主菜单的选项对应下拉式的子菜单 通常显示在屏幕顶部 菜单结构的逻辑关系清晰,深度不宜超过3
4.5 图形用户界面的设计
图形用户界面又称WIMP界面
(Graphical User Interface) (Windows/Icons/Menu/Pointing device)
商业产品
Apple的Macintosh Microsoft的Windows UNIX的X-Window、OpenLook、OSF/Motif
掌握困难,出错率高
4.1.1 命令语言
命令语言是对软件系统的功能进行分解, 使用代表系统功能的关键字构成系统命 令。
命令语言经过计算机系统的解析程序处 理后,可以执行相应的功能。
词法分析器 语法分析器 错误信息解释器 运行时系统
4.1.2 命令语言的设计目标
基本目标
准确全面、易于读写、促进学习 简单紧凑、减少出错、促进记忆
上下文帮助
最常用 帮助菜单/按钮/命令/提示信息/状态栏消息
4.4.1.2 帮助系统的设计原则
完整性 一致性 上下文相关性 易理解 可维护 可检索
4.4.1.3 帮助系统的形式
联机帮助文档 HTML帮助文档
HTML Help Workshop制作工具 目录、索引、检索
软件过程向导
4.5.1 GUI的主要思想
桌面隐喻(Desktop Metaphor) 直接操纵(Direct Manipulation) 所见即所得(WYSIWYG)
桌面隐喻
界面中使用用户熟悉的图形表示系统功能 图形有一定的文化和语言相关性 不恰当的隐喻会误导用户
隐喻的分类
直接隐喻 命令隐喻 过程隐喻
协调
主从、动静、入(点)出(点)、统一
平衡
平衡不是对称
趣味
4.5.3 窗口设计
窗口是保护应用或文件的长方形区域,可以打 开、关闭、缩放和移动。
主窗口
只有一个 包含标题栏、菜单栏、工具栏和状态栏等 提供与窗口中对象的主要交互
辅助窗口
可能有多个 根据需要隐藏或显示,如对话框、消息框、属性框
高级目标
使用现实与命令符号的自然联系 使命令符号与系统任务自然对应 同时适合新手和熟练用户 灵活的表达方式
4.1.3 命令语言的结构
命令语言由一组命令组成,每条命令由 命令名及命令参数按照一定的语法构成。
命令语言具有一定的词典和语法
词典给出关键字的集合 语法给出关键字组合方式的规则
简单合理、用户易理解的主规则; 冲突时采用辅规则 主规则满足大部分常用命令,尽量少用辅规则 采用辅规则的命令给出标识 命令优先采用固定长度 命令不采用如ING、S、ED等词尾
4.1.3.2 命令的组织形式
单个关键字的命令 关键字+变量的命令 关键字+变量+选项的命令 层次式的命令 命令菜单
没有“最大化”“最 小化”按钮
可能有“关闭”按钮
可能有“这是什么” 按钮
鼠标拖动可以改变窗 口位置
4.5.3.5 辅助窗口的模式
有模式窗口
要求用户首先与辅助窗口交互,关闭辅助窗口后才 能够与其他窗口交互
如Word中的“字体”对话框
无模式窗口
允许用户自主选择与辅助窗口或其他窗口交互 如Windows的“日期时间 属性”对话框 如Word中的“查找与替换”对话框
菜单组织类型
单一菜单
供用户做出唯一的选择
线性菜单
用户操作的过程与一组有序的菜单对应
树状菜单
菜单项合理分组,宽度和深度合适的嵌套层 次
网状菜单
父子菜单项或子菜单项之间的循环切换 用户易迷失,提示其所在层次
4.2.2 菜单界面的样式设计
全屏幕文本菜单
清屏或滚屏后显示菜单 用户选择菜单项后滚屏进入下一级菜单
同时在每个子区域显示一 个滚动式窗口
重叠式窗口
屏幕同时显示多个独立的 滚动式窗口
每个窗口可以独立地改变 大小、位置,并可以叠放 在其他窗口之上
弹出式窗口
系统动态生成的窗口,总 是在其他窗口的最上面
4.5.3.2 主窗口的基本构成
框架
定义窗口的形状边界 通常是矩形,也有其他形
状 鼠标拖动可以改变窗口大

滚动条
窗口不能完整显示信息 滚动条上下或左右拖动
4.5.3.3 主窗口的行为
打开
用户操作导致窗口出现 保证响应时间的动画效果
打开的位置和大小
窗口以“统一的”或者 “最近使用的”位置和大 小出现
窗口在接近视觉焦点处出 现以减少眼睛移动,但窗 口不能遮挡视觉焦点
关闭
窗口迅速而平滑地消失 不要动画效果
级 占用屏幕空间
弹出式菜单
在屏幕的局部弹出新的窗口,并显示菜单 避免清屏造成的闪烁 菜单位置不固定,随时开启或关闭 菜单选项固定,一般是常用功能 菜单只有1级深度,不能包含子菜单 默认选中第一个(从上到下)可以菜单项,
高亮显示
滚动菜单
菜单项过多,屏幕无法完全显示
随着光标的移动,屏幕上部分菜单项消失, 部分菜单项进入
辅助窗口也有激活/钝化的状态
打开的时候为激活状态 从属辅助窗口的状态随主窗口状态变化 用户每次切换主窗口(无论什么主窗口)时,
将激活独立辅助窗口
辅助窗口通常不能调整大小
可以提供扩展窗口,但是排列要清晰 提供展开/折叠按钮
4.5.3.8 辅助窗口的位置
初始位置
主窗口里水平居中,位于顶部工具栏下显示 能够完整显示 用户目光无跳跃
结合滚动杆提示当前屏幕上的菜单项在整个 菜单中的位置
4.2.3 菜单界面的设计原则
按照系统功能组织菜单,确定菜单的深度、宽 度和层次。
菜单结构宽浅,深度不超过3级,每级菜单项 7-9个。
根据菜单项的含义进行分组,组内菜单项按照 一定的规律排序。
1级菜单标题简短、字数尽量相同、含义明确 菜单项布局一致、名称用词规范一致 菜单项前面的图标与字高一致,不宜过大
有模式窗口限制了用户的操作,往往用于提供 进一步交互的先决操作
4.5.3.6 辅助窗口的分类
从属辅助窗口
通过已打开的主窗口的命令或按钮显示 随着主窗口的最小化或关闭而变化
独立辅助窗口
不具有主窗口的特性 不依赖于已打开的主窗口 打开后,Alt+Tab键切换时能够显示
4.5.3.7 辅助窗口的状态及大小
数据输入的方式
问答式输入 菜单选择输入 填表式输入 直接操纵输入 条形码输入 OCR输入 语音输入
填表式输入界面设计
填表式界面的设计原则
表格标题含义明确,布局直观 清晰标识出必填项 字段用语简单贴切、术语缩写前后一致 对字段有解释性信息 对字段进行逻辑分组和排序 光标在各字段间转移方便 方便的编辑和修改功能 输入无效值的提示
4.4.1 帮助系统的设计
帮助系统是独立的软件模块 完整的应用系统
功能模块 人机界面 帮助系统
界面中的帮助无处不在
帮助菜单 鼠标悬停的提示信息 鼠标选择对象的上下文信息
4.4.1.1 帮助系统的类型
联机用户手册
最系统
联机培训(Tutorial)
适合入门
联机演示
形象加深理解
等 辅助提供主窗口中对象的详细信息和参数选项
4.5.3.1 按构造方式的窗口分类
滚动式窗口
上下/左右滚动条
开关式窗口
由多个滚动式窗口组成 开关控制一次显示一个
分裂式窗口
将屏幕分为等宽、高度可 调的多个子区域
同时在每个子区域显示一 个滚动式窗口
瓦片式窗口
将屏幕水平或垂直分为不 重叠的多个子区域
4.4.2 错误处理系统
人和系统都可能出错
人输入错误 系统计算错误
错误处理系统
一定程度上预防出错 从错误中恢复
4.4.2.1 错误的预防
一致性减少用户的学习和记忆 避免相似的命令名混淆用户 减少用户的键盘输入 使用大屏幕和清晰的反馈
4.4.2.2 错误的恢复
随时提供Cancel功能 尽量提供Undo功能 破坏性的操作要用户确认 无法处理的错误提示用户重启系统
命令的树状结构
命令操作 操作参数 操作对象
4.1.3.1 命令的命名方法
命令命名的缩写方法
末尾截断 去掉元音的截短 保留首末字母 保留短语中每个单词的首字母 发音,如XQT代表execute
命令的命名原则
基本原则
达意,便于记忆、减少出错 简短,便于书写、提供效率
详细原则
一般原则 色彩原则 艺术原则
一般原则
一致性 与现实的相似性 符合大众习惯 易于理解的图标 便捷的常用操作 即时反馈 操作可逆
错误处理 联机帮助 合理高效利用屏幕 数据显示与数据输入
一致 可不用鼠标
艺术原则
对比
大小、粗细、位置、明暗、质感 水平线与垂直线、直线与曲线

标题栏
位于窗口顶部 图标+标题文字+控制按
钮 鼠标拖动可以改变窗口位

菜单栏
位于窗口顶部,标题的下 面
规则排列菜单并包含菜单
工具栏
位置不固定,用户可拖动 包含大小相同、排列有序
的图标,代表一定的命令
状态栏
位于窗口底部 只读显示窗口当前状态信

工作区
窗口的最大区域 用户进行编辑、浏览的区
对菜单项的选择提供反馈标记,如高亮 显示当前选择的菜单项,灰色显示不可 用菜单项
提供多种菜单项选择操作的途径
提供联机帮助和出错提示
4.3 数据输入界面的设计
控制输入
输入系统运行所需的控制命令,如菜单选择 等
数据输入
提供系统运行所需的数据 数据输入耗时易错
数据输入的原则
一致性 尽量减少用户输入 输入前提示,输入后反馈 灵活的输入 错误检测和修改确认的机会
相关文档
最新文档