第1章 智能设备UI设计概述 1
1.1 什么是智能设备 1
1.2 认识APP UI设计 1
1.3 APP UI与Web UI的区别 2
1.4 APP产品研发流程 5
1.4.1 前期探索 5
1.4.2 设计规范与项目管理 6
1.4.3 交互设计 8
1.4.4 用户体验 8
1.4.5 视觉设计 9
1.4.6 开发实现 10
1.4.7 产品测试 11
1.4.8 运营推广 11
1.5 APP UI设计师的就业前景 11
第2章 智能手机UI设计基础知识 13
2.1 常用设计单位 13
2.2 色彩基础知识 14
2.2.1 色彩的应用 14
2.2.2 色彩的分类 14
2.2.3 色彩搭配方法 15
2.3 APP UI设计的要点 18
第3章 iOS系统界面设计 21
3.1 iOS系统的发展历史 21
3.2 了解全新的iOS11系统 23
3.2.1 iOS 11系统的功能特点 23
3.2.2 iOS 11与iOS 10系统的差别 26
3.3 iPhone界面尺寸 29
3.3.1 不同设备的界面尺寸 29
3.3.2 单位换算 30
3.4 UI设计元素及规范 30
3.4.1 栏(组件) 31
3.4.2 视图 34
3.4.3 常用控件 35
3.5 iOS11系统的优缺点分析 44
3.5.1 “十字交互”模式 44
3.5.2 更大的标题 45
3.5.3 弱化UI,内容至上 46
第4章 Android系统界面设计 47
4.1 Android系统的发展历史 47
4.2 了解全新的Android O系统 52
4.2.1 Android O系统的设计风格 52
4.2.2 Android O系统的功能升级 53
4.3 Android系统界面尺寸 55
4.4 UI设计元素及规范 56
4.4.1 栏 56
4.4.2 控件 58
4.5 Android系统的优缺点分析 64
4.5.1 系统优点分析 64
4.5.2 系统缺点分析 65
第5章 Windows Phone系统界面设计 66
5.1 Windows Phone系统的发展历史 66
5.2 Windows Phone系统的特色 70
5.2.1 设计风格特色 70
5.2.2 用户体验特色 70
5.3 Windows Phone设备及界面尺寸 71
5.4 UI设计元素及规范 72
5.4.1 栏 72
5.4.2 控件 73
5.5 Windows Phone的优缺点分析 79
5.5.1 系统优点分析 79
5.5.2 系统缺点分析 79
第6章 常见的APP界面设计 81
6.1 APP分类及风格介绍 81
6.1.1 教育类 81
6.1.2 购物类 82
6.1.3 社交类 83
6.1.4 游戏类 83
6.1.5 娱乐类 85
6.2 常用页面 85
6.2.1 启动页 85
6.2.2 引导页 86
6.2.3 首页 88
6.2.4 列表页 89
6.2.5 内容页 90
6.2.6 搜索页 91
6.2.7 登录和注册页 92
6.2.8 设置页 93
6.2.9 空状态页 93
6.3 页面的构图方式 94
6.3.1 常见构图方式 94
6.3.2 导航页面的构图方式 96
第7章 APP界面设计原则 107
7.1 美观性 107
7.2 一致性 109
7.3 流畅性 110
7.4 情感化 110
7.5 动态化 113
7.6 反馈性 114
7.7 隐喻性 115
7.8 用户控制 117
第8章 其他智能设备的UI设计 118
8.1 可穿戴智能设备 118
8.1.1 智能眼镜 118
8.1.2 虚拟现实头戴式显示设备 120
8.1.3 智能手表 124
8.2 家用智能设备 129
8.2.1 智能电视 129
8.2.2 可视电话 132
8.2.3 智能空调 132
8.3 智能自助设备 133
8.3.1 智能自助点餐设备 133
8.3.2 智能自助取款设备 135
第9章 APP应用的图标设计 137
9.1 了解图标 137
9.1.1 图标类型 137
9.1.2 图标的作用 138
9.1.3 图标常用格式 139
9.2 扁平化图标 140
9.2.1 扁平化图标的设计风格 140
9.2.2 基本图形的加减法 142
9.3 拟物化图标 147
9.3.1 拟物化图标的特点 147
9.3.2 拟物化图标的设计风格 147
9.4 卡通手绘风格图标 149
9.4.1 MBE风格图标 149
9.4.2 涂鸦风格图标 149
9.5 启动图标的尺寸规范 150
9.5.1 iOS系统启动图标常用尺寸 150
9.5.2 Android系统启动图标常用尺寸 150
9.5.3 启动图标提交尺寸 151
9.6 APP图标设计原则 151
9.6.1 辨识性 151
9.6.2 实用性 153
9.6.3 差异性 153
9.6.4 创意性 154
9.6.5 一致性 154
9.6.6 兼容性 156
9.7 启动图标的设计流程 157
9.8 启动图标设计案例 160
第10章 交互设计 165
10.1 交互设计的概念 165
10.2 交互设计的要素 165
10.3 交互设计的基本流程 166
10.3.1 定性用户分析 166
10.3.2 确定用户角色 166
10.3.3 创建故事脚本 167
10.3.4 绘制线框图 168
10.3.5 制作原型图 169
10.3.6 产品测评 172
10.4 原型软件的使用 173
10.4.1 Axure RP软件 173
10.4.2 Mockplus软件 175
10.5 移动交互动效设计 177
10.5.1 交互动效的设计原则 177
10.5.2 常用的交互动效动作 179
10.5.3 After Effects的动效制作 181
10.6 微交互 183
10.6.1 微交互的要素 183
10.6.2 常见的微交互设计形式 185
第11章 移动用户体验 188
11.1 什么是用户体验 188
11.2 用户体验五要素 188
11.2.1 战略层 189
11.2.2 范围层 189
11.2.3 结构层 190
11.2.4 框架层 191
11.2.5 表现层 193
11.3 感官体验 193
11.3.1 视觉体验 193
11.3.2 触觉体验 198
11.3.3 听觉体验 202
11.4 等待体验 203
11.4.1 使用启动页 204
11.4.2 充实等待时间 205
11.4.3 营造舒适的等待体验 206
11.5 情感体验 207
11.5.1 情感设计的核心价值 207
11.5.2 情感设计的表现形式 208
11.5.3 情感设计应恰到好处 210
11.6 用户体验的特性 213
11.6.1 易用性 213
11.6.2 反馈性 214
11.6.3 定制化 215
11.6.4 简约性 216
11.6.5 社交性 217
11.6.6 离线性 217
11.6.7 趣味性 218
11.6.8 独特性 219
第12章 设计适配 220
12.1 系统适配 220
12.1.1 设计基准 220
12.1.2 设计适配步骤 221
12.1.3 屏幕适配 222
12.1.4 适配规则与方式 223
12.1.5 前端开发完成适配方案 226
12.2 标注设计图 226
12.2.1 标注基准 226
12.2.2 标注注意事项 227
12.2.3 标注工具的使用 228
12.3 切图 230
12.3.1 页面内容切图 231
12.3.2 切图工具的使用 235
12.3.3 命名规则 236
第13章 UI设计师的自我修养 238
13.1 UI设计师应具备的基本素养 238
13.2 UI设计师应具备的职业技能 240
13.2.1 设计能力 240
13.2.2 创新能力 241
13.2.3 逻辑思维能力 243
13.2.4 软件操作技能 244
13.2.5 开发知识 244
13.2.6 演示技巧 245
13.3 UI设计师的机遇与挑战 246