After Effects CC移动网站UI交互动效设计全程揭秘PDF电子书下载

查看更多关于的内容

第1章 理解UI交互设计 1

1.1UI设计 1

1.1.1 UI设计概述 1

1.1.2了解UI设计师 2

1.1.3 UI设计的特点 2

1.1.4 UI设计的相关术语 4

1.2交互设计与用户体验 5

1.2.1交互设计概述 5

1.2.2交互设计的基本步骤 5

1.2.3用户体验概述 6

1.2.4用户体验的5个层面 6

1.2.5用户体验的需求层次 9

1.2.6交互设计与用户体验的关系 12

1.3移动端用户体验的发展趋势 13

1.4在UI交互中加入动效设计 14

1.4.1 UI动效的发展 14

1.4.2动效在UI交互设计中的作用 15

第2章 初识UI交互动效 17

2.1 UI交互动效 17

2.1.1 UI交互动效概述 17

2.1.2 UI交互动效的应用领域 18

2.2交互动效与UI设计 22

2.2.1优秀交互动效的特点 22

2.2.2交互动效的优势 23

2.2.3动效的分类 25

2.3交互动效在用户体验中的应用 26

2.3.1在交互过程中添加动效需要考虑的因素 26

2.3.2如何表现交互动效 26

2.4如何设计动效 28

2.4.1要有一个创意想法 28

2.4.2根据想法付诸行动 30

2.5制作UI交互动效的工具 30

2.6认识基础UI交互动效 34

2.6.1基础动效 34

2.6.2属性变化 34

2.6.3运动节奏 35

2.6.4基础动效组合应用 36

第3章 After Effects软件基础操作 37

3.1认识After Effects 37

3.1.1 After Effects概述 37

3.1.2 After Effects的应用领域 37

3.2 After Effects工作界面 41

3.2.1认识After Effects工作界面 41

3.2.2切换工作界面 41

3.2.3工具栏 42

3.2.4“项目”面板 43

3.2.5“合成”窗口 43

3.2.6“时间轴”面板 45

3.2.7了解工作界面中的其他面板 45

3.3快速掌握After Effects的基本操作 46

3.3.1创建新项目文件 46

3.3.2新建合成 47

3.3.3保存和关闭文件 48

3.3.4 After Effects中的基本工作流程 48

3.4导入与管理素材 49

3.4.1导入素材的基本方法 49

3.4.2导入PSD格式素材 50

实例01——通过导入PSD格式文件创建合成 51

3.4.3导入AI格式素材文件 52

实例02——通过导入AI格式文件创建合成 52

3.4.4素材的管理操作 54

3.4.5合成的嵌套 55

3.5认识“时间轴”面板 57

3.5.1“音频/视频”选项 57

3.5.2“图层基础”选项 57

3.5.3“图层开关”选项 58

3.5.4“转换控制”选项 58

3.5.5“父级和链接”选项 58

3.5.6“时间控制”选项 59

3.6 After Effects图层 60

3.6.1认识不同类型的图层 60

3.6.2图层的混合模式 63

实例03——快速制作图片素材淡入淡出动效 63

3.7图层的基础“变换”属性 67

3.7.1锚点 67

3.7.2位置 67

实例04——制作背景图片切换动效 68

3.7.3缩放 73

3.7.4旋转 73

3.7.5不透明度 74

实例05——制作元素入场动效 74

第4章 在After Effects中制作动效并输出 79

4.1关键帧与图表编辑器 79

4.1.1帧与关键帧 79

4.1.2创建关键帧 80

4.1.3关键帧的基本操作方法 80

实例06——制作趣味矩形拼图动效钮 82

4.1.4图表编辑器的操作方法 89

实例07——制作弹跳变形动效 90

4.2形状的应用 97

4.2.1关于形状 97

4.2.2创建路径群组 98

4.2.3路径形状属性设置 99

实例08——制作简单的Loading动效 102

4.3调整动画运动路径 106

4.3.1将直线运动路径调整为曲线运动路径 106

4.3.2运动自定向 108

实例09——制作魔法飞行动效 108

4.4创建和使用蒙版图层 112

4.4.1蒙版动画原理 113

4.4.2形状工具 113

4.4.3钢笔工具 114

4.4.4创建蒙版 114

实例10——为素材图层创建蒙版 114

4.4.5设置蒙版属性 116

实例11——制作蒙版属性动效 118

4.4.6蒙版的叠加处理 121

实例12——制作扫描二维码动效 122

4.5在After Effects中渲染输出动画 127

4.5.1认识渲染工作区 127

4.5.2理解渲染设置选项 128

4.5.3渲染输出 130

实例13——将动效渲染输出为视频文件 130

4.5.4配合Photoshop输出GIF文件 132

实例14——将动效输出为GIF动画图片 132

4.5.5将动画嵌入手机模板 133

实例15——将动画效果嵌入手机模板中 133

第5章 制作UI元素交互动效 137

5.1按钮与图标动效设计 137

5.1.1开关按钮 137

5.1.2制作开关按钮动效 137

实例16——制作开关按钮动效 138

5.1.3图标在UI界面中的作用 143

5.1.4图标动效的常见表现方法 144

5.1.5制作图标变换动效 147

实例17——制作图标变换动效 147

5.1.6制作日历图标动效 153

实例18——制作日历图标动效 153

5.1.7制作相机图标动效 153

实例19——制作相机图标动效 153

5.2进度条动效设计 159

5.2.1常见的进度条表现形式 159

5.2.2制作矩形进度条动效 161

实例20——制作矩形进度条动效 161

5.2.3制作圆形进度条动效 165

实例21——制作圆形进度条动效 165

5.3工具栏动效设计 165

5.3.1关于工具栏动效设计 165

5.3.2制作展开工具栏动效 166

实例22——制作展开工具栏动效 166

5.3.3制作工具图标动感展开动效 175

实例23——制作工具图标动感展开动效 176

5.4文字动效设计 176

5.4.1文字动效的表现优势 176

5.4.2常见的文字动效表现方法 177

5.4.3制作手写文字动效 180

实例24——制作手写文字动效 180

5.4.4制作闪光描边文字动效 185

实例25——制作闪光描边文字动效 185

5.5 Logo动效设计 185

5.5.1动态Logo概述 185

5.5.2动态Logo表现的优势 187

5.5.3 Logo动效需要注意的问题 189

5.5.4制作动感模糊Logo动效 189

实例26——制作动感模糊Logo动效 189

5.5.5制作动感切片Logo动效 189

实例27——制作动感切片Logo动效 189

第6章 UI界面动效设计 195

6.1动效设计的作用与常见效果 195

6.1.1动效设计的作用 195

6.1.2常见的UI界面交互动效 199

6.1.3制作手机充电动效 203

实例28——制作手机充电动效 203

6.1.4制作手机垃圾清理完成动效 208

实例29——制作手机垃圾清理完成动效 208

6.2界面加载等待动效设计 208

6.2.1了解加载等待动效 208

6.2.2加载动效的常见表现形式 209

6.2.3制作简单的圆环加载动效 211

实例30——制作简单的圆环加载动效 211

6.2.4制作界面下拉刷新加载动效 215

实例31——制作界面下拉刷新加载动效 215

6.3引导界面动效设计 215

6.3.1什么是引导界面 215

6.3.2引导界面的设计要素 216

6.3.3制作引导界面切换动效 217

实例32——制作引导界面切换动效 218

6.4导航菜单动效设计 223

6.4.1交互式动态导航菜单的优势 223

6.4.2导航菜单的设计要点 224

6.4.3制作侧边滑入导航菜单动效 225

实例33——制作侧边滑入导航菜单动效 225

6.5界面切换动效设计 232

6.5.1 4种常见的界面切换转场动效 232

6.5.2界面切换动效的设计规则 235

6.5.3制作登录转场动效 238

实例34——制作登录转场动效 238

6.5.4制作App解锁转场动效 239

实例35——制作App解锁转场动效 239

6.6 UI界面交互动效设计规范 245

6.6.1界面动效设计要点 245

6.6.2通过动效设计提升UI界面用户体验 248

6.6.3制作天气界面动效 251

实例36——制作天气界面动效 251

6.6.4制作界面列表入场动效 257

实例37——制作界面列表入场动效 257

6.7如何设计出优秀的UI交互动效 257

6.7.1明确系统状态 257

6.7.2让按钮和操控拥有触感 258

6.7.3有意义的转场动效 258

6.7.4帮助用户开始 259

6.7.5强调界面的变化 260

6.7.6需要注意的细节 260

6.7.7制作App界面菜单滑动动效 260

实例38——制作App界面菜单滑动动效 260

查看更多关于的内容