第 1章 界面类型/ 009
1.1 闪屏页/ 010
1.1.1 品牌宣传型/ 010
1.1.2 节日关怀型/ 011
1.1.3 活动推广型/ 012
1.2 引导页/ 013
1.2.1 功能介绍型（初级）/ 013
1.2.2 情感带入型（中级）/ 014
1.2.3 搞笑型（高级）/ 015
1.3 浮层引导页/ 016
1.4 空白页/ 017
1.4.1 首次进入型/ 017
1.4.2 错误提示型/ 018
1.5 首页/ 019
1.5.1 列表型/ 019
1.5.2 图标型/ 020
1.5.3 卡片型/ 020
1.5.4 综合型/ 021
1.6 个人中心页/ 022
1.7 列表页/ 024
1.7.1 单行列表页/ 024
1.7.2 双行列表页/ 025
1.7.3 时间轴列表页/ 025
1.7.4 图库列表页/ 026
1.8 播放页面/ 027
1.9 详情页/ 028
1.10 可输入页面/ 029
1.11 实战：两步打造炫酷界面/ 030
1.11.1 绘制基础图形/ 030
1.11.2 添加颜色与细节/ 032
第 2章 界面构图/ 035
2.1 九宫格构图/ 036
案例分析/ 037
2.2 圆心放射构图/ 038
案例分析/ 039
2.3 三角形构图/ 041
案例分析/ 041
2.4 S形构图/ 043
案例分析/ 044
2.5 F形构图/ 047
案例分析/ 047
2.6 实战：用多种构图方式
制作运动App界面/ 048
2.6.1 用放射构图设计运动页面/ 048
2.6.2 用倒三角形构图设计地图页面/ 053
2.6.3 用三角形构图设计个人页面/ 056
第3章 版面布局/ 059
3.1 界面版率/ 060
3.1.1 单色块填充/ 061
3.1.2 多色块组合/ 062
3.1.3 穿插填充/ 062
3.1.4 关键词图形化/ 063
3.1.5 放大文字/ 064
3.2 抠图法/ 065
案例分析/ 065
3.3 破界法/ 066
案例分析/ 066
3.4 局部提取/ 069
案例分析/ 069
3.5 对齐方式/ 070
3.5.1 界面中常用的对齐方式/ 070
3.5.2 小米官网的登录页/ 072
3.5.3 苹果官网的登录页/ 073
3.6 间距/ 074
案例分析/ 074
3.7 视觉层次/ 077
案例分析/ 077
3.8 实战：设计空气净化器App界面/080
3.8.1 对页面进行整体布局/ 080
3.8.2 设计“较差”页面/ 082
3.8.3 设计“良好”页面/ 086
第4章 元素/ 087
点线面/ 088
案例分析/ 088
4.2 极简至上/ 093
案例分析/ 093
4.3 品牌灵魂/ 095
案例分析/ 095
4.4 形象灵魂化/ 096
案例分析/ 096
4.5 动画赋予设计生命/ 099
案例分析/ 099
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
