“车载音乐”网站设计

以用户为中心的产品设计上实例
（Angela & 白鸦）

2007.09.25
 目录

• 项目和团队； 10%
• 设计产品架构； 40%
设计流程、市场分析、用户分析、概念设计、产品功能分析

• 产品功能设计；45%
角色设计、业务流程设计、信息架构和导航、情景设计和任务分解

• 项目总结；5%
项目和团队

• 项目背景
• 团队组建
• 设计流程
项目背景
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

来自音像店销售人员的话：
他们每个月至少光顾一次，每次都买下十几张CD，下个月还会来；他们不知道该听什么；于是还喜欢要“新”的；他
们总是为一首歌而买下一张唱片。
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

来自音像店销售人员的话：
他们每个月至少光顾一次，每次都买下十几张CD，下个月还会来；他们不知道该听什么；于是还喜欢要“新”的；他
们总是为一首歌而买下一张唱片。

来自音像店老板的话：
互联网和数字音乐的普及带给我们销售量的不断下滑，甚至连盗版都快做不下去了；唱片公司在不断的通过拼凑各
种“专辑”获取更多利润；...
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

来自音像店销售人员的话：
他们每个月至少光顾一次，每次都买下十几张CD，下个月还会来；他们不知道该听什么；于是还喜欢要“新”的；他
们总是为一首歌而买下一张唱片。

来自音像店老板的话：
互联网和数字音乐的普及带给我们销售量的不断下滑，甚至连盗版都快做不下去了；唱片公司在不断的通过拼凑各
种“专辑”获取更多利润；...
iTunes 销量
3000000000

2250000000

1500000000

750000000

0
2003-4-28 2004-7-14 2005-7-17 2006-2-23 2007-1-10 2007-8-1
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

来自音像店销售人员的话：
他们每个月至少光顾一次，每次都买下十几张CD，下个月还会来；他们不知道该听什么；于是还喜欢要“新”的；他
们总是为一首歌而买下一张唱片。

来自音像店老板的话：
互联网和数字音乐的普及带给我们销售量的不断下滑，甚至连盗版都快做不下去了；唱片公司在不断的通过拼凑各

> 13%
种“专辑”获取更多利润；...
iTunes 销量
3000000000

2250000000

1500000000

750000000

0
2003-4-28 2004-7-14 2005-7-17 2006-2-23 2007-1-10 2007-8-1
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

来自音像店销售人员的话：
他们每个月至少光顾一次，每次都买下十几张CD，下个月还会来；他们不知道该听什么；于是还喜欢要“新”的；他
们总是为一首歌而买下一张唱片。

来自音像店老板的话：
互联网和数字音乐的普及带给我们销售量的不断下滑，甚至连盗版都快做不下去了；唱片公司在不断的通过拼凑各

> 13%
种“专辑”获取更多利润；...
iTunes 销量
3000000000

忽略客观因素1：版权问题；
2250000000
忽略客观因素2：迅速获利；
1500000000

750000000

0
2003-4-28 2004-7-14 2005-7-17 2006-2-23 2007-1-10 2007-8-1
项目背景
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

来自音像店销售人员的话：
他们每个月至少光顾一次，每次都买下十几张CD，下个月还会来；他们不知道该听什么；于是还喜欢要“新”的；他
们总是为一首歌而买下一张唱片。

来自音像店老板的话：
互联网和数字音乐的普及带给我们销售量的不断下滑，甚至连盗版都快做不下去了；唱片公司在不断的通过拼凑各

> 13%
种“专辑”获取更多利润；...
iTunes 销量
3000000000

忽略客观因素1：版权问题；
2250000000
忽略客观因素2：迅速获利；
1500000000
省略的内容1：用户调查和测试；
省略的内容2：视觉、内容优化、UIC；
750000000

0
2003-4-28 2004-7-14 2005-7-17 2006-2-23 2007-1-10 2007-8-1
团队组建

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM
UR

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM
UR
ID

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM
UR
ID
VD

http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM
UR
ID
VD
CD
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM
UR
ID
VD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
PM
UR
ID
PD
VD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
问题1：把GUI只当美工
PM
UR
ID
PD
VD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
问题1：把GUI只当美工
PM
问题2：把UIC放在PD部门
UR
ID
PD
VD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
问题1：把GUI只当美工
PM
问题2：把UIC放在PD部门
UR
问题3：只让ID设计视觉互动 ID
PD
VD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
问题1：把GUI只当美工
PM
问题2：把UIC放在PD部门
UR
问题3：只让ID设计视觉互动 ID
问题4：只让UE在后面参与 PD
VD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
User Interface Code，界面制作。 BI
问题1：把GUI只当美工
PM
问题2：把UIC放在PD部门
UR
问题3：只让ID设计视觉互动 ID
问题4：只让UE在后面参与 PD
VD
问题5：没有人做CD
CD
UIC
http://ucdchina.com/blog/...
团队组建
Business Intelligence，分析市场和企业数据、知识分析；
Product Manager，决策产品方向、制定产品架构、整理产品需求。

User Research，用户研究、竞品分析、易用性测试和评估，..；
Interaction Design，用户使用流程、人机交互模型、信息展现规则、...；
Visual Design，视觉设计；
Content Design，内容设计；
组建团队 ···
User Interface Code，界面制作。 BI
问题1：把GUI只当美工
PM
问题2：把UIC放在PD部门
UR
问题3：只让ID设计视觉互动 ID
问题4：只让UE在后面参与 PD
VD
问题5：没有人做CD
CD
UIC
http://ucdchina.com/blog/...
设计的行为

抽象

了解 实现

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；

抽象

了解 实现

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象

了解 实现

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象

了解 实现

用户
环境

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象

分析
洞察

了解 实现

用户
环境

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象

分析 概念
洞察 计划

了解 实现

用户
环境

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象

分析 概念
洞察 计划

了解 实现

用户 原型
环境 Beta
上线

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象
问题1：设计在计划确定后才介入

分析 概念
洞察 计划

了解 实现

用户 原型
环境 Beta
上线

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象
问题1：设计在计划确定后才介入
问题2：数据无法形成有效洞察

分析 概念
洞察 计划

了解 实现

用户 原型
环境 Beta
上线

现实
http://uicom.net/blog/?p=556
设计的行为
设计过程：从现实到抽象、从理解到行动；
在有限的时间内循环反复。

抽象
问题1：设计在计划确定后才介入
问题2：数据无法形成有效洞察
问题3：直接开发、直接上线
分析 概念
洞察 计划

了解 实现

用户 原型
环境 Beta
上线

现实
http://uicom.net/blog/?p=556
产品架构设计

• 市场分析
• 用户分析
• 概念设计
• 功能需求分析
 市场分析──汽车市场
800万

728万

600万

523万

400万 437万
377万
328万

200万

0万 汽车产量
2002 2003 2004 2005 2006
 市场分析──汽车市场
800万

728万

600万

523万

400万 437万
377万
328万

200万

0万 汽车产量
2002 2003 2004 2005 2006

2006年中国汽车产量728.0万辆，比2002年的328.7万辆增长121.5%，年均增长30.4%；
 市场分析──汽车市场
800万

728万

600万

523万

400万 437万
377万
328万

200万

0万 汽车产量
2002 2003 2004 2005 2006

2006年中国汽车产量728.0万辆，比2002年的328.7万辆增长121.5%，年均增长30.4%；
2006年我国汽车销售达到721.6万辆。
 市场分析──汽车市场
4000万

3697万

3000万
3064万

2611万
2340万 2333万
2000万
2052万

1517万
1000万 1167万
969万 1056万

0万
2002 2003 2004 2005 2006
汽车总保有量 私人汽车保有量
 市场分析──汽车市场
4000万

3697万

3000万
3064万

2611万
2340万 2333万
2000万
2052万

1517万
1000万 1167万
969万 1056万

0万
2002 2003 2004 2005 2006
汽车总保有量 私人汽车保有量

2006年末全国汽车保有量3697.4万辆，比2002年末增长80.1%；其中私人汽车保有
量2333.3万辆，比2002年末增长140.8%，年均增长24.6%。
 市场分析──汽车市场
4000万

3697万

3000万
3064万

2611万
2340万 2333万
2000万
2052万

1517万
1000万 1167万
969万 1056万

0万
2002 2003 2004 2005 2006
汽车总保有量 私人汽车保有量

2006年末全国汽车保有量3697.4万辆，比2002年末增长80.1%；其中私人汽车保有
量2333.3万辆，比2002年末增长140.8%，年均增长24.6%。
2006年私人汽车占全部民用汽车保有量的63.1%
 市场分析──汽车市场
8000万

7200万
6000万

4000万
4466万
2000万
2333万
0万
2006年 2010年 2020年
预计家用汽车保有量
 市场分析──汽车市场
8000万

7200万
6000万

4000万
4466万
2000万
2333万
0万
2006年 2010年 2020年
预计家用汽车保有量

按照保守估计，到2010年，中国家用轿车保有总量将达到4466万辆，其中，城镇
居民家用轿车保有量约3400万辆。到2020年，中国家用轿车保有量将达到7200万
辆。
市场分析──汽车市场
 市场分析──汽车市场

据2007年7月公安部披露的信息，目前全国拥有汽车驾驶证的人数已经达到1.26亿。且
驾驶人年龄、驾龄相对集中，驾驶人年龄主要集中在26-50岁之间，占总数的80.3%。
 市场分析──音像市场

8000万张 2.100亿元
7400万张 2.1亿元
6000万张 1.575亿元

4000万张 1.050亿元 1.2亿元

3800万张
2000万张 0.525亿元

0万张 0亿元
2005 2006 2005 2006

唱片销售量 唱片销售收入
 市场分析──音像市场

8000万张 2.100亿元
7400万张 2.1亿元
6000万张 1.575亿元

4000万张 1.050亿元 1.2亿元

3800万张
2000万张 0.525亿元

0万张 0亿元
2005 2006 2005 2006

唱片销售量 唱片销售收入

从广东音像城的资料分析，2006年1到12月份，音像制品销售量下降幅度平均在50%左
右，共计销售3800万张，较2005年的7400万张下降了近一半；销售金额共计1.2亿元，
较2005年的2.1亿元下降了44%。
 市场分析──音像市场
6亿张
5.734亿张 5.593亿张 5.596亿张

4亿张 4.500亿张

2亿张

防伪标识
0亿张
2003 2004 2005 2006
 市场分析──音像市场
6亿张
5.734亿张 5.593亿张 5.596亿张

4亿张 4.500亿张

2亿张

防伪标识
0亿张
2003 2004 2005 2006

2006年全年发放防伪标识的总数约4.5亿枚，这一数字比2003年的5.734亿枚、2004年的
5.593亿枚、2005年的5.596亿枚下降约1.1亿枚左右。由此可以看
到，2003、2004、2005年音像制品发行量相差并不太大，而2006年音像制品发行量较
前几年下降幅度颇大，2006年上半年同比下降约1/3，下半年同比下降约1/5。
 市场分析──音像市场
70.0亿美元
69.4亿美元

52.5亿美元

47.5亿美元
35.0亿美元
34.3亿美元

17.5亿美元

0亿美元
2004 2005 2006 美国市场数字音乐销售额
 市场分析──音像市场
70.0亿美元
69.4亿美元

52.5亿美元

47.5亿美元
35.0亿美元
34.3亿美元

17.5亿美元

0亿美元
2004 2005 2006 美国市场数字音乐销售额

数字音乐销售已占美国唱片行业总销售额的18％。 美国和欧洲的音乐爱好者在2004年
合法下载了2亿多首歌曲，比2003年的2000多万首增加了10倍。2005年，全球收费的在
线音乐服务提供商的收益为16亿美元。
 市场分析──音像市场
70.0亿美元
69.4亿美元

52.5亿美元

47.5亿美元
35.0亿美元
34.3亿美元

17.5亿美元

0亿美元
2004 2005 2006 美国市场数字音乐销售额

数字音乐销售已占美国唱片行业总销售额的18％。 美国和欧洲的音乐爱好者在2004年
合法下载了2亿多首歌曲，比2003年的2000多万首增加了10倍。2005年，全球收费的在
线音乐服务提供商的收益为16亿美元。
据艾瑞市场咨询预计，2006年、2007年、2008年中国数字音乐市场规模将分别达到42.9
亿元、58.4亿元、81.4亿元。
思考5分钟...
面对一组数据，我们要分析什么？

2007.09.25
讨论 15 分钟...

2007.09.25
讨论 15 分钟...
给什么人设计？

2007.09.25
讨论 15 分钟...
给什么人设计？

产品要达到什么目标？

2007.09.25
用户分析

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯
所使用的音乐设备

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯
所使用的音乐设备
在车上的停留时间

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯
所使用的音乐设备
在车上的停留时间
对音乐本身的喜好程度

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯
所使用的音乐设备
在车上的停留时间
对音乐本身的喜好程度
年龄、职业、性别

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯
所使用的音乐设备
在车上的停留时间
对音乐本身的喜好程度
年龄、职业、性别
……

http://uicom.net/blog/?p=684
 用户分析
寻找有可能影响用户目标或行为的关键因素
驾车时听音乐的习惯
所使用的音乐设备
在车上的停留时间
对音乐本身的喜好程度
年龄、职业、性别
……
讨论5分钟 ···

http://uicom.net/blog/?p=684
用户群概述

2007.09.25
用户群概述
什么样的人？

2007.09.25
用户群概述
什么样的人？

怎么用？

2007.09.25
用户群概述
什么样的人？

怎么用？

我们怎么利用？

2007.09.25
概念设计

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

没有任何形式限制；

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

没有任何形式限制；

勿拘泥于细节。

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

没有任何形式限制；

勿拘泥于细节。

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

没有任何形式限制；

练习15分钟 ···
勿拘泥于细节。

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

没有任何形式限制；

练习15分钟 ···
勿拘泥于细节。

解决什么？

http://ucdchina.com/blog/...
概念设计
描述用户的整体任务；

表现各节点之间的关系和关联。

用概念图阐述产品思想；

没有任何形式限制；

练习15分钟 ···
勿拘泥于细节。

解决什么？

怎么解决？

http://ucdchina.com/blog/...
 功能需求分析──头脑风暴

用户群 用户目标 潜在功能 商业目标

甲 把自己喜欢听的音乐刻成光盘

乙 随时了解某类风格音乐的最新情况

丙 了解最新流行音乐单曲
 功能需求分析──确定优先级别

用户群 潜在功能 可以有 最好有 必须有 评估分

丙
上午结束 ...
Angela，alliafn@gmail.com
白鸦，whitecrow.zhu@gmail.com

2007.09.25
回顾 ...
“车载音乐”网站设计
（Angela & 白鸦）

2007.09.25
上午工作回顾
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

目标人群
有车族、有一定的互联网使用经验、中等收入
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

目标人群
有车族、有一定的互联网使用经验、中等收入

项目规划：
专门针对车载音乐设计
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

目标人群
有车族、有一定的互联网使用经验、中等收入

项目规划：
专门针对车载音乐设计
初期目标解决流量问题：在国内音乐网站中排名占到前10，注册用户达到10万左右
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

目标人群
有车族、有一定的互联网使用经验、中等收入

项目规划：
专门针对车载音乐设计
初期目标解决流量问题：在国内音乐网站中排名占到前10，注册用户达到10万左右
下一步目标要解决业务模式，达到一定的市场份额（此次工作坊不涉及）
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

目标人群
有车族、有一定的互联网使用经验、中等收入

项目规划：
专门针对车载音乐设计
初期目标解决流量问题：在国内音乐网站中排名占到前10，注册用户达到10万左右
下一步目标要解决业务模式，达到一定的市场份额（此次工作坊不涉及）

忽略客观因素1：版权问题；
忽略客观因素2：迅速获利；
上午工作回顾
某音像销售企业尝试进入占据互联网流量1/4的电子音乐市场；
初步瞄准“车载音乐”。

目标人群
有车族、有一定的互联网使用经验、中等收入

项目规划：
专门针对车载音乐设计
初期目标解决流量问题：在国内音乐网站中排名占到前10，注册用户达到10万左右
下一步目标要解决业务模式，达到一定的市场份额（此次工作坊不涉及）

忽略客观因素1：版权问题；
忽略客观因素2：迅速获利；

省略的内容1：用户调查和测试；
省略的内容2：视觉、内容优化、UIC；
 功能需求表

用户群 用户目标 功能需求 可以有 最好有 必须有 评估分

把自己喜欢听的
甲
音乐刻成光盘

随时了解某类风
乙 格音乐的最新情
况

了解最新流行音
丙
乐单曲
产品功能设计

• 人物角色设计
• 业务流程设计
• 信息架构和导航
• 场景设计
• 任务分解
 人物角色设计
‣ 主要差异点1
姓名 ‣ 主要差异点2
‣ 主要差异点3

照片
第一段：历史

个人信息 第一段：现状

计算机和互联网经验
第三段：期望

行业相关经验 用户目标 商业目标

http://ucdchina.com/blog/...
 人物角色设计
‣ 主要差异点1
姓名 ‣ 主要差异点2
‣ 主要差异点3

照片
第一段：历史

练习20分钟 ···
个人信息 第一段：现状

计算机和互联网经验
第三段：期望

行业相关经验 用户目标 商业目标

http://ucdchina.com/blog/...
业务流程设计
业务流程设计

业务流程模型是产品功能的核心；
业务流程设计

业务流程模型是产品功能的核心；

业务流程图是每个业务点的概念设计；
业务流程设计

业务流程模型是产品功能的核心；

业务流程图是每个业务点的概念设计；

业务流程是数据流程，也是用户使用流程；
业务流程设计

业务流程模型是产品功能的核心；

业务流程图是每个业务点的概念设计；

业务流程是数据流程，也是用户使用流程；
业务流程的设计不能靠“专家”，必须深入了解产品；
业务流程设计

业务流程模型是产品功能的核心；

业务流程图是每个业务点的概念设计；

业务流程是数据流程，也是用户使用流程；
业务流程的设计不能靠“专家”，必须深入了解产品；

不是设计“用户应该怎么作”而是思考“用户喜欢怎么作”；
业务流程设计

业务流程模型是产品功能的核心；
练习5分钟 ···
业务流程图是每个业务点的概念设计；

业务流程是数据流程，也是用户使用流程；
业务流程的设计不能靠“专家”，必须深入了解产品；

不是设计“用户应该怎么作”而是思考“用户喜欢怎么作”；
信息架构和导航

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

多重导航的系统：全局导航、局部导航、辅助导航、友好导航、内联导航；

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

多重导航的系统：全局导航、局部导航、辅助导航、友好导航、内联导航；

用户的位置感和指示标识；(面包屑)

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

多重导航的系统：全局导航、局部导航、辅助导航、友好导航、内联导航；

用户的位置感和指示标识；(面包屑)

不在同一页面重复同一导航。

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

多重导航的系统：全局导航、局部导航、辅助导航、友好导航、内联导航；

用户的位置感和指示标识；(面包屑)

不在同一页面重复同一导航。

http://ucdchina.com/blog/...
信息架构和导航
遵循日常认知的信息分布，捕捉焦点；

合理的信息结构能够把新内容纳入；

从简入到繁，从内至外的信息结构设计;
页面信息结构和局部信息结构同行。

练习10分钟 ···
多重导航的系统：全局导航、局部导航、辅助导航、友好导航、内联导航；

用户的位置感和指示标识；(面包屑)

不在同一页面重复同一导航。

http://ucdchina.com/blog/...
休息 5 分钟...
“车载音乐”网站设计
（Angela & 白鸦）

2007.09.25
场景设计
场景设计
场景是脚本，用户是主演；
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。

网店经营状况平淡，刘涛正为进什么样的货而发愁。听朋友介绍某个网站有“服装指数”，可以了解
现在的网民喜欢什么，决定利用晚上时间去试一下。
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。

网店经营状况平淡，刘涛正为进什么样的货而发愁。听朋友介绍某个网站有“服装指数”，可以了解
现在的网民喜欢什么，决定利用晚上时间去试一下。

由于是朋友推荐的，所以刘涛直接在地址栏输入“URL”，然后回车。
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。

网店经营状况平淡，刘涛正为进什么样的货而发愁。听朋友介绍某个网站有“服装指数”，可以了解
现在的网民喜欢什么，决定利用晚上时间去试一下。

由于是朋友推荐的，所以刘涛直接在地址栏输入“URL”，然后回车。

“什么是服装指数？”，这正是刘涛想知道的，于是点击进去仔细地读了一下规则。”我大致知道服装
指数是什么意思了，可是怎么用呢？“刘涛看到页面下方有一个”马上体验“的按钮，想也没想就点击
了。
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。

网店经营状况平淡，刘涛正为进什么样的货而发愁。听朋友介绍某个网站有“服装指数”，可以了解
现在的网民喜欢什么，决定利用晚上时间去试一下。

由于是朋友推荐的，所以刘涛直接在地址栏输入“URL”，然后回车。

“什么是服装指数？”，这正是刘涛想知道的，于是点击进去仔细地读了一下规则。”我大致知道服装
指数是什么意思了，可是怎么用呢？“刘涛看到页面下方有一个”马上体验“的按钮，想也没想就点击
了。

她进入了一个搜索界面，只有输入框和搜索按钮。
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。

网店经营状况平淡，刘涛正为进什么样的货而发愁。听朋友介绍某个网站有“服装指数”，可以了解
现在的网民喜欢什么，决定利用晚上时间去试一下。

由于是朋友推荐的，所以刘涛直接在地址栏输入“URL”，然后回车。

“什么是服装指数？”，这正是刘涛想知道的，于是点击进去仔细地读了一下规则。”我大致知道服装
指数是什么意思了，可是怎么用呢？“刘涛看到页面下方有一个”马上体验“的按钮，想也没想就点击
了。

她进入了一个搜索界面，只有输入框和搜索按钮。

”嗯，这很清楚，我先试试看能不能搜到我关心的东西。最近流行韩版衣服，搜搜看。“刘涛一边想
一边输入关键词“韩版”，回车——“抱歉，没有找到与‘韩版’相关的指数信息。”但同时，搜索结果页
面中提示刘涛：”相关指数：韩装 韩流 韩潮 欧版“
场景设计
场景是脚本，用户是主演；
场景讲述人物角色与网站进行交互时的“理想化”故事；
场景是一个或多个任务的综合体，帮助人们理解人物角色最常用的路径；
每个首要角色至少要有一个场景，同时要包括这个角色最重要的目标；
示例：
刘涛是某公司行政人员，兼职经营淘宝、易趣两个网店，买女装和小饰品。有3年左右的计算机和互
联网使用经验。经常使用搜索引擎查找自己需要的信息。

网店经营状况平淡，刘涛正为进什么样的货而发愁。听朋友介绍某个网站有“服装指数”，可以了解
现在的网民喜欢什么，决定利用晚上时间去试一下。

由于是朋友推荐的，所以刘涛直接在地址栏输入“URL”，然后回车。

“什么是服装指数？”，这正是刘涛想知道的，于是点击进去仔细地读了一下规则。”我大致知道服装
指数是什么意思了，可是怎么用呢？“刘涛看到页面下方有一个”马上体验“的按钮，想也没想就点击
了。

她进入了一个搜索界面，只有输入框和搜索按钮。

”嗯，这很清楚，我先试试看能不能搜到我关心的东西。最近流行韩版衣服，搜搜看。“刘涛一边想
一边输入关键词“韩版”，回车——“抱歉，没有找到与‘韩版’相关的指数信息。”但同时，搜索结果页
面中提示刘涛：”相关指数：韩装 韩流 韩潮 欧版“

“太好了，这正是我要找的东西！”
任务分解──要点

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。
任务分解要把场景拆解成最小的组成部分。

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。
任务分解要把场景拆解成最小的组成部分。
完成同一个目标的任务可以有很多种。

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。
任务分解要把场景拆解成最小的组成部分。
完成同一个目标的任务可以有很多种。
任务分解有助于理解上下文和用户期望值。

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。
任务分解要把场景拆解成最小的组成部分。
完成同一个目标的任务可以有很多种。
任务分解有助于理解上下文和用户期望值。
可以确保所有的用户行为都被纳入了设计之中。

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。
任务分解要把场景拆解成最小的组成部分。
完成同一个目标的任务可以有很多种。
任务分解有助于理解上下文和用户期望值。
可以确保所有的用户行为都被纳入了设计之中。
同时可以保证把注意力放在了用户常做的事情上。

http://ucdchina.com/blog/...
任务分解──要点
任务是用户为了达到目标而做的事。
任务分解要把场景拆解成最小的组成部分。
完成同一个目标的任务可以有很多种。
任务分解有助于理解上下文和用户期望值。
可以确保所有的用户行为都被纳入了设计之中。
同时可以保证把注意力放在了用户常做的事情上。

http://ucdchina.com/blog/...
任务分解──示例
 任务分解──示例
任务编号 重要级别 人物角色 任务 描述

1 1 王二 刘三 注册 通过某种途径（搜索、友链）直接进入首页，被吸引而注册

2 1 王二 张七 上传音乐 上传一首新的音乐，填写描述

3 1 王二 张七

4 3 张七 -

5 2 张七 -

6 1 张七 刘三

7 1 张七 王二
总结...
“车载音乐”网站设计
（Angela & 白鸦）

2007.09.25
 Q&A
Angela，alliafn@gmail.com
白鸦，whitecrow.zhu@gmail.com

广告: UCDChina可提供商业的产品设计培训服务.

2007.09.25