1、2018/12/16,1,计算机图形学,第八章 交互技术与用户接口,2018/12/16,2,8.1 用户接口设计,用户接口：确定用户与计算机如何进行信息交换。主要包括：1、用户通过什么途径与图形系统进行联系2、用户通过什么手段来操作系统的功能实现要点：高效率 对用户的友好性,2018/12/16,3,8.1 用户接口设计 8.1.1 用户模型（User Mode）,用户模型是用户接口设计的基础，它提供给用户有关他所处理的对象以及作用于这些对象的处理过程的一个概念性模型。,产生：软件开发过程中通过任务说明和需求分析而产生的 要求：使用用户熟悉的概念，简单、明确、一致，形式化,2018/12/1
2、6,4,8.1 用户接口设计 8.1.1 用户模型（User Mode）,用户模型 设计对话的基础 说明所设计的系统能做什么 应具备什么样的图形操作 指明能显示的对象类型以及如何管理对象 用户对话的所有信息按应用的语言来表达,2018/12/16,5,8.1 用户接口设计 8.1.1 用户模型（User Mode）,窗口系统的一般功能 打开和关闭窗口 对窗口重定位、缩放功能 带内裁剪和外裁剪的显示等 X窗口系统和NeWS可提供多个窗口管理程序 使不同风格的窗口可同时在各自的管理程序控制下实现,2018/12/16,6,8.1 用户接口设计 8.1.2 交互命令的设计,共包括如下四个方面： 应用
3、概念设计 词法设计 句法设计 语义设计,2018/12/16,7,8.1 用户接口设计 8.1.3 用户接口设计原则,适应多种熟练程度的用户 提供多种选择动作的方法 帮助功能分成几个层次来设计 保持一致性 系统内部的一致性 系统之间的一致性 可减少记忆量、减少差错 回退和出错处理,2018/12/16,8,8.1 用户接口设计 3.1.4 菜单设计原则,静态、动态与弹出式菜单 层次式组织 菜单项按功能分类组织子菜单 频度优先法组织 使用频度高的排在前面 有效性组织 菜单项无效时变灰且无法选择 互斥项交替出现 快捷式组织 常用菜单项使用热键、图符,2018/12/16,9,8.1 用户接口设计
4、8.1.5 反馈,多层次的反馈 词法级反馈 用户输入了什么？ 句法级反馈 用户有什么要求？ 语义级反馈 系统做得怎么样？ 形象的反馈 声音表示己有操作-按功能键等 醒目显示选中的对象-变色、闪烁 进程条表明系统正在处理之中 反馈位置 光标附近 特定位置 如坐标值,2018/12/16,10,8.1 用户接口设计 8.1.6 HELP功能,完整性 有求必应 针对性 不同用户有不同要求 高效性 超媒体结构 智能性 猜测用户的困难 实时性 主动帮助,2018/12/16,11,8.1 用户接口设计 8.1.7 显示屏幕的有效利用, 信息显示的布局合理性, 充分而又正确地使用图符, 恰当地使用各种表示
5、方法进行选择性信息显示,如：应用图符 控制图符,2018/12/16,12,8.1 用户接口设计 8.1.8 回退和出错处理,回退（undo）机制取消机制确认机制设计好的诊断程序提供出错消息对可能导致错误的一些动作进行预测约束机制：动作与对象相一致,2018/12/16,13,8.1 用户接口设计 8.1.8 视觉效果设计,这里强调的是色彩的使用： 选择色彩对比时以色调对比为主。 就色调而言，最容易引起视觉疲劳的是兰色和紫色，其次是红色和橙色；而黄色、绿色、蓝绿色和淡青色等色调不容易引起视觉疲劳。 为减轻视觉疲劳，应在视野范围内保持均匀的色彩的明亮度。,2018/12/16,14,8.1 用户
6、接口设计 8.1.8 适应不同的用户,提供多种方法使软件能适应不同熟练程度的用户。,2018/12/16,15,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,PHIGS和GKS将各种图形输入设备从逻辑上分为六种：,2018/12/16,16,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,1、定位设备：,典型方法是定位屏幕光标。 定位设备：鼠标器、操纵杆、跟踪球、空间球、数字化仪的触笔或手动光标等。,定位设备分为三类： 直接设备和间接设备 绝对坐标设备和相对坐标设备 连续设备和离散设备,2018/12/16,17,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,
7、2、笔划设备：,笔划设备的输入等于多次调用定位设备，产生一系列的坐标值，根据产生的坐标值可产生多边形和曲线等。,3、定值设备：,定值设备常用来输入各种参数和数据。,2018/12/16,18,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,4、字符串设备：,即进行字符串输入。,5、选择设备：,选择设备用来选择菜单选项、属性选项和用于构图的对象形状等。,6、拾取设备：,用拾取技术拾取一个图形对象。,2018/12/16,19,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,6、拾取设备：,（1）利用定位设备 冲突问题： 解决方法：在图形对象生成时就对每一个对象确定其拾取优先级
8、采用依次对拾取图形设立标志的办法。找距离最近的对象优先拾取。,2018/12/16,20,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,对一条以点(x1,y1)和点(x2,y2)为端点的线段来说，从点P0(x0,y0)到该线段距离的平方由下式来计算：,2018/12/16,21,8.2 逻辑输入设备与输入处理 8.2.1 逻辑输入设备,（2）指定拾取窗口 拾取窗口是以光标位置为中心的一个矩形窗口 （3）矩形包围 （4）直接键入结构名字,2018/12/16,22,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,输入模式即如何管理、控制多种输入设备进行工作 Set*Mode(w
9、s,deviceCode,inputMode,echoFlag) 1. 请求方式（request mode）输入设备在应用程序的控制下工作，程序在输入请求发出后一直被置于等待状态直到数据输入。 2. 取样方式（sample mode）应用程序和输入设备同时工作，当输入设备工作时，存储输入数据，并不断地更新当前数据，当程序要求输入时，程序采用当前数据值。,2018/12/16,23,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,3. 事件方式（event mode）用户对输入设备的一次操作以及形成的数据叫做一个事件(Event)。思想：把事件按先后次序排成队列，以便先进先出进行处理。当某
10、设备被置成事件方式，程序和设备同时工作。 4. 输入方式的组合使用一个应用程序同时可在几种输入模式方式下应用几个不同的输入设备来进行工作。,2018/12/16,24,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,SetMode(ws,deviceCode,inputMode,echoFlag) deviceCode: 正整数inputMode 输入模式 :request(请求),sample(取样)或event(事件)之一； echoFlag-echo(回显)或noecho(无回显) SetLocatorMode(1,2,Sample,noecho) SetTextMode(2,1,
11、request,echo) SetPickMode(4,3,event,echo),2018/12/16,25,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,请求模式 request( ws, deviceCode, status,) requestLocator(ws,devCode,status,viewIndex,pt) requestStroke(ws,devCode,nMax,status,viewIndex,n,pts) SetViewTransformationInputPriority (ws,viewIndex,refViewIndex,Priority),2018/
12、12/16,26,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,请求模式下的字符串输入 requestString(ws,devCode,status,nChars,str)请求模式下的定值输入 requestValuator(ws,devCode,status,value)请求模式下的选择输入 requestChoice(ws,devCode,status,itemNum),2018/12/16,27,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,请求模式下的拾取输入(获得一个结构标识号：) request Pick(ws,devCode,maxPathDepth,statu
13、s,pathDepth,pickPath) pickPath:选择的图元的一组标识信息包括结构名， status: 图元的拾取标识和元素序列号 pickDepth: 返回到pickPath中的信息层数 maxPathDepth: 能够存放到pickPath中的最大路径深度。,2018/12/16,28,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,取样模式 sample(ws,deviceCode,) sampleLocator(ws1,dev1,viewIndex,pt) sampleValuator(ws2,dev2,angle)事件模式 awaitEvent(time,ws,de
14、viceClass,deviceCode) get() getLocator(viewIndex,pt),2018/12/16,29,8.2 逻辑输入设备与输入处理 8.2.2 输入模式,输入模式的并行使用 鼠标移动对象 取样模式 鼠标按键结束移动 事件模式,2018/12/16,30,8.3 基本交互任务,8.3.1 定位 用于给应用程序指定位置坐标，如(x,y)或(x,y,z) 分为： 1）空间定位任务：需知道指定位置与空间中相邻元素之间的关系； 2）语义定位任务：需知道某一位置的坐标值； 通常还受到维数、屏幕分辨率、开环及闭环反馈的影响。,2018/12/16,31,8.3 基本交互任务
15、,8.3.2 选择 从一个选择集中选择一个元素。 分为： 命令选择、操作数选择、属性选择和对象选择； 选择集： 1）定长：如命令、属性、对象类型选择集； 2）变长：对象调用选择集。 完成方式： 1）基于名字：输入命令名找对应的执行程序 定位； 2）基于位置：鼠标定位在欲选择的对象上，确认该对象；,2018/12/16,32,8.3 基本交互任务,8.3.3 文本用于输入一个字符串；主要输入工具：键盘；注意：输入一个命令不是一个文本任务； 8.3.4 定向在指定的坐标系中确定形体的方向，需要确定维数和精度等指标。 8.3.5 定路径是一系列定位和定向任务的结合，与时间、空间无关。,2018/12
16、/16,33,8.3 基本交互任务,8.3.6 定量在最大和最小数值之间确定一个值。常见：1）用键盘输入一个数；2）在数字度盘、游尺上确定一个数。 8.3.7 三维交互任务涉及定位、选择和旋转，常将三维定位、选择和旋转组合起来执行。,2018/12/16,34,8.3 基本交互任务,8.3.8 组合交互任务由上述基本任务组合而成。 常见的有： 1）对话框：用于指定信息表中的多项值。如字体对话框； 2）构造：其最主要的应用是用橡皮筋技术画线段、矩形、圆等； 3）动态控制： 画水平、垂直约束线； 拖动一个符号或图素到新的位置； 通过改变某条边或某个点来改变一个已有图形的形状。,2018/12/16
17、,35,8.4 基本交互技术 8.4.1 基本交互绘图技术,1、回显,3、约束：在图形绘制过程中对图形的方向、对齐方式等进行规定和校准。,3、网格：,2018/12/16,36,8.4 基本交互技术 8.4.1 基本交互绘图技术,定位约束：在屏幕或窗口上定义一些不可见的网格，有时也可以用点的形式表示网格结点的位置。对用任何方式输入一个点都用离它最近的一个网格结点来代替。假如定义不可见网格线为 x=10i,y=10j, i,j=0,1,2,n设输入点的坐标为(x,y)，则离它最近的网格点的坐标为 (10*(round(x)+5)div 10),10*(round(y)+5)div 10) (6.
18、2) 方向约束：例如要绘制的线只能是垂直或水平两个方向，当给定的起点和终点连线与水平线的夹角小于45时，便绘出一条直线，否则就绘垂直线。这种约束对只要绘垂直线或水平线的情况带来很大方便。,2018/12/16,37,8.4 基本交互技术 8.4.1 基本交互绘图技术,4、引力域：在用光标选图时，要把光标中心移到图段上去，如果被选的图形只是一个点或一根线，那么把光标中心对准一点或一条直线段需要花较多时间。为了比较容易地做到这一点，可用引力场的方法。在每一条线段的周围假想有一个区域，这个区域象一根香肠或哑铃，光标中心落在这个区域时，就自动地被直线上最近的一个点所代替。这就好象一个质点进入了直线周围
19、的引力场后，就会被吸引到这条直线上去一样。香肠或哑铃的粗细要适中，太细了不易进入引力区，太粗了线和线的引力区相交，光标在进入引力区相交部分可能会被吸引到不是要选的线段上去，这样就出现错误了。,2018/12/16,38,8.4 基本交互技术 8.4.1 基本交互绘图技术,5、选择技术： 要求确定可选择对象的集合大小及选择值，此集合可以是固定的，也可以是变化的。 常见的有： 1）图段或实体的选择：之一： 指点选择：又分为如下两种： 单个选择(目标拾取)：利用拾取器(如鼠标、光笔、键盘光标键等)将屏幕光标移到目标上，再确认； 多重选择：一次拾取多个目标的操作过程。a . 利用一个矩形框来选择；b
20、. 键盘上的shift或ctrl和鼠标配合使用。,2018/12/16,39,8.4 基本交互技术 8.4.1 基本交互绘图技术,5、选择技术（续1）： 图段和实体的选择之二： 指名选择：根据对象的名字、属性或所在图层进行选择； 适用于： a. 已知被选对象的名字、属性或所在图层； b. 屏幕上显示的内容杂乱无章、相互重叠时。,2018/12/16,40,8.4 基本交互技术 8.4.1 基本交互绘图技术,5、选择技术（续2）： 2)菜单选择 流行菜单类型举例：固定式、翻页式、拉帘式、增长式、弹出式等； 常用菜单选择技术：a. 选择器选择：用选择器（如鼠标、键盘光标键等）将屏幕光标移到被选菜单
21、项上，再按“确认”键即可；b. 功能键或“热键”选择；,2018/12/16,41,8.4 基本交互技术 8.4.1 基本交互绘图技术,6、定位技术：在屏幕上指定一个点及其坐标值的过程。 主要有三种： 图形输入板或鼠标控制光标定位； 键入坐标定位； 用光笔或叉丝定位； 还需考虑的因素： 坐标系种类； 光标的形状及特征； 选择合适的控制显示比例；,2018/12/16,42,8.4 基本交互技术 8.4.1 基本交互绘图技术,7、定向技术：在一个坐标系中规定一个形体的方向。 常用设备：数值器、定位器、键盘； 常见定向技术 用度盘或操纵杆控制方向角； 键入角度值； 还需考虑的因素：坐标系、旋转中心
22、、观察效果等。,2018/12/16,43,8.4 基本交互技术 8.4.1 基本交互绘图技术,8、定路径技术：在一定的时间或空间内，确定一系列的定位点和方向角，其技术和定位、定向一致。应用方面的要求有定位点的最大数目和两个定位点之间的间隔。间隔的计算 基于时间采样； 基于相对位移达到某个距离采样；,2018/12/16,44,8.4 基本交互技术 8.4.1 基本交互绘图技术,9、定量技术：通过输入一个数值来确定一个数量。完成此任务需确定精度(单位)设备：键盘或电位计常用定量技术 键入数值； 改变电位计阻值产生要求的数量；,2018/12/16,45,8.4 基本交互技术 8.4.1 基本交
23、互绘图技术,10、文本技术：需要确定字符集及字符串的长度常用文本技术 键盘输入字符； 菜单选择字符； 语音识别； 笔划识别。,2018/12/16,46,8.4 基本交互技术 8.4.1 基本交互绘图技术,11、橡皮筋技术：针对输入要求，动态地、连续地将输入过程表现出来，直到产生用户满意的输入结果为止。实现举例：在平面上确定一条直线一般是先定下起点再定下终点，最后把起点和终点连成直线。所谓橡皮筋技术就是在起点确定后，光标移出去确定终点时，在屏幕上始终显示一条连结起点和光标中心的直线，这条直线随着光标中心位置的变动而变动。,再例：,2018/12/16,47,8.4 基本交互技术 8.4.1 基
24、本交互绘图技术,12、草拟技术：用以实现用户任意画图的要求。两种保存方式两种采样方式,2018/12/16,48,8.4 基本交互技术 8.4.1 基本交互绘图技术,13、拖动：将图形对象在空间移动的过程动态地、连续地表示出来，直到满足用户的位置要求为止。,2018/12/16,49,8.4 基本交互技术 8.4.1 基本交互绘图技术,15、形变：为了把屏幕上的图形的某部分放大或缩小，可用图形变比（zoom）。例如可以用矩形的橡皮筋在屏幕上划定一个区域，要求把区域内的图形部分放大，要实现这个功能只要在程序中把这个矩形定义为窗口，再显示时就可把窗口包含的图形部分显示在视区内，窗口越小，图形放得越
25、大。,14、旋转：,2018/12/16,50,8.4 基本交互技术 8.4.1 基本交互绘图技术,16、标尺和导向线 为了能用比较准确的尺寸来绘图，可以在屏幕上使用标尺。用户可用适当的命令在屏幕上显示标尺。使用一条线表示当前光标中心所在的位置。17、坐标显示 为了能把点定位得准确，可以在屏幕上显示光标中心所在位置的坐标。,2018/12/16,51,8.4 基本交互技术 8.4.2 三维交互技术,困难：用户难以区分屏幕上光标选择到对象的深度值和其他显示对象的深度值。键盘、鼠标、数字化仪等交互设备均为二维的，不能适应三维交互工作的需要。,2018/12/16,52,8.5 设计人机交互的一般风格及原则,人机交互设计的风格 “所见即所得”：屏幕上所见的设计结果与输出结果一致 直接操作：对对象、特性及关系的操作以直观形象的表示 菜单和图形符号驱动：不需要专门学习和记忆，便可借助菜单及图形符号来运行系统人机交互设计的原则 简单易学 提供反馈 对错误操作容易纠正 设计的一致性,谢谢大家，下课了，出去散散心吧,
