人机交互技术03

人机交互技术第3讲界面设计王艳ywang94@主要内容

界面设计原则

用户研究

任务分析

以用户为中心的界面设计用户界面软件界面用户界面分类命令行界面可以看作是第一代人机界面人被看成操作员，机器只做出被动的反应，人用手操作键盘，输入数据和命令信息，通过视觉通道获取信息，界面输出只能为静态的文本字符。图形界面可看作是第二代人机界面基于图形方式的人机界面。由于引入了图标、按钮和滚动条技术，大大减少了键盘输入，提高了交互效率。多通道用户界面进一步综合采用视觉、语音、手势等新的交互通道、设备和交互技术，使用户利用多个通道以自然、并行、协作的方式进行人机对话，通过整合来自多个通道的、精确的或不精确的输入来捕捉用户的交互意图，提高人机交互的自然性和高效性。桌面隐喻桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力。所见即所得在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。直接操纵直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。图形用户界面的主要思想桌面隐喻桌面隐喻是指在用户界面中用人们熟悉的桌面上的图例清楚地表示计算机可以处理的能力图例可以代表对象、动作、属性或其他概念好的图例比文本更易于辨识与文本相比图例占据较少的屏幕空间有的图例还可以独立于语言——因其具有一定的文化和语言独立性，可以提高目标搜索的效率隐喻表现方法：静态图标、动画、视频等三种隐喻直接隐喻工具隐喻过程隐喻缺点需要占用屏幕资源，并且难以表达和支持比较抽象的信息所见即所得WhatYouSeeIsWhatYouGet它使得用户在视图中所看到文档与该文档的最终产品具有相同的样式，也允许用户在视图中直接编辑文本、图形、或文档中的其他元素。WYSIWYG语言常常比标签语言容易使用，因为标签语言并没有对各种改变提供即时的视觉上的反馈。在WYSIWYG交互界面中，其所显示的用户交互行为与应用程序最终产生的结果是一致的。缺点屏幕空间或颜色配置方案与硬件设备

所提供的配置不一样，在两者之间就

很难产生正确匹配完全的WYSIWYG可能不适合某些用户需要直接操纵直接操纵是指可以把操作的对象、属性、关系显式地表示出来，用光笔、鼠标、触摸屏或数据手套等指点设备直接从屏幕上获取形象化命令与数据的过程。对象是动作或数据的形象隐喻用户指点和选择代替键盘输入操作结果立即可见支持逆向操作缺点更加容易出现操作错误，必须提供逆向操作功能更多地借助物理的、空间的或形象的表示，而不是单纯的文字或数字的表示。在抽象的、复杂的应用中，具有局限性界面要具有一致性常用操作要有快捷方式提供必要的错误处理功能提供信息反馈允许操作可逆设计良好的联机帮助合理划分并高效地使用显示屏幕图形用户界面设计的一般原则主要内容

界面设计原则

用户研究

任务分析

以用户为中心的界面设计定义用户用户的含义简单的说，用户是使用某种产品的人，其包含两层含义：1）用户是人类的一部分；2）用户是产品的使用者。产品的设计只有以用户为中心，才能得到更多用户的青睐。衡量一个以用户为中心的设计的好坏，关键点是强调产品的最终使用者与产品之间的交互质量，它包括三方面特性：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（Effectiveness）、效率（Efficiency）和用户主观满意度（Satisfaction）。延伸开来，还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等。用户体验用户体验（UserExperience，UX）通常是指用户在使用产品或系统时的全面体验和满意度。用户体验主要有下列四个元素组成：品牌（Branding）使用性（Usability）功能性（Functionality）内容（Content）品牌用来衡量网站品牌的描述包括：

1、用户为访问都提供了有吸引力的难忘的体验

2、网站的视觉效果与品牌一致

3、图片，附加内容，多媒体内容提供了体验过程的价值

4、网站传达了品牌设定的程度。

5、网站充分运用了这个体能力，加强了或延伸了品牌。使用性使用性包括一般意义上的对所有网站的内容和特点的易用性。在可能之下的二级主题还包括导航的友好性。他们包括：

1．网站防止错误发生，并帮助使用都从错误中恢复。

2．整体页面侧重应针对主要目标受众优化。

3．网站帮助其访问都达成一般性目标和任务。

4．网站保持其一致性和标准。

5．网站能为有残疾用户提供特定内容。功能性功能性包括所有技术上的及屏幕之后的流程及应用，它伴随着为所有最终用户提供互动服务，而且有时对公众和管理员都有意义。用来衡量功能性的描述包括：

1．用户及时获得对其查询和提交信息的反馈。

2．深晰的任务过程的告知（比如成功页面或邮件更新提示）

3．网站和应用加上了一般的安全及个人隐私的标准

4．在线功能与离线业务结合

5．网站包含管理工具，加强管理员的效率。内容内容指网站的实际内容，文本，图片，多媒体等到，以及其结构，信息体结构。

我们考虑信息和内容是如果根据用户需要和客户业务要求而组织的。

1．连接密度带来的清晰度和简单的网站浏览。

2．内容组织方便了用户实现他们的目标

3．内容及时准确

4．内容与用户需要和商务目标相切合。

5．多语言的综合性内容。用户研究方法背景调查类（间接资料搜集、现有流程分析、竞争对手分析）观察类（影子跟随法、视频观察法）访谈类（面谈法、焦点小组、问卷调查）用户研究数据的整理卡片法虚拟角色编写故事板主要内容

界面设计原则

用户研究

任务分析

以用户为中心的界面设计任务分析任务分析是交互设计至关重要的环节，在以用户为中心的设计中，关心的是如何从用户那里理解和获取用户的思维模式，进行充分、直观的表达，并用于交互设计。描述用户行为的工具有很多，目前经常提到的是通用标识语言UML（UnifiedMarkupLanguage）。任务分析UML2.0共有10种图示，分别为组合结构图、用例图、类图、序列图、对象图、协作图、状态图、活动图、组件图和部署图，它们分别用以表现不同的视图。在任务分析中使用UML工具，可以清晰地表达一个交互任务诸多方面的内容，包括交互中的使用行为、交互顺序、协作关系、工序约束等等。使用行为分析使用行为分析就是要理解系统中每个参与者及其所需完成的任务，即分析系统所涉及的问题领域和系统运行的主要任务，分析使用该系统主要功能部分的是哪些人，谁将需要该系统的支持以完成其工作。使用行为分析一般使用用例图描述，它从参与者的角度出发来描述一个系统的功能，主要目的是帮助开发团队以一种可视化的方式理解系统的功能需求。苏轼三国的“国际形势”曹操占领荆州，决定乘胜东进，企图八十万水军占领东吴，东吴一时文臣主降，武将主战，孙权举棋不定，诸葛亮到来给东吴主战派带来希望。经过诸葛亮、周瑜等人的分析，坚定了孙权的抗曹决心，乃与刘备订立盟约共同抗曹。29曹操发动赤壁之战……引发西蜀流程：赤壁之战，其它流程OOAD最关心流程与元件任务：西蜀的剧情和演员？描述流程（剧情）——分析安排主/配角（元件）演出——设计把西蜀看成黑箱!!用例叙述曹操举兵南下,西蜀就拟定策略,展开布署,并联络孙权,鼎力对抗曹操大军.把西蜀黑箱打开元件有哪些？刘备关羽张飞孔明把西蜀黑箱打开曹操举兵南下,刘备请孔明拟定策略.派遣关羽和张飞防守荆州,

同时请孔明连络孙权,共同对抗曹操.

孔明联合孙权,借东风,火烧曹军于赤壁.

刘备孔明关羽求战请拟策略张飞请防守荊州请防守荊州前线孙权曹操请联络孙权请孙权领兵相助借东风火攻火攻曹军用顺序图叙述故事刘备的职责……刘备求战请拟策略请防守荊州请联络孙权我刘备必须迎战曹操！！！用类图表示刘备……刘备求战刘备迎战曹操用类图表示孔明……孔明请拟策略请联络孙权请孙权领兵相助借东风火攻火攻曹军孔明拟定策略联络孙权借东风火攻用类图表示关、张二人……关羽张飞请防守荊州请防守荊州前线关羽防守荊州张飞防守荊州前线UML版：故事情节曹操向西蜀发送请战的消息，起动了西蜀迎战的流程西蜀流程执行的结果，返回曹操的是火攻西蜀流程执行过程中，调用了孙权的帮助，园满完成了流程UML版：人物刻画流程执行中，西蜀各成员之间通过发送消息协作，各成员的作用刘备：迎战曹操孔明：拟定策略，联络孙权，借东风火攻关羽：防守荊州张飞：防守荊州前线曹操发起动作：起兵获得结果：火攻孙权获得的消息：联合抗曹返回动作：联盟、协作主要内容

界面设计原则

用户研究

任务分析

以用户为中心的界面设计以用户为中心的界面设计Gould、Boies和Lewis于1991年提出了以用户为中心设计的四个重要原则。及早以用户为中心：设计人员应当在设计过程的早期就致力于了解用户的需要。综合设计：设计的所有方面应当齐头并进发展，而不是顺次发展，使产品的内部设计与用户界面的需要始终保持一致。及早并持续性地进行测试：当前对软件测试的唯一可行的方法是根据经验总结出的方法，即若实际用户认为设计是可行的，它就是可行的。通过在开发的全过程引入可用性测试，可以使用户有机会在产品推出之前就设计提供反馈意见。反复式设计：大问题往往会掩盖小问题的存在。设计人员和开发人员应当在整个测试过程中反复对设计进行修改。图形用户界面设计与评估

（GraphicalUserInterfaceDesignandEvaluation，GUIDE）以用户为中心的逻辑交互设计

（LogicalUser-CentredInteractionDesign，LUCID）用于交互优化的结构化用户界面设计

（StructuredUser-InterfaceDesignforInteractionOptimisation，STUDIO）以使用为中心的设计

（Usage-CenteredDesign）对象、视图、交互设计(Object,View,Interaction,Design,OVID)以用户为中心的设计方法OVID的三个模型设计者模型编程者模型用户界面用户概念模型设计者用户细化实现交互OVID中的活动图任务分析对象视图任务交互对象建模分析是将系统和用户任务分析的结果转化为用户界面设计的第一步建模是将系统任务的某些概念及其关系用图的方式直观综合地表达出来分析是将系统的对象抽象为类，列出对象或类的属性、行为、以及对象间的关系对象建模分析在线机票订购例子交互的视图可能包括：用户查询航班视图航班信息列表视图用户选中的某个具体航班的信息视图订购信息填写视图支付视图交易成功反馈和出票视图等。视图抽象设计通过组合概念模型中的对象和对象操作，提供系统运行的方法和方式，为具体的设计提供指导，并要为系统的不同实施方案提供灵活的界面选择。系统的对象模型系统状态每个视图涉及的对象对象属性和行为视图抽象设计在线机票订购例子订机票的过程基本上由用户登录、查询航班、预订机票、支付、出票等交互过程组成。商户交互的视图可能包括：用户查询航班视图、航班信息列表视图、用户选中的某个具体航班的信息视图、订购信息填写视图、支付视图、交易成功反馈和出票视图等。针对特定的操作系统或交互方式，对抽象的视图设计做进一步的具体设计，产生视图的概要设计。实际设计中，这些视图通常是用铅笔画在纸上，这样做速度快，而且修改起来也比较方便。概要设计查询条件航班号起飞城市到达城市起飞时间到达时间全票票价剩余票额CA1100济南北京17：3519：1050020…………………………………