人机交互界面设计

一、题型：

（一）简答题

（二）论述题

（三）设计题

二、考点

：

1.什么是人机交互技术？

人机交互技术（Human-Computer Interaction Techniques）是指通过计算机输入、输出设备，以有效的方式实现人与计算机对话的技术。

2.简单介绍人机交互技术的研究内容。

（1）人机交互界面的表示模型和设计方法

（2）可用性分析与评估

（3）多通道交互技术

（4）认知与智能用户界面

（5）群件

（6）Web设计

（7）移动界面设计

3.简单介绍人机交互技术的发展历史。

人机交互的发展过程，也是人适应计算机到计算机不断地适应人的发展过程。它经历了几个阶段：命令行  ->   图形用户界面   ->   自然和谐的交互

1.命令行界面交互阶段:计算机语言经历了由最初的机器语言，而后是汇编语言，直至高级语言的发展过程。这个过程也可以看作早期的人机交互的一个发展过程.

2.图形用户界面（GUI）交互阶段:

1）图形用户界面（Graphical User Interface，GUI）的出现，使人机交互方式发生了巨大变化。GUI 的主要特点是桌面隐喻、WIMP技术、直接操纵和“所见即所得”。

2）与命令行界面相比，图形用户界面的人机交互自然性和效率都有较大的提高。图形用户界面很大程度上依赖于菜单选择和交互小组件（Widget）。

3）图形用户界面给有经验的用户造成不方便，他们有时倾向使用命令键而不是选择菜单，且在输入信息时用户只能使用手这一种输入通道。

4）图形用户界面需要占用较多的屏幕空间，并且难以表达和支持非空间性的抽象信息的交互。

3.自然和谐的人机交互阶段:随着虚拟现实、移动计算、无处不在计算等技术的飞速发展，自然和谐的人机交互方式得到了一定的发展。基于语音、手写体、姿势、视线跟踪、表情等输入手段的多通道交互是其主要特点，其目的是使人能以声音、动作、表情等自然方式进行交互操作。

4.列举几个生活中常见的人机交互技术应用的例子。

（1）新兴的谷歌眼镜综合了语音指令识别、眼动识别和触控技术，仅仅通过一个眼镜便可以上网、看视频、获取定位等功能

（2）我们所使用的多点触控技术，可以通过滑动、放大缩小、旋转等在智能手机、平板电脑上实现更自然的操作

（3）体感游戏机依靠了高科技的视频动作捕捉技术，令人的身体动作能即时反映到游戏系统中，通过感应人体运动来推动游戏的进行。

（4）计算机游戏中的声音、画面等也渗透着人机交互技术的应用。视听觉感应以及手触摸式游戏玩法等都需要借助人机交互技术得以实现。

5.列举几种不同感观在交互体验中的应用。

视觉：谷歌眼镜上的眼动识别技术

触觉：智能手机上的多点触控技术

6.人的认知过程分为哪几类？

1）感知和识别：人们可以使用感官从环境中获取信息，并把它转变为对物品、事件、声音和味觉的体验。

2）注意：注意通常是指选择性注意，即注意是有选择的加工%0A某些刺激而忽视其他刺激的倾向。

3）记忆：记忆就是回忆各种知识以便采取适当的行动。

4. 问题解决：问题解决是由一定的情景引起的，按照一定的目标，应用各种认知活动、技能等，经过一系列的思维操作，使问题得以解决的过程。

5. 语言处理：阅读、说话和聆听这三种形式的语言处理具有一些相同和不同的属性。相似性之一是，不论用哪一种形式表示，句子或短语的意思是相同的。但是，人们对阅读、说话和聆听的难易有不同的体会。

7.虚拟现实交互设备进行分类归纳总结，并进行优缺点比较。

8.掌握手写板绘图程序的设计过程。

9.给出一个实际应用中交互设备整合应用的例子。

新兴的谷歌眼镜综合了语音指令识别、眼动识别和触控技术，仅仅通过一个眼镜便可以上网、看视频、获取定位等功能

10.简要论述界面设计的一般原则。

1.一致性：整个界面的控制中要使用一致的机制。

2.兼容性：新的设计应该基于用户以前的经验，使用用户熟悉的表达。

3.适应性：用户应该处于控制的地位，界面要适应用户的工作速度、个人特征和技术水平等。

4.经济性: 尽可能减少用户的工作（包括减少用户记忆），设计操作时尽量以最少的步骤来实现，如提供快捷方式等，以达到高效。

5.结构性：按照逻辑意义将信息分组，在屏幕上有规律的分布。

6.指导性而不是控制用户：通过提供状态信息、反馈信息出错信息和帮助来指导用户。

11.利用本章介绍的人机交互界面设计方法，完成网上银行系统的交互界面分析和设计，包括账户查询、存款、取款、转账等业务流程。

12.掌握MVC软件设计模式。

说明

本笔记对应的书籍为：用户界面设计——有效的人机交互策略（第六版）
所节选内容可能不完整甚至存在错误，为笔者复习时所做。
后续章节内容较少，只节选了一些例子。内容多少不代表其重要性高低，内容均为笔者的主观选择性记录。

第一章 交互系统的可用性

可用性定义：是指特定的用户在特定的环境下使用产品并达到特定目标的效率、效率和满意的程度（ISO9241-11）。

ISO9241: 可用性目标：有效性、效率、满意度

一种可用性度量（只关注了效率和满意度）：

1.学习时间。典型的用户群体需要花多长时间来学习如何使用与一组任务相关的动作？
2.运行速度。执行基准任务需要花多长时间？
3.用户出错率。人们在执行基准任务时会犯多少错误？是哪些类型的错误？尽管犯错和改错的时间可能会被加到运行速度中，但错误处理是非常关键的界面使用组件，所以值得对其进行广泛研究。
4.记忆保持时间。一小时、一天或一周后，用户还能记住多少知识？记忆力可能与学习时间紧密相关，而使用频率也起到重要作用。
5.主观满意度。用户喜欢使用界面各个方面的程度如何？答案可通过访谈或通过包含满意度和自由评论空间的书面调查来获得。

p10

可用性动机

第2章 通用性

引言

有些人喜欢左手操作电脑，有些人看不清字

​ 通用的访问功能：强调链接的多选框、让按钮更大、多种大小的字体、对比度、照片的文字描述、翻译

• 个体差异和不同的使用场所
• 不同的认知和感知能力
• 个体差异
  • 喜好计算机还是移动设备
  • 交互风格、速度、图形、表格显示，密集与稀疏数据的喜好
  • 男性女性
  • 用户行为：电子邮件分类存放还是都放在一起
• 文化多样性和国际多样性
• 残疾用户
  • 盲人：屏幕阅读器、盲文显示器
  • 弱视：放大内容
  • 听力障碍：视频中添加字幕
• 老年用户
• 儿童
  • 交互性：让年轻人自己掌握控制权，与伙伴建立社会交往
  • 儿童对挑战的渴望与父母对安全的渴望折中
  • 年幼儿童的局限性：拖动鼠标、双击
• 适应软硬件的多样性

第3章 指南、原则与理论

1.指南。关注低层次良好实践和危险防范的一些意见。
2.原则。中级策略和规则，用于分析和比较设计备选方案。
3.理论。广泛适用的高级框架，在设计和评估过程中需要借鉴，同时需要支持交流与教学。理论也可预测，比如那些按人统计点击次数或社区事务的参与率。

3.2 指南

界面导航

• 将任务序列标准化。允许用户在相似的条件下以相同的顺序和方式执行任务。
• 确保链接是描述性的。使用链接时，链接文字应准确描述链接目标地址。
• 使用一致的描述性标题。使用彼此区分的标题，并使其与所描述的内容相关。
• 对互斥选择使用单选钮。需要从互斥选项列表中选择答案时，应提供单选钮。
• 开发适合于打印的页面。如果需要打印页面，应将其宽度设置成适合于打印。
• 使用缩略图预览较大的图像。对于全尺寸图像，应首先提供缩略图。

可访问性指南：

• 替代文本。为所有非文本内容提供替代文本，以便转换成人们需要的其他形式，诸如大字印刷、盲文、语音、符号或较简单的语言。
• 基于时间的媒体。为基于时间的媒体（如电影或动画）提供备选项。将等价的备选项（如标题或视觉跟踪的听觉描述）与演示同步。
• 可辨识。使用户更易看到和听到内容，包括将前景与背景分离。不能把色彩作为传达信息、指示动作、提示响应或辨识可视元素的唯一可视手段。
• 可预测。使网页以可预测的方式出现和运行。
  这些指南的目标是让残疾用户能够通过使用屏幕阅读器或其他专门的技术，来访问页面容。

组织显示

1.数据显示的一致性。设计过程中，应使用术语数据字典对术语、缩写、格式、颜色、大写规则等进行标准化和控制。
2.用户对信息的有效获取。格式应是操作者熟悉的，并应与需要使用这些数据来执行的任务相关。这一目标通过以下规则实现：数据列要保持整齐，字母数字数据左对齐，整数右对齐，小数点排成列，间隔适当，使用易于理解的标签、适当的度量单位和十进制数。
3.用户记忆负担最小化。不应要求用户记住在一个屏幕上使用来自于另一个屏幕上的信息。任务应按只需很少动作就能完成的方式来安排，以便使得忘记执行某个步骤的机会降至最低。应给新用户或间歇用户提供标签和通用格式。
4.数据显示与数据输入的兼容性。显示信息的格式，应与数据输入格式清晰地关联起来。
在可能且适当之处，输出域也应充当可编辑的输入域。
5.用户控制数据显示的灵活性。用户应能从最方便当前任务的显示中获取信息。例如，用户应能轻易地改变行和列的顺序。、

引起用户注意

• 亮度。仅使用两级，有限地使用高亮度来吸引注意。
• 标记。在项下面加下画线、封装在框图中、通过箭头指向或使用指示符，诸如星号、项目符号、破折号、加号或叉号。
• 尺寸。最多使用4种尺寸，用较大的尺寸吸引更多的注意。
• 字体选择。最多使用3种字体。
• 闪烁。在有限的域中谨慎使用闪烁显示（2~4Hz）或闪烁的颜色变化，因为闪烁会令人分心并可能引发癫痫。
• 颜色。最多使用4种标准色，保留其他颜色以便偶尔使用。
• 音频。使用柔和的音调表示正常的正反馈，使用刺耳的音调表示少见的紧急情况。

新用户需要简单的、按逻辑组织的、标注清楚的显示来指导他们的动作。专家用户偏爱有限的域标签，以便更容易地提取数据

便于数据输入

1. 保证数据输入业务的一致性。类似的动作序列能够加快学习进度。
   2.将用户输入动作最小化。较少的输入动作意味着较高的操作者生产率和较少的错误率。
   采用单击鼠标或手指触压来选择，比输入冗长的字符串来做出选择更受欢迎。在选项列表中进行选择，用户就不需要记忆，也不需要决策任务的结构，还消除了输入错误的可能性。该指南的第二个方面是应避免冗余数据的输入。在两个位置输入相同的信息，对用户来说是一场噩梦，比如账单和送货地址相同时，若需要输入两次就很恼人。
   重复输入既浪费时间，又会是产生错误的温床。
   3.将用户记忆负担最小化。用户进行数据输入时，不应要求他们记住冗长的代码清单。
   4.保证数据输入与数据显示的兼容性。数据输入信息的格式，应与显示信息的格式紧密相连，如在电话号码中使用破折号。
   5.保持用户控制数据输入的灵活性。有经验的用户可能更喜欢按照他们可控的顺序输入信息，例如购买衣服时，是先选颜色还是先选尺寸。

3.3 原则

•More fundamental, widely applicable, and enduring than guidelines

•Need more clarification

确定用户的技能水平

1. 新用户
2. 知识的丰富的间歇用户
3. 专家型常用用户

为某一类用户设计系统很容易，但为好几类用户设计则要困难得多。当一个系统必须适应多个用户类别时，基本策略是采用多层（有时也称为多级或螺旋）学习方法。开始时，新用户只需学习对象和动作的一个最小子集。当他们的选择不多且有保护措施防止犯错时，最有可能做出正确的选择。进而树立信心，继续学习更高级的任务概念和界面概念。

识别任务

任务分析

任务分解：高级任务动作能够分解成多个中级任务动作，进而细化为用户使用单个菜单选择或其他动作来执行的原子动作。选择最适当的原子动作集合是一项困难的任务。原子动作太小，用户将会因为完成较高级任务需要大量动作而心情沮丧。原子动作过大且过于详尽，用户就要在界面中找到特别的选项达成目标。

任务频率

创建用户和任务矩阵： 帮助分类以及任务的频率

选择交互风格（5种）

5种主要交互风格：

风格	优点	缺点
直接操纵	·可视化表示任务概念 ·允许容易地学习可能需要图形显示器和指向设备 ·允许容易地记忆 ·允许避免错误 ·鼓励探索 ·提供较高的主观满意度	可能难以编程 可能需要图形显示器和指向设备
导航与莱单选择

界面设计的黄金法则（8条）

1.坚持一致性在相似的环境中应要求一致的动作序列；在提示、菜单和帮助界面中应使用相同的术语；应始终使用一致的颜色、布局、大小写和字体等；要求确认删除操作、不回显口令字符等，这些应该始终坚持且应尽量限制它们的使用。
2.寻求通用性认识到不同用户和可塑性设计的要求，可使内容的转换更便捷。新手到专家的差别、年龄范围、残疾程度、国际变化和技术多样性，这些都扩大了需求的范围，从而指导设计过程。为新用户添加特性（如注解）和为专家用户添加特性（如快捷方式和更快的节奏），能够丰富界面设计并提高用户体验。
3.提供信息反馈对每个用户动作都应有反馈界面。对于常用和较少的动作，中等响应即可；对于不常用的主要动作，应有更多响应；为感兴趣的对象提供可视化表示，为明确地展示变化提供了方便的环境（见第7章中对直接操纵的讨论）。
4.通过对话框产生结束信息应将动作序列分组，每组分为开始、中间和结束三个阶段。每完成一组动作就提供信息反馈，会使用户感到满足和轻松，忘掉那些应急方案，并提示将准备下一组动作。例如，用户在电子商务网站首先选择产品，然后结账，最后以完成交易的清晰确认页面结束。
5.预防错误要尽可能通过设计界面使用户不至于犯严重的错误。例如，将不适用的菜单项变为灰色，不允许在数值输入域中出现字母（见3.3.5节）。如果用户犯错，界面应提供简单、有建设性和具体的说明来恢复。例如，如果用户输入了无效的邮政编码，则不必重新键入整个姓名一地址表格，而应有指导提示他修改出错的部分。界面状态在错误的动作下应保持不变，否则界面中应给出恢复状态的说明。
6.提供回退操作应尽可能允许回退操作。因为用户知道错误能够撤销后，就能够减轻焦虑，进而尝试不熟悉的选项。可回退的单元可能是一个动作、一个数据输入任务或一个完整的任务组，诸如姓名-地址信息的输入。
7.用户掌握控制权有经验的用户强烈希望他们能够掌控界面，且界面能够响应他们的动作。他们不希望熟悉的行为会出现意外的结果或发生改变，并且会对乏味的数据输入、难以获得必要的信息和无法得到期望的结果而感到烦闷。
8.减轻短期记忆负担由于人类利用短期记忆进行信息处理的能力有限（一般认为人们能够记忆5~9个信息块），这就要求设计人员在其设计的界面中，应避免用户必须记住屏幕上显示的信息，然后在另一个界面上使用这些信息。这意味着不应要求在手机上重新输入电话号码、网站位置应保持可见、将冗长的表格压缩为能在一个界面中显示。

自动化的目标只是“提高系统的性能，而不能减少人的参与”

例如： 飞行员过度依赖自动设备，故障时失去方向感，坠毁

3.4 理论

层次设计理论

行动阶段理论

一致性理论

情境理论

动态理论

3.4.4情境理论 Contextual theories

微观人机交互理论 Micro-HCI Theories

在实验室环境中花费几秒钟或几分钟，专注于多层标准任务的可度量性能（如速度和误差）。

• 层次设计理论（3.4.1）
  • 按级分离：概念模型、语义模型、句法模型、词法模型
• 行动阶段理论（3.4.2）
• 一致性理论（3.4.3）

这些理论和设计包括速度和误差方面的重要可度量性能。对于致力于确定任务小组的显著差异，微观人机交互是最好的科学方法，因为它采用了30~120分钟的受控实验、统计学检验的实验心理学，以及认知心理学。

研究更多的是实验室研究，目的是为可识别任务收集明确的绩效评估。

研究的效果是统计学上的明显差异。支持或反驳某个假设。

宏观人机交互理论 Macro-HCI Theories

在具有丰富社会参与的现实使用环境中花几周和几个月的时间，专注于用户体验的案例研究。

强调用户体验、使用环境和社交。

研究更多的是用户人种学的观察，它长期研究用户在自身熟悉的环境下工作或游戏。

研究的结果是对某一个现象的深刻见解，比如什么会导致增加用户满意度，如何使用事件的环境，新的应用如何改善教育、健康、安全和环境。

第二部分：设计过程

第4章 设计

四个阶段

1. 需求分析
2. 概要设计与详细设计
3. 建立和实施
4. 评估

设计框架

1. 以用户为中心（UCD）

   在每个设计阶段考虑最终用户的需求。

   缺：用户参与是最大的挑战（不愿参加）

2. 参与式设计（PD）

   人们直接参与到所用产品的协同设计中

   优点：更多的用户参与带来有关任务的更准确信息，用户影响决策的机会

   缺点：成本高昂，可能延长实现周期

3. 敏捷交互设计

设计方法

1. 不断发散、收敛最后终止与某个点，就完成产品设计

2. 调查、访谈、讨论组

3. 人种学研究

4. 场景开发与脚本

5. 原型

   1. 低保真原型：通常由草图和便签通过剪切和粘贴完成（“纸原型”）
   2. 中保真原型：通常称为线框，它提供一些标准化的元素（如按钮、菜单和文本域），即使采用手绘方式来画出草图，依然会有一些基本的导航能力。
   3. 高保真原型：看起来几乎与最终产品相同，并具有一些基本的计算能力，但这种原型通常不完整，功能也不完善。

   低保真原型更适合早期的构思和创造，因为这些原型能很轻易地获得和丢弃。它表达了构思过程中的不确定性，进而导致进一步的改进或放弃。高保真模型制作周期比较漫长，看起来几乎与最终产品相同，并具有一些基本的计算能力，但这种原型通常不完整，功能也不完善。

原型制作。

第5章 评估和用户体验

专家评审（expert review）

专家评审（expert review）是把专家当做员工或顾问，他们使用严格的方法遍历界面中所有的关键功能，可在很短时间内迅速给出评审结果的评估方式。

优点：专家评审可以发现人机交互中的问题，例如不一致性、定位异常等问题。可以提出优化的建议。

缺点：专家评审存在风险，专家可能对任务域或用户群的了解不够。不同的人在相同的界面中会发现不同的问题，因此由3~5名专家一起评审效率会更高。专家的喜好不同导致了不一致的建议可能使得情况进一步恶化。即使是经验丰富的专家也难以预测典型用户的行为。

几种方法

‒Heuristic evaluation 启发式评审：评审专家对界面进行评审，确定这些界面是否符合启发式设计的简要列表。

‒Guidelines review 指南评审：检查界面是否符合组织文档或其他的指南文档

‒Consistency inspection 一致性检查：对同一类型的界面进行一致性检查

‒Cognitive walkthrough 认知过程走查法：专家模拟用户的身份，以走查整个界面的方式完成一些典型任务。

‒Formal usability inspection 正式的可用性检查

5.3可用性测试

可用性测试的目的是，找出用户界面中存在的缺陷。这两种策略都要用到一组精心准备的任务集，但可用性测试的参与者更少一些（可能3人就够），最终结果不仅包括对假设的确认或拒绝，还会提出一份报告，报告中记录着一些修改建议。

可用性测试方法

可用性测试方法有纸上模型与原型、简易可用性测试、竞争性可用性测试、A/B测试、通用性测试、实地测试与便携实验室、远程可用性测试、“你能攻破吗”测试。

方法	应用场景
纸上模型与原型	早期的可用性研究
简易可用性测试	采用简易可用性测试作为形成性评价（对设计进行大量修改时）。形成性评价识别出的问题，可以指导重新设计。
竞争可用性测试	将新界面与之前的版本或竞争者的类似产品进行对比。
A/B测试	对相同界面的不同设计进行测试时。一般情况下，每组的参与者人数较多时会采用这种测试方法。
通用性测试	预期用户范围较大时
实地测试与便携实验室	在真实环境中测试新界面
远程可用性测试	基于Web的应用系统，全世界都能访问到的系统，需要接触到大量参与者群体的系统
你能攻破吗”测试	寻找系统的重大缺陷

第6章 设计案例研究

第三部分： 交互风格

第7章 直接操纵与沉浸式环境

Direct Manipulation and Immersive Environments

例子：汽车驾驶。 驾驶员只需要简单的打方向盘即可左转右转

优点：

1. 控制、显示兼容性
2. 减少了语法错误
3. 更容易预防错误
4. 更快的学习速度和更高的保留率
5. 鼓励探索

缺点：

1. 占用宝贵的屏幕时间
2. 用户必须学习视觉表示和图形图标的含义
3. 对于经验丰富的打字员来说，操作鼠标耗费的时间可能比输入相关命令更长
4. 空间或视觉表示过于分散

直接操纵实例

有GPS的地理系统

视频游戏

CAD , CAM

增强现实与虚拟现实

增强现实（Augmented Reality)：可以使用户看到叠加了附加信息的现实世界。

​ 应用：

1. 导游眼镜帮助游客查看建筑信息
2. 医生使用眼镜看到声波叠加图或其他信息
3. 显示建筑物电线及墙体的内部结构

虚拟现实（Virtual Reality）：打破了空间限制，使用户认为身处他处

​ 应用：

1. 治疗恐高症病人
2. 分散病人注意力，减少疼痛
3. 治疗PTSD的军人                                                                                                                                                                                                                                                                                                                                                                                                                                                       

混杂现实 Mixed Reality：使真实的环境和虚拟的物体叠加到了同一个画面或空间同时存在，两种信息相互补充、叠加

元宇宙Metaverse：是一个融合了虚拟现实、增强现实和互联网的虚拟共享空间。它更加强调虚拟世界。用户可以选择使用虚拟现实和增强现实进入虚拟世界获取信息。元宇宙是一个共享的虚拟空间，用户可以通过互联网访问。元宇宙的范围比虚拟现实大很多。

第8章 流畅的导航（讨论题）

Fluid Navigation

（1） 电话订报纸 菜单顺序如何设置？

1. 按字母排序：  加快用户的访问速度
2. 按主题分组   ，先分为两类：娱乐和业务，这样分为两个校列表
3. 按销售额分组，首先关注频繁的用户

（2） 适合fill-in 比direct-manipulation更好的：

1. 需要很少的培训的系统。例如ATM中选择20￥，50￥
2. 任务驱动应用程序，例如自动点餐菜单，可以从固定的列表中选择饮料。。。。
3. 简单的确认声明，例如是否删除文件？是、否

（3） 经常使用菜单的用户如果必须进行多个菜单选择才能完成一项简单的任务，他们可能会感到烦恼。建议两种方法，您可以优化菜单方法以适应专家或频繁用户。方法：

1. 键盘快捷键
2. 使用面包屑“bread crumbs"轻松导航到菜单位置

（4） 菜单结构中导航迷失方向，解决：

​ 突出显示菜单位置：

​ Main Menu -> *Mid-size Cars* -> Honda -> Accord

（5）对于智能手机甚至智能手表屏幕等小屏幕显示器的流畅导航，有哪些设计考虑因素？

	1. less is more
	2. 减少或消除数据输入
	3. 可学习性
	4. 考虑使用频率和重要性
	5. 规划中断
	6. 上下文信息的使用
	7. 明确哪些是可选的
	8. 为滚动和滑动手势留出空间，避免意外操作
	9. 不太重要的操作降级到其他平台

（6）警报：

1. 突出红色，以及额外的确认步骤
2. 询问接收或者取消
3. 颜色和字体的选择，让布局变得合理
4. 超链接

第9章 表述性人类和命令语言

Expressive Human & Command Languages

1. 语音助手如siri 什么时候使用什么时候不使用？

   1. 使用：释放双手的时候
   2. 不使用：集中注意力的工作中

2. 请就语音交互在用户界面中应发挥的作用进行深思熟虑的论证。请务必列出口语互动的至少三个好处和局限性。

   1. 对于新手来说有好处。适合不方便使用手的时候。缺乏打字能力的用户。具有可用性限制的人
   2. 有限的用户需求。许多人更喜欢直观的界面。识别准确性。

3. 一些设计师建议在电话菜单系统中使用语音识别。这将允许用户通过说话而不是按下拨号盘上的按钮来与系统进行交互。给出两个支持该提案的论据和两个反对该提案的论据。

   1. 支持的论点包括通用可用性和操作手机所需的有限词汇
   2. 反对的论点包括：给定当前技术的错误率，压力条件（例如，在紧急情况下寻求帮助与打电话给朋友）可能会改变您的语音，背景噪音影响

4. "语音制作"何时成功，并讨论其实现方法。引用示例。

5. 列出命令语言对用户有吸引力的几种情况。

   ​ 当预计频繁使用系统，用户了解任务和界面概念，屏幕空间非常宝贵（例如智能手机），响应时间和显示速度慢，并且许多功能可以组合成紧凑的表达式（例如销售点终端）时，命令语言可能很有吸引力。用户必须学习语义和语法，但他们可以启动，而不仅仅是响应，并且可以快速指定涉及多个对象和选项的操作。最后，可以轻松指定和存储复杂的命令序列，以供将来用作宏。

第10章 设备

1. 为什么触摸屏是有效设备
   1. 无需外部指针设备（如鼠标），
   2. 真正的人机界面只是电脑屏幕，将电脑、电源等隐藏起来并保护在售货亭容器中，
   3. 直观的界面设计无需培训。
2. 解释直接指向设备（direct-control pointing devices）和间接指向设备（indirect）之间的区别。
   1. 直接：光笔或触摸屏。 速度最快，但准确性最差。
   2. 间接：鼠标。提高了指向的精度，成本低，广泛适用。
   3. 选何种要考虑个体差异和用户任务。
3. 显示器的响应式设计（Responsive Design）
   1. 显示布局自适应到LCD显示器、平板电脑、手机上
4. 上下文感知计算（Context-aware computing）
   1. 移动设备GPS定位后：有关附近餐厅、加油站信息
   2. 帮助手机用户链接附近的打印机

第十二章

基于Web显示信息的十大错误

使用颜色编码的优点和风险指南

第十三章 适时的用户体验

系统响应时间（SRT）：从用户发起动作到计算机开始呈现反馈结果所需要的秒数。

影响用户对系统响应时间的期望和态度的三个主要因素：

1. 以往的经验
2. 个性的差异
3. 任务的不同

第十四章 文档和用户支持

倒金字塔写作风格：首先出现最重要的信息，然后出现其他信息，最后出现最不重要的信息

第十五章 信息搜索

五阶段搜索框架：Five-phase framework for search user interfaces

1. 构想（formulation)
   1. 简单和高级搜索
   2. 识别信息源（在哪里搜索？本站or互联网）
   3. 允许界面接收变体放宽搜索的限制(高级搜索)、语音变体、部分匹配、同义词
   4. 对搜索结果进行限制
   5. 控制初始结果集的大小
   6. 提供建议、提示
2. 发起动作(initiation of action)
   1. 一致性标签的按钮触发显示动作
   2. 通过改变参数和立即更新结果来触发隐式动作
   3. 用自动完成功能引导用户重复以往成功的查询
3. 评审结果（review of results）
   1. 保持检索词和约束可见
   2. 提供结果的概述（如总数）
   3. 为每个项目结果提供描述性预览（文本样本、概要）
   4. URL应部分可见，需要时提供组织的名称
   5. 适当提供可视化（地图）
   6. 允许调整结果集的大小和显示哪些字段
   7. 允许更改排序
   8. 未找到结果时明确给出不成功的提示，提供有用的建议
4. 细化（refinement）
   1. 引导用户逐步完善有意义的信息
   2. 提供相关的搜索
   3. 为错误校正提供建议（不强迫修正）
5. 使用（use）
   1. 在可能的情况下降操作嵌入结果
   2. 允许保存查询、设置和结果
   3. 探索收集显示反馈
   4. 提供历史搜索功能

信息查找是一个迭代的过程，所以五个阶段可以重复多次，直到满足用户需求。用户可能看不到所有五个阶段，但是对结果不满意时，应有额外的选项来改变查询。

一、作业内容概述

● 一、界面调研报告：图文并茂，不少于15页（Word或PPT）
● 二、界面改造：用Auxre RP或GUI Design对热力学计算的界面实现三种风格的改造:对话框方式、菜单方式、Tab栏方式
● 三、界面仿造：用Auxre RP或GUI Design仿造Word、 QQ或PC版/手机版网上银行

 

二、人机交互界面设计分析报告

第一部分——好的交互设计实例

1.1 Chrome浏览器

简介：Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开源软件撰写，包括WebKit，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。

界面设计特色：使用了许多圆角元素，例如标签页。此外，页面中的图标、地址框也加入了圆角元素，使得整体界面的风格更趋向统一。圆润的 UI 风格随处可见，符合 Material Design 2 扁平化的设计语言。移动端上，Android，iOS 两个版本同步也有与桌面端相同的最新设计风格，标签页网格视图方便用户更加直观地查看已打开网页的缩略图。

 

1.2 企鹅FM

简介：企鹅FM是腾讯公司推出的音频分享平台，中国互联网领域领先的正版网络电台服务的领先平台，在2015年手机客户端正式上线，企鹅FM到电台主打0流量收听，多场景下为用户智能推荐精选节目的电台App，海量节目库在线试听小说、音乐、笑话段子、新闻、娱乐八卦、情感故事、相声评书、亲子教育等海量音频节目内容。

界面设计特色：加入了许多动感的元素，比如魔法色。跑步电台的播放界面有更多运动元素，聚焦在步频这个要素上，运动相关组件的重要级更高，更具针对性地运用颜色。可以想象一下，用户只要在跑步过程中看到最大的数字（107处）是金色就知道自己达标了。结束页展示的卡片选择了在社交平台上展示效率最高的正方形，让用户更具有成就感。

 

1.3 百度搜索

简介：百度搜索是全球最大的中文搜索引擎，2000年1月由李彦宏、徐勇两人创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句：“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

界面设计特色：统一设计来源、统一布局方式、统一视觉图形。黄金分割是最普遍也是最能引起人美感的。我们所熟知的蒙娜丽莎的脸、雅典的帕台农神庙等都应用了该比例设计。百度三端首页的排版设计也不例外。黄金分割点约等于0．618：1，百度pc首页的搜索区距页面底部是474px，整体版面的高度是768px，两者之间的比例是0.618，非常接近黄金分割。wise首页及padweb同样都是运用了黄金分割来规范搜索框的位置，让有规则的美，严谨的融入其中。统一的布局可以使品牌的一致性发挥的淋漓尽致。我们需要为用户营造良好的搜索体验，去掉其他的干扰因素。比如在端的设计中为保证搜索框的简洁，搜索框周围的留白，给用户更好的搜索体验。在产品形态上，从用户的使用场景出发，提供多种搜索方式，语音搜索和图片搜索，可以让更多的人平等的得到所求。统一的视觉感受是首因效应。百度三端首页统一的品牌色“百度蓝”的出现，利用色彩增强了对品牌的记忆，让用户记忆犹新。百度一下是近因效应，他引导用户在每一次使用的时候都对百度的品牌发起重复记忆，在用户的脑海中形成一种强势的语言。

 

1.4 Word2016

简介：Office 2016是微软的一个庞大的办公软件集合，其中包括了Word、Excel、PowerPoint、OneNote、Outlook、Skype、Project、Visio以及Publisher等组件和服务。Office 2016 For Mac于2015年3月18日发布，Office 2016 For Office 365订阅升级版于2015年8月30日发布，Office 2016 For Windows 零售版、For iOS版均于2015年9月22日正式发布。

界面设计特色：启动Word 2016后，可以看到打开的主界面充满了浓厚的Windows风格，左面是最近使用的文件列表，右边更大的区域则是罗列了各种类型文件的模版供用户直接选择，这种设计更符合普通用户的使用习惯。功能区上的图标和文字与整体的风格与以前的版本相比更加协调，同时将扁平化的设计进一步加重，按钮、复选框都彻底扁了。

 

1.5 QQ邮箱

简介：QQ邮箱是腾讯公司2002年推出，向用户提供安全、稳定、快速、便捷电子邮件服务的邮箱产品，已为超过1亿的邮箱用户提供免费和增值邮箱服务。QQ邮件服务以高速电信骨干网为强大后盾，独有独立的境外邮件出口链路，免受境内外网络瓶颈影响，全球传信。采用高容错性的内部服务器架构，确保任何故障都不影响用户的使用，随时随地稳定登录邮箱，收发邮件通畅无阻。

界面设计特色：对比了QQ邮箱和gmail邮箱，我更加喜欢QQ邮箱。主要是从两个方面的原因。第一个是，QQ邮箱的写邮件界面是直接在网页页面上的，而gmail是另外弹出的窗口，这样QQ邮箱的感觉就符合所见即所得的交互理念，而且QQ邮箱的写信页面的所有功能键齐全，都在同一页面上，而gmail的感觉要简单些。

 

1.6 网易云音乐

简介：网易云音乐是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。

界面设计特色：首页由推荐专题，歌单，入住歌手，DJ电台，榜单等等组成，而且配色，和网页整体设计都让人看上去很舒服。导航分为四个板块：发现音乐、我的音乐、朋友、账号，每个功能一目了然，下载就能使用，右上角始终有“正在播放”按钮可以跳转到正在播放的歌曲。一方面是UI设计、内容甄选的功劳；另一方面是因为网易云音乐纵向纵向功能的出色延伸，给用户带来极大程度上浸入式的音乐体验，这种体验来自以歌单为主要载体的歌与歌之间的延伸，歌手与歌手之间的延伸，歌与歌手之间的延伸，设计师的平衡掌握的实在是让人五体投地。

 

1.7 有道翻译APP

简介：有道翻译官是网易有道公司出品的一款软件，该软件支持离线翻译功能的翻译应用，在没有网络的情况下也能顺畅使用。

界面设计特色：在这款应用中，有一项功能是拍译，即通过相机扫描图片上的内容进行翻译，用户也可以通过打开图库上传图片进行翻译，这里就有一处设计的十分好的地方，即当用户提前拍好照或者截好屏然后打开该应用时，在该处会产生如上图所示的缩小预览图提示你将要进行的翻译是不是刚才拍好的照片，用户只需要点击图片就可以直接进行翻译，而不必再打开图库选择图片这些多余的动作。这一项交互设计更好的优化了用户的使用体验。

总结：交互设计有时要考虑用户的操作顺序，根据这一操作顺序提前采取相应的措施来方便用户的使用。

 

1.8 TIM

简介：TIM是由腾讯公司于2016年11月发布的多平台客户端应用。TIM是轻聊的QQ，更方便办公。TIM用在QQ轻聊版的基础上加入了协同办公服务的支持，而且可使用QQ号登录，好友、消息完全同步，支持多人在线编辑Word、Excel文档等，更加适合办公用户使用，偏向于商务办公，界面风格简约，功能紧凑且实用是一款很好用的CVE软件。

界面设计特色：TIM是QQ的简化版，QQ很多的模块被去除，留下的是很实用的功能，可以做到名称引导操作，交互很自然。大部分的用户是QQ转移到TIM的，因此已经习惯了QQ的使用模式，在简化的TIM上会发现界面清晰，应用触手可及，因此是易用的。

文件编辑，会话，应用等模块。会话内容浏览和聊天是集成在一起的，可以在进行会话的同时浏览会话记录。软件的总体设计是两级操作，即两次操作分支后到达目标的应用。操作的深度是两级意味着所有的操作可以直接切换。这就意味着这个软件的功能切换是无缝的，交互模式亦是无缝的。

 

1.9 傲游浏览器

简介：傲游浏览器是一款多功能、个性化多标签浏览器。它能有效减少浏览器对系统资源的占用率， 提高网上冲浪的效率。经典的傲游浏览器2.x, 拥有丰富实用的功能设置。支持各种外挂工具及插件。傲游3.x采用开源Webkit核心，具有贴合互联网标准、渲染速度快、稳定性强等优点，并对最新的HTML5标准有相当高支持度，可以实现更加丰富的网络应用。另还有傲游手机浏览器、傲游平板浏览器等。

界面设计特色：傲游浏览器的最左边有一列菜单，上面有收藏夹，下载器，阅读器等等，把这些元素放在最左边，让人寻找方便，而且放在那里不影响视觉效果，因为一般人都会首先跳过最边上而从左往右看。

傲游浏览器界面的最下方，会动态显示“哈哈”笑话，这让习惯于上网浏览信息或者工作者在长时间使用电脑觉得无聊时，偶尔点击一条笑话看一下，放松心情，开心一下，同时这也会增加傲游浏览器它服务商的流量，在跳转到的页面上会有“哈哈”笑话，同时可以放置了广告信息，这既增加了流量，又获得了广告收入。

有不少“哈哈”注册用户，这样的好处是能使更多使用过该浏览器且喜欢看笑话的人绑定于使用该浏览器，增加了用户数量。

 

1.10 天猫商城

简介：“天猫”（英文：Tmall，亦称淘宝商城、天猫商城）原名淘宝商城，是一个综合性购物网站。2012年1月11日上午，淘宝商城正式宣布更名为“天猫”。

界面设计特色：对比了国内的几个购物网站，体验了一番以及加上自己平时的购物习惯，总结觉得天猫的购物界面更为优秀。这样觉得的原因就只有一个，因为感觉这些购物网站的整体设计风格都大同小异，就觉得天猫的有一个地方与其他的都不同，而让我觉得这个设计蛮好。每个购物网站左边都有所有商品分类，然后旁边是一些商品的图片和价格简介。

然后都可以把界面往下面拖，其他的所有网站都是一拖界面，他的最左边的商品分类就留在上面了，导致如果由用户需要通过商品分类来寻找自己需要的产品时必须再往上面拖回去。

这样就无疑增加了用户的额外负担，会降低用户的体验效果，而天猫的这个则不同，它是商品分类的右边的页面也是可以往下面拖动的，但是左边的商品分类部分：

在右边往下面拖动的同时保持不动，这样即使用户想浏览一下右边下面的商品而拖动了页面。

需要使用左边的商品分类时不需要再次拖动页面，这样就会带来更佳的体验效果。

 

第二部分——不好的交互设计实例

2.1 淘宝网首页

简介：淘宝网是亚太地区较大的网络零售、商圈，由阿里巴巴集团在2003年5月创立。淘宝网是中国深受欢迎的网购零售平台，拥有近5亿的注册用户数，每天有超过6000万的固定访客，同时每天的在线商品数已经超过了8亿件，平均每分钟售出4.8万件商品。

界面设计分析：除掉天猫（淘宝商城）部分，淘宝网的首页，点进去给人的感觉就是凌乱，要找个东西必须要不断往下面翻，一个一个的找，只会减低用户的体验，让用户觉得烦躁而懒得去找，从而有可能直接换到其他购物平台去购物，从而导致用户的流失，虽然界面上也有搜索框，可以通过搜索框来检索商品，但不是每个人都清清楚楚的知道自己想要的商品以及商品的名字，这样做的结果就是额外的增加用户的负担，从而降低用户的体验效果。虽然作为中国国内最成功的网上购物网站，但是淘宝的这个界面设计整的不敢恭维。不过，天猫部分相比淘宝首页就简洁的多，给人的感觉也是更好，有更佳的体验效果，所以就自己而言，如果买东西，上淘宝，一般情况就直接点进天猫商城，极少情况会在淘宝首页搜索自己需要的商品。

 

2.2 爱奇艺网页版

简介：爱奇艺是由龚宇于2010年4月22日创立的视频网站，2011年11月26日启动“爱奇艺”品牌并推出全新标志。

爱奇艺成立伊始，坚持“悦享品质”的公司理念，以“用户体验”为生命，通过持续不断的技术投入、产品创新，为用户提供清晰、流畅、界面友好的观映体验。

界面设计分析：打开爱奇艺的首页内容如上图所示，除了在主页面的左侧使用大部分的空间循环展示当前的热点视频以及右侧文本显示的视频外还有底部的视频分类。我觉的最下方这一栏视频的内容分类这一部分的设计是不太合理的，首先这么一大块的分类内容密密麻麻的的挤在一起而且字体也是黑色背景下的小号白色字体，用户看上去就十分难受而且也不容易快速的找到自己想要找到的分类，我觉的这样的设计是不太好的。对于一些数量繁多的搜索分类可以不直接展示在页面上，毕竟密密麻麻的一堆小字看上去就不是很舒服，这些内如我觉的可以单独设置一个侧栏，比如当鼠标移动某个按钮上时他会自动滑出一个侧栏，这些搜索分类就可以放到这样的一个侧栏里面，不但节约空间而且这些分类还可以做进一步的细分和优化，字体等的选择和布局也可以重新设计，用户找起来也不会那么麻烦，使用起来也会更加的舒服和方便。

启示：交互设计中，比较密集的搜索或者分类按钮可以单独设计一个侧栏，而不要摆在主页面上。

 

2.3 驾本易APP

简介：驾本易学车平台是国内首家通过移动互联网技术开发新型网络智能学车系统的学车平台。

界面设计分析：打开APP后首页内容需要打开定位才能显示，否则就是一片空白。在这款APP中，打开后的首页如上所示，可以看到，在整个页面的上方三分之一以上全部都是一片灰色，这一片内容中需要用户打开定位功能才可以看到制定的内容，然而事实上，很少有用户会随时打开定位功能，所以打开该应用后第一眼看到这一片灰色给人的印像就不是很好。

启示：在设计一款app的首页时，一般不要出现需要用户额外开启某项功能比如定位等才可以展示内容的界面设计，这样容易给用户留下不好的第一印象，所以如果是一些需要用户开启额外功能才可以进行展示的内容最好放在其他页面内。交互设计要保证用户的使用时的第一印象要好，那么首页的设计就十分重要，不应该出现需要用户进行额外操作才能看到的内容，类似这款app中这样的设计几乎是完全忽略了用户的体验。

 

2.4 boch虚拟机

简介：这是一个开源的可调式虚拟机，我们在开发操作系统初期阶段，可以将我们的程序运行在bochs虚拟机上面。该虚拟机可以设置内存断点，查看寄存器状态或数据，将内存地址范围内的内容反编译成汇编语言，查看内存区的数据等功能。

界面设计分析：点击按钮后没有任何响应就立即执行。在这款应用中， 用户启动虚拟机进行工作后界面如上所示，在虚拟机的顶栏菜单中有许多功能，但是这些功能没有点击响应和二次确认的设置，比如最右边的关机键，当用户点击该按钮时虚拟机会没有一丝停顿的直接退出，容易造成用户丢失一些为未保存的操作，并且这款虚拟机所能展示的内容也只有如图所示的一块内容，已经被顶在上面的操作，用户无法通过类似滑动滚轮等方式再次查看，如果需要查找有关数据时，必须重新输入命令进行查找。

启示：在执行一些比较重要且不可逆转的操作时，交互设计要使得用户要能够进行二次确认从而保证不是来自用户的失误操作，进而避免给用户造成损失。所以当用户点击一些重要的按钮时，可以设置一个弹出框来确认用户是否为真的想要执行此操作。交互设计要保证用户在执行某些重要操作时需要进行二次确认，从而避免用户进行失误操作，造成不必要的损失。

 

2.5 百度文库

简介：百度文库是百度发布的供网友在线分享文档的平台。百度文库的文档由百度用户上传，需要经过百度的审核才能发布，百度自身不编辑或修改用户上传的文档内容。网友可以在线阅读和下载这些文档。百度文库的文档包括教学资料、考试题库、专业资料、公文写作、法律文件等多个领域的资料。百度用户上传文档可以得到一定的积分，下载有标价的文档则需要消耗积分。当前平台支持主流的文件格式。

界面设计分析：界面布局无用项太多且广告植入太夸张。这是一款用来查找文档和查看文档的app，在我看来这类型的应用应该做的比较简洁，而且没必要增加那么多用户几乎不会用到的功能。首页内容如上图所示，这样的界面布局可以说是十分不好的，在最上方的搜索栏与菜单栏之下就是大大的一条广告，而广告之下就是热门的搜索，这样界面的设置反而更像百度浏览器而不是一款文档app，我觉的热门搜索这一栏内容完全可以去掉再不济也可以向微博一样添加到搜索栏里，然后就是右下角的一个广告图标，有时候甚至会在打开应用的时候直径跳出一个占了半个屏幕的红包广告，真的是非常非常烦，将广告进行到底无论什么时候什么页面都要强行塞广告进去的做法我觉的产品寿命和口碑都是不会长久的。

启示：在设计界面时，一些没什么用的功能最好隐藏在其他功能下面，直接摆在界面上不但浪费宝贵的空间而且也会减少用户的兴趣，最重要的一点是打广告也没必要那么多吧，整个界面除了很少的功能全是广告，整个应用一半都在打广告，让人使用时很无奈。交互设计中界面要能体现出应用的主要功能而将一些额外的用户不常用功能最好放置在其他栏目下。

 

2.6 扇贝单词

简介：扇贝单词是由扇贝网提供的英语单词学习APP。开发者为南京贝湾教育科技有限公司。扇贝单词使用智能启发式的学习方法，通过循循善诱，可帮助用户对单词进行学习或复习。

界面设计分析：用户学习完今日单词进行复习时会发现只能复习一次。首先我觉的这款应用的使用是十分好的，在单词的学习软件中我觉得是最硬核的，我这里只是想提一点他在某项功能上的一点小瑕疵，用户在学习完每天设定的单词量后，可以进行复习操作，但是当用户复习完一次后如果想要再次复习就会显示已经完成本日复习，也就是用户只能复习一次，我觉的这个设定是不太好的。

启示：在设计某些功能时，要考虑他的合理性，最好是依靠用户的意愿来进行而不要想当然的直接设计，对于某些可以重复进行的功能最好不要限制用户的使用次数。交互设计中，某些合理功能的使用最好不要限制用户的使用次数。

 

第三部分——界面设计的总结

3.1 了解用户

目标群体会在产品阶段就定下来，所以之后在开始设计网站时要对目标客户群体有足够的了解，需要了解什么呢？你可以从这两方面入手：需求和愿望，以此设计出符合他们预期的界面和体验。同时要开始浏览大量相关页面，也要去看竞对的页面设计，总结出哪些板块是共有的，哪些板块比较创新打动人。

 

3.2 遵循用户体验

网页有弹窗很正常，但是过多就不正常了，非常影响用户的阅读体验，无法让用户静下来认真看内容。除了弹窗出现的频率，还有数量也要加以控制，千万不要在弹窗上再弹窗，可以把第一个弹窗做成一个完整的界面，或者把第二个弹窗做在第一个消息弹窗的里面。

 

3.3 页面文字排版

看过咪蒙公众号的读者肯定都有印象，不同于其他公众号，咪蒙的文章两端缩进非常大，不会有太长的内容宽度，每行文字短一些页面在你读完一行时，会更快的回去找下一行开始阅读，页面的使用率更高。

 

3.4 规范按钮的位置和文案

页面上多次出现且功能相同的元素尽可能保持清晰一致，举个例子：之前做的全栈工程师专题页面，每个咨询按钮都要配上与该板块相关的文案，位置同一在每个板块下方居中的位置。

 

3.5 内容直观清晰

用户的注意力集中时间有限，如果想要让用户看到并记住你要展示的信息，就要把这些文字尽量直观的展现出来，可以借用图表和视觉特效传达信息和数据。

但不要整个页面到处都是关键信息和特效，不要把所有信息平铺在一个页面，过多信息会让读者有认知负担。

 

三、交互界面设计快速原型设计实验报告

一、实验目的           

1、掌握软件开发原型模型的概念。

2、练习Axure RP的原型设计

二、实验器材

1．计算机一台。

2．Axure工具软件。

 

三、Axure RP软件介绍

1 . Axure RP

Axure RP 可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档，它比任何当前其它创建静态原型的工具如Visio, Omnigraffle、Illustrator、 Photoshop、Dreamweaver, Visual Studio、FireWorks、GUI Studio等都要快速、高效，因为它才是真正的专门原型设计工具，并且支持多人协作设计和版本控制管理。  设计师们渴望有一个专门的原型设计利器，而Axure正是为此目的而精心打造。Axure RP已经被一些财富1000大公司采用，成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。

2. 原型的作用和好处

制作 Prototype 是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。 快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。 目前全球有财富 1000 大的公司和重要机构在使用 Axure RP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。

3、Axure 的工作环境

Axure 的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。

无需编程就可以在线框图中定义简单链接和高级交互。 Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。以下是对 Axure RP 工作环境的简要说明：

                                                                             图4-1 Axure RP 工作环境

1.  主菜单和工具栏 执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。 

2.  站点地图面板 对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。 

3.  控件面板 该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。 另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。

4.  模块面板 模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。 

5.  线框图工作区（或叫页面工作区） 线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。 

6.  页面注释和交互区  添加和管理页面级的注释和交互。

7.  控件交互面板 定义控件的交互，如：链接、弹出、动态显示和隐藏等。

8.  控件注释面板 对控件的功能进行注释说明。

 

四、登录界面案例操作

1).设计需求

①设计桌面版QQ的仿真界面（包括登录，效果越逼真越好）

②制作一个网上银行的仿真界面，要求不输入复杂数据的情况下界面布局和交互方式要能以假乱真(有些背景图片可以从原网站剪切复制)

③针对热力学计算模型用GUI Design或Axure RP 设计三种界面效果（rp源文件+HTML网页）：基本对话框界面、Tab栏界面、菜单界面

 

2).设计成果

①仿真桌面版QQ

说明：单击桌面上的TIM图标，出现TIM的登录界面，任务栏出现灰色图标

说明：输入账号和密码登录，点击“注册账号”、“找回密码”按钮可以打开外部链接进行注册账号和找回密码操作。“记住密码”和“自动登录复选框”可用，左下角多账号登录和右下角二维码登录有交互功能。窗体支持最小化和关闭，若开启了最小化，重新点击任务栏图标即可唤起，点击关闭即可关闭QQ。若输入的密码(123456)错误，则出现如下提示界面：

提示用户名或密码不正确，可以点击找回密码进行密码找回，或点击“取消”返回。若输入的密码正确，则进入聊天窗口：

②仿真网上银行

仿真中国银行，支持登录、转账、查账等操作，点击右上角个人网银登录：

输入任意账号和密码123456即可登录：

转账操作界面：

 

③热力学计算模型

Tab栏：

菜单栏：

 

基本对话框：

 

五、设计过程中总结的技巧

 1、解决中文输入法问题 目前Axure对中文的一些输入法支持得不好，搜狗拼音输入法没有办法使用，用谷歌拼音问题不大，但会强制转为全角，需要人为点击一下转为半角。

 2、超快速移动工作区 当设计的页面画面变大时，为了选取不同位置的对象，必须经常使用垂直与水平的滚动条，这会使得选取对象的动作变慢。请试试这招：鼠标光标focus在Wireframe中，按住键盘的空格键，此时鼠标光标会切换成手状，您可以用来抓着画面任意滑动，而且不会打乱任何对象的位置，轻松愉快。

 3、穿透控件选取下层的控件  以鼠标左键在对象上按住停留1秒钟以上，放开鼠标左键再单击下面的对象，可以穿透上层对象，选取到位于下层的对象 。

4、引用Microsoft Office或其他软件中的对象： 利用复制、粘贴功能，将其他应用程序中如：PowerPoint, Excel, Visio, Photoshop 与Illustrator中的物件，粘贴到Axure RP中。一般来说，这些粘贴的对象会变成Wireframe中的图形对象。反之亦然，也可以复制Axure中的对象或画面，粘贴到其他应用程序。

5、单选群组（Radio Button Group） 您可以一次选取多个Radio Button，按下鼠标右键，并选择“Edit Radio Button->Assign Radio Group”来设定Radio Button的群组关系。如此一来，当这些Radio Button输出到Prototype时，就会形成真正的单选用户接口。

6、解除IE中的Active X 警告讯息 使用IE打开在自己计算机里头的HTML原型时，浏览器中可能会出现Active X 警告讯息，想要暂时解除IE中的警告讯息，请点选IE浏览器出现的Active X警示讯息，接着选择“允许被封锁的内容”，这样就可以在IE浏览器上看到自己计算机里头的HTML 原型了。

7、只要输出必要的项目到规格书中 规格文件输出时如果选择输出的项目太细，很有可能会产出一份好几百页的Word文件，难以阅读。因此，输出之前最好通过格式的设定将不需要的项目取消勾选，只保留有意义的部份。

 8、默认规格书标题改成中文 将Axure设置格式的文件标题改成中文，比如将Pages格式设定的 Section Header名称“Pages”改成“软件规划说明”，把“Page Tree”改成 “界面列表”；或者把Screenshot格式设定的 Section Header名称“User Interface”改成 “用户画面”。如此一来输出成规格文件时，会更方便阅读这些段落标题。

 9、撤销操作 有时想对Axure的某个面板（如站点地图面板或模块面板）中的操作进行恢复，只要在这个面板中点击鼠标（相当于让焦点进入这个面板），然后按键盘的―Ctrl+Z‖键，就可以对这个面板中进行的操作进行恢复。

 

四、附录

 

资源链接：https://download.csdn.net/download/lee1hong/12288322