数字媒体交互设计（中级）—— App产品交互设计方法与案例

第1章 App产品交互设计入门 1
1.1 认识App产品 2
1.1.1 什么是App 2
1.1.2 认识手机操作系统 3
1.2 App产品用户体验的5个层面 3
1.2.1 战略层 4
1.2.2 范围层 4
1.2.3 结构层 5
1.2.4 框架层 5
1.2.5 表现层 5
1.3 App产品设计原则 6
1.3.1 主体-背景原则 6
1.3.2 接近性原则 7
1.3.3 相似性原则 8
1.3.4 连续性原则 9
1.3.5 封闭性原则 11
1.3.6 对称性原则 12
1.3.7 共同命运原则 14
1.4 App产品设计流程 15
1.5 App产品设计工具 16
1.5.1 产品分析工具 16
1.5.2 交互设计工具 18
1.5.3 视觉设计工具 19
1.6 同步强化模拟题 21
作业：分析App产品的用户体验设计思路 21
第2章 团队协作管理App项目 22
2.1 团队协作和项目管理 23
2.1.1 团队协作的要素 23
2.1.2 常见的团队协作方法 24
2.2 项目管理工具——Trello 24
2.2.1 认识Trello 24
2.2.2 Trello的主要功能 26
2.3 制作App项目管理表 29
2.3.1 建立项目和任务 30
2.3.2 建立子任务 32
2.3.3 跟进项目 33
2.4 同步强化模拟题 35
作业：制作App项目进度表 36

第3章 梳理App产品交互设计创意 37
3.1 认识思维导图 38
3.1.1 思维导图是什么 38
3.1.2 思维导图构成的要素 38
3.1.3 绘制思维导图的步骤 39
3.2 使用Mindjet MindManager绘制思维导图 40
3.2.1 认识Mindjet MindManager 40
3.2.2 使用Mindjet MindManager绘制思维导图的方法及技巧 40
3.3 思维导图在App产品设计中的应用 45
3.3.1 使用思维导图分析在线教育类App产品结构 46
3.3.2 使用思维导图分析阅读类App产品结构 51
3.4 同步强化模拟题 59
作业：使用思维导图分析两款同类型的App产品结构 60

第4章 制作流程图 61
4.1 认识流程图 62
4.1.1 什么是流程图 62
4.1.2 流程图的构成 63
4.1.3 绘制流程图的步骤 65
4.2 使用OmniGraffle绘制流程图 67
4.2.1 使用OmniGraffle绘制流程图的方法 67
4.2.2 绘制购买会员流程图 71
4.3 使用流程图分析App产品 73
4.3.1 制作流程图 73
4.3.2 分析流程图 75
4.4 同步强化模拟题 76
作业：制作发红包流程图 77

第5章 App产品交互原型设计 78
5.1 认识原型设计 79
5.1.1 什么是原型图和线框图 79
5.1.2 原型图设计的目的 80
5.2 绘制原型图的基本流程 80
5.2.1 收集用户信息 80
5.2.2 绘制草图 82
5.2.3 制作原型图 82
5.2.4 制作交互稿 83
5.2.5 可用性测试 84
5.3 认识墨刀 86
5.3.1 墨刀的基本使用方法 86
5.3.2 使用墨刀绘制App产品原型图 92
5.4 同步强化模拟题 98
作业：选择一款App产品，使用墨刀软件绘制它的原型图和交互稿 99

第6章 移动端App产品设计规范 100
6.1 移动端App产品设计中常用的单位 101
6.2 基于iOS系统的App界面设计规范 102
6.2.1 iOS界面尺寸 102
6.2.2 iOS图标尺寸 104
6.2.3 iOS字体 104
6.3 基于Android系统的App界面设计规范 105
6.3.1 Android界面尺寸 105
6.3.2 Android图标尺寸 106
6.3.3 Android字体 106
6.4 App产品通用设计规范 107
6.4.1 全局边距 107
6.4.2 卡片间距 108
6.5 同步强化模拟题 109
作业：设计一款音乐类App产品的界面 110

第7章 组件设计 111
7.1 认识移动端UI设计组件 112
7.1.1 UI设计组件 112
7.1.2 组件的优势 113
7.1.3 基于组件的设计方法 113
7.1.4 引入组件化的时间 117
7.1.5 使用组件化的方法 118
7.2 导航 118
7.2.1 底部标签式导航 118
7.2.2 分段控制式导航 119
7.2.3 列表式导航 120
7.2.4 抽屉式导航 120
7.2.5 宫格式导航 121
7.2.6 卡片式导航 122
7.2.7 下拉菜单式导航 123
7.3 引导 123
7.3.1 嵌入式引导 124
7.3.2 幻灯片式引导 124
7.3.3 浮层式引导 125
7.4 加载 126
7.4.1 全屏加载 126
7.4.2 上拉 下拉加载 126
7.4.3 分步加载 127
7.5 网络异常 127
7.5.1 整页提示 127
7.5.2 占位符 128
7.5.3 警示框提示 129
7.5.4 界面内嵌提示 129
7.5.5 Toast提示 129
7.5.6 Tips提示 130
7.6 空数据类型 131
7.6.1 初始状态 131
7.6.2 清空状态 131
7.6.3 出错状态 132
7.7 提示 133
7.7.1 数字提示 133
7.7.2 红点提示 134
7.7.3 弹框提示 134
7.7.4 系统推送提示 135
7.8 操作 136
7.8.1 底部操作列表 136
7.8.2 底部浮层视图 136
7.8.3 底部工具栏 136
7.8.4 编辑菜单 137
7.8.5 按钮 138
7.8.6 选择器 138
7.8.7 下拉菜单 139
7.8.8 文本框 140
7.9 单元控件 140
7.9.1 开关控件 140
7.9.2 搜索框 140
7.9.3 图标 141
7.9.4 滑块 142
7.9.5 进度 142
7.9.6 选框 143
7.9.7 页面控件 144
7.10 App组件库应用案例 144
7.11 同步强化模拟题 152
作业：制作iPhone界面组件 153

第8章 微交互设计 154
8.1 微交互的基础知识 155
8.1.1 什么是微交互 155
8.1.2 微交互的作用 158
8.2 Adobe XD的使用方法 159
8.2.1 Adobe XD的工作界面 159
8.2.2 Adobe XD的基本操作 162
8.2.3 制作高保真原型图 174
8.3 创建可交互式原型 177
8.3.1 制作页面跳转交互效果 177
8.3.2 制作轮播图交互效果 179
8.4 同步强化模拟题 182
作业：制作好好住App的界面原型图和微交互效果 183

第9章 运动类App产品设计全流程 184
9.1 案例说明 185
9.2 设计准备 185
9.2.1 用户研究 186
9.2.2 竞品分析 188
9.2.3 绘制思维导图 190
9.2.4 产品定位 192
9.3 原型设计 192
9.3.1 线框图 192
9.3.2 原型图 193
9.4 界面设计 196
作业：阅读类App产品设计 198

第10章 App产品运营：喜马拉雅
如何通过运营手段成为行业先锋 199
10.1 初创期 200
10.2 发展期 200
10.3 成熟期 202
10.4 同步强化模拟题 205
作业：为生鲜电商类App产品做运营活动 206

附录 同步强化模拟题答案速查表 207