第1章 移动端App设计——写在设计之前 1
本章简介 2
理论讲解 2
1.1实际企业中App设计的基本流程 2
1.2实际项目中UI设计师前期需要确定的内容 4
1.3移动UI三大操作系统 6
1.3.1 Android系统界面 7
1.3.2 iO S系统界面 7
1.3.3 Windows Phone系统界面 8
1.4与尺寸相关的术语概念和标准 9
1.4.1屏幕尺寸 9
1.4.2分辨率 10
1.4.3实用软件 10
第2章 蘑菇街项目——电商类Android手机App设计（一） 13
本章简介 14
2.1蘑菇街项目——电商类Android手机App计需求概述 14
2.1.1项目名称 14
2.1.2项目定位 14
2.1.3蘑菇街企业背景 15
2.1.4蘑菇街App项目需求 16
2.1.5蘑菇街App风格要求 16
2.2 Android系统手机设计规范 18
2.2.1 Android系统界面尺寸和分辨率 19
2.2.2 Android系统字体与字号 25
2.2.3 Android系统图标设计 26
2.3实战案例——蘑菇街Android系统启动图标设计 34
2.4点9切图的制作方法 35
2.4.1点9切图的概念 36
2.4.2点9切图的制作方法 36
2.5对按钮进行点9切图 37
本章总结 38
本章作业 39
第3章 蘑菇街项目——电商类Androld 手机App设计（二） 41
本章简介 42
3.1电商类App设计理论 42
3.1.1电商类App的常见分类 42
3.1.2电商类App的特点 43
3.1.3电商类App的常见视觉风格 44
3.1.4电商类App的常见功能 46
3.1.5电商类App的目标用户分析 49
3.2蘑菇街项目——电商类Android手机App设计分析 50
3.2.1电商类App的制作流程 50
3.2.2蘑菇街项目需求及主要目标用户分析 51
3.2.3蘑菇街项目设计规划 52
3.2.4实战案例——蘑菇街手机App关注页界面设计 54
3.2.5实战案例——蘑菇街手机APP购买（买买买）页界面设计 56
3.3启动页与引导页的技巧及方法 57
3.3.1启动页、引导页概述 57
3.3.2启动页、引导页的设计原则 63
3.3.3实战案例——蘑菇街App引导页设计 66
本章总结 70
本章作业 71
第4章 课工场项目——教育类iOS手机App设计（一） 73
本章简介 74
4.1课工场项目——教育类iOS手机App设计需求概述 74
4.1.1项目名称 74
4.1.2项目定位 74
4.1.3课工场企业背景 74
4.1.4课工场App项目需求 75
4.1.5课工场App风格要求 76
4.2 iOS系统手机界面设计规范 76
4.2.1 iOS系统界面尺寸和分辨率 77
4.2.2 iOS系统字体与字号 81
4.3 iOS系统图标设计尺寸及规范 82
4.3.1 iOS系统图标设计尺寸 82
4.3.2 iOS系统图标设计规范 83
4.3.3实战案例——为课工场设计iOS系统启动图标 84
4.4标注规范及设计技巧 85
4.4.1界面标注元素 85
4.4.2界面标注技巧 85
4.4.3实战案例——对课工场界面进行标注 87
本章总结 90
本章作业 91
第5章 课工场项目——教育类iOS手机App设计（二） 93
本章简介 94
5.1教育类App设计理论 94
5.1.1教育类App的常见分类 94
5.1.2教育类App的优势 95
5.1.3教育类App的常见视觉风格 95
5.1.4教育类App的常见功能 97
5.1.5教育类App的目标用户分析 99
5.2课工场手机App设计分析 100
5.2.1课工场项目需求分析 100
5.2.2课工场主要目标用户分析 100
5.2.3课工场项目设计规划 100
5.2.4课工场手机APP首页设计 102
5.3侧边栏导航与Tab导航 107
5.3.1侧边栏导航与Tab导航概述 108
5.3.2侧边栏导航与Tab导航的差异 110
5.3.3实战案例——课工场手机App侧边栏界面设计 111
5.4整套图标的设计原则和注意事项 113
5.4.1整套图标的设计原则 114
5.4.2整套图标的注意事项 115
5.4.3实战案例——教育类App界面中需要调整的整套图标 116
本章总结 118
本章作业 119
第6章 1号药店项目——医疗类手机App设计 121
本章简介 122
6.1 1号药店项目——医疗类手机App设计需求概述 122
6.1.1项目名称 122
6.1.2项目定位 122
6.1.3 1号药店企业背景 123
6.1.4 1号药店App项目需求 123
6.1.5 1号药店App风格要求 123
6.2医疗类App设计理论 123
6.2.1医疗类App的常见分类 123
6.2.2医疗类App的特点 124
6.2.3医疗类App的常见功能 125
6.2.4医疗类App的目标用户分析 126
6.2.5医疗类App的常见视觉风格 126
6.3拟物化设计 127
6.3.1拟物化设计的概念 128
6.3.2拟物化风格界面的优缺点 130
6.3.3拟物化设计的技巧 131
6.3.4拟物化设计的制作步骤 132
6.3.5实战案例——1号药店启动图标设计 132
6.3.6实战案例——1号药店书架界面设计 134
6.4 iOS系统与Android系统原生App图标与界面的比较 137
6.4.1 iOS系统与Android系统的差异 137
6.4.2 iOS系统与Android系统原生图标的比较 138
6.4.3 iOS系统与Android系统原生App界面的比较 138
6.4.4实战案例——双系统下的1号药店界面原型图设计 142
6.5 1号药店项目——医疗类手机App设计分析 144
6.5.1 1号药店项目需求及主要目标用户分析 144
6.5.2 1号药店项目设计规划 144
6.5.3实战案例——1号药店手机App首页界面设计 145
6.6移动端App登录、注册界面设计 147
6.6.1移动端登录、注册界面的设计原则和注意事项 147
6.6.2移动端登录、注册界面的设计方法 148
6.6.3实战案例——1号药店登录原型图界面设计 152
本章总结 155
本章作业 156
第7章 刀塔传奇项目——游戏类手机App设计 157
本章简介 158
7.1刀塔传奇项目——游戏类手机App设计需求概述 158
7.1.1项目名称 158
7.1.2项目定位 158
7.1.3刀塔传奇背景 159
7.1.4刀塔传奇App项目需求 159
7.1.5刀塔传奇App风格要求 159
7.2游戏类App设计理论 159
7.2.1游戏类App的常见分类 160
7.2.2游戏类App的特点 163
7.2.3游戏类App的常见视觉风格 163
7.2.4游戏类App的目标用户分析和注意事项 165
7.2.5游戏类App的制作流程 166
7.2.6游戏类App的设计原则 168
7.2.7充分考虑用户体验与交互 174
7.3游戏类App界面的设计技巧 179
7.4刀塔传奇项目——游戏类手机App设计 182
7.4.1刀塔传奇项目需求和主要目标用户分析 182
7.4.2实战案例——刀塔传奇手机App场景界面设计 182
7.4.3实战案例——刀塔传奇手机App英雄详情页设计 190
7.4.4实战案例——刀塔传奇手机App全部英雄列表页设计 192
本章总结 195
本章作业 196
第8章 南丰鼎轩项目——餐饮类Pad端App设计 197
本章简介 198
8.1南丰鼎轩项目——餐饮类Pad端App设计需求概述 198
8.1.1项目名称 198
8.1.2项目定位 198
8.2餐饮类App设计理论 199
8.2.1餐饮类App行业介绍 199
8.2.2餐饮类App的分类 199
8.2.3餐饮类App的常见功能 199
8.2.4餐饮类App的制作流程 200
8.3 Pad端App设计的基础理论 201
8.3.1相关概念理论 201
8.3.2 Pad端App界面的设计规范 202
8.3.3 Pad端App的设计方法和用户体验 203
8.4南丰鼎轩项目——餐饮类手机App设计 205
8.4.1南丰鼎轩企业及项目分析 205
8.4.2实战案例——南丰鼎轩点餐App开屏首页设计 207
8.4.3实战案例——南丰鼎轩点餐App点餐界面设计 210
本章总结 212
本章作业 213
第9章 移动端App设计——写在设计之后 215
本章简介 216
9.1规范的重要性 216
9.1.1重要的规范 216
9.1.2变化着的设计规范 218
9.2设计的流行趋势 220
9.2.1设计风格的发展与延展 220
9.2.2如何紧跟时代潮流掌握最新的设计流行趋势 222
9.2.3不盲目屈从流行趋势，视觉风格要从项目出发 223
9.3从产品的角度看设计 223
本章总结 227