ui交互设计案例教程 第四章.pptxVIP

04用 After Effects 设计和实现 UI 交互动效 签到签到方式 教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到 静态的线框原型很难完整地表达出设计师的设计思维，尤其是交互思维，而要表达交互思维，就需要制作交互动效。??本章介绍制作UI交互动效的相关软件及其操作方法，一方面可以使学习者更好地理解和掌握软件，另一方面可以培养同学们脚踏实地、精益求精的良好品质。单元导读 ★了解After Effects软件的基础知识知识目标★加强练习，在实践中培养自己的专业技能和职业素养★完善作品设计，培养精益求精的良好品质 思政目标★掌握After Effects的基本操作★掌握使用After Effects制作UI交互动效的方法与技巧★掌握使用After Effects预览、渲染和导出交互动效的方法 技能目标学习目标 4.1 初识 After Effects Adobe After Effects是Adobe公司推出的一款动态图形制作和视觉效果设计软件，由于其自身强大、丰富的动效制作和高度灵活的2D、3D合成功能，以及数百种预设的效果与动画，被广泛应用于UI交互动效设计、视频后期合成处理等领域。 After Effects支持无限多个图层，能够直接导入Illustrator和Photoshop文件，并且保留文件中的图层，实现了与Adobe公司其他相关软件的无缝衔接。除此之外，After Effects还配有多种内置插件，以满足更复杂、更独特的设计要求。 4.1 初识 After Effects 在学习After Effects之前，要先了解该软件的操作界面，如图所示。 4.1 初识 After Effects下面简单介绍界面中不同区域的功能。 （1）标题栏：其中包括软件名和正在制作的项目名称，以及最小化、还原、关闭按钮。 （2）菜单栏：位于标题栏下方，After Effects的大部分功能都位于该区域，选择菜单项可执行相应功能，包括调整参数、切换面板和添加效果等。（3）工具栏：包括选取工具、缩放工具、形状工具、文本工具、绘图工具和Roto笔刷等制作交互动效的常用工具。要使用某个工具，单击选择即可。鼠标左键长按工具右下方的◢按钮，可以在下拉列表中查看并选择隐藏工具。（4）“项目”面板：用于管理项目中的所有素材和合成，上方为素材与合成的预览区域，下方为文件列表区域，可以对素材和合成进行导入、新建、删除、编辑等操作。 （5）“合成”窗口：一般位于界面正中，是交互动效的预览区，可以显示当前合成和素材的效果。 4.1 初识 After Effects （6）“时间轴”面板：一般位于界面底部，是用于组织素材的重要区域，可以对图层进行选择、创建、排序和重命名等操作，还可以添加和设置关键帧。 除上述常用面板外，还有一些工作面板，在菜单栏的“窗口”菜单中选择面板名称即可打开相应面板，如图所示。选择“窗口/工作区”菜单项，可在其子菜单中选择不同的界面布局；单击工具栏中的 按钮，也可在下拉列表中选择不同的界面布局，如图所示。 “窗口”子菜单 改变界面布局 4.2 After Effects 基本操作4.2.1 项目文件基本操作 After Effects与其他软件有一个明显的不同之处，就是在该软件中创建的项目不能直接操作，还需要在项目文件中创建合成。 1．创建和打开项目文件 在启动软件时，会出现“开始”界面，在该界面中单击“新建项目”按钮可以创建新项目；单击“打开项目”按钮，可以在弹出的“打开”对话框中选择并打开本地项目文件，另外，该界面还会列出“最近使用项”，直接单击项目名称即可打开对应的项目文件，如图所示。 “开始”界面 4.2 After Effects 基本操作 关闭“开始”界面后，可以通过选择“文件/新建/新建项目”菜单项创建新项目；或者选择“文件/打开项目...”菜单项，在弹出的“打开”对话框中选择并打开本地项目文件，如图所示。创建项目或打开本地项目文件 在After Effects中一次只能打开一个项目文件，如果在已有项目打开时创建或打开新项目，系统将提醒你保存已经打开的项目并将其关闭，之后再创建或打开新项目。 4.2 After Effects 基本操作 2．创建合成 合成是动效的框架，每个合成都有自己的时间轴，一个项目文件可以包含数百个合成，每个合成都单独列于“项