前言
第1章 移动APP设计基础 1
1.1 移动UI设计概述 2
1.1.1 什么是UI设计 2
1.1.2 移动UI设计的特点 3
1.1.3 移动UI与网站UI的区别 5
1.2 了解UI设计师 7
1.2.1 研究界面—图形设计师(Graphic UI Designer) 7
1.2.2 研究人与界面的关系—交互设计师(Interaction Designer) 7
1.2.3 研究人—用户测试/研究工程师(User Experience Engineer) 7
1.3 了解移动APP 7
1.3.1 什么是APP 8
1.3.2 APP视觉设计的奥秘 8
1.3.3 APP视觉效果的个性化 10
1.4 移动APP设计流程及视觉设计 11
1.4.1 移动APP设计流程 11
1.4.2 视觉设计 12
1.5 移动APP设计中的色彩搭配 14
1.5.1 认识色彩 14
1.5.2 色彩在APP界面设计中的作用 15
1.5.3 APP界面配色原则 17
1.5.4 使用Kuler配色 19
1.6 常见移动设备尺寸标准 19
1.6.1 屏幕尺寸 19
1.6.2 屏幕分辨率 20
1.6.3 屏幕密度 21
1.7 本章小结 21
第2章 移动APP图标设计 22
2.1 了解APP图标 23
2.1.1 什么是图标 23
2.1.2 图标设计的作用 24
2.1.3 iOS系统图标常用尺寸 26
2.1.4 Android系统图标常用尺寸 28
2.1.5 图标常用格式 28
2.2 拟物化图标 30
2.2.1 什么是拟物化图标 30
2.2.2 拟物化图标的特点 31
实战案例——设计拟物化时钟图标 32
2.3 扁平化图标 40
2.3.1 什么是扁平化图标 40
2.3.2 扁平化图标的特点 40
2.3.3 基础风格扁平化图标 41
实战案例——设计基础风格购物图标 42
2.3.4 阴影风格扁平化图标 47
实战案例——设计阴影风格设置图标 47
2.3.5 长阴影风格扁平化图标 53
实战案例——设计长阴影风格日期图标 54
2.3.6 微渐变风格扁平化图标 62
实战案例——设计微渐变风格天气图标 62
2.4 APP图标设计原则 68
2.4.1 辨识性 68
2.4.2 实用性 68
2.4.3 差异性 69
2.4.4 创意性 69
2.4.5 视觉性 70
2.4.6 协调性 70
实战案例——设计音乐APP启动图标 70
2.5 本章小结 77
第3章 移动APP界面基本元素设计 78
3.1 认识APP界面基本图形 79
3.1.1 直线 79
3.1.2 矩形 79
3.1.3 圆角矩形 80
3.1.4 圆形 80
3.1.5 其他图形 81
实战案例——设计APP登录界面 81
3.2 按钮设计 86
3.2.1 按钮设计注意事项 86
3.2.2 游戏APP界面按钮 87
实战案例——设计游戏APP界面按钮 87
3.3 开关与滚动条设计 91
3.3.1 开关 91
3.3.2 滚动条 92
实战案例——设计APP设置界面 92
3.3.3 进度条 97
实战案例——设计游戏进度条 98
3.4 搜索栏设计 102
3.4.1 了解APP界面中的搜索栏 102
3.4.2 扁平化搜索栏 103
实战案例——设计APP搜索栏 103
3.5 菜单和工具栏设计 106
3.5.1 菜单的重要性 106
实战案例——设计APP菜单界面 107
3.5.2 菜单的设计要点 111
实战案例——设计弹出下拉菜单 111
3.5.3 工具栏的作用 116
实战案例——设计圆形快捷工具栏 116
3.6 本章小结 122
第4章 iOS系统界面设计 123
4.1 iOS系统 124
4.1.1 iOS系统概述 124
4.1.2 iOS系统的发展 124
4.1.3 iOS系统的基本组件 126
4.2 iOS系统UI设计规范 127
4.2.1 iPhone界面尺寸 127
4.2.2 iPad界面尺寸 128
4.2.3 iOS系统APP布局 129
实战案例——设计iOS系统待机界面 129
4.3 了解全新的iOS 9 135
4.3.1 iOS 8与iOS 9的区别 135
4.3.2 iOS 9的特点 138
4.3.3 iOS 9界面设计遵循的原则 140
实战案例——设计iOS 9风格日历界面 141
4.4 iOS系统界面设计规范 146
4.4.1 iOS系统应用特点 146
4.4.2 确保在iPhone和iPad上通用 146
4.4.3 重新考虑基于Web的设计 147
实战案例——设计iOS系统主界面 147
4.5 如何设计出色的iOS系统应用界面 154
4.5.1 内容决定设计 154
4.5.2 保证清晰的视觉效果 155
4.5.3 使用深度层次进行交流 156
实战案例——设计iOS系统天气界面 158
实战案例——设计iOS系统通话界面 162
4.6 iOS系统界面的设计原则 166
4.6.1 美观性 167
4.6.2 一致性 167
4.6.3 操作便捷 168
4.6.4 及时反馈 168
4.6.5 暗喻 169
4.6.6 用户控制 170
实战案例——设计iOS系统音乐播放界面 170
4.7 本章小结 176
第5章 Android系统界面设计 177
5.1 了解Android系统 178
5.1.1 Android系统概述 178
5.1.2 Android系统的发展 178
5.1.3 Android系统的基本组件 179
5.1.4 了解深度定制Android系统 179
5.2 Android系统UI设计规范 181
5.2.1 Android系统的设计尺寸 181
5.2.2 字体的使用标准 182
5.2.3 色彩的应用标准 184
实战案例——设计Android系统锁屏界面 188
5.3 了解全新的Android L系统 192
5.3.1 全新的UI设计风格 192
5.3.2 优化用户体验 193
5.3.3 增强的通知中心 194
5.3.4 增强的多任务功能 194
5.3.5 性能升级 194
5.3.6 增强电池续航能力 194
实战案例——设计Android L风格手机主界面 194
5.4 认识Android系统APP布局 202
5.4.1 Android系统APP布局 202
5.4.2 Android与iOS系统界面设计区别 203
实战案例——设计Android系统待机界面 206
5.5 Android系统界面的特点 211
5.5.1 简约大方 212
5.5.2 操作便捷 212
5.5.3 通用性强 212
5.5.4 布局合理 213
实战案例——设计Android系统主界面 213
5.6 Android系统的设计原则 218
5.6.1 美观大方的界面 218
5.6.2 使用户操作更加简单 219
5.6.3 完善的操作流程 222
实战案例——设计Android系统音乐APP界面 223
5.7 本章小结 233
第6章 Windows Phone系统界面设计 234
6.1 了解Windows Phone系统 235
6.1.1 Windows Phone系统概述 235
6.1.2 Windows Phone系统的发展 236
6.1.3 Windows Phone系统的特点 237
6.1.4 Windows Phone系统的基本组件 239
实战案例——设计Windows Phone系统待机界面 239
6.2 认识Windows Phone手机UI界面 243
6.2.1 Windows Phone 7手机界面 244
6.2.2 Windows Phone 8手机界面 245
6.2.3 Windows Phone 8系统的新功能 246
6.2.4 Windows Phone界面的设计理念 247
实战案例——设计Windows Phone系统主界面 249
6.3 Windows Phone系统UI设计规范 254
6.3.1 Windows Phone系统手机屏幕尺寸 254
6.3.2 主界面 254
6.3.3 状态栏 255
6.3.4 应用程序栏 256
6.3.5 图标 256
6.3.6 屏幕方向 257
6.3.7 字体 257
6.3.8 推送通知 258
实战案例——设计Windows Phone系统音乐播放界面 259
6.4 Tile(磁贴)与Pivot(枢轴视图)设计 264
6.4.1 Tile(磁贴)简介 264
6.4.2 Tile(磁贴)的类型 265
6.4.3 Tile(磁贴)的大小 266
6.4.4 Pivot(枢轴视图)简介 266
实战案例——设计Windows Phone平板界面 267
6.5 独特的Panorama(全景视图) 273
6.5.1 Panorama(全景视图)简介 273
6.5.2 全景视图设计注意事项 274
实战案例——设计全景视图界面 275
实战案例——设计桌球手机游戏界面 283
6.6 本章小结 291
第7章 APP界面设计 292
7.1 常见的APP应用类型 293
7.1.1 实用功能类APP应用 293
7.1.2 社交类APP应用 293
7.1.3 娱乐、游戏类APP应用 294
7.2 APP界面设计视觉效果 294
7.2.1 简洁型的APP界面 294
7.2.2 趣味与个性的APP界面 295
7.2.3 华丽的APP界面 295
实战案例——设计iPad影视APP界面 296
7.3 APP引导界面 303
7.3.1 功能介绍类 304
7.3.2 使用说明类 304
7.3.3 推广类 304
7.3.4 问题解决类 305
实战案例——设计APP引导界面 305
7.4 APP界面设计要求 311
7.4.1 APP界面的特点 311
7.4.2 APP界面的设计流程 312
7.4.3 APP界面的色彩搭配 313
7.4.4 平板电脑界面的特点 314
实战案例——设计音乐APP界面 314
实战案例——设计iPad游戏登录界面 322
7.5 APP界面设计原则 331
7.5.1 实用性 331
7.5.2 统一的色彩与风格 331
7.5.3 合理的配色 332
7.5.4 规范的操作流程 332
7.5.5 视觉元素规范 332
实战案例——设计购物APP界面 333
7.6 APP界面设计注意事项 340
7.6.1 APP界面视觉设计 341
7.6.2 APP界面设计的用户体验 341
实战案例——设计照片分享APP界面 342
7.7 本章小结 351