人机交互基础教程第5章界面设计剖析

1、交互式基础教程，第五章界面设计，主要内容，界面设计原则通过以用户为中心的设计过程站在用户的立场任务上分析以用户为中心的界面设计，解决5.1界面设计原则，界面设计在以用户为中心的设计中，用户是首先要考虑的因素。 成功的对话系统必须满足用户的需要。 5.1界面设计原则、设计开发人员和管理员关注用户应该如何执行任务，用户应该以什么样的偏好执行任务的偏好是由用户的经验、能力和使用环境决定的软件的使用习惯和倾向。 理解用户的喜好对界面设计的过程非常重要。的。 根据5.1界面设计原则、表现形式，用户界面是命令行界面的图形多通道用户界面，5.1界面设计原则，命令行界面是第一代人界面. 其中人被认为是操作员，

2、机器只有被动的反应，人只能用手操作键盘，输入数据和指令信息，通过视觉频道获取信息，接口输出只能是静态的文本字符。 命令行交互界面，操作系统MS-DOS是文本命令行交互界面。操作系统MS-DOS是文本命令行交互界面。 例如，必须用扩展名“. BBB”替换扩展名为. AAA的所有文件，但在“我的计算机”或“WINDOWS资源管理器”中，如果您需要一个一个地进行搜索和改名，则操作的限制会变得明显。 使用命令rename可以使用通配符“*”或“？ ”，可以很容易地更改一组文件名和扩展名。 然后再按一下。 在Win9x/Me的开始菜单中执行“command”指令后，进入命令行界面。 在Win2000/N

3、T的开始菜单中的可执行程序中输入“cmd”指令后，进入命令行界面。 此外，在文本菜单、菜单方式中，用户需要以有限的一组选择项来识别并选择，并且经常响应而不是发出命令。 用户不需要记忆功能指令，缩短了用户的训练时间，减少了用户的按键次数，错误处理能力也显着提高。 在这样的接口中，人还是被视为操作员，机器做出被动的反应，人只能使用所谓手的交互频道使用键盘输入选择信息，通过视觉频道获得信息，接口只能输出静态文本字符。 中国第一个网游从1992年到1996年，以侠客行为代表的文字网络游戏(Mud，组播世界Mutiple User Dimension )盛行起来。图形界面可被看作是第二代人界面，它是基于

4、图形方法的人界面。 引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。 基于鼠标和图形用户界面的交互技术极大地推进了计算机技术的普及. 图形用户界面也称为WIMP界面，由窗口(windows )、图标(icons )、菜单(menu )和指点设备(pointing device )四个组件组成桌面图形用户界面是当前用户界面的主流，广泛应用于各级的台式机微机和图形工作站.的设计和设计技术。 图形用户界面的发展历史。 1973年4月，xeroxparc(xerox公司paloat研究中心)开发了第一台使用Alto操作系统的个人电脑。 Alto第一次将所有元素集中在现代图形用户界面上

5、，具有处理图像信息和共享信息的能力，具有“一看到就能获得”的文档编辑器，内置大量字体和字符格式。 另外，Xerox PARC开发了名为Smalltalk的程序语言和环境，拥有自己的GUI环境(包含弹出菜单、窗口、图标)。1977年6月，至强公司发布了Star，Star于1977年开始开发。 继承了Alto的概念，在硬件上进行了一些升级。 384KB内存(可扩展到1.5M )、1024*768黑白分辨率、两个按钮鼠标(原来是三个按钮)，最重要的是拥有桌面软件，支持多种语言，可以连接到文件服务器、邮件服务器和打印服务器。 遗憾的是，Xerox Star是一个完全关闭的系统，不能使用非系统的程序语言

6、或开发环境。 这意味着不支持第三方软件。 Amiga开发的Amiga操作系统一推出，就引领了时代，包括高色彩图形、立体声、多任务处理等特点，成为多媒体应用程序和游戏的最佳选择。 1995年8月24日，微软发布了Windows 95，重新设计了图形用户界面，第一次在每个窗口中添加了小的关闭按钮。 设计团队设计了图标和图形的各种状态(有效、无效、选择、停止等)，还首次显示了有名的“开始”按钮。 这对于与微软的操作系统本身统一的图形用户界面来说是一个很大的进步。 2000年1月5日，苹果公司宣布他们设计了一个全新的Aqua接口，用于公司新推出的MacOS X操作系统。 在此界面中，默认的32 x 3

7、2和48 x 48图标将被更大的128 x 128平滑的半透明图标替换。 在Dock中放置了常用的程序图标，当鼠标通过时会显示程序名。 窗口最小化后，Dock上显示的不是程序图标，而是程序窗口的缩略图。 Aqua界面的最大变化与渐变、背景样式、动画和透明度的应用相关，具有更好的用户体验。 2001年10月25日，微软也发布了Windows XP，并不示弱，具有新的用户界面。 这个界面支持皮肤的交换，用户可以改变整个界面的外观和感觉。 默认图标为48 x 48，支持数百万种颜色。 2007年1月30日，经过漫长的等待，微软终于揭开了Windows Vista的神秘面纱。 这个操作系统是微软为了应

8、对竞争对手而发表的，包含了很多3D效果和动画. 自从Windows 98以来，微软试图改进桌面，Windows Vista使用桌面小工具代替活动的桌面。 微软在2012年公布了Windows 8的变化。 在系统界面中，Windows 8采用了新的Modern UI界面，各种进程以动态框形式显示，操作上大幅改变了传统的操作逻辑，提供了更好的画面触摸支持，同时启动速度快， Windows 10是微软独立发行的最后的Windows版本，下一代Windows作为更新形式登场。 Windows10发布了7个针对各种用户和设备的版本。 从2015年7月29日开始，Windows 10推送将全面打开，Win

9、dows7和Windows8.1用户可以免费升级到Windows 10。 在WIMP接口概念模型、2图形用户界面、WIMP界面中，将人称为用户，人通过交互进行工作。 用户只能用手这一交互频道输入信息，从视觉频道获得信息。 在WIMP接口上，接口的输出可以是诸如静态或动态的二维图形或图像之类的信息。 5.1接口设计原则，多声道用户接口还综合采用了视觉、语音、手势等新的交互频道、设备和交互技术，用户利用多频道以自然、并行、合作的方式进行交互，是多频道吗？ 5.1.1图形用户界面的主要思想，1 .桌面隐喻2 .看着就能得到(What You See Is What You Get，WYSIWYG)

10、3.直接操作(dire 1 .桌面隐喻、桌面隐喻清楚地表示计算机在用户界面中广为人知的桌面图例上能处理的能力。在认知心理学上，借鉴日常生活中众所周知的、有形的、具体的事物的知觉经验，对肉眼看不见的、难以定义的抽象概念进行认知、思考、经验、理解，根据不同的认知概念间的结构关系，以比喻的想法完成目标领域的抽象概念结构关系的构建和理解。 图例可以表示对象、操作、属性等概念，但文本有时表示一些抽象概念比图例好，而好图例与比文本更容易识别的文本相比，占用的画面空间更少。 1 .桌面隐喻-图例所表示的优点：图例独立于语言-具有一定的文化和语言独立性，能够提高目标搜索的效率，有很多隐喻的表现方法、流行静态图

11、标的图形用户操作系统直观易懂，只需点击图标就可以动画、隐喻分类、直接隐喻：隐喻本身带有操作对象。 图形绘制操作工具的隐喻，如Word绘制工具的图标：磁盘图标(隐喻光盘操作)、打印机图标(隐喻打印操作)的简单图像直观，最常见的处理隐喻：操作的处理例如，在Word中取消和恢复图标，1 .在桌面隐喻和图形用户界面设计中，隐喻一直很受欢迎。 不幸的隐喻不仅提高可用性，反而变得拙劣。 隐喻的缺点：占用屏幕空间、表达和支持相对抽象的信息很难，在“WYSIWYG”交互界面中，所显示的用户交互行为与应用程序的最终结果相匹配。 很多图形编辑软件和文本编辑器都有这个界面的缺点：屏幕空间和颜色的配置方案与硬件设备提

12、供的配置不同，两者之间不能准确匹配。 例如，打印机色域比显示器的色域小，印刷质量低，3 .直接操作，直接操作明确地表现操作的对象、属性、关系，通过光笔、鼠标、触摸面板或数据手套等指示设备从画面直接取得图像化命令和数据的过程直接操作的对象有很强的直接操作特征、直接操作特征，因为对指令、数据或数据的某些操作图形用户界面和人机交互过程很大程度上依赖于视觉和手动控制的参与。 1 .直接操作的对象应该是动作和数据的图像隐喻与实际内容相近，用户能够通过画面上的隐喻直接想象和感知其内容。 2 .使用指针和选择来代替键盘输入和使用选择来代替键盘输入有两个优点。 一是操作简单，速度快；二是不记忆复杂的指令，对非

13、专业用户特别重要。 3 .操作结果可以立即看到操作结果，用户可以立即修改操作，逐渐朝正确的方向前进。 4 .支持反向操作的用户在使用系统的过程中必然会发生一些操作错误，而反向操作使用户能够简单地返回到错误发生前的状态。 直接操作的特性，5 .不使用简单的文字和数字，而使用物理、空间、形象的表现。 有利于解决和学习问题6 .不分散计算机的意义和句法7 .尊重用户的使用经验，容易理解和使用8 .没有指令语言界面的优点.比如，在用户界面设计者看来，设计图很复杂，需要大量的测试和实验. 由于间接操作可能难以在图形系统中概念化，所以实际上，直接操作对于屏幕上的所有对象和操作是不现实的。 系统的图形功能可

14、能是有限的。 在窗口中放置操作控件的空间可能有限制. 可能很难学习和记住所有必要的操作。 如果发生这种情况，请使用间接操作。对于间接操作，文本使用下拉式或弹出菜单代替符号，使用键盘输入代替锚点。 大部分窗口系统集成了直接和间接操作。 可以通过指向菜单图标进行选择(直接操作)来访问菜单。 菜单本身是几个操作的名称列表(间接操作)。 如果通过指针或键盘选择了列表上的动作，则执行适当的命令。 什么样的互动最好呢？ 直接操纵，间接操纵，还是将两者结合？ 5.1.2设计图形用户界面的原则，1 .一般原则(1)界面必须与同一用户界面具有统一性，所有菜单选择、命令输入、数据显示和其他功能都必须保持样式的统一

15、性(2)常用操作需要快捷方式，为常用操作设计快捷方式不仅可以提高用户的工作效率，而且界面在功能上简洁高效。 (3)提供必要的错误处理功能，在发生错误时，系统检测错误，提供简单容易理解的错误处理功能；(4)向操作员的重要操作提供信息反馈。 操作员的重要操作需要信息反馈. 5.1.2设计图形用户界面的原则，(5)操作的可逆性应允许大多数动作恢复(还原)，应对用户错误采取宽容态度(6)设计良好的在线帮助人界面，对情况敏感(7)合理地分割显示器并高效地使用，只显示有关情况的信息，用窗口分隔不同类型的信息，允许用户放大和缩小显示环境，只显示有意义的信息，设计5.1.2图形用户界面的原则，2 .颜色使用颜

16、色时，请注意： (1)限制同时显示的颜色数；(2)画面内活动对象的颜色鲜明，活动对象不暗。 (3)防止黄和蓝、红和绿等不兼容的颜色混合在一起。 3 .图标的设计图标是视觉上表示实体信息的简洁抽象的符号。 图标的设计是方寸艺术，需要在小范围内表现图标的意思。 设计图标时应该重视视觉冲击力，应该用简单的颜色，眼睛利用颜色和网点的空间混合效果，做一个很棒的图标，在设计5.1.2图形用户界面的原则时，在设计图标时要遵守尽量避免过于抽象。 (2)通过在图标上附加简单的文本标记，可以向用户明确图标的意思。 (3)设计图标应该尽量简单，符合通常的表现习惯，保持图标意思前后的一贯性。 5.1.2设计图形用户界面的原则，4 .按钮的设计按钮应该是交互的。 应该有36种状态效果：点击时的状态鼠标在上面但没有点击的状态点击前鼠标不在上面的状态点击后鼠标不在上面的状态无法点击的状态自动变化的状态属于组的按钮样式统一，功能差异大的按钮被区别5.1.2设计图形用户界面的原则，5 .屏幕布局的设计屏幕布局(Layout )应强调各功能区域的重点，应遵循以下原则： (1)平衡的原则应注意屏幕上下左右的平衡。 (2)期待原则使画面上的所有对象(例如窗口、按钮、菜单等)的处理一致，能够期待对象的操作结果。 (3)经济原则在提供充分信息量的同时，要注意简洁、清楚。 (4)顺序原则对象显示的顺序，