计算机图形学课件chpt

1、北京大学计算机科学系图形研究室人机交互第 四 章用户界面设计董士海北京大学计算机科学系图形研究室人机交互第四章 用户界面设计（9学时）4.1 用户界面的风格 4.2 用户界面设计中的重要问题4.3 对话独立性和对话的表示4.4 用户界面的设计方法北京大学计算机科学系图形研究室4.1 用户界面的风格1. 命令语言2。菜单选项3。表格填充4。直接操作北京大学计算机科学系图形研究室4.1 用户界面的风格命令语言1。 举例2.。功能考虑3。命令语言的组织4。设计要点北京大学计算机科学系图形研究室4.1 用户界面的风格命令语言1。命令语言举例UNIX操作系统shell命令语言ls -l; who |wc

2、 -l; pscc -cc game.c lib1.0 lib2.0 lib3.0 lib4.0 &lib5.0 -lm -lcurses北京大学计算机科学系图形研究室4.1 用户界面的风格命令语言1。命令语言举例$cat spell cat $* |tr -sc A-Za-z 012 |sort | uniq| comm -23 /usr/dict/words北京大学计算机科学系图形研究室4.1 用户界面的风格1。命令语言举例数据库查询命令(dBASE 4).USE filename.SORT ON fieldname TO filename.INDEX ON fieldname TO in

3、dexfilename.DISPLAY FIELDS fieldlist FOR condition TO PRINT北京大学计算机科学系图形研究室4.1 用户界面的风格1。命令语言举例vi正文编辑程序进入vivi filename插入正文i, a, o删除正文d, dd, x正文检索/and, ?and正文替换s/pear/peach/g退出viq!, :w北京大学计算机科学系图形研究室4.1 用户界面的风格2.。命令语言的功能考虑满足用户的任务需求不要贪多求全功能的完整性北京大学计算机科学系图形研究室4.1 用户界面的风格3。命令语言的组织简单命令dd, :w命令带参数cp f1 f2可选

4、项ls -ltasdriu分层命令结构动作+对象+结果copy file1 file2北京大学计算机科学系图形研究室4.1 用户界面的风格4。设计要点命令的设计要适合系统用户的专业水平命令集的设计要考虑统一的模型和结构命令的命名和缩写提供批处理命令和用户创建宏的能力undo 和 redo 命令北京大学计算机科学系图形研究室4.1 用户界面的风格菜单选项1。菜单选项的语义组织：正文菜单和图形菜单；固定菜单和活动菜单; 下拉式与弹出式菜单单一菜单；线性顺序菜单；树型菜单；（非）循环网络型菜单；北京大学计算机科学系图形研究室4.1 用户界面的风格菜单选项2。菜单项的排列次序及快速变换菜单按自然顺序按

5、字母顺序，按使用频度，按重要程度快速切换：用编号、字母选取；简捷键 定义宏北京大学计算机科学系图形研究室4.1 用户界面的风格菜单选项3。选中时的反馈信息：选择用：键盘的箭头键或字母键、鼠标、制表键反馈： 加亮该菜单项；该菜单项反显；该菜单项加下划线；该项前加一小盒或作一记号（如v);菜单的屏幕布局：简洁，一致，直观北京大学计算机科学系图形研究室4.1 用户界面的风格菜单选项4。菜单选项的设计要点；根据系统功能的合理分类，选择菜单选项的语义组织结构在一个菜单中应合理地对菜单项进行排列，以提高选取速度菜单应有标题，菜单项的名字含义应明确，易于用户理解提高菜单选取的速度：硬件；简捷键；宏；直接跳至

6、、退出选择菜单项方法、选中反馈提示合理的屏幕布局、一致的风格菜单选取的“求助”机制。北京大学计算机科学系图形研究室4.1 用户界面的风格表格填充设计要点表格应有明确的表名、每一表项名，缩写应含义明确，易理解表项应合理排列，应将关键表项放在前面或给以标记表格布局应设计美观，如要打印输出应与保存的文件页面一致表格的操作机制应一致、通用，必要时给以提示。如年月日：yyyy/mm/dd, 时间hh/mm/ss, 光标移动tab键，退出esc键常用的表项值应提供缺省值，可填可不填的表项应有标记数据输入应特别细致：字母左对齐，数值右对齐，小数点对齐，必要的“求助”机制当大批数据录入时，应允许数据文件和表格

7、数据交换北京大学计算机科学系图形研究室4.1 用户界面的风格直接操作举例：全屏幕正文编辑，交互排版数据库查询及电子表格软件计算机辅助设计软件窗口软件HyperCard北京大学计算机科学系图形研究室4.1 用户界面的风格直接操作的特点1。对象的仿真表示2。实际动作代替复杂的语法3。操作结果的立即应答和直观显示4。动作的连续性和可逆性5。图形和图象的表示形式北京大学计算机科学系图形研究室4.1 用户界面的风格直接操作的若干问题1。有些应用中，图形表示不一定比代码、文字描述好2。有些图符的含义不如文字清晰3。自然的表示可能使用户操作时产生误动作或迷路4。直接操作要求更多的资源：大的屏幕，快的响应时间

8、5。一些熟练的用户采用键盘打字输入比直接屏幕操作要快北京大学计算机科学系图形研究室4.1 用户界面的风格图形用户界面的标准化UNIX X Window(X11.3)OSF/Motif Open LookMicrosoft Windows北京大学计算机科学系图形研究室4.2 用户界面设计中的重要问题1。响应时间和显示速率2。屏幕设计及信息提示3。联机帮助、手册及指导教材4。错误处理北京大学计算机科学系图形研究室4.2 用户界面设计中的重要问题用户开始击键系统开始响应用户激活系统 系统完成响应响应时间（1秒）系统响应时间用户计划时间用户思考时间北京大学计算机科学系图形研究室4.2 用户界面设计中的

9、重要问题显示速率硬拷贝设备10-160cps字符终端30-1000cps图形显示5k-500k向量北京大学计算机科学系图形研究室4.2 用户界面设计中的重要问题2。屏幕设计及信息提示一般原则：先规划，一致性，可读性主要元素：显示区，菜单或命令区，标题区，提示区其他信息（对话盒，数据录入区，）彩色的运用：一屏少于7种；按重要性选颜色；先按亮度、再按色调区分；尽量符合颜色的习惯用法；背景宜用低饱和度的浅色；注意合理的色彩搭配；，北京大学计算机科学系图形研究室4.2 用户界面设计中的重要问题3。联机帮助、手册及指导教材设计原则：随时均可使用，统一的风格； 语言简洁易懂，给出例子； 联机帮助时，不改变

10、用户工作状态； 联机帮助内容应与上下文位置有关； 尽可能使用易懂及活泼的形式 北京大学计算机科学系图形研究室4.2 用户界面设计中的重要问题4. 错误处理除容错设计，鲁棒性技术，诊断措施，以外 ，应：1。如何减少输入错误2。关于计算错误3。其他错误4。错误信息准确和定位，再次确认，历史文件， 北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示1. 若干概念2。对话的结构模型3。表示技术状态转换图上下文无关文法事件模型其他北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示1. 若干概念对话独立性：是交互系统的一种特性，它将对话（交互界面）的设计与应用系统（或计算部件）的设计分

11、开，因而两者之一的改动，不会影响或 引起另一方的改动。好处：界面与应用容易分别修改，容易分别维护，容易由界面设计工具生成统一风格的“界面”，提高软件的可移植性。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示1. 若干概念人机对话（交互）与人机界面是不同概念。但在界面开发过程中两者关系密切。“对话独立性”实际上指“界面的独立性” 界面与应用的分离。对话部件与计算部件。 顺序对话：系统向用户提供的操作为每次一项。异步对话：即多线索（multi-thread）对话。最终用户在某一时刻或状态下，可使用多个处理任务，不一定有规定的次序，不一定每次一项。并发对话是能同时执行多于一个任务的异步

12、对话。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示2。对话的结构模型目前的界面模型主要有两种：结构模型（Constructional）是从系统的角度来表示界面交互;行为模型（Behavioral）是从用户和任务的角度，如任务分析、功能分析、用户模型等，是面向用户和任务的。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示行为模型(1). GOMSCard et al 1983是提出比较早、影响也比较大的一个用户模型，它采用目标手段分解的思想，试图将交互任务进行足够细致的分解到合适的原子层次（称为操作步），来准确预测交互时间等性能指标。GOMS采用四种成分来描述用户行为

13、：目标（goal），操作步（operator），方法（method）和选择规则（ selection rule）。其中操作步指一些基本的知觉、动作和认知活动；方法指完成某目标的操作步或子方法序列；选择规则在有多个方法来解决同一任务时决定选择哪一个。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示行为模型(2). TAG( Task Action Grammar)TAGPayne and Green 1986是一种形式化的任务分析模型，它可用来寻求界面任务语言的思维表现形式。(3). UAN(User Action Notation)UAN是由Virginia Tech开发的一种行为

14、表示手段Hartson et al 1990，UAN着眼于用户和界面这两个交互实体，刻化了二者在协同完成一个特定任务时的交互行为序列。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示Seeheim结构模型表示部件对话控制应用接口最终用户应用程序北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示Seeheim结构模型1. 表示部件：负责人机界面的外部表现2。对话控制：协调用户和应用程序3。应用接口：从界面观点看到的应用程序的一种表述4。三部件之间的联系北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示3。（结构模型）表示技术状态转换图上下文无关文法事件模型其他北京

15、大学计算机科学系图形研究室4.3 对话独立性和对话的表示状态转换图形式化描述：用状态转换图描述人机对话是一个七元组：M=(Q , % , P, /, ., qo, f )Q 是状态的有限集合。% 是输入符号的有限集合，该输入符号由表示部件所生成。 P 是动作的有限集合，这些动作是由状态转换图的状态所标记。 / 是状态转换函数，它作下列映射： Q X % - Q . 是动作函数，它作下列映射： Q - P qo 0 Q 是M的初始状态。 f 是M终止状态的集合。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示状态转换图形式化描述：对于递归状态转换图，可由九元组来定义：M=(Q , %

16、 , P, ! , /, ., qo, Zo, f )! 是下推表的有限集合。Zo 是下推表的初始符号。北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示状态转换图BYEXGOOFINFOnewentrySTARThelpquit201enter北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示上下文无关文法形式化描述： G = ( N, T, R, P, S )N 是非终结符的有限集合T 是终结符的有限集合R 是与产生式相关的动作所对应的符号有限集合P 是产生式的有限集合S 是文法的起始符号北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示上下文无关文法例子：c

17、ommand : = create | delete | zoomcreate : = CREATE TYPE positiondelete : = DELETE NAMEzoom : = ZOOM position position : = X_POSITION Y_POSITION北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示上下文无关文法橡皮筋线表示实例：line:= button d1 end_pointend_point := move d2 end_point | button d3d1 := 记下第一个点的位置d2 := 从起始点画线到当前位置d3 := 记下第二个

18、点的位置北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示事件模型形式化描述：1）一个事件是一个三元组 R = ( i, m, d )I 是事件处理器名的集合M 是事件名的集合D 是事件值的值域2）事件处理器由六种语句组成，它们组成事件的处理过程。表达式赋值，If语句，call, ,北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示事件模型形式化描述：3) 一个事件处理器是一个五元组 EH = (m,r,Q,R,P)m 是本事件处理器所处理事件类型的数目r 是本事件处理器中寄存器的数目Q 是事件处理器的事件队列R 是EH中寄存器取值的集合P 是m个事件处理过程。北京大学计算

19、机科学系图形研究室4.3 对话独立性和对话的表示画折线为例EVENT HANDLER polyline;TOKENbutton Button;move Move;backspace Backspace;cancel Cancel;finish Finish;VARpoint_count : integer;point_list : list of point;int state;北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示EVENT Button DO IF state = 0 THENpoint_list = curent position;state = 1;point_count = 1ELSEadd current position to point_list;point_count = point_count + 1;ENDIF;:北京大学计算机科学系图形研究室4.3 对话独立性和对话的表示EVENT Move DO IF state = 1 THENdraw linee from lastt position to current position;ENDIF:EVENT Finish DO .;（略）EVENT Backspace DO .; （略）EV