Download - 移动产品设计流程 @吴达鲲
![Page 1: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/1.jpg)
移动产品设计流程
用户中心 吴达鲲
—— 如何设计APP结构
![Page 2: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/2.jpg)
1绪论
2如何确定APP结构
3常见APP结构
目录
![Page 3: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/3.jpg)
1绪论
2如何确定APP结构
3常见APP结构
![Page 4: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/4.jpg)
![Page 5: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/5.jpg)
![Page 6: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/6.jpg)
好的APP结构
简单、有效率地完成任务
聚合有关联的内容和功能,同时分隔无关联的
通过一致的导航来处理复杂的APP功能和内容
![Page 7: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/7.jpg)
1绪论
2如何确定APP结构
3常见APP结构
![Page 8: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/8.jpg)
如何确定APP结构
What does my app do?
![Page 9: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/9.jpg)
一句话概括大意
功能列表
??? Goldilocks
![Page 10: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/10.jpg)
如何确定APP结构
What does my app do?
Use Case
![Page 11: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/11.jpg)
用例 use cases
用户和系统之间
完成某项任务目标
交互序列
![Page 12: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/12.jpg)
找游戏
主要角色:游戏玩家
系统:17173 APP
前置条件:打开APP,并成功加载对应内容
主要场景:
1.用户打开APP
2.根据某条件进行搜索,或直接查看热门游戏
3.APP展示对应条件的游戏列表
4.用户选择游戏条目
5.APP显示对应游戏条目的内容(Detail)
![Page 13: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/13.jpg)
用例图 Use case diagram
Use Case
角色 actor
关系 Relationship
![Page 14: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/14.jpg)
17173 Game Circle APP V1.0
![Page 15: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/15.jpg)
查看关注游戏
普通用户
17173 Game Circle APP V1.0游戏圈建立者
找游戏
查看我的内容
查看我的游戏
圈
浏览游戏排行
榜
根据关键字搜索
浏览热门游戏
查看游戏圈动
态
查看游戏资讯
查看游戏信息
查看评测、攻略
添加评测、攻
略、评论
Ugc用户
Use case diagram
![Page 16: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/16.jpg)
如何确定APP结构
主要功能 What does my app
do?
用例 Use Case
步骤 Steps
![Page 17: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/17.jpg)
1.清单 Inventory
普通用户
游戏圈建立者
Ugc用户
查看关注游戏
找游戏
查看我的内容
查看游戏圈动
态
添加评测、攻略、评
论
![Page 18: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/18.jpg)
2.优先级 Prioritize
High Med Low
找游戏
查看游戏圈动
态
查看关注游戏
添加评测、攻
略、评论
查看我的内容
![Page 19: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/19.jpg)
3.次序 Sequence
查看关注游戏
找游戏
查看游戏圈动
态
普通用户
![Page 20: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/20.jpg)
4.分解 Decompose
找游戏
浏览游戏排行
榜
根据关键字搜索
浏览热门游戏
![Page 21: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/21.jpg)
查看关注游戏
普通用户
17173 Game Circle APP V1.0游戏圈建立者
找游戏
查看我的内容
查看我的游戏
圈
浏览游戏排行
榜
根据关键字搜索
浏览热门游戏
查看游戏圈动
态
查看游戏资讯
查看游戏信息
查看评测、攻略
添加评测、攻略、评
论
Ugc用户
Use case diagram
![Page 22: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/22.jpg)
广度 Breadth
![Page 23: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/23.jpg)
聚焦 Focus
![Page 24: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/24.jpg)
状态变化 Statefulness
查看关注游戏
普通用户
找游戏
查看我的内容Ugc用户
![Page 25: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/25.jpg)
深度 Depth
![Page 26: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/26.jpg)
关联性 Interconnectedness
![Page 27: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/27.jpg)
1绪论
2如何确定APP结构
3常见APP结构
![Page 28: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/28.jpg)
参考文献
[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: 移动产品设计流程 @吴达鲲](https://reader035.vdocuments.pub/reader035/viewer/2022081720/559abd471a28abcf4a8b472d/html5/thumbnails/29.jpg)