第10讲人机交互技术精

1、第一部分第一部分 用户界面设计用户界面设计n谁来设计软件的用户界面？谁来设计软件的用户界面？n用户眼中的好软件用户眼中的好软件n好的用户界面应具备的特性好的用户界面应具备的特性n界面设计美学界面设计美学n用户界面的主要思想用户界面的主要思想n界面设计的原则界面设计的原则谁来设计软件的用户界面？谁来设计软件的用户界面？u毫无疑问，应当由用户界面设计师u用户界面设计不完全等于美工u如果软件企业里没有专职的用户界面设计师，那么请产品经理甚至软件工程师和美工人员共同设计用户界面。F相比较而言，让软件开发人员学会用户界面设计，要比美工人员学会软件开发容易得多。F对软件开发工程师进行用户界面设计的培训，然

2、后让软件开发工程师负责应用软件用户界面的设计和实现，请美工人员做锦上添花的美化工作。 谁来设计软件的用户界面？谁来设计软件的用户界面？u很多人有疑虑，让软件开发工程师从事用户界面设计，他们能做好吗？F回答是肯定的，只要软件工程师不自我封闭，追求上进，那么他肯定能够学会用户界面设计，绝对比他原先做的用户界面好。F软件工程师的智商都不低，只要他不懒惰，勤于学习、实践和思考，那么他就能够成为某些领域的行家乃至专家。 用户眼中的好软件用户眼中的好软件n“好好”的软件意味着的软件意味着“实用、易用、美观实用、易用、美观”u如果软件的功能不实用（不能为用户解决问题），那么不管该软件是否易用和美观，用户一般

3、都不愿意购买该软件，除非用户没有选择余地。u如果两个软件的功能和价格都相似，那么用户会挑选更加易用的那个软件。u如果两个软件的功能、价格、易用性都差不多，那么用户会选择更加美观的那个软件。n谁来评价谁来评价“好或差好或差”u用户才真正有资格说软件“好或坏”。如果用户对软件很不满意，开发人员不要有逆反情绪：从哪里找来的笨蛋用户！ 应当站在用户的立场看待软件应当站在用户的立场看待软件u开发机构宣扬“以客户为中心”，但是却撇开客户只顾忙碌地开发软件，做出客户不会用的东西。u很多软件开发人员不能够一次性地完成某些开发任务，主要原因不是技术水平低下，而是他们没有真正理解用户的需求，也没有站在用户角度看待

4、软件。如果用户不满意软件的功能和界面，那么开发人员将被迫重新开发。重新开发的代价显然要比修改Bug大得多。u如果软件企业能够真正重视并且下功夫提升“需求分析”和“用户界面设计”的能力，通常会显著地提升软件生产率和客户的满意度。好的用户界面应具备的特性好的用户界面应具备的特性u能够按照用户的希望和需要，提供不同详细程度的系统响应信息u与其它软件系统应有标准的界面u用户可以根据需要制定和修改界面方式 为使用户界面具有一定的灵活性，需要付出代为使用户界面具有一定的灵活性，需要付出代价，而且有可能降低软件系统的运行效率价，而且有可能降低软件系统的运行效率n适度复杂性和可靠性适度复杂性和可靠性u用户界面

5、的规模和组织的复杂程度就是界面的复杂性。u在完成预定功能的前提下，应使用户界面越简单越好。但不是把所有功能和界面安排成线性序列就一定简单。u用户界面的可靠性是指无故障使用的间隔时间。u用户界面应能保证用户正确、可靠地使用系统，保证有关程序和数据的安全性。n界面美观性界面美观性界面美的内涵界面美的内涵 优美的界面可以令人赏心悦目，界面的美不仅是它的外观漂亮，更在于其丰富的内涵。 界面美的内涵在于其有效表达思想的能力，这也是衡量美的一种标准，它的主要构成因素是： 合适性、吸引力和风格。 图形用户界面的主要思想图形用户界面的主要思想n桌面隐喻：桌面隐喻：是指在用户界面中用人们熟悉的桌是指在用户界面中

6、用人们熟悉的桌面上的图形清楚地表示计算机可以处理的能面上的图形清楚地表示计算机可以处理的能力。力。u图形用户界面中的图例可以代表对象、动作、属性或其他概念。图形具有一定的文化和语言独立性，可以提高搜索目标的效率。u隐喻的分类：F直接隐喻：隐喻本身就带有操纵的对象如Word绘图工具中的图标F工具隐喻：代表所使用的工具如存盘操作的磁盘图标、打印操作的打印机图标等F过程隐喻：通过描述操作的过程来暗示该操作如Word中的撤销和恢复图标。图形用户界面的主要思想图形用户界面的主要思想u隐喻的主要缺点：F需要占用屏幕空间F难以表达和支持比较抽象的信息u晦涩的隐喻不仅不能增加可用性，反而会弄巧成拙。不好的隐喻

7、不好的隐喻图形用户界面的主要思想图形用户界面的主要思想n所见即所得（所见即所得（What You See Is What You Get，WYSIWYG）u在WYSIWYG交互界面中显示的用户交互行为与应用程序最终产生的结果是一致的，人们可以对于最后的输出结果有直观的认识。u弊端：F如果屏幕的空间或颜色的配置方案与硬件设备所提供的配置不一样，在两者之间就很难产生正确的匹配。F完全的WYSIWYG也可能不适合某些用户的需要。 图形用户界面的主要思想图形用户界面的主要思想n直接操纵：是指可以把操作的对象、属性、关直接操纵：是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或系显式

8、地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上启动命令与数据手套等指点设备直接从屏幕上启动命令与数据的过程。数据的过程。u直接操纵的特性：F直接操纵的对象是动作或数据的形象隐喻 形象隐喻应该与其实际内容相近，使用户能通过屏幕上的隐喻直接想象或感知其内容。F用指点和选择代替键盘输入 有两个优点：一是操作简便，速度快捷；二是不用记忆复杂的命令。界面设计的三大原则界面设计的三大原则n以用户为中心以用户为中心u将界面置于用户的控制之下n减轻用户的记忆负担减轻用户的记忆负担u良好的直觉特性n保持界面的一致性保持界面的一致性1.用户中心用户中心n用户应该总是感觉在控制软件而不是感觉被软用

9、户应该总是感觉在控制软件而不是感觉被软件所控制件所控制u用户-而不是计算机或软件-开始动作u采取交互式和易感应的窗口u从用户的视角出发，使用用户的语言u后台运行长进程时，保持前台的交互性u容忍用户探索中出错u提供用户自定义设置 2.减轻记忆负担减轻记忆负担n用熟悉的隐喻为用户的任务提供直接而直观的用熟悉的隐喻为用户的任务提供直接而直观的界面界面 u唤醒用户的知识和经验 ，一看就知道u支持用户“认知”而不是记忆 u与常见软件保持一致 3. 一致性一致性n一致性为用户提供熟悉可预测的环境一致性为用户提供熟悉可预测的环境n用户能够将已有的知识应用到新的任务中，从用户能够将已有的知识应用到新的任务中，

10、从而更快地接受新事物而更快地接受新事物 u统一的命令术语u一致的操作环境u一致的功能和响应u一致的隐喻界面设计的一般详则界面设计的一般详则n交互交互n布局布局n色彩色彩n图标图标n联机帮助联机帮助n错误处理错误处理1 交互的设计原则交互的设计原则n尽量提供对所有功能的键盘访问尽量提供对所有功能的键盘访问 n尽量提供对所有功能的鼠标访问尽量提供对所有功能的鼠标访问 n不可逆的操作要求用户确认不可逆的操作要求用户确认 n耗时的操作给出反馈耗时的操作给出反馈 n可视的状态转换反馈可视的状态转换反馈 n鼠标右键仅用于快捷菜单鼠标右键仅用于快捷菜单 n快捷键的习惯一致性快捷键的习惯一致性 n避免水平滚动

11、条避免水平滚动条2 版式布局的设计原则版式布局的设计原则n平衡原则平衡原则u整齐有序、整体平衡n协调原则协调原则u划分一致的功能区n对比原则对比原则n预期原则预期原则u屏幕上所有对象的动作可预期n顺序原则顺序原则u根据需要排列对象显示的顺序页面被用户关注的程度不同页面被用户关注的程度不同3 色彩的设计原则色彩的设计原则n合理利用颜色，实现内容与形式的协调合理利用颜色，实现内容与形式的协调u采用柔和中性的颜色，支持用户定制u颜色设计一致u尽量用单色u一屏的色彩种类少于7种u对象颜色的选取符合习惯（如果有的话）u重要对象选取醒目颜色u为区分对象，首先按亮度、其次按颜色u背景色选取浅色调u暖色调接近

12、观众，冷色调远离观众图标的设计图标的设计n图标是可视地表示实体信息的简洁、抽象的符图标是可视地表示实体信息的简洁、抽象的符号。号。u设计图标时应该着重考虑视觉冲击力，要使用简单的颜色，利用眼睛对色彩和网点的空间混合效果，做出精彩图标。u设计图标时须遵守的原则和方法：F图标的图形应该和目标的外形相似，尽量避免过于抽象。F可在图标中附加上简要的文本标注，使用户明确图标的含义。F设计图标应尽可能简单（三维的图标虽然醒目但也能使人分心），符合常规的表达习惯，保持图标含义的前后连贯。5 联机帮助的设计原则联机帮助的设计原则n对用户的操作随时给出必要的帮助对用户的操作随时给出必要的帮助n提供帮助信息而不是

13、数据提供帮助信息而不是数据u帮助信息的内容简洁易懂u帮助信息的形式包括图表、动画和声音等u帮助信息有统一的风格n为不同类型的用户提供不同的帮助功能为不同类型的用户提供不同的帮助功能n帮助不能影响用户的工作任务，联机帮助结束帮助不能影响用户的工作任务，联机帮助结束后应该返回用户的工作任务后应该返回用户的工作任务6 错误处理的设计原则错误处理的设计原则n检测用户的错误，并提供简明的错误处理手段检测用户的错误，并提供简明的错误处理手段u报错信息以可视化的形式出现u报错信息语气友善u报错信息尽可能准确u报错信息简洁明了、通俗易懂u报错信息风格一致n提供保护功能和恢复提供保护功能和恢复(Undo)功能功

14、能软件人员经常编写出“劣质”的消息框，例如措词生硬、幼稚、蹩脚，甚至有文字、语法错误；消息文本、图形标志和命令按钮在语义上不一致。7 按钮的设计按钮的设计n按钮的设计原则：按钮的设计原则：u具有交互性，应该有3到6种状态效果：F点击时的状态F鼠标放在上面但未点击的状态F点击前鼠标未放在上面时的状态F点击后鼠标未放在上面时的状态F不能点击时的状态F独立自动变化的状态u按钮应具备简洁的图示效果，应能够让使用者产生功能上的关联反应。属于一个群组的按钮应该风格统一，功能差异大的按钮可以有所区别。8 屏幕布局的设计屏幕布局的设计n屏幕显示信息是由计算机系统向用户提供的反屏幕显示信息是由计算机系统向用户提

15、供的反馈信息，屏幕显示界面的设计应能展现这些信馈信息，屏幕显示界面的设计应能展现这些信息。息。 u设计屏幕布局时应该使各功能区重点突出，应遵循如下几条原则：F平衡原则：屏幕上下左右平衡F预期原则：屏幕上所有对象处理一致化，使对象的操作结果可预期F经济原则：提供足够信息量的同时要注意简明、清晰F顺序原则：按照需要排列顺序F规则化：画面应对称，显示应尽量统一规范9 菜单界面的设计菜单界面的设计n菜单在图形界面的应用程序中使用得非常普菜单在图形界面的应用程序中使用得非常普遍，是软件界面设计的一个重要组成方面，描遍，是软件界面设计的一个重要组成方面，描述了一个软件的大致功能和风格。述了一个软件的大致功能和风格。u菜单中的选项在功能上与按钮相当，一般具有下列一种或几种类型的选项：命令项、菜单项和窗口项。u菜单的结构一般有：F单一菜单F线状序列菜单F树状结构菜单F网状结构菜单10 填表输入界面的设计填表输入界面的设计n在处理大量相关数据的场合下，需要输入一系在处理大量相关数据的场合下，需要输入一系列的数据，这时填表输入界面是最理想的数据列的数据，这时填表输入界面是最理想的数据输入界面。输入界面。u填表输入界面的特点： F有明确的提示