第1章 初识UI设计 1
1.1 UI设计的基本概念 2
1.2 UI设计的常用软件 2
1.3 UI设计的发展趋势 3
1.4 UI设计的学习方法 3
1.5 UI设计的项目流程 5
1.6 UI设计规范与规则 5
第2章 UI中的图标设计 14
2.1 线性图标 15
2.1.1 基本概念 15
2.1.2 使用场景 15
2.1.3 设计要点 15
2.1.4 课堂案例-制作旅游类App线性图标 19
2.2 面性图标 26
2.2.1 基本概念 26
2.2.2 使用场景 27
2.2.3 设计要点 27
2.2.4 课堂案例-制作旅游类App面性图标 29
2.3 线面图标 34
2.3.1 基本概念 34
2.3.2 使用场景 34
2.3.3 设计要点 35
2.3.4 课堂案例-制作旅游类App线面图标 35
2.4 课堂练习-制作电商类App线性图标 41
2.5 课后习题-制作餐饮类App面性图标 42
第3章 UI中的控件设计 44
3.1 控件的初始 45
3.1.1 控件的概念 45
3.1.2 控件的获取 45
3.2 按钮控件的设计 46
3.2.1 按钮控件的概念 46
3.2.1 按钮控件的类型 46
3.2.3 按钮控件的规则 49
3.2.4 课堂案例-制作旅游类App按钮控件 52
3.3 选择控件的设计 54
3.3.1 选择控件的概念 54
3.3.1 选择控件的类型 54
3.3.3 选择控件的规则 55
3.3.4 课堂案例-制作旅游类App选择控件 56
3.4 加减控件的设计 59
3.4.1 加减控件的概念 59
3.4.2 加减控件的类型 60
3.4.3 加减控件的规则 60
3.4.4 课堂案例-制作旅游类App加减控件 61
3.5 分段控件的设计 64
3.5.1 分段控件的概念 64
3.5.2 分段控件的类型 65
3.5.3 分段控件的规则 66
3.5.4 课堂案例-制作旅游类App分段控件 67
3.6 页面控件的设计 70
3.6.1 页面控件的概念 71
3.6.2 页面控件的类型 71
3.6.3 页面控件的规则 71
3.6.4 课堂案例-制作旅游类App页面控件 72
3.7 反馈控件的设计 74
3.7.1 反馈控件的概念 74
3.7.2 反馈控件的类型 74
3.7.3 反馈控件的规则 76
3.7.4 课堂案例-制作旅游类App反馈控件 79
3.8 文本框控件的设计 80
3.8.1 文本框控件的概念 81
3.8.2 文本框控件的类型 81
3.8.3 文本框控件的规则 81
3.8.4 课堂案例-制作旅游类App文本框控件 82
3.9 课堂练习-制作电商类App文本框控件 85
3.10 课后习题-制作餐饮类App按钮控件 86
第4章 UI中的组件设计 87
4.1 组件的初识 88
4.1.1 组件的概念 88
4.1.2 组件的获取 88
4.2 导航栏的设计 89
4.2.1 导航栏的概念 89
4.2.2 导航栏的类型 90
4.2.3 导航栏的规则 92
4.2.4 课堂案例-制作旅游类App导航栏 95
4.3 标签栏的设计 101
4.3.1 标签栏的概念 101
4.3.2 标签栏的类型 101
4.3.3 标签栏的规则 104
4.3.4 课堂案例-制作旅游类App标签栏 109
4.4 金刚区的设计 120
4.4.1 金刚区的概念 120
4.4.2 金刚区的类型 120
4.4.3 金刚区的规则 121
4.4.4 课堂案例-制作旅游类App金刚区 126
4.5 瓷片区的设计 135
4.5.1 瓷片区的概念 135
4.5.2 瓷片区的类型 136
4.5.3 瓷片区的规则 137
4.5.4 课堂案例-制作旅游类App瓷片区 140
4.7 课堂练习-制作电商类App标签栏 150
4.8 课后习题-制作餐饮类App标签栏 150
第5章 UI中的页面设计 152
5.1 闪屏页 153
5.1.1 闪屏页的概念 153
5.1.2 闪屏页的类型 153
5.1.3 课堂案例-制作旅游类App闪屏页 155
5.2 引导页 158
5.2.1 引导页的概念 158
5.2.2 引导页的类型 158
5.2.3 课堂案例-制作旅游类App引导页 159
5.3 首页 169
5.3.1 首页的概念 169
5.3.2 首页的类型 169
5.3.3 课堂案例-制作旅游类App首页 171
5.4 个人中心页 191
5.4.1 个人中心页的概念 191
5.4.2 课堂案例-制作旅游类App个人中心页 191
5.5 详情页 212
5.5.1 详情页的概念 213
5.5.2 课堂案例-制作旅游类App酒店详情页 213
5.6 注册登录页 237
5.6.1 注册登录页的概念 237
5.6.2 课堂案例-制作旅游类App登录页 238
5.7 课堂练习-制作电商类App页面 246
5.8 课后习题-制作餐饮类App页面 247

第6章 UI设计输出 248
6.1 UI页面标注 249
6.1.1 标注原因 249
6.1.2 标注内容 249
6.1.3 标注规则 251
6.1.4 标注神器 251
6.1.5 课堂案例-标注旅游类App登录页 253
6.2 UI页面切图 258
6.2.1 切图目的 258
6.2.2 切图类型 258
6.2.3 切图规则 261
6.2.4 切图方法 262
6.2.5 大小优化 262
6.2.6 课堂案例-制作旅游类App登录页切图 263
6.3 UI页面命名 266
6.3.1 命名原因 266
6.3.2 命名规则 267
6.3.3 常用名称 267
6.3.4 课堂案例-命名旅游类App登录页切图 268
6.4 课堂练习-标注电商类App注册登录页并切图命名 268
6.5 课后习题-标注餐饮类App登录页并切图命名 269