计算机图形学cg12-人机交互技术

《计算机图形学cg12-人机交互技术》由会员分享，可在线阅读，更多相关《计算机图形学cg12-人机交互技术（59页珍藏版）》请在金锄头文库上搜索。

1、第12章 图形用户界面设计,内容提要, ,界面设计原则 理解用户 设计流程 任务分析 以用户为中心的界面设计,Sample 1,Sample 2-1,Sample 2-2,全能遥控器,人机交互的发展过程，也是人适应计算机到计算机不断地适应人的发展过程。它经历了几个阶段：,图形用户界面,自然和谐的交互,命令行,人机交互的发展历史及趋势,语言命令交互阶段 计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。这个过程也可以看作早期的人机交互的一个发展过程。,人机交互的发展历史及趋势,计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。 采用手工操作输入机器

2、语言指令（二进制机器代码）来控制计算机； 出现了FORTRAN、PASCAL、COBOL等语言，使人们可以用比较习惯的符号形式描述计算过程； 60年代中期，命令行界面开始出现，通过这种人机界面，人们可以通过问答式对话、文本菜单或命令语言等方式来进行人机交互。,人机交互的发展历史及趋势,图形用户界面（GUI）交互阶段 图形用户界面（Graphical User Interface，GUI）的出现，使人机交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、WIMP技术、直接操纵和“所见即所得”。 与命令行界面相比，图形用户界面的人机交互自然性和效率都有较大的提高。图形用户界面很大程度上依赖于菜单

3、选择和交互小组件（Widget）。 图形用户界面给有经验的用户造成不方便，他们有时倾向使用命令键而不是选择菜单，且在输入信息时用户只能使用手这一种输入通道。 图形用户界面需要占用较多的屏幕空间，并且难以表达和支持非空间性的抽象信息的交互。,人机交互的发展历史及趋势,人机交互的发展历史及趋势,图形用户界面（GUI）交互阶段 GUI 的主要特点是桌面隐喻、WIMP(Windows、Icon、Menu、Pointing Device)技术、直接操纵和“所见即所得（What You See Is What You Get）”。,图1-4 WIMP界面概念模型,与命令行界面相比，图形用户界面的人机交互自

4、然性和效率都有较大的提高。,自然和谐的人机交互阶段 随着虚拟现实、移动计算、无处不在计算等技术的飞速发展，自然和谐的人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互是其主要特点，其目的是使人能以声音、动作、表情等自然方式进行交互操作。,笔式交互设备,语音交互设备,视觉交互设备,虚拟环境中的交互设备,触觉交互设备,人机交互的发展历史及趋势,12.1界面设计原则,根据表现形式，用户界面分为, ,命令行界面 图形界面 多通道用户界面,12.1.1图形用户界面的主要思想,图形用户界面的三个重要思想, ,桌面隐喻(desktop metaphor) 所见即所得（

5、What You See Is What You Get，WYSIWYG ） 直接操纵(Direct manipulation),1.桌面隐喻(desktop metaphor),桌面隐喻是指在用户界面中用人们熟悉的桌面上的图 例清楚地表示计算机可以处理的能力。, ,图形具有一定的文化和语言独立性，可以提高搜索目标的效 率。 图形用户界面中的图例可以代表对象、动作、属性或其他概 念。 表达方式：图例和文字, ,文字适用于表达某些抽象概念 图例更易于识别，占用较少屏幕空间，可独立于语言,隐喻的表现方法, ,静态图标 动画 视频,隐喻的分类,直接隐喻：隐喻本身就带有操纵的 对象,如 Word中 的

6、表格 、图表等 图标 ， 图标 分别代表了操纵对象。,工具隐喻：代表所使用的工具,如用磁盘图标隐喻存盘操作、用打印机 图标隐喻打印操作等，这种隐喻设计简 单、形象直观，应用也最为普遍。,过程隐喻：通过描述操作的过程来 暗示该操作,如Word中的撤销和恢复图标。,2.所见即所得（WYSIWYG）, ,在WYSIWYG交互界面中显示的用户交互行为与应用程序 最终产生的结果是一致的。 非WYSIWYG的编辑器，用户只能看到文本的控制代码， 对于最后的输出结果缺乏直观的认识。（latex编辑器）,WYSIWYG的弊端, ,如果屏幕的空间或颜色的配置方案与硬件设备所提供 的配置不一样，在两者之间就很难产

7、生正确的匹配。 文本处理器都提供了定义章、节、小节等的标记，这 些标记显式地标明了对象的属性，但并不是用户最终 输出结果的一部分。,3.直接操纵(Direct manipulation), ,直接操纵是指可以把操作的对象、属性、关系显式地表 示出来，用光笔、鼠标、触摸屏或数据手套等指点设备 直接从屏幕上获取形象化命令与数据的过程。 直接操纵的对象是命令、数据或是对数据的某种操作。,直接操纵的特性 直接操纵的对象是动作或数据的形象隐喻,形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象 或感知其内容。,用指点和选择代替键盘输入,优点：操作简便，速度快捷。,操作结果立即可见,操作结果立

8、即可见，用户可以及时修正操作，逐步往正确的方向前进。,支持逆向操作,用户在使用系统的过程中，不可避免地会出现一些操作错误，通过逆向 操作，用户可以很方便地恢复到出现错误之前的状态。,直接操纵的优缺点,优点：,借助物理的、空间的或形象的表示，而不是单纯的文字或数字 的表示。依赖于视觉和手动控制的参与，可以直接操作，有利 于解决问题和进行学习。,缺点：,不具备命令语言界面的某些优点。,例如从用户界面设计者角度看，设计图形比较繁琐，需进行大量的 测试和实验。,表示复杂语义、抽象语义比较困难。,12.1.2图形用户界面 一般性原则,界面要具有一致性:,在同一用户界面中，所有的菜单选择、命令输入、数据显

9、示和其他 功能应保持风格的一致性。,常用操作要有快捷方式:,不仅会提高用户的工作效率，还使界面在功能实现上简洁而高效。,提供简单的错误处理 :,在出现错误时，系统应该能检测出错误，并且提供简单和容易理解 的错误处理功能,对操作人员的重要操作要有信息反馈:,尤其是对不常用操作、至关重要操作要有信息反馈。,对大多数动作应允许恢复(UNDO)，对用户出错采取比较宽容的态度。,设计良好的联机帮助:,人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量 用简短的动词和动词短语提示命令。,合理划分并高效地使用显示屏:,只显示与上下文有关的信息，允许用户对可视环境进行维护，如放大、 缩小窗口；用窗

10、口分隔不同种类的信息，只显示有意义的出错信息。,保证信息显示方式与数据输入方式的协调一致，尽量减少用户输入 的动作，隐藏当前状态下不可用的命令，允许用户自选输入方式， 能够删除错误的输入，允许用户控制交互过程。,12.1.2图形用户界面 一般性原则 操作可逆:,12.2 理解用户,12.2.1 用户, ,用户是使用某种产品的人，其包含两层含义：1）用户是人 类的一部分；2）用户是产品的使用者。 衡量一个以用户为中心的设计的好坏，关键点是强调产品的 最终使用者与产品之间的交互质量，它包括三方面特性：,产品在特定使用环境下为特定用户用于特定用途时所具有的 有效性（Effectiveness）、效率

11、（Efficiency）和用户主观满 意度（Satisfaction）。,以用户为中心的设计，其宗旨就是在软件开发过程中要紧紧 围绕用户，在系统设计和测试过程中，要有用户的参与，以 便及时获得用户的反馈信息，根据用户的需求和反馈信息， 不断改进设计，直到满足了用户的需求，这个过程才终止。,12.2.2用户体验, ,用户体验（User Experience，UX）通常是指用户在 使用产品或系统时的全面体验和满意度。 用户体验主要有下列四个元素组成（如图5-5）：, ,品牌（Branding） 使用性（Usability） 功能性（Functionality）,内容（Content）,用户体验是一

12、个迭代过程，影响用户体验的因素很多 ：, ,现有技术上的限制，使得设计人员必须优先在相对固定的UI 框架内进行设计； 设计的创新，在用户的接受程度上也存在一定的风险； 开发进度表，也会给这样一种具有艺术性的工作带来压力； 设计人员很容易认为他们了解用户需要，但实际情况常常不 是这样。,用户体验贯穿人类文明始终,250万年前，有一个玉树临风的哥们儿，他专门负责部落的饮食供给 。你们知道那个时候人们都只吃一些烧烤，野味。这个哥们工作很认 真负责，他无时无刻不在思考自己的工作：如何把工作做到最好，去 得到领导的赏识和美女的芳心呢？, ,有一天，他在河边盘旋，他还在低头思考。这时，他发现了一块石头 ，

13、他想，如果能用石头把肉切得小片一点，那么，应该能更入味。 后来，他把那些恐龙肉分别烤成5分熟或者8分熟之后，献给自己的领 导和美女。得到了大家一致的认可。 这就是那块石头。这个工具有两个特点：1.锋利的尖角；2.圆滑的底 座。 圆滑的底座方便我们用手拿，而另一端，能让我们更容易切肉（也就 是去征服大自然）。, ,真是光阴似箭，岁月如梭啊。时间一晃就是250万年。 这是苹果在09年的产品：Magic Mouse （魔鼠），苹果首创的Multi- touch鼠标。这款鼠标的设计和我们常见到的有一点区别：, , 没有滚轮，没有我们支持左右箭的左右两块。 它同样支持左右键；它支持单指滚动功能，你用双指

14、还可以进行左右的翻页, ,石头和鼠标有惊人的相似之处，它们长得都差不多，都要好 用，而且有用。 在人类用石头征服了首领和美女的250万年之后，在这个0和 1的电脑时代，用户却希望自己使用工具时的手感仍然回到 最原始。毋庸置疑，用户体验与生俱来，不是刻意产生。,这本书作者也不停的告诉大家，产品的功能越强大， 让用户使用的时候要最简单,增强用户体验的实例,Multi-Touch Technology，一款多点触摸的产品，你 可以在大屏幕上进行操作。,BumpTop桌面,它将普通的电脑桌面设计成了眩目的3D桌面， 使文件浏览 的经验发得随心所欲，可以随手放置文档，周围是贴满便条 的“墙面”。支持苹果

15、和Windows系统。,vizoo公司的Cheoptics360,一款展会产品，用户可以360度观察你要展示的物品或人物,微软的多媒体触摸屏,通过移动桌面的小物件产生不同音效的桌子： reactable。,将一张张平面照片，组合成3D场景的软件： Photosynth。,定位 笔划 定值 选择 字符串输入,基本交互技术,定位 确定平面或空间的一个点的坐标，是交互中最基本的输入技术之一。 确定平面一点(x, y)或空间一点(x, y, z)的坐标。,3DS Max中的精确定位,基本交互技术,直接定位 直接定位是用定位设备直接指定某个点的位置,如键盘输入。直接定位方法可以准确地给点定位. 间接定位

16、 间接定位指通过定位设备的运动控制屏幕上的光标进行定位。如在移动鼠标时，根据鼠标移动的相对距离去控制屏幕上光标的移动。,基本交互技术,基本交互技术,笔划 笔划输入用于输入一组顺序的坐标点。它相当于多次调用定位输入，输入的一组点常用于显示折线或作为曲线的控制点。,基本交互技术,笔画设备 鼠标、轨迹球、游戏棒连续移 动的信号经转换成为一组坐标值。 图形输入板的连续模式可通过按 键激活。当光标在图形输入板表 面上移动时，就产生一组坐标值。,基本交互技术,定值 定值（或数值）输入用于设置物体旋转角度、缩放比例因子等,基本交互技术,定值（或数值）输入用于设置物体旋转角度、缩放比例因子等。它是要在给定的数字范围内输入一个值。,可用键盘键入数值. 可用软件的方法在