第 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 实战：设计智能空气净化器界面/080
3．8．1 对页面进行整体布局/ 080
3．8．2 设计“较差”页面/ 082
3．8．3 设计“良好”页面/ 086
第4章 元素之道/ 087
4．1 点线面/ 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
