interaction design

1. 交互设计

2. A阶段：基础知识学习(1次/月)
B阶段：技能方法学习（1次/半年）
C阶段：综合训练（1次/年）
A1：用户体验
基础课程
B1：用户研究 B2：需求分析 B3：信息架构 B4：任务设计 B5：交互设计
B6：UE测试
C1：综合设计
B7：用户情感 B8：文案设计 B9：视觉设计
C2：总结课程
考核
……
 深红色必修课程，浅红色选修课程
交互设计课程进阶图

3. 交互设计概述
交互设计方法
交互设计主题
交互设计工具
交互设计流程
目录
CONTENTS

4. 1、信息架构设计得好，让用户无论在
哪里都不会迷路。
2、利用有限的页面空间，对内容进行
合理规划、整理分类、精简不需要的东
西、不同的版块放置最适合的内容。让
用户按照逻辑直观的，毫无阻碍的一步
步地接近他们需要的信息。
不用用户去想
一般3秒左右就能打开目标页面
不用用户等待

5. 交互设计概述

6. 交互设计？
交互设计是以人的需求为指向，理解用户的期望、需求、理解商
业、技术以及业内的机会与制约。基于以上的理解，创造出形式、
内容、行为、有用、易用，另用户满意且技术可行，具有商业利益的产
品。
----《交互设计—超越人机交互》

7. 交互设计？
帮助用户高效的完成产品所设想的任务，同时在这个过程中，能让用
户感觉到愉悦和不受打扰。
----我的理解

8. 用户体验设计
工业设计
信息架构
人类因素
人机交互
视觉
设计
用户界面
工程
交互设计
交互设计涉及的相关领域

9. 交互设计的组成

10. 交互设计的类型

11. 需求 UI 开发 测试 发布
用户
研究
需求
分析
信息
架构
设计
任务
设计
交互
设计
视觉
设计
前端
开发
测试
1 2 3 4 5 6 7 8
1 2 8 5 6
3 4
5
7
8
8 8
一个产品（系统）形成所要经历的阶段：
项目周期的几个阶段：
交互设计何时介入
产出：原型，交互文
档

12. 1
2
3
4
交互设计的特点

13. 交互设计的要素
符合用户的
逻辑思维
充分为使用
人群考虑
简化操作流程，
并提示用户进行
操作；
可定制化 简洁，实用
图形元素风格
统一，
美观协调；

14. 交互设计概述
交互设计方法
交互设计主体
交互设计工具
交互设计流程
目录
CONTENTS

15. 以用户为中心的设计
以活动为中心的设计
天才设计
交互设计的方法
系统设计

16. 以用户为中心的设计
以用户为中心的设计简单说来就是：用户知道什么最好。使用产品或
服务的人知道自己的需求、目标和偏好，设计师需要发现这些并为其
设计。
以用户为中心的设计

17. 以用户为中心的设计

18. 以活动为中心的设计
以活动为中心的设计
活动为中心的设计观并不是着眼于用户的目的和偏好，而是活动。
活动不能笼统地定义为一组为计划而做的行动和决定。

19. ATM机
以活动为中心的设计

20. 系统设计
系统设计是解决设计问题的一种非常理论化的方式；它利用组件的某
种既定安排来创建设计方案。系统设计的理念比较贴近产品的现实模
型，即产品真正运行的方式。
系统设计

21. 飞机仪表盘
系统设计

22. iPod
天才设计

23. 方法 概述 用户 设计师
以用户为中心的设
计
侧重于用户需求和
目标
指导设计 探求用户和目标
以活动为中心的设
计
侧重于任务和目标 完成任务 为行动创造工具
系统设计
侧重于系统的各个
组成部分
设定出系统的目标
确保系统的各部分
准备就绪
天才设计
设计师在设计产品
时依靠技能和智慧
检验灵感 灵感的源泉
几种设计方法的对比

24. 交互设计概述
交互设计方法
交互设计主体
交互设计工具
交互设计流程
目录
CONTENTS

25. 故事板

26. 故事板
1、故事板是用特定的脚本连贯的分镜头，来展示一系列的
交互动作。
2、故事板用于突出显示某个关键交互动作，从而使整个用
户体验过程中相对应的某个关键任务得以凸显。
3、故事板用于寻找产品的用户群。
故事板的几个侧重点：

27. 故事板
故事板在交互设计领域的定义：
用图文结合的形式来描述一个完整任务或是交互动
作的可视化剧本。

28. 故事板
侧
重
线
下
任
务
的
故
事
板

29. 故事板
去住酒店时，我们设定有三种人群：
商务人士、情侣、家庭，请选择一个人群，把他们
的心里活动通过故事板的形式表现出来。（四格漫
画的形式）
课堂互动

30. 请大家设计一个杯子……

31. 交互设计的主题—角色

32. 最有力的工具总是在概念上简单。
我们的工具：精确描述用户和用户想要完成
的事情！
角色不是真实的人物，但是在设计过程中代
表着真实的人物。
它们是真实用户的假想原型。
用持续精细化的过程来确定相关角色及目标。
与编程中“迭代”类似，但更快更简单。
角色特点

33. 谁是我们的用户?
谁是我们的用户？

34. 为什么要了解我们的用户?
为什么要了解我们的用户？

35. 我们要了解用户什么?
背景 --- 用户背景信息, 如年龄, 职业, 喜好等
动机 --- 是什么需要趋势用户来使用这个产品;
特性 ---用户关心这个产品的哪些特性;
情景 --- 用户在什么情况(外内在因素)下来操作;
行为 --- 用户如何与产品交互;
目标 --- 用户最终想要得到什么;
习惯 --- 用户一般的操作或使用习惯, 比如左/右手操作, 阅读文字
大小习惯等。
期望 --- 在为操作前或操作不能满足后的期望;
我们要了解用户什么？

36. 面谈 --- 面对面的倾听和观察
调查 --- 问卷抽查
需求分析 --- 问卷统计和分析
Card Sort --- 卡片组合排序
群体任务分析 --- 对整个用户群体的操作比较和分析
焦点用户群 --- 专家“用户”评估
领域研究 --- 种族, 年龄, 性别, 行业等不同领域的统计分析
角色设定的方法

37. 交互设计概述
交互设计方法
交互设计主体
交互设计工具
交互设计流程
目录
CONTENTS

38. 交互设计工具

39. 做原型的方法有很多种，一般常用的有以下几种：
纸质草图、Word、PPT、Visio、Excel、
Axure RP。
纸质 PPT Excel Axure RP
Visio
原型方法

40. Axure RP 是一个快速绘制线框和原
型的工具。
主要用来定义应用程序的需求与
规格，以及设计使用者界面与功能，
使用者包括用户体验设计师、信息
架构师、可用性专家与产品经理等
专业人士。
Axure RP
交互设计工具

41. 交互设计概述
交互设计方法
交互设计主体
交互设计工具
交互设计流程
目录
CONTENTS

42. 交互设计流程

43. 任务分析，列出界
面所要完成的所有
任务
按各任务确定页面
流程，建立信息架
构；
创建统一的页面布
局包括分区等
在页面布局的基础上进行原
型设计，可以是低保真或是
高保真的原型图。
编写设计说明
交互设计流程

44. 课程小结
交互设计是一个过程，它不仅仅是画线框图。
交互设计最关键的两个环节是页面流程和页面布局，前者建
立清晰的架构和严密的逻辑，后者整合零散的信息并确定分
明的主次关系。
这一切都是为了我们的终极目标——让我们的界面符合用
户的预期，不带给他们任何的意外。
一切都在用户的意料之中。