孙丽娜，毕业于北京印刷学院设计艺术学专业，艺术学硕士，目前主要从事数字媒体艺术领域的研究和教学。现任北京邮电大学世纪学院艺术与传媒学院数字媒体艺术专业专职教师。其主要教授课程《网页设计技术》《网页交互动画》《网络项目设计实践》等。曾编著图书《网页设计技术》，且参写、参编著作、教材多部。曾获选北京高校“优质本科课程”和“优质本科教材课件”优质本科课件。

本书是一本运用Photoshop、Illustrator和After Effects进行UI动效制作的教程。全书共8章，分为基础部分和案例部分。基础部分讲解了UI动效设计的常用工具、色彩知识及常见组件，Photoshop的功能、基本操作及利用该软件制作UI界面和元素的方法，Illustrator的功能、基本操作及利用该软件绘制矢量图标的方法，After Effects的功能、基本操作及利用该软件将静态的UI界面制作为动态效果的方法，网页界面、手机界面和智能手表界面的UI设计规范；案例部分以网页端、手机端及智能手表UI为例，介绍了网页界面UI动效、手机界面UI动效及智能手表界面UI动效的设计与制作流程。
本书提供配套资源文件，包含本书实战、练习和习题的素材文件、效果文件和操作演示视频，供读者在学习的过程中随时调用。同时提供教师专享资源，包含配套PPT教学课件及教学大纲，供教师使用。
本书适合想要从事和已经从事UI设计行业相关工作的读者阅读，也适合UI设计、动效设计初学者学习，同时也适合UI培训机构、相关专业学生使用。

目录

第1章　初识UI动效设计
1．1　什么是UI动效设计　011
1．1．1　先说UI　011
1．1．2 再说“动效”　011
1．1．3 UI动效的应用领域　012
1．1．4 UI动效喜迎5G时代　013
1．2　UI设计师常用的软件　013
1．2．1　Photoshop\ Illustrator　013
1．2．2　After Effects　014
1．2．3　1．2．4 其他　014
1．3　UI色彩设计　015
1．3．1　认识色彩　015
1．3．2 色彩基本知识　015
1．3．3 配色方式　016
1．4　UI常见组件　017
1．4．1　图标　017
1．4．2　按钮　017
1．4．3　导航　018
1．4．4　栏　018

第2章　UI入门之Photoshop
2．1　软件的基本操作　020
2．1．1　新建文件　020
2．1．2　打开文件　020
2．1．3 置入文件　020
2．1．4 辅助工具　021
【练习　2-1】 使用标尺　021
【练习　2-2】 使用参考线　022
2．1．5　图像变换与变形　022
【练习　2-3】 旋转与缩放　023
【练习　2-4】 倾斜与扭曲　024
2．2　Photoshop工具组　024
2．2．1　选区工具组　024
【练习　2-5】 使用矩形选框工具创建矩形选区　025
【练习　2-6】 使用单列选框工具创建选区　026
2．2．2　形状工具组　026
【练习　2-7】 使用多边形工具绘制星形图标　027
2．2．3　绘图工具组　029
【练习　2-8】 使用画笔工具绘制玩偶图标　029
【练习　2-9】 使用渐变工具绘制按钮　030
【练习　2-10】 用油漆桶工具为图标填色　031
2．2．4　文字工具组　032
2．3　色调调整与滤镜　032
2．3．1　色调调整　032
2．3．2　滤镜　033
2．4　蒙版　034
2．4．1　矢量蒙版　034
【练习　2-11】 创建矢量蒙版　034
2．4．2　剪贴蒙版　035
【练习　2-12】 创建剪贴蒙版　035
2．4．3　图层蒙版　036
【练习　2-13】 创建图层蒙版　036
2．5　图层混合模式与图层样式　037
2．5．1　图层透明效果　037
2．5．2　图层混合模式　037
2．5．3　图层样式　038
2．6　实战：绘制太阳天气图标　040
2．7习题：制作手机App登录界面　043
2．8习题：制作小程序游戏开始菜单界面　044



第3章　UI入门之Illustrator
3．1　文档的基本操作　046
3．1．1　新建文档　046
3．1．2 打开文档　046
3．1．3　置入文档　046
3．2　基本绘图工具　047
3．2．1　简单绘图工具　047
延伸讲解：直线段的调整　047
【练习　3-1】 绘制无线网络图标　048
3．2．2　几何绘图工具　048
【练习　3-2】 绘制保险箱图标　048
【练习　3-3】 绘制分类图标　049
【练习　3-4】 绘制笑脸表情　050
3．2．3　徒手绘图工具　052
【练习　3-5】 绘制点赞图标　052
3．2．4　钢笔工具绘图　053
【练习　3-6】 绘制气象图标　054
3．3　填色与文字　055
3．3．1　单色填充　055
3．3．2　渐变填充　056
3．3．3　渐变网格　056
【练习　3-7】 绘制渐变爱心图标　056
3．3．4　文字工具　057
【练习　3-8】 完善保护伞图标　057
3．4　编辑图形对象　058
3．4．1　路径编辑　058
3．4．2　变换对象　059
【练习　3-9】 绘制电量图标　061
3．5　不透明度和混合模式　062
3．5．1　“透明度”面板　062
3．5．2　混合模式　063
3．6　实战：制作登录界面　063
3．7　习题：绘制火龙果图标　066
3．8　习题：制作购物车界面　067

第4章　UI动效之After Effects
4．1　After Effects的基本操作　069
4．1．1　新建项目　069
4．1．2 新建合成　069
4．1．3 导入素材　069
4．2　图层的基本操作　070
4．2．1　新建图层　070
4．2．2　编辑图层　070
4．2．3　图层叠加模式　071
延伸讲解：添加图层样式　071
【练习　4-1】 制作弹窗界面　071
4．2．4　常用图层类型　072
4．3　层基础动画属性　073
4．3．1　层列表　073
4．3．2　锚点　074
【练习　4-2】 改变图标锚点位置　075
4．3．3　位置　075
【练习　4-3】 制作移动动画　075
4．3．4　缩放　076
4．3．5　旋转　077
【练习　4-4】 制作图标旋转动画　077
4．3．6　不透明度　078
【练习　4-5】 制作启动界面淡入动画　078
4．4　蒙版与遮罩　079
4．4．1　创建蒙版的工具　079
延伸讲解：形状与蒙版的切换　080
4．4．2　蒙版属性的修改　080
【练习　4-6】 制作文字扫光效果　081
4．5　关键帧和表达式　082
4．5．1　添加关键帧　082
4．5．2　查看关键帧　083
延伸讲解：调整时间导航器和工作区　083
4．5．3　编辑关键帧　083
【练习　4-7】 制作图标大小变化的动画　084
4．5．4　关键帧辅助　085
延伸讲解：对素材进行变速操作　086
4．5．5　图表编辑器　086
【练习　4-8】 制作图标缓动效果　086
4．5．6　基本表达式　087
延伸讲解：设置关联图层　088
【练习　4-9】 齿轮转动效果　088
4．6　实战：制作表情按钮动效　089
4．7　习题：制作加载动效　093
4．8　习题：弹出按钮动画　094

第5章　UI的设计规范
5．1　网页界面设计　096
5．1．1　了解网页界面　096
5．1．2 网页界面的设计原则　096
5．1．3　网页界面的构成元素　098
5．2　iOS手机界面设计　099
5．2．1　iOS操作系统概述　099
5．2．2 iOS手机界面主要设计元素　099
5．2．3　iOS手机界面设计规范　101
5．3　Android手机界面设计　103
5．3．1　Android操作系统概述　103
5．3．2　Android手机界面设计元素　103
5．3．3 Android设计特色　104
5．4　智能手表界面设计　106
5．4．1　iOS智能手表设计特点　106
5．4．2　Android智能手表设计特点　108


第6章　网页端的UI动效设计
6．1　网页切换动效　110
6．1．1　设计分析　110
6．1．2 实战：Illustrator绘制指针和按钮　111
6．1．3　实战：Photoshop设计网页切换界面　112
延伸讲解：栅格化图层　113
6．1．4　实战：After Effects制作网页切换动效　114
6．2　网页滑动效果　126
6．2．1　设计分析　126
6．2．2　实战：Illustrator绘制几何图形元素　126
延伸讲解：调整圆角矩形半径并指定大小　128
6．2．3　实战：Photoshop设计网页滑动界面　129
6．2．4　实战：After Effects制作网页滑动效果　132
6．3　网络错误动效　139
6．3．1　设计分析　139
6．3．2 实战：Illustrator绘制场景元素　140
6．3．3　实战：Photoshop设计网络错误界面　142
6．3．4　实战：After Effects制作网络错误动效　145
6．4　习题：网页404动效　151


第7章　手机端的UI动效设计
7．1App登录动效　153
7．1．1　设计分析　153
7．1．2实战：Illustrator绘制App图标　154
延伸讲解：调整锚点　154
7．1．3　实战：Photoshop设计App登录界面　155
7．1．4　实战：After Effects制作App登录动效　159
7．2　主菜单上滑动效　167
7．2．1　设计分析　167
7．2．2　实战：Illustrator绘制主菜单图标　168
延伸讲解：使用“添加锚点工具”制作断点　169
7．2．3　实战：Photoshop设计主菜单界面　172
延伸讲解：将内容转换为光栅图像　173
7．2．4实战：After　Effects制作主菜单上滑动效　175
延伸讲解：调整时间刻度的显示　176
延伸讲解：蒙版的运用　177
7．3　来电弹窗动效　181
7．3．1　设计分析　181
7．3．2　实战：Illustrator绘制来电图标　182
7．3．3　实战：Photoshop设计来电弹窗　184
7．3．4　实战：After Effects制作来电弹窗动效　186
7．4　习题：优惠券动效　194

第8章　智能手表的UI动效设计
8．1　iOS智能手表动效　196
8．1．1　设计分析　196
8．1．2 实战：Illustrator绘制iOS智能手表图标　197
8．1．3实战：Photoshop设计iOS智能手表界面　198
8．1．4　实战：After Effects制作 iOS智能手表动效　201
8．2　Android智能手表动效　208
8．2．1　设计分析　208
8．2．2　实战： Illustrator绘制Android智能手表图标　209
8．2．3　实战：Photoshop设计Android智能手表界面　211
8．2．4　实战：After Effects制作Android智能手表动效　213
8．3　习题：计时动效　216

附录A　Photoshop 2020常用快捷键　217
附录B　llustrator 2020常用快捷键　220
附录C　After Effects 2020常用快捷键　222