29
移动产品设计流程 用户中心 吴达鲲 —— 如何设计APP结构

移动产品设计流程 @吴达鲲

Embed Size (px)

Citation preview

Page 1: 移动产品设计流程 @吴达鲲

移动产品设计流程

用户中心 吴达鲲

—— 如何设计APP结构

Page 2: 移动产品设计流程 @吴达鲲

1绪论

2如何确定APP结构

3常见APP结构

目录

Page 3: 移动产品设计流程 @吴达鲲

1绪论

2如何确定APP结构

3常见APP结构

Page 4: 移动产品设计流程 @吴达鲲
Page 5: 移动产品设计流程 @吴达鲲
Page 6: 移动产品设计流程 @吴达鲲

好的APP结构

简单、有效率地完成任务

聚合有关联的内容和功能,同时分隔无关联的

通过一致的导航来处理复杂的APP功能和内容

Page 7: 移动产品设计流程 @吴达鲲

1绪论

2如何确定APP结构

3常见APP结构

Page 8: 移动产品设计流程 @吴达鲲

如何确定APP结构

What does my app do?

Page 9: 移动产品设计流程 @吴达鲲

一句话概括大意

功能列表

??? Goldilocks

Page 10: 移动产品设计流程 @吴达鲲

如何确定APP结构

What does my app do?

Use Case

Page 11: 移动产品设计流程 @吴达鲲

用例 use cases

用户和系统之间

完成某项任务目标

交互序列

Page 12: 移动产品设计流程 @吴达鲲

找游戏

主要角色:游戏玩家

系统:17173 APP

前置条件:打开APP,并成功加载对应内容

主要场景:

1.用户打开APP

2.根据某条件进行搜索,或直接查看热门游戏

3.APP展示对应条件的游戏列表

4.用户选择游戏条目

5.APP显示对应游戏条目的内容(Detail)

Page 13: 移动产品设计流程 @吴达鲲

用例图 Use case diagram

Use Case

角色 actor

关系 Relationship

Page 14: 移动产品设计流程 @吴达鲲

17173 Game Circle APP V1.0

Page 15: 移动产品设计流程 @吴达鲲

查看关注游戏

普通用户

17173 Game Circle APP V1.0游戏圈建立者

找游戏

查看我的内容

查看我的游戏

浏览游戏排行

根据关键字搜索

浏览热门游戏

查看游戏圈动

查看游戏资讯

查看游戏信息

查看评测、攻略

添加评测、攻

略、评论

Ugc用户

Use case diagram

Page 16: 移动产品设计流程 @吴达鲲

如何确定APP结构

主要功能 What does my app

do?

用例 Use Case

步骤 Steps

Page 17: 移动产品设计流程 @吴达鲲

1.清单 Inventory

普通用户

游戏圈建立者

Ugc用户

查看关注游戏

找游戏

查看我的内容

查看游戏圈动

添加评测、攻略、评

Page 18: 移动产品设计流程 @吴达鲲

2.优先级 Prioritize

High Med Low

找游戏

查看游戏圈动

查看关注游戏

添加评测、攻

略、评论

查看我的内容

Page 19: 移动产品设计流程 @吴达鲲

3.次序 Sequence

查看关注游戏

找游戏

查看游戏圈动

普通用户

Page 20: 移动产品设计流程 @吴达鲲

4.分解 Decompose

找游戏

浏览游戏排行

根据关键字搜索

浏览热门游戏

Page 21: 移动产品设计流程 @吴达鲲

查看关注游戏

普通用户

17173 Game Circle APP V1.0游戏圈建立者

找游戏

查看我的内容

查看我的游戏

浏览游戏排行

根据关键字搜索

浏览热门游戏

查看游戏圈动

查看游戏资讯

查看游戏信息

查看评测、攻略

添加评测、攻略、评

Ugc用户

Use case diagram

Page 22: 移动产品设计流程 @吴达鲲

广度 Breadth

Page 23: 移动产品设计流程 @吴达鲲

聚焦 Focus

Page 24: 移动产品设计流程 @吴达鲲

状态变化 Statefulness

查看关注游戏

普通用户

找游戏

查看我的内容Ugc用户

Page 25: 移动产品设计流程 @吴达鲲

深度 Depth

Page 26: 移动产品设计流程 @吴达鲲

关联性 Interconnectedness

Page 27: 移动产品设计流程 @吴达鲲

1绪论

2如何确定APP结构

3常见APP结构

Page 28: 移动产品设计流程 @吴达鲲

参考文献

[1]Theresa.Neil《移劢应用UI设计模式》,2013

[2]Josh.Clark《触劢人心》,2011

[3] Jens Nagel, Richard Fulcher . “Google I/O 2013 - Structure in Android App Design”

. 2013

[4] Google Plus #ADIA . “Android Design In Action”. 2013

Page 29: 移动产品设计流程 @吴达鲲