[人机交互]交互设计

零.本章的主要目标

本章主要目标总结

区分良与非良交互设计，突出产品可用性差异
阐述交互设计与HCI及其他领域的关系
解释可用性概念
概述交互设计过程涉及的内容
概述交互设计中所使用的指南形式
从可用性目标和原理角度，评估并解释产品的成败

一.什么是交互式产品和交互式系统

1.1交互式产品

交互式产品泛指各种类型的交互式系统，交互式技术，环境，工具，应用与设备。

交互式产品的典型特征：

需要用户与之交互来完成工作。

1.2交互式系统

1.2.1什么是交互式系统

接收输入，并将输出表示给用户的软件和硬件的集合。

1.2.2交互式系统从软工角度和人机交互角度的区别

从软工角度: 交互式系统是由系统代理的事情叫做功能性或服务

从人机交互的角度：如何将服务提供给用户，使得其容易使用叫做可用性

例子(帮助理解)：

下面通过具体例子来解释交互式系统从软件工程角度和人机交互角度的区别：

软件工程角度

从软件工程角度看，重点在于交互式系统所具备的功能性或所能提供的服务，也就是系统"能做什么"。

例子：在线购物系统

• 功能性体现：

复制代码

◦ 商品展示功能：系统能够将各类商品的信息（如商品图片、名称、价格、规格等）以列表或详情页的形式呈现给用户，让用户可以浏览和查看商品。

◦ 购物车功能：允许用户将感兴趣的商品添加到购物车中，在购物车里可以对商品进行数量修改、删除等操作，系统会实时更新购物车中的商品信息和总价。

◦ 订单处理功能：当用户提交订单后，系统会对订单信息进行处理，包括验证用户信息、计算订单金额、安排库存扣减等，并生成订单编号，方便用户查询订单状态。

◦ 支付功能：支持多种支付方式（如银行卡支付、第三方支付等），用户选择支付方式后，系统会与相应的支付渠道进行对接，完成支付流程。

人机交互角度

从人机交互角度看，关注的是如何把这些服务以一种易于用户使用的方式提供给用户，也就是系统"如何让用户方便地使用这些功能"。

同样以在线购物系统为例

• 可用性体现：

复制代码

◦ 界面布局与导航：系统的界面设计要清晰合理，导航栏要能够让用户快速找到商品分类、购物车、个人中心等重要功能入口。例如，在首页设置明显的"商品分类"按钮，点击后可以展开详细的商品分类列表，方便用户筛选商品；购物车图标在页面显眼位置，用户一眼就能看到并点击进入购物车页面。

◦ 操作便捷性：在添加商品到购物车时，用户只需点击商品详情页上的"加入购物车"按钮即可完成操作，不需要复杂的步骤。同时，在购物车中对商品进行数量修改或删除时，操作按钮要明显且易于点击，并且系统要及时给出操作反馈，如"商品已添加到购物车""商品已从购物车移除"等提示信息。

◦ 反馈机制：当用户提交订单后，系统要及时显示订单提交成功的提示，并告知用户订单处理进度和预计送达时间。在支付过程中，要实时显示支付状态，如"正在支付""支付成功"等，让用户清楚了解当前的操作情况。

◦ 交互设计的一致性：整个系统的交互方式要保持一致，例如，所有的按钮点击效果、页面跳转方式等都要遵循统一的设计规范。这样用户在操作过程中能够形成习惯，降低学习成本，提高使用效率。

综上所述，软件工程角度关注系统的功能实现，而人机交互角度关注如何让用户更方便、高效地使用这些功能。一个好的交互式系统不仅要具备完善的功能，还要在可用性方面表现出色，才能真正满足用户的需求。

二.产品的功能新和可用性

2.1产品的功能性

产品必须完成的工作。

2.2产品的可用性

交互式产品应该易于人所使用

2.2.1三易

易学习

提供较少的功能，让任何人都可以接收信息

易理解

使用人们熟悉的物体指示有无或多少留言

易使用

仅用一个步骤即可完成核心功能

2.3交互设计和系统设计之间的区别

交互设计专注用户与产品互动体验，面向用户，优化操作等；系统设计着眼产品整体架构与功能实现，面向技术团队，保障系统稳定运行。

2.4提倡可用性的重要意义

• 提倡 可用性 的重要意义
-- 传统的设计通常只是考虑了 如何实现系统的功能
-- 忽略了最终用户如何使用 ，导致难以使用的问题
例如：复印机和录像机
-- 交互设计旨在从用户的角度，将 可用性引入设计过程
本质上即如何开发 易用、有效和令人满意 的产品

三.区分良与非良交互设计，突出产品可用性差异

3.1区分度

使用人们熟悉的物体指示有无和有多少留言，易于理解

提供较少的功能，使得任何人都能听取消息，易于学习

仅需一个步骤即可完成核心任务，易于操作

设计简单而精致

更具吸引力，且在使用上更为有趣

从用户的角度，利用了人们有关物理世界是如何工作的常识（世界知识）

3.2可用的交互设计应该考虑到什么

可用的交互设计必须考虑一个产品被使用的上下文，即用户、他们的任务，以及交互发生的环境

3.3交互设计的中心问题

按照需要支持或扩充的用户活动，选择适当的方法和技术，以优化用户和系统，环境或产品之间的交互。

（总结：在满足功能性的基础上，通过适当的方法和技术来优化用户和产品之间的交互）

四.交互设计

4,1什么是交互设计

设计支持人们日常工作和生活的交互式产品。

4.2创新式的用户体验

旨在增强和扩充人们工作，通信和交互的方式。

4.3与软件工程的区别

-- 软件工程强调系统设计，提供一个应用问题的软件解
-- 交互设计关注用户、系统、环境以及它们之间的交互

*4.4交互设计简史

一次性交互的批处理（操作员）

命令行界面交互阶段（专家用户）

图形用户界面（GUI）交互阶段（少量计算机专业知识）

自然用户界面阶段（以多通道交互为主要特点，为了使得人能以声音，动作，表情等自然方式进行交互操作）

4.5交互设计原则上包含的4项活动

-- 识别用户需要并建立需求
-- 开发满足需求的候选设计方案
-- 构建用于交流和评估的交互式原型（ prototype ）
-- 评估整个过程的设计结果

4.6过程需要采用用户为中心设计（UCD）的方法

4.6.1一种有效的方法是用户参与式设计

设计者和用户可以通过各种方法来交换信息

4.6.2对原型进行评估是保证设计可用性的核心环节

4.6.3理解用户的活动是提取需求的重要步骤

4.6.4理解用户（使用上下文）的重要性

*4.7交互设计的三个主要特征

用户在整个设计过程中主动参与

特殊的可用性和用户体验目标应在项目开始前识别，明确建档，并获得一致性。

上述的设计活动需要迭代

*4.8交互设计的目标

可用性目标：

与特定可用性标准相关的性质（有衡量准则）

eg：有效性，一致性，etc

例子：（帮助理解）

用户体验目标：

与用户的主观感受相关的性质

eg:挑战性，艺术性，etc

4.9可用性目标

有效使用

高效使用

安全使用

易于理解

易于操作

易于学习

良好的实用性

*4.10基本的设计原理

可视性

反馈

限制

映射

一致性

启发性

例子：

可视性

含义：系统应清晰呈现下一步可执行的操作以及系统状态的改变，让用户容易确定接下来该做什么。
案例：智能电视的遥控器设计。遥控器上的按键布局清晰，每个按键都有明确的标识，如电源键、音量调节键、频道切换键等。当用户按下某个按键时，电视屏幕上可能会显示相应的提示信息，比如按下音量增加键，屏幕上会出现音量增大的动画效果，让用户直观地看到操作的结果。这种设计使得用户能够清楚地知道如何操作遥控器来实现自己想要的功能，体现了可视性原理。

反馈

含义：操作结果的可视性，让用户能够理解自己以前操作的结果，以便继续后续活动。反馈可以有多种形式，如视觉、听觉、触觉或其组合，具体形式取决于使用场景。
案例：电梯的操作。当用户按下电梯的楼层按钮后，按钮会亮起，这就是一种视觉反馈，告知用户操作已被接收。同时，电梯内的语音提示会告知用户电梯的运行方向和当前所在楼层，进一步提供反馈信息。此外，电梯门的开关动作也会有相应的声音和动作反馈，让用户知道门的状态变化。这些反馈帮助用户了解电梯的运行情况，增强使用的安全感。

限制

含义：对用户在特定时刻可执行的操作进行限制，避免用户进行无效或错误的操作。设计原理是对设计空间的一种限制，可避免考虑不可用的设计选择。限制可分为物理、逻辑和文化限制三种类型。
案例
- 物理限制：U 盘的接口设计。U 盘的接口形状是特定的，只能以正确的方式插入电脑的 USB 接口，这种物理属性限制了插入的方向和方式，用户无需额外学习就能正确使用。
- 逻辑限制：在线表单填写。在填写一些必填项时，如果用户未填写就尝试提交表单，系统会弹出提示框，阻止提交操作，直到用户完成必填项的填写。这是基于逻辑关系对用户操作的限制，确保数据的完整性。
- 文化限制：交通信号灯。红灯表示停止通行，绿灯表示可以通行，这种颜色与行为的对应关系是社会公认的文化惯例。人们在过马路时会遵循这种文化限制，无需额外思考。

映射

含义 ：控制操作和操作效果之间的对应关系，交互式系统通常需要明确表示这种关系。
案例：汽车的方向盘和车轮的转动方向。当驾驶员转动方向盘向左时，车轮也会相应地向左转动；转动方向盘向右时，车轮向右转动。这种直观的映射关系让驾驶员能够准确地控制汽车的行驶方向。再如，电脑鼠标的前后左右移动与屏幕上光标的移动方向一致，也是映射原理的体现，使用户能够通过鼠标轻松地控制光标位置。

一致性

含义：在 UI 设计中，类似的任务应使用类似的操作和表示，保持界面设计的一致性具有易学、易懂和易用的优点。一致性包括外部一致性和内部一致性。
案例
- 内部一致性：一款办公软件，其菜单栏中的"文件"选项在不同功能模块中的操作逻辑和显示内容保持一致。无论是在文档编辑模块还是在表格制作模块，点击"文件"菜单，都可以进行新建、打开、保存等相同类型的操作，这种内部一致性让用户在使用不同功能时能够快速上手，减少学习成本。
- 外部一致性：大多数智能手机的返回操作方式。无论是苹果系统还是安卓系统，用户都可以通过点击屏幕左上角的返回箭头或者从屏幕边缘向内滑动来返回上一级页面。这种与行业惯例保持一致的设计，让用户在不同品牌的手机上都能快速适应操作方式。

启发性

含义：事物可能通过其形状或其他属性暗示可以对它们做什么，这些启示可用于设计 UI 的交互对象，使操作容易理解。
案例：垃圾桶图标在电脑系统中通常代表删除功能。垃圾桶的形状和人们对现实生活中垃圾桶用途的认知相联系，当用户看到界面上的垃圾桶图标时，就会自然地联想到可以将不需要的文件拖入其中进行删除操作。再如，手机应用中的设置图标通常是一个齿轮形状，齿轮在人们的认知中与调整、设置等概念相关联，看到这个图标就能明白点击它可以进入设置页面，体现了启发性原理。

4.11多通道交互技术

4.11.1定义

是一种通过使用多种通道（表达意图，执行动作或者感知反馈信息的各种通信方法）与计算机通信的人机交互方式，采用这种方式的计算机用户界面叫做多通道用户界面。

4.11.2通道

通道一词源于心理学的概念，涵盖了用户表达意图，执行动作或者感知反馈信息的各种通信方法。

4.12层次任务分析法：HTA，支持界面的结构化表示（应用题）

需要支持的用户任务需要分解为多层（或窗口，区域）表示

HTA模型表示了任务/子任务的分解（结构，顺序）

其结构和顺序提供了屏幕布局和构建之间的关系的信息

对任务/子任务进行划分，直到划分到动作，再通过结构与顺序进行布局

*4.13Norman的三个限制

-- Norman 将限制分为三个类型：物理、逻辑和 文化限制 - 物理限制： 对象的物理属性对可能操作的限制

操作只依赖对象的属性，不需要特殊的训练

--逻辑限制：对象的物理属性与可能的操作之间的逻辑关系
-- 例如：应答机上的弹子与小孔之间的关系
-- 例如：将当前系统状态下不可执行的菜单命令置为灰色

-- 用户可据常识推理可能的操作
-- 文化限制 ：依赖于用户所接受的惯例
§ 例如：交通灯使用三种颜色表示停止、通行和准备
§ 一旦被某个社会团体所接受，就成了公认的惯例
-- 例如：窗口系统使用了许多惯例来表示信息和操作
-- 映射：控制操作和操作效果之间的对应关系
§ 交互式系统通常需要表示这样的关系

-- 一致性 ：在 UI 设计中，类似的任务应使用类似的操作和表示
§
§ 保持界面设计的一致性的优点在于易学、易懂和易用
§ 对复杂系统，应按类似性对功能分组，并保持组内一致性
§
§ 外部及内部一致性
-- 外部一致性指操作的解释与现实世界行为的一致性
-- 内部一致性指操作的解释与内部系统行为的一致性
-- 设计决策有赖于使用上下文
-- 启示性（ affordance ）：事物可能通过其形状或其他属性建议可以对他们作什么
§
§ 这些启示可用于设计 UI 的交互对象，使得其操作容易理解
§
§ 启示不是本质的，而依赖于用户的背景和文化
-- 例如：点击图标是因为用户了解这是图标给予的启示

4.14启发式和可用性原理

设计原理和可用性原理的区别
-- 前者主要用于 帮助设计者做出设计决策 （启发式原理）
§ 例如：按照可视性，应尽可能使用按钮来表示命令
-- 后者主要作为 评估原型或现有系统 的基础（启发式原理）

4.15Nielsen, et al提出了10个主要的可用性原理

系统状态的可视性：适时提供适当反馈，便于用户了解系统的状态
系统应与真实世界相符合：使用用户的语言，而非面向系统的概念和术语
用户的控制和自主权：提供醒目的出口，便于用户退出异常状况
一致性和标准化：避免用户无法确定不同的词汇、情景、动作是否表示相同的含义
帮助用户识别、诊断和修复错误：使用简明语言，描述问题的性质并提供解决的方法
预防出错：应尽可能地避免错误的发生
依赖识别而非记忆：使得对象、动作和选项清晰可见
使用的灵活性和有效性：为熟练用户提供快捷键
最小化设计：避免使用无关或极少使用的信息
帮助及文档：提供易于检索、便于学习的帮助文档