1. UCD研究流程及内容
www.MARKLOL.com

2. 2 3 41 2 3 4
用户研究阶段 交互设计阶段 视觉设计阶段 上线阶段
www.MARKLOL.com

3. UCD研究流程
UCD_Workflow
商业目标
深度访谈
定量问卷
使用场景研究
用户需求分析(KANO)
产品概念设计
功能结构图
交互流程分析
视觉设计(情绪版)
设计细化
可用性测试
专家评估
交互设计阶段
明确产品功能结构
交互流程设计
视觉设计阶段
视觉界面设计
上线阶段
保证产品可用性
2 3 4用户研究阶段
明确产品商业目标
确定目标用户
帮助理清产品需求
1

4. 用户研究阶段 交互设计阶段 视觉设计阶段 上线阶段
www.MARKLOL.com

5. 用户研究阶段
产品定位
Product positioning
01
通过专家访谈、文献研究的方法明确商业目标及产品目标用户，将商业目标及目标人群的用户期待更好的
结合起来，促进公司达成其商业目标。
 获取产品前景规划、品牌策略等信息，明确商业目标，指导用户研究确定侧重点， 在用户期望和公司的商业目标之间寻
找平衡，挖掘产品的商业机会点；
 确定目标用户，进一步明确目标用户的人口学特征（性别 、年龄、教育水平、职业、婚姻状况、收入水平等）和行为习
惯（上网时长、经常使用的应用程序等）特点；
结合商业目标及目标人群特征对掌厅娱乐版进行产品定位。
研究内容

6. 用户研究阶段
MACUEE
会中
用户需求研究
User Requirement Analysis
02
研究内容
通过文献研究、情境调查、用户访谈、MACUEE模型等方法进行用户需求研究，结合用户需求及
商业需求，分析产品需求。
 用户对掌厅娱乐化的认知与态度
 用户使用移动互联网掌厅的行为习惯
 用户使用掌厅娱乐版的动机及情境
 用户对掌厅娱乐版的期望
MACUEE分别代表“动机（Motivation）”、“操作（Action）”、“情境（Context）”、“用户（User）”、“经验（Experience）”和
“期望（Expectation）”。

7. 用户研究阶段
会中
• 会议管理
• 会议记录
• 聊天记录
• 追加会议
• 视频回看
需求优先级评估
Needs Assessment
03
研究内容
通过KANO模型、需求减法、专家评估式等方法对产品需求进行优先级评估，去除无关需求、反
向需求及技术不可实现需求。
需求评估考虑的因素：
1)可行性(技术能否实现)
2)成本(人力成本、时间成本)
3)商业风险及商业价值
4)是不是用户最迫切的需求(紧急性与重要性)
确定需求
基本属性
分析需求
的商业价
值
初评需求
的实现难
度
明确需求
性价比
需
求
列
表

8. 用户研究阶段 交互设计阶段 视觉设计阶段 上线阶段
www.MARKLOL.com

9. 交互设计阶段
交互设计
Interaction Design
01
产品概
念设计
功能架
构设计
交互流
程设计
交互原型
测试
研究内容
根据用户研究结果，围绕用户角色、使用场景、需求列表、商业目标进行产品概念设计、信息架构设
计、交互流程设计、原型设计。
对于原型设计进行简单的原型测试，查找可用性问题，并优化设计。

10. 概念设计
Conceptual Design
02
交通银行ITM项目 融合通讯项目 Intel教育软件项目
示例
整个交互设
计都围绕着设计
理念展开，交互
的方式，任务的
流程，产品的框
架等都要体现这
个理念。
头脑风暴
目标
功能
方式
需求
灵感
场景
竞品
本质
认知
设计概念
交互设计阶段

11. 功能结构设计
Conceptual Design
02
研究方法：卡片法
设计人员将所有的功能进行卡片分类，最终确定出基本的功
能层级和结构，给出相应的标签命名，并通过功能树、用例
表等方式呈现出来。
架构图主要定义内容
定义外形因素、姿态和输入方法。
定义功能和数据元素。
决定功能组合层次。
以掌厅为例，本阶段将结合用户研究结果梳理功能模块的架
构，目前移动定义的主要功能模块有：购机、业务办理、充
值缴费、娱乐吧、我的移动、我的购物车，最终的模块划分
将主要以用户研究结果为依据。
交互设计阶段

12. 交互流程设计
Conceptual Design
02
研究方法：绘制交互流程图
线框流程图，是通过线框图表示操作流程，包括使用
情境、分支、逻辑关系，主要是为了确定用户可能的
行为和相应的原则。
交互流程图主要定义内容
构建关键用例的场景剧本
通过验证性的场景剧本来检查设计
以掌厅为例，本阶段将根据功能模块的划分进行典型用例（
任务）的流程设计，例如用流程图表现一名用户完成为自己
的移动账号充值100元的完整任务流程。
交互设计阶段

13. 线框图设计
Conceptual Design
02
研究方法—示意图设计
示意图设计是要把确定好的控件页面布局、不同的形
态，以及出现动画的情况，按照统一的标准尺寸以示
意图的形式呈现出来，以便直观地展示给产品人员和
视觉设计人员。
页面线框图主要定义内容
勾画出大致的交互框架
典型页面的示意图设计和整理
以掌厅为例，本阶段将对关键页面如首页及个别模块的典型
内页进行线框图框架设计。
交互设计阶段

14. 低保真原型设计
Conceptual Design
02
根据确定好的框架设计，进行页面细化，最终输出低
保真原型。
主要细化内容：
补充关键页面
控件描述和说明
功能点描述
交互动作示意和说明
工作流说明
增添页面链接
以掌厅为例，本阶段将对所有模块的页面进行详细线框图设
计，并且输出可以点击操作的交互原型。
交互设计阶段

15. 原型测试
Prototype Testing
02
 辨识并去除多余功能，节省后续开发成本
 提早发现结构布局和交互方式等方面的问题，以更好的进行迭代优化
研究内容
在产品开发设计前，发现并解决需求与功能设计合理性方面的问题，考察产品效能、效率、满意度
执行流程：
脚本设计模块确定
用户招募 测评执行 优化设计
 场景任务
 考量标准
报告撰写
 产品测评结果
酬谢回馈
交互设计阶段

16. 用户研究阶段 交互设计阶段 视觉设计阶段 上线阶段
www.MARKLOL.com

17. 视觉设计阶段
情绪板设计
Mood Boards
01
1 2 3 4 5 6
情绪板是一种启发式和探索性的方法，可以
对图像风格，色彩，文字排版，图案以及整
体外观进行研究。
视觉设计和人的情绪紧密相连，不同的设计
总是会引发不同的情感。
此外，情绪板也可以作为可视化的沟通工具
，快速地向他人传达设计师想要表达的整体
感觉。

18. 视觉方案设计
Visual Design
01
通过情绪板收集和研究用户的情绪及情感，根据
情绪版方法的结论进行方案设计，这样既能有助
于视觉风格的确定，也能保证设计的理性因素，
保证设计结果符合用户的偏好。
根据交互输出的原型，将界面视觉化，得出视觉
设计方案
视觉设计阶段

19. 视觉规范设计
Visual Design
01
统一的规范能保证不同设计师输出的页面保证细节一致，
精确到像素的规范也可以直接提供给开发人员，最大程度的保证开发效果。
视觉设计阶段

20. 用户研究阶段 交互设计阶段 视觉设计阶段 上线阶段
www.MARKLOL.com

21. 上线阶段
研究目的
通过认知预演、启发式评估法、头脑风暴法等方法进行专家评估实现以下目的：
 检查设计是否有效，诊断产品存在的问题，证实设计目标是否达到
 是否用户能够执行任务? 期望用户看到的信息是否被用户发现?用户是否发现了有效的路径?
 是否用户知道他们正在做什么?
 他们遇到了什么问题? 是否能从错误中恢复?
专家评估脚本设计 专家熟悉产品 专家评估 撰写小结
专家评估
Expert Evaluation
01

22. 上线阶段
可用性测试
Usability Testing
02
研究目的
通过目标用户参与的可用性测试，发现产品导航、内容、呈现方式、交互等方面的可用性问题，
从效能、效率、满意度等方面评价产品的可用性水平。
主观指标
• 满意度
• 学习性
• 记忆性
• 控制感
客观指标
• 出错率
• 任务完成率
• 操作时间

23. 阶段 支撑方 工作项 工作内容 输出物 备注
准备 项目沟通 项目沟通
第一阶段
用户研究
专家访谈 专家访谈执行2-3名（可并行） • 访谈小结
文献研究 文献研究（可并行）
用户访谈
遴选问卷编写(可并行） • 遴选问卷
用户招募 8-12名
执行访谈（含脚本撰写）
访谈梳理分析
需求优先级评估
卡诺问卷编写
• 卡诺问卷
预测试+问卷修改
问卷调研 100份
数据分析
用户研究报告 报告撰写
• 综合用户研究报告
-（包含用户特征、需求及设
计建议）
用研周期总计：约39个工作日
项目周期

24. 掌厅娱乐化转型专题汇报
阶段 支撑方 工作项 工作内容 输出物 备注
第二阶段
设计部分
头脑风暴 头脑风暴（可并行）
交互设计
概念设计 设计概念ppt
架构梳理 功能架构图
流程设计及低保真原型设计 低保真原型
原型测试 原型可用性测试 可用性问题列表
视觉设计
情绪版设计 情绪版ppt
方案设计 视觉风格方案2套
页面输出 页面效果图
设计规范（切图标注） 控件三态图、切图标注
专家评估 专家评估
修改完善 修改完善 视觉设计方案
设计周期总计：约45个工作日
注：周期可能会根据用研结果及项目需求进行调整。

25. 更多内容敬请关注：www.marklol.com
Thanks