第五章 界面设计
1.用户界面(第一版P58)
根据表现形式,用户界面可以分为命令行界面、图形界面和多通道用户界面。
- 命令行界面 Command Line Interface CLI
用户输入文本命令,系统以文本的形式表示对命令的相应。
第一代人机交互界面
- 图形用户界面Graphical User Interface GUI
又称为WIMP界面,由窗口window、图标icon、菜单menu、指点设备pointing device形成桌面。
第二代人机交互界面
特点是以窗口管理系统为核心,使用键盘和鼠标作为输入设备。窗口管理系统除基于可重叠多窗口技术外,广泛使用的是事件驱动技术。
- 多通道用户界面
进一步综合采用视觉、语音、手势等新的交互通道、设备和技术。使用户利用多个通道以自然、并行、协作的方式进行人机对话。
2.图形用户界面(第一版 P61)
(1)主要思想
- 桌面隐喻(desktop metaphor)
定义:
桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。
表现方法:静态图标、动画和视频
分类:
直接隐喻:隐喻本身就带有操纵的对象,如Word绘图工具中的图标,每种图标分别代表不同的图形绘制操作
工具隐喻:代表所使用的工具,如用磁盘图标隐喻存盘操作、用打印机图标隐喻打印操作等,这种隐喻设计简单、形象直观,应用也最为普遍
过程隐喻:其通过描述操作的过程来暗示该操作,如Word中的撤销和恢复图标
- 所见即所得(What You See Is What You Get,WYSIWYG)
在WYSIWYG交互界面中显示的用户交互行为与应用程序最终产生的结果是一致的。例如以粗体显示的文本打印出来依旧是粗体显示。
- 直接操纵(direct manipulation)
可以把操作的对象、属性、关系显示的表示出来,用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。直接操纵的对象是命令、数据或是对数据的某种操作。
特点:
直接操纵的对象是动作或数据的形象隐喻,形象隐喻应该与其实际内容相近,使用户能通过屏幕上的隐喻直接想象或感知其内容。
用指点和选择代替键盘输入,操作简便,速度快捷。
操作结果立即可见,用户可以及时修正操作,逐步往正确的方向前进。
支持逆向操作,用户在使用系统的过程中,不可避免地会出现一些操作错误,通过逆向操作,用户可以很方便地恢复到出现错误之前的状态。
借助物理的、空间的或形象的表示,而不是单纯的文字或数字的表示。
不具备命令语言界面的某些优点,例如从用户界面设计者角度看,设计图形比较繁琐,需进行大量的测试和实验。
表示复杂语义、抽象语义比较困难。
(2)设计原则
Ø 一般性原则
- 一致性:在同一用户界面中,所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。
- 常用操作要有快捷方式:不仅会提高用户的工作效率,还使界面在功能实现上简洁而高效。
- 提供必要的错误处理功能:在出现错误时,系统应该能检测出错误,并且提供简单和容易理解的错误处理功能
- 对操作人员的重要操作要有信息反馈
- 操作可逆
- 良好的联机帮助
- 合理高效使用显示屏
- 信息显示方式与数据输入方式协调一致。
Ø 颜色
- 限制同时显示的颜色数.
- 画面中活动对象的颜色应鲜明,而非活动对象应暗淡。
- 尽量避免不相容的颜色放在一起,如黄与蓝,红与绿等,除非作对比时用。
- 若用颜色表示某种信息或对象属性,要使用户理解这种表示,并尽量采用通用的表示规则。
Ø 图标
- 图形应该和目标的外形相似。尽量避免过于抽象。
- 附加上简要的文本标注,使用户明确图标的含义。
- 尽可能简单,符合常规的表达习惯,保持图标含义的前后连贯。
Ø 按钮
设计按钮应具有交互性,具有3-6中状态效果;属于一个群组的按钮风格应该一致。
Ø 屏幕布局
平衡原则、预期原则、经济原则、顺序原则、规则化
Ø 菜单界面
菜单的结构:
单一菜单:几个选项中做出选择
线状序列菜单:一组相关联的菜单组合在一起,例如Word的字体页面
树状结构菜单(最常见):把选项划分为若干类,类似的选项组成一组,形成一个树状结构。
网状结构菜单:允许用户在父辈菜单与子菜单之间切换,而不必重新回到父辈菜单然后再转到子菜单,例如超链接。
Ø 填表界面
填表输入界面有以下的特点:
有明确的提示,使用户可以不需要学习、训练,也不必记忆有关的语义、语法规则;
充分地利用了屏幕空间;
充分利用上下文信息,帮助用户完成输入。