UI交互设计案例教程 第五章.pptxVIP

05常见UI交互动效设计与实现（上） 签到签到方式 教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到 在技术和硬件飞速发展的今天，交互动效已经成为UI中不可或缺的一部分。交互动效是为了让用户更好地理解当前所发生的事情，帮助设计师解决界面功能上的问题，有效地说明产品的使用方法，加强用户与界面之间的情感联系。 本章将向同学们介绍UI中有关图标、按钮和导航栏的交互动效的表现形式及其设计方法，并通过案例制作去掌握上述UI元素交互动效的制作方法，并进一步提高软件操作能力，培养实践能力。单元导读 ★了解图标、按钮和导航栏交互动效的基础知识和表现形式知识目标★积极思考，探究操作背后的原理，增强自主学习、探究学习的意识★理论和实践相结合，不断培养自己的实践能力，做到举一反三、学以致用 思政目标★掌握使用After Effects制作图标、按钮和导航栏交互动效的方法和技巧 技能目标学习目标 5.1 图标动效5.1.1 初识图标动效 随着时代的发展，静态图标已经很难满足用户对产品个性化与趣味性的要求，越来越多的手机应用开始注重图标动效的设计。恰到好处的图标动效，不仅可以减轻认知负担，带给用户愉悦的操作体验，还可以传达给用户整个App的设计理念。 例如，表示加载状态的加载动效图标和清除计算机垃圾时表明已有文件添加到垃圾桶中的删除动效图标，清晰明了地传达出了图标的含义，如图所示。图标动效 5.1 图标动效5.1.1 初识图标动效 因此，在设计时应冷静分析，按照界面风格和功能需求添加动效，如喜马拉雅App首页，除底部导航栏的图标切换动效外，只有助眠专注图标添加了动画特效，使该图标在众多图标中脱颖而出，吸引了用户的注意，突出显示了该App的新功能，达到了设计的目的，如图所示。图标动效 在设计图标动效时要注意，不是所有风格、所有场景下的图标都适合添加动效，另外如果添加的动效过于复杂或种类过多，将会分散用户的注意力，起到相反的效果。 5.1 图标动效5.1.2 图标动效设计思路设计图标交互动效不能随心所欲，本节讲解一些设计图标动效的思路。1．基本属性转换法 基本属性转换法，是通过对元素的位置、大小、方向、透明度、颜色等基本属性进行改变，而做出的简单有趣的动效。该方法应用范围十分广泛，并且对图标风格无太大要求，示例如图所示。定位和添加图标动效 图中的定位图标是使水滴图形基于底部进行旋转所形成的动效，而添加图标是在图形的不透明度由低到高、逐渐显现的过程中对其进行放大、旋转等所形成的动效。 例如，单击菜单图标之后，上下两条线将进行移动和重组，组成新的关闭图标，中间的线逐渐缩小直至消失不见，如图所示。5.1 图标动效5.1.2 图标动效设计思路2．路径重组法 路径重组法是将图标中的元素或路径进行重组，构成一个新的图标。路径重组图标动效 5.1 图标动效5.1.2 图标动效设计思路3．点线面切换法点线面切换图标动效 点线面切换法，顾名思义就是通过点、线、面之间的相互切换来制作图标动效，这是一个使用频率较高的方法。在切换时，可以用点作为介质，通过点绘制出线性图形，再由线转换为面，也可以由线直接转换为面，如图所示。 5.1 图标动效5.1.2 图标动效设计思路4．遮罩法遮罩图标动效 遮罩法是指两个图形之间相互转换时，将一个图形作为另一图形的遮罩所形成的图标动效，如图所示。该图标将不可见的圆角矩形作为时钟图标的遮罩，当圆形放大时，只会显示圆角矩形中的内容。 因此，当圆形放大到一定程度后就会显示为圆角矩形，同时时钟图标中的指针经过移动和重组构成了新的图形。 5.1 图标动效5.1.2 图标动效设计思路5．分裂融合法下载- 完成图标动效 分裂融合法是将一个图标中的多个图形融合在一起，形成新的图标，或者是将图标中的一个图形分裂成多个图形。下面来看两个例子。 如图所示为下载-完成图标，在单击该图标之后，向下的箭头变为两条竖线，然后无数的小圆向中心汇合，表示正在下载；最后小圆融合成了一个大圆，同时将中心的两条竖线进行重组变为对勾，表示已完成下载。 如图所示为加载图标，图标中的水滴滴落分裂成小点，然后由小点融合成类似雪花的图形，表示正在加载。加载图标动效 例如，为模拟现实生活中扔东西的情景，删除图标是用垃圾桶图形来表示的，在删除文件时，垃圾桶会上下抖动并因为重力使盖子反弹，如图所示。5.1 图标动效5.1.2 图标动效设计思路6．图标特性法删除图标动效