1 进入App的世界 2
1.1 初识App 2
1.1.1 什么是APP 2
1.1.2 为什么开发App 3
1.1.3 App的开发过程 4
1.2 App的获取途径 8
1.2.1 苹果应用商店 9
1.2.2 谷歌应用商店 10
1.2.3 小米应用商店和魅族应用中心 10
1.3 运行App的三大系统 12
1.3.1 Android系统 13
1.3.2 iOS系统 14
1.3.3 Windows 10 Mobile系统 16
1.4 App的类型 16
1.4.1 影音类App 17
1.4.2 电商类App 17
1.4.3 社交类App 18
1.4.4 音乐类App 18
2 App设计基础 20
2.1 App的界面构成 20
2.1.1 状态栏 20
2.1.2 导航栏与菜单栏 21
2.1.3 内容区域 22
2.1.4 虚拟键盘 22
2.1.5 简化操作 22
2.2 App界面设计规范 23
2.2.1 手机屏幕尺寸 23
2.2.2 手机屏幕分辨率 24
2.2.3 手机像素密度 24
2.2.4 常用的屏幕分辨率 25
2.3 App图标设计规范 26
2.3.1 图标尺寸 27
2.3.2 图标格式 27
2.4 快速颜色搭配 28
2.4.1 取色配色法 29
2.4.2 同色系配色法 29
2.4.3 邻近色配色法 30
2.4.4 类似色配色法 30
2.4.5 互补色配色法 30
2.5 App设计与用户体验 31
2.5.1 App设计的要点 31
2.5.2 用户体验 35
2.6 常用的设计软件 37
2.6.1 Photoshop CS6 38
2.6.2 Illustrator CS6 38
3 使用Photoshop创作App 40
3.1 绘制各种图形的工具 40
3.1.1 正方形和长方形 40
案例:矩形工具制作图标 41
3.1.2 圆和椭圆 44
案例:椭圆工具制作图标 45
3.1.3 圆角矩形 48
案例:圆角矩形工具制作图标 49
3.1.4 自定义形状 52
案例:自定义形状工具制作图标 52
3.2 App常见的组件制作 55
3.2.1 按钮 56
案例:制作按钮 56
3.2.2 滑动条 59
案例:制作滑动条 59
3.2.3 对话框 64
案例:制作对话框 64
3.2.4 选项框 67
案例:制作选项框 67
3.3 图形的效果处理 70
3.3.1 镜面效果 71
案例:制作镜面效果 71
3.3.2 倒影效果 73
案例:制作倒影效果 73
3.3.3 画中画效果 74
案例:制作画中画效果 74
3.3.4 弥散阴影效果 77
案例:制作弥散阴影效果 77
3.3.5 长阴影效果 80
案例:制作长阴影效果 80
3.3.6 缺角阴影效果 83
案例:制作缺角阴影效果 84
4 不同风格App图标设计 88
4.1 扁平化风格图标 88
4.1.1 时钟图标 90
案例:制作时钟图标 90
4.1.2 火箭图标 94
案例:制作火箭图标 94
4.2 拟物化风格图标 100
4.2.1 水晶质感按钮 101
案例:制作水晶质感按钮 101
4.2.2 调节按钮图标 106
案例:制作调节按钮图标 106
4.3 卡通风格图标 111
4.3.1 描边卡通一 111
案例:制作描边卡通一 111
4.3.2 描边卡通二 116
案例:制作描边卡通二 116
5 不同风格App界面设计 122
5.1 浅谈App界面设计 122
5.2 扁平化界面风格 123
案例:安卓手机扁平化风格锁屏界面 123
案例:安卓手机扁平化风格主题界面 129
案例:iOS手机扁平化风格聊天界面 136
案例:iOS手机扁平化风格对话窗口界面 140
案例:Windows手机扁平化风格主界面 143
案例:Windows手机扁平化风格拨号界面 146
5.3 拟物化界面风格 148
案例:木纹风格界面 149
案例:金属风格界面 153
5.4 真实照片界面风格 160
案例:照片制作社交App界面 160
案例:照片制作App登录界面 165
5.5 根据主题制作的App 169
案例:美食主题App制作 170
案例:医疗主题App界面 176
5.6 常见工具界面 182
案例:天气界面 182
案例:手电筒界面 187
6 影音App 194
6.1 登录界面 194
案例:制作登录界面 196
6.2 主界面 206
案例:制作主界面 206
6.3 热门界面 219
案例:制作热门界面 219
6.4 筛选界面 226
案例:制作筛选界面 226
7 电商App 236
7.1 主界面 236
案例:制作主界面 238
7.2 商店界面 246
案例:制作商店界面 246
7.3 商品界面 252
案例:制作商品界面 252
7.4 购物车界面 261
案例:制作购物车界面 261
8 社交App 270
8.1 个人界面 270
案例:制作个人界面 271
8.2 主界面 281
案例:制作主界面 281
附录 289
A 网站资源共享 289
B 图标资源共享 290
C 图片资源共享 291
D App设计禁忌 291