页面交互页面设计套装：新印象 解构UI界面设计+UI动效大爆炸—After Effects移动UI动效制作学习手册

《新印象
解构UI界面设计》
UI设计界高人气设计师、MICU设计公众号创办人王铎倾力打造！360设计总监、Boss直聘设计总监、UI中国联合创始人、抖音设计总监联袂推。本书从UI设计的基础入手，结合大量的案例分析和针对性实战（界面设计、字体设计、图标设计、Logo设计、界面切图以及二维码制作），全面而深入地阐述了UI设计的界面类型、界面构图、版面布局、元素运用、界面用色、设计原则与规范、切图与标注、图标设计以及艺术二维码设计等方面的内容。

 

《UI动效大爆炸——After Effects移动UI动效制作学习手册》

这是一本关于互联网动效设计的实战教程图书，介绍了移动互联网时代体验动效设计行业的发展趋势。通过文字和视频两种教学形式相结合，让大家对UI 前期的行业、技能以及部门工作协同等知识有所了解，同时对动效软件的操作和动效案例的制作有较全面的掌握，近20 个视频教学案例，由浅入深地教会读者使用After Effects 制作动效，且在学习之余，为读者分享了一些关于思维导图、分镜头绘制、前端开发等相关知识，以及工作过程中可能会遇到的一些困难解决方案和风险规避方法等。

《新印象
解构UI界面设计》

 

第 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

 

《UI动效大爆炸——After Effects移动UI动效制作学习手册(彩印)》

 

01 初识UI动效 013之前先动脑——如何提炼

1.1 认识UI 014

1.1.1 UI 操作系统的发展简介 014

1.1.2 UED 团队的构成与介绍 017

1.1.3 UI 的应用领域分析 018

1.1.4 UI 设计师的自我修养 025

1.2 认识UI 动效 028

1.2.1 孕育中的UI 动效 029

1.2.2 UI 动效行业的现状与发展 030

1.2.3 UI 动效的应用领域分析 032

1.2.4 让设计有意义地存在 037

1.3 如何玩转UI 动效 038

1.3.1 系统设备的准备 038

1.3.2 我的切身学习体会 039

1.3.3 螺旋提升计划 040

1.3.4 建造你的灵感弹药库 042

1.3.5 如何正确看待“审美” 044

1.3.6 嘿！你着什么急 044

1.4 UI 动效制作的工具介绍 045

1.4.1 二维/ 原型类动画工具 045

1.4.2 3D 类动画工具 049

1.4.3 After Effects 052

 

02 动手之前先动脑——如何提炼你的设计思维
055

2.1 全局考量 056

2.1.1 设计师和美工，仅一步之遥 056

2.1.2 “先整体后局部”的思考程序 057

2.1.3 美观，不代表一定优质 058

2.1.4 设计该有温度 059

2.2 如何构思你的动效方案 059

2.2.1 你真的懂得如何去“看”吗 060

2.2.2 绘制你的动画分镜头 062

2.2.3 可行性评估 065

2.2.4 可拓展性和pin牌感 066

2.2.5 构思期间的进展同步 066

2.3 思维导图构建和灵感提炼 067

2.3.1 什么是思维导图 067

2.3.2 如何绘制你的思维导图 071

2.3.3 养成灵感提炼的习惯 072

 

03 教你如何快速玩转After Effects——五大学习阶段全修炼073

3.1 半小时，熟悉After Effects 系统的基本操作 074

3.1.1 认识After Effects 的基本面板 074

3.1.2 如何将PSD 文件导入After
Effects 075

3.1.3 如何将AI 文件导入After
Effects 077

3.1.4 如何将Sketch 文件导入After
Effects 080

3.1.5 新建工程文件与相关参数设置 083

3.1.6 顶部工具栏的认识 084

3.1.7 图层编辑区域的介绍 084

3.1.8 红条出现，别慌 087

3.2 一小时，熟悉界面基本操作技巧 088

3.2.1 新建固态层（Solid Layer） 088

3.2.2 “嵌套”功能的使用 089

3.2.3 创建“父子关联” 090

3.2.4 SHY 和 SOLO 091

3.2.5 关于“MASK”（ 遮罩）功能的介绍 094

3.2.6 3D Layer（3D 层） 099

3.2.7 实战：After Effects 摄像机的操作 101

3.3 两小时，学会形状图层的运用 101

3.3.1 如何创建Shape Layer 102

3.3.2 Contents 属性的使用 103

3.3.3 关于路径图形的创建 114

3.3.4 Anchor Point（图层轴心点） 115

3.3.5 如何创建文字层 116

3.3.6 Null Object( 空对象) 的创建和使用 117

3.3.7 “木偶图钉”工具的使用 118

3.3.8 图层的复制、截断和去首尾处理 120

3.4 一小时，让你的UI 动起来 122

3.4.1 帧与关键帧 122

3.4.2 关键帧的创建与使用 123

3.4.3 曲线动画效果的制作 126

3.5 聊聊渲染 130

3.5.1 After Effects 渲染面板的介绍 130

3.5.2 不同的渲染输出方式介绍 132

 

04 动效大爆炸——H5动效的实现方式与Material
Design动画 135

4.1 了解HTML5 136

4.1.1 什么是HTML5 136

4.1.2 前端工程师的介绍 138

4.1.3 动画实现大揭秘1：原生动画 139

4.1.4 动画实现大揭秘2：CSS3 动画 145

4.1.5 动画实现大揭秘3：CSS2
JavaScript 149

4.1.6 动画实现大揭秘4：Canvas SVG
150

4.1.7 动画实现大揭秘5：WebGL 154

4.1.8 动画实现大揭秘6：另辟蹊径 156

4.2 Material Design 动画，你必须要知道的
160

4.2.1 什么是Material Design 动画 160

4.2.2 影响Material Design 动画的客观属性 161

4.2.3 Material Design 的动画表现形式 163

4.2.4 Material Design 动画设计的注意事项 168

 

05 游戏有外挂，动效有脚本——不同动效插件的介绍与使用方法 173

5.1 概述 174

5.2 Shape Fusion（融合效果脚本插件）
174

5.2.1 Shape Fusion 的安装与加载方法 175

5.2.2 Shape Fusion 的使用与操作流程 176

5.3 Mt. Mograph Motion（图形动画脚本插件）178

5.3.1 面板区域的介绍 179

5.3.2 动画命令的介绍 180

5.4 Bodymovin（After Effects 动画转HTML5的脚本插件） 185

5.4.1 关于Lottie 工具的介绍 186

5.4.2 Bodymovin 的安装与加载方式 186

5.4.3 如何在Bodymovin 中完成动画的渲染输出
189

 

06 手把手教你玩动效——动效制作方法的视频全解析 193

6.1 概述 194

6.2 基础篇 194

6.2.1 水波纹加载动画 195

6.2.2 界面构成五部曲 196

6.2.3 LOGO 诞生记 197

6.2.4 圆环波普棉花糖 198

6.2.5 线体ICON 变形计 199

6.2.6 水滴融合Loading（有插件 无插件双实现版本）200

6.2.7 灵动的文字百叶窗 201

6.2.8 生长的自行车 202

6.2.9 液态流体的LOGO 203

6.3 进阶篇 204

6.3.1 图形切割 204

6.3.2 2D 卡通的爆炸LOGO 206

6.3.3 电击的LOGO 207

6.3.4 动感涂鸦字体LOGO 208

6.3.5 HUD 炫动光环 209

6.4 Gao级篇 210

6.4.1 Hologram 全息手表演示动效 211

6.4.2 QQ 会员15 周年加速特权篇动效方案
212

6.4.3 粒子LOGO 动画 21313

 

07 踏上不归路，jiu请坚持到底 215

7.1 自学，究jing有多难 216

7.2 关于Performance Flow（演绎过程） 220

7.3 我的个人学习建议 222

后记 224