第1章 界面类型 9
1.1闪屏页 10
1.1.1品牌宣传型 10
1.1.2节假关怀型 11
1.1.3活动推广型 12
1.2引导页 13
1.2.1功能介绍型（基础型） 13
1.2.2情感带入型（中级型） 14
1.2.3搞笑型（高级型） 15
1.3浮层引导页 16
1.4空白页 17
1.4.1 首次进入型 17
1.4.2错误提示型 18
1.5首页 19
1.5.1列表型 19
1.5.2图标型 20
1.5.3卡片型 20
1.5.4综合型 21
1.6个人中心页 22
1.7列表页 24
1.7.1单行列表 24
1.7.2双行列表 25
1.7.3时间轴 25
1.7.4图库列表 26
1.8播放页面 27
1.9详情页 28
1.10可输入页面 29
1.11实战：两步打造炫酷界面 30
1.11.1绘制基础图形 30
1.11.2添加颜色与细节 32
第2章 界面构图 35
2.1九宫格构图 36
案例分析 37
2.2圆心放射构图 38
案例分析 39
2.3三角形构图 41
案例分析 41
2.4 S形构图 43
案例分析 44
2.5 F形构图 47
案例分析 47
2.6实战：用多种构图方式制作运动App 48
2.6.1用放射构图设计运动页面 48
2.6.2用倒三角形构图设计地图页面 53
2.6.3用三角形构图设计个人页面 56
第3章 版面布局 59
3.1界面版率 60
3.1.1单色块填充 61
3.1.2多色块组合 62
3.1.3穿插填充 62
3.1.4关键词图形化 63
3.1.5放大文字 64
3.2抠图法 65
案例分析 65
3.3破界法 66
案例分析 66
3.4局部提取 69
案例分析 69
3.5对齐原则 70
3.5.1界面中常用的对齐方式 70
3.5.2小米的登录页 72
3.5.3苹果的登录页 73
3.6间距使用 74
案例分析 74
3.7视觉层次 77
案例分析 77
3.8实战：设计智能空气净化器界面 80
3.8.1对页面进行整体布局 80
3.8.2设计“较差”页面 82
3.8.3设计“良好”页面 86
第4章 元素之道 87
4.1点线面 88
案例分析 88
4.2极简至上 93
案例分析 93
4.3品牌灵魂 95
案例分析 95
4.4形象灵魂化 96
案例分析 96
4.5运动赋予生命 99
案例分析 99
4.6菜单设定 100
案例分析 100
4.7实战：快速制作晶格化界面 101
4.7.1制作圆形头像 101
4.7.2制作晶格背景 102
4.7.3制作界面细节 104
第5章 “色诱”用户 107
5.1感知色彩 108
5.1.1红色 109
5.1.2橙色 110
5.1.3黄色 110
5.1.4绿色 111
5.1.5蓝色 111
5.1.6粉色 112
5.1.7黑色 112
5.2色不过三 113
案例分析 113
5.3主色、辅助色及点睛色 116
5.3.1主色 116
5.3.2辅助色 117
5.3.3点睛色 118
5.4如何配色 119
5.4.1互补色搭配 119
5.4.2冷暖对比搭配 121
5.5实战：设计一款色彩统一的界面 123
5.5.1设计页面图标 123
5.5.2设计个人中心页 128
5.5.3设计聊天页面 132
第6章 设计原则及规范 135
6.1 iOS的五大设计原则 136
6.1.1凸显内容原则 137
6.1.2统一化原则 139
6.1.3适应化原则 140
6.1.4层级性原则 144
6.1.5易操作性原则 145
6.2 iOS界面尺寸及控件设计规范 147
6.2.1界面尺寸 147
6.2.2控件规范 149
6.3 Android设计原则及规范 154
6.3.1 Android的设计原则 154
6.3.2 Android的控件设计规范 158
6.3.3 Android的设计尺寸及单位 163
6.4常用字体规范 165
6.4.1成也字，败也字 165
6.4.2字不过三 166
案例分析 166
6.4.3字与背景要分明 168
6.4.4字体与气氛要匹配 168
案例分析 168
6.4.5常用字体类型 169
6.4.6界面字体规范 172
6.4.7字体常用颜色 174
6.5建立一套设计规范 175
6.5.1色彩控件规范 176
6.5.2按钮控件规范 177
6.5.3分割线规范 177
6.5.4头像规范 177
6.5.5提示框规范 178
6.5.6文字规范 179
6.5.7 间距规范 180
6.5.8图标规范 181
6.6实战：打造毛笔字风格的登录页 182
6.6.1制作基础字体 182
6.6.2用笔刷设计细节 184
第7章 切图与标注 189
7.1高效切图 190
7.1.1 iPhone屏幕与Android手机屏幕的关系 190
7.1.2 Android的常用单位 191
7.1.3通用切图法 192
7.1.4 Android“点九”切图法 194
7.2界面标注 197
7.2.1标注软件 197
7.2.2标注规范 198
7.3实战：为一款首页界面切图 201
7.3.1切图分析 201
7.3.2 iOS切图 203
7.3.3 Android切图 205
第8章 图标设计 207
8.1图标创意 208
8.1.1卡通形象化 208
8.1.2关键词图形化 208
8.1.3字体直观化 209
案例分析 209
8.2图标类型 210
8.2.1像素图标 210
案例分析 211
8.2.2拟物化图标 212
8.2.3扁平化图标 212
案例分析 214
8.2.4线性图标 215
案例分析 215
8.2.5立体图标 217
案例分析 217
8.3实战：绘制功能图标 219
8.3.1功能图标设计规范 219
8.3.2功能图标绘制过程 220
8.4实战：制作立体图标 227
8.4.1制作透视网格 227
8.4.2制作立体字 228
8.4.3制作灯泡 229
8.4.4制作光晕 230
8.5实战：快速制作线条流畅的Logo 231
8.5.1制作Logo形状的辅助线 231
8.5.2生成Logo路径形状 232
8.5.3将辅助线设置为虚线 234
第9章 高端艺术二维码 235
9.1原理结构 236
9.2动态二维码的表现 239
9.2.1 MICU二维码——航行 239
9.2.2 MICU二维码——音乐节 240
9.2.3 MICU二维码——清凉夏日 241
9.2.4 MICU二维码——UI疫苗站 241
9.2.5 MICU二维码——设计乐园 242
案例分析 242
9.3实战：制作宝马春节艺术二维码 245
9.3.1制作原码 245
9.3.2设计二维码 246
9.3.3制作动效 249
9.4实战：快速制作界面动态展示图 253
9.4.1导入GIF并转为智能对象 253
9.4.2制作透视展示图 254