用户体验与交互设计核心实践

table {
border-collapse: collapse;
width: 100%;
margin-bottom: 1rem;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
pre {
background-color: #f8f8f8;
padding: 15px;
border-radius: 4px;
overflow-x: auto;
}

1、花些时间浏览像 IDEO、索尼和苹果等公司的网站，关注他们所介绍的产品以及设计理念，收集你喜欢的内容。同时，从网站外观、使用便利性、内容相关性、内容组织清晰度、网站整体给人的‘感觉’等方面对这些网站进行评价，并准备好与同事讨论，谈谈你对这些网站设计及产品设计理念的理解。

该部分内容是一个练习要求，旨在让读者通过浏览特定公司网站并综合考虑多方面因素，收集喜好内容并与同事讨论，以提升对网站设计及产品设计理念的理解。

2、以用户为中心包含哪些方面？

以用户为中心涵盖了以下方面：

考虑人们的需求而非技术能力

设计人际连接的新方式

让用户参与设计过程

为多样性开展设计

3、利用“信标”技术（蓝牙低功耗）设计一种店内零售体验，该技术能让下载了该商店应用程序的人在店内走动时被精确追踪到30厘米范围内。

以下是利用信标技术设计的店内零售体验：

个性化欢迎与优惠推送


当顾客进入商店范围，信标检测到顾客的应用程序，商店应用立即推送个性化欢迎信息，如“欢迎回来，[顾客姓名]，今天为您准备了专属优惠！”同时，根据顾客过往购买历史和偏好，推送相关产品的折扣券或特别优惠。

智能导航与商品推荐


顾客在店内走动时，信标实时定位顾客位置。应用程序根据顾客位置提供智能导航，引导顾客找到他们感兴趣的商品区域。例如，如果顾客之前搜索过运动鞋，当他们靠近运动区时，应用会提示“您已接近运动鞋区域，这里有您可能喜欢的新款跑鞋。”

虚拟试衣镜体验


在试衣间附近设置信标，当顾客拿着衣服进入试衣间，信标识别衣服信息并同步到应用程序。顾客可以通过应用程序查看该衣服在不同颜色、款式下的效果，甚至可以虚拟搭配其他商品，无需频繁更换衣服。

实时库存查询


顾客在货架前查看商品时，信标检测到顾客位置和所关注商品，应用程序实时显示该商品的库存数量。如果该商品在店内其他区域有更多库存，还能提供导航指引。

互动游戏与奖励


在店内设置多个信标热点，顾客在不同热点区域可以触发互动游戏，如拼图、问答等。完成游戏可获得积分或额外折扣，增加购物的趣味性和顾客的停留时间。

结账便捷服务


当顾客完成购物走向收银台时，信标通知应用程序，顾客可以在应用上提前完成支付，无需排队等待。同时，应用会自动生成电子发票。

售后反馈与跟进


顾客离开商店后，信标检测到顾客离开范围，应用程序发送感谢信息，并邀请顾客对购物体验进行评价。根据顾客反馈，商店可以及时改进服务，并在适当时候推送相关产品的保养知识或新品信息。

4、你受委托为一家新的连锁超市设计一个在线购物和送货上门系统。你的客户希望该系统能在某种程度上重现真实购物的最佳体验，同时避免其缺点。他们希望该系统能吸引所有拥有家用电脑的成年人。那么，适合对这个购物应用进行需求分析的技术有哪些？请解释你选择这些技术的原因，以及使用这些技术得出的结论可能存在的局限性。

## 采用的技术方法

适合的技术包括访谈、观察和收集人工制品样本，并辅以相关领域外的背景研究。

### 访谈
**原因**：可以直接与客户、潜在用户交流，了解他们对真实购物体验的看法、期望以及对在线购物系统的需求。  
**局限性**：受访者可能无法准确表达需求，或受主观因素影响提供不准确信息。

### 观察
**原因**：可以直接了解人们在超市的购物行为、习惯和痛点，为系统设计提供参考。  
**局限性**：观察可能只能反映部分场景和人群的情况，不具有全面代表性。

### 收集人工制品样本
**原因**：如超市的传单、会员卡等，能了解超市现有的营销策略和用户使用习惯。  
**局限性**：这些样本可能无法涵盖所有方面的信息。

### 背景研究
**原因**：可以提供行业趋势、市场动态等信息，帮助完善系统设计。  
**局限性**：可能存在信息过时或与实际情况不符的问题。

### 综合应用
使用多种技术可以相互弥补单个技术的局限性。

## 需求记录
需求工作需要记录下来，可采用以下方式：
- 需求规格说明书并辅以说明材料  
- 开发场景语料库的方式  

## 数据理解与分析
对数据的理解包括分析，可从多个不同视角进行，包括：
- 基于一种或多种认知与行动理论  
- 采用拼凑法的研究方法

5、有时有人认为，了解人们现有的活动并不能真正有助于设计未来的技术，因为一旦技术投入使用，活动可能会发生根本性的变化。你同意还是不同意这种观点？请为你的立场提供支持性论据。

不同意这种观点

了解人们现有的活动对设计未来技术有重要帮助。

活动与技术的循环关系

从活动与技术的循环关系来看，活动（及其发生的情境）会为技术确立需求，技术又会提供改变活动性质的机会，形成循环。设计师需要考虑这个循环来理解和设计特定领域。

举例说明：


公交追踪系统改变了乘公交出行的性质，这说明先了解人们乘公交的现有活动，才能针对性地设计出公交追踪系统这样的未来技术。

情景设计中的作用

情景是关于人们使用技术在特定情境下开展活动的故事，是UX设计的关键组成部分。通过了解现有活动构建情景，能帮助处理设计中的难题，推动设计知识在不同问题实例中积累。

结论

了解人们现有的活动对设计未来技术是有帮助的。

6、情绪板通常由实物材料制作而成，但也可以用软件制作。使用任何允许包含视觉、音频和文本组件的软件应用程序，制作一个情绪板来探索以下概念：(a) 针对单亲家庭的海滨度假网站；(b) 针对活跃、富裕的六十岁以上人群的冒险度假网站。

情绪板制作思路与素材建议

本题要求使用能够包含视觉、音频和文本组件的软件制作情绪板，以探索两个概念。可根据以下思路进行操作：

(a) 针对单亲家庭的海滨度假网站

可收集以下素材制作情绪板：

视觉组件

：美丽海滨风景、单亲家庭欢乐度假的照片

音频组件

：轻松愉悦的音乐

文本组件

：描述海滨度假舒适与亲子互动乐趣的文字

(b) 针对活跃、富裕的六十岁以上人群的冒险度假网站

可收集以下素材制作情绪板：

视觉组件

：冒险活动场景（如登山、潜水等）的图片

音频组件

：激昂振奋的音乐

文本组件

：体现冒险刺激和高端享受的文字

制作说明

具体制作过程需根据所选软件的操作方式进行素材整合。

7、请列出一些要点来阐述‘设计师最了解情况’这一观点。

专业知识

：设计师经过专业训练，具备设计理论、美学、人体工程学等专业知识，能从专业角度做出更合理的设计决策。

经验优势

：长期从事设计工作积累了丰富经验，熟悉设计流程和各种问题的解决方案，能有效避免常见错误。

创新能力

：设计师更擅长突破常规思维，提出新颖独特的设计概念和创意，利益相关者可能因缺乏专业视角而局限于传统想法。

整体把控

：能从整体上把握设计项目，考虑各方面因素的平衡和协调，利益相关者可能只关注自身局部利益和需求。

效率考量

：过多利益相关者参与可能导致意见分散、决策过程冗长，设计师独立决策能提高工作效率，加快项目进度。

8、思考以下评估情况。一个呼叫中心操作员负责接听有关保险理赔的咨询电话，这需要在与客户通电话的同时从数据库中调取客户的个人数据和理赔详情。你负责对操作员将使用的新数据库软件进行用户测试。你认为评估软件的可用性时，哪些方面很重要，又该如何衡量这些方面呢？现在，针对一个作为在线艺术画廊的交互式多媒体网站，网站设计师希望用户能够体验以不同媒介呈现的具象和概念艺术作品，思考评估该网站可用性时，哪些方面很重要，又该如何衡量这些方面呢？

可用性评估方面及衡量方法

呼叫中心操作员使用的新数据库软件

1. 效率

描述

：衡量操作员从数据库中检索客户个人数据和理赔详情的时间。

衡量方法

：记录多次操作的平均时间。

2. 准确性

描述

：检查调出的数据是否准确无误。

衡量方法

：与已知正确的数据进行比对。

3. 易用性

描述

：观察操作员在操作软件过程中的流畅度，是否需要频繁查找操作指引。

衡量方法

：通过问卷调查操作员的主观感受。

4. 可学习性

描述

：评估新操作员学习使用该软件的难易程度。

衡量方法

：记录新操作员达到熟练操作所需的时间。

交互式多媒体网站

1. 交互体验

描述

：观察用户与不同媒介艺术作品的交互情况，如操作是否便捷、能否顺利触发各种交互效果。

衡量方法

：通过用户在交互过程中的操作失误率来衡量。

2. 内容呈现

描述

：评估艺术作品的展示效果，如图像清晰度、视频播放流畅度等。

衡量方法

：通过技术指标和用户反馈来衡量。

3. 导航易用性

描述

：检查网站的导航系统是否便于用户找到所需的艺术作品。

衡量方法

：记录用户找到特定作品的时间和路径。

4. 情感体验

描述

：了解用户在浏览过程中的情感反应，是否被艺术作品所吸引和打动。

衡量方法

：通过问卷调查用户的主观感受来衡量。

9、对拨打手机通讯录中朋友电话这一行为进行分层任务分析（HTA）。不同手机的实际操作会有所不同，可将分析结果与他人的进行比较，或者用两部不同的手机来尝试。

拨打手机通讯录中朋友电话的HTA分析

1. 决定目的

成功拨打通讯录中朋友的电话。

2. 定义任务目标

找到朋友号码并拨出电话。

3. 数据获取

打开手机。

4. 操作步骤

4.1 解锁手机

4.2 找到并打开通讯录应用

4.3 在通讯录中查找朋友姓名

4.4 点击朋友姓名对应的号码

4.5 点击拨打电话按钮

5. 检查有效性

确认是否成功拨出电话。

6. 识别关键操作

关键操作包括解锁手机、打开通讯录、找到号码和拨出电话。若这些操作失败，拨打行为将受影响。

7. 生成并测试假设

例如，假设手机卡顿会影响查找号码速度，可测试不同卡顿情况下的操作时间。

不同手机可能在解锁方式（如指纹、面部识别、密码）、通讯录界面布局和操作方式上存在差异，可使用两部不同手机进行操作并对比各步骤的差异。

也可与他人比较分析结果，看在任务分解和关键操作识别上是否一致。

10、(高级) 我每月使用借记卡（用于从我的银行账户转账）支付家庭信用卡账单。流程如下：● 我必须拨打一个12位的电话号码联系信用卡公司。● 然后从语音菜单中按2表示我想支付账单。● 我被要求输入16位的信用卡号码，然后按井号键。● 接着我要输入想支付的金额，以英镑和便士为单位（假设我想支付500.00英镑，共7个字符）。● 之后我要输入借记卡号码（16位），然后按井号键。● 系统会要求我输入借记卡的发行编号（2位）。● 最后系统会让我按井号键确认支付500.00英镑。● 交易结束。在没有退格键的手机上，总共需要55次按键。你会建议进行哪些设计更改，以降低在这个复杂交易中出错的可能性？

以下是一些可以降低出错可能性的设计更改建议：

增加退格键，方便用户在输入错误时更正。

输入分段提示，比如每4位分隔信用卡或借记卡号码，便于检查。

实时反馈，每完成一项输入，系统语音确认输入内容。

提供重复输入机会，若输入错误，允许用户重新输入。

简化流程，减少不必要的按键，如整合部分步骤或自动填充常用金额。

提供支付确认摘要，交易结束前，系统语音完整复述支付信息供用户确认。

提供数字键盘可视化界面，显示输入内容，便于查看。

11、为一款面向儿童的常识问答类简单游戏设计一个声音增强型界面。该问答以多项选择题的形式呈现。如果时间有限，可只针对游戏的一个屏幕进行设计。如果你熟悉演示软件（如PowerPoint）或任何多媒体软件包，用它们来完成会更有趣。

以下是为儿童常识问答游戏设计声音增强型界面的方案：

开场音效


使用欢快、活泼的音乐作为游戏开场音乐，比如《拉德斯基进行曲》的片段，时长控制在5 – 10秒，营造轻松愉悦的氛围，吸引儿童的注意力。

题目提示音


当题目显示在屏幕上时，播放一段柔和、清晰的提示音，如清脆的鸟鸣声，持续2 – 3秒，提醒儿童题目已出现。

同时，使用语音将题目内容朗读出来，语音语调要亲切、温和，语速适中。

选项选择音效


当儿童移动光标选择选项时，每移动一次，播放一个简短的“滴答”声，让儿童明确自己的操作。

选择某个选项后，播放一个确认音效，如“叮”的一声，持续1秒。

正确答案音效


如果儿童选择了正确答案，播放一段欢快的庆祝音乐，如《凯旋进行曲》的片段，时长5 – 8秒，同时伴有掌声和欢呼声，增强儿童的成就感。

错误答案音效


若选择了错误答案，播放一段温和的提示音，如低沉的“呜呜”声，持续2 – 3秒，避免给儿童造成太大压力。

同时，语音提示“再想一想哦”。

倒计时音效


如果游戏有时间限制，在倒计时开始时，播放轻柔的滴答声，随着时间临近结束，滴答声逐渐加快、变大，提醒儿童抓紧时间答题。

结束音效


游戏结束时，根据儿童的答题情况播放不同的音效。

如果全部答对，播放激昂的胜利音乐；如果有答错的情况，播放鼓励的音乐，如《和兰花在一起》，时长8 – 10秒。

在设计过程中，可以使用 PowerPoint 或多媒体软件来添加和调整这些音效，确保声音与界面元素的配合流畅、自然。

12、要想精通网页设计，没有比评判其他网站更好的方法了。访问一个网站——比如你的大学网站、你最喜欢的商店网站或一家航空公司的网站。对该网站进行有组织的评判，重点关注所使用的组织架构、导航栏以及网站的整体外观。为典型的网站访问者创建一些人物角色，并梳理他们可能想要进行的一些场景。这个网站使用起来有多容易，效果如何？

网页设计练习指导

此为一个关于网页设计练习的指导，需按要求完成对网站的评判、创建人物角色、梳理场景并评估网站易用性和有效性等任务。

13、登录推特并浏览。看看找到正在发生的事情、当前热点以及过时话题有多容易。连续几天这样做，观察其中的变化。

这是一个实践操作类的任务，需要你亲自登录推特，按照要求进行浏览和观察，以了解推特上信息的动态变化情况。

14、你受委托为一个户外博物馆开发一款应用程序，游客可以将其下载到手机上，在参观博物馆时获取信息和指导。你将如何规划这个项目的开发？

项目开发规划步骤

可以按照以下步骤规划项目开发：

1. 明确目的与目标用户

确定应用为游客提供哪些信息（如展品介绍、场馆历史等）和指导（如参观路线等）

明确目标用户群体特征

2. 进行用户研究

让潜在用户记录日常参观活动，选择焦点活动并分类

从规划、交通、陪伴、信息需求、对地点熟悉度等方面进行描述

采访户外博物馆领域专家，了解游客休闲趋势和常见信息

在博物馆及周边热门区域进行非正式观察，了解游客行为和需求

3. 参考界面设计指南

遵循如使菜单命令文本尽可能短、用连字符代替“and”、用分隔符分组菜单命令、将删除命令放在菜单底部等准则

考虑“单手使用设计”和“拇指使用设计”

4. 选择开发环境

使用如微软的Visual Studio等开发环境

利用其平板电脑模拟器查看设计在小屏幕上的效果

注意在全尺寸PC上开发与实际移动应用使用的差异

5. 考虑应用与网站的关系

在博物馆网站上进行推广，添加相关链接和介绍

网站提供更多背景信息，应用提供更具体参观信息

6. 处理内部协调

在较大组织开发中，要协调各方利益

避免因内部政治影响应用最终质量

确保可用性和用户参与度成为重要优先级

15、为学生设计一款能在他们的移动设备上提供相关信息的应用程序。

应用程序设计步骤

1. 理解阶段

目标用户

：学生

分析学生群体的特点和需求

可通过开发人物角色来明确

信息需求

：

课程表、考试安排、学术资源、校园活动等

可采用情景分析

研究方法

：

访谈法

：

与不同年级、专业的学生交流

了解他们对信息的需求和获取习惯

观察法

：

观察学生在校园内使用手机获取信息的场景（如图书馆、教室等）

日记记录法

：

让学生记录使用手机获取信息的日记

了解他们的日常信息需求

2. 设计阶段

界面与交互设计准则

：

设计简洁的菜单命令

使用分隔符分组菜单命令

设计适合单手和拇指操作的界面

开发环境使用

：

利用如微软的 Visual Studio

借助其平板电脑模拟器查看设计在小屏幕上的效果

功能模块划分

：

课程信息模块

学术资源模块

活动通知模块等

3. 开发与测试阶段

开发

：

根据设计进行应用程序的开发

测试

：

包括功能测试、兼容性测试等

确保应用在不同移动设备上稳定运行

4. 上线与维护阶段

上线

：

将应用上线到应用商店供学生下载使用

维护与优化

：

收集学生的反馈

不断对应用进行优化和更新

以满足学生不断变化的信息需求

16、如果你被要求评估一个原型 iPhone 应用程序，你会使用什么评估方法？

可以使用三种主要的评估方法：

专家评估法


由可用性专家或 UX 设计师审查设计的设想版本。该方法能快速发现重大可用性或 UX 问题，但可能遗漏用户遇到的细节问题。

参与者评估法


招募人员使用系统的设想版本，即“用户测试”。这种方法在开发过程中必不可少，可获取用户的真实反馈。两种方法都可在可控环境如可用性实验室进行。

数据分析评估法


在系统或服务部署后收集系统性能数据。

17、我们如何将这些理念应用于网站等信息空间的设计中？

网站与应用程序设计原则

网站和应用程序设计需要遵循合理的设计原则，包括以下方面：

开发人物角色

场景构建

清晰的概念模型

明确的设计语言

信息架构

信息架构的核心在于理解网站或应用内容的

结构与组织方式

，并以此作为概念模型的基础。

导航设计

导航设计应考虑以下因素：

人们如何在网站或应用中移动

如何帮助用户了解内容及其位置

网站评估方法

可以通过以下方式评估网站的易用性与有效性：

对网站进行结构化批判

关注组织方案

分析导航栏

评估整体外观

开发典型访问者的人物角色

模拟他们可能进行的场景

还可以：

参考获奖网站

对特定类型的应用进行批判，重点关注：

设计语言

导航

信息架构

推荐阅读

如需获取更多建议，可阅读以下书籍：

《The Elements of User Experience》

《Information Architecture: Blueprints for the Web》

18、想象在不久的将来，你可以穿上交互式晚装与朋友外出共度夜晚。为人们、场所及其服装之间的互动以及可能产生的新体验构思一些场景。

以下是一些场景示例：

当穿着者进入热闹的派对场所，晚装的颜色会随着音乐节奏闪烁变化，与周围环境氛围相呼应，吸引他人目光，开启社交话题。

若朋友靠近，晚装会通过灯光闪烁或轻微震动提示穿着者，增加见面时的惊喜感。

在餐厅等安静场所，晚装会自动调整为柔和色调，避免过于张扬。

当穿着者与朋友进行自拍时，晚装可以发出特定的闪光效果，为照片增添独特氛围。

若场所内有特定的主题活动，晚装能根据主题展示相关的图案或文字，增强参与感。