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

05常见UI交互动效设计与实现（上）签到签到方式教师通过“文旌课堂APP”生成签到二维码，并设置签到时间，学生通过“文旌课堂APP”扫描“签到二维码”进行签到。。扫码下载文旌课堂APP扫码签到

在技术和硬件飞速发展的今天，交互动效已经成为UI中不可或缺的一部分。交互动效是为了让用户更好地理解当前所发生的事情，帮助设计师解决界面功能上的问题，有效地说明产品的使用方法，加强用户与界面之间的情感联系。

本章将向同学们介绍UI中有关图标、按钮和导航栏的交互动效的表现形式及其设计方法，并通过案例制作去掌握上述UI元素交互动效的制作方法，并进一步提高软件操作能力，培养实践能力。单元导读★了解图标、按钮和导航栏交互动效的基础知识和表现形式知识目标★积极思考，探究操作背后的原理，增强自主学习、探究学习的意识★理论和实践相结合，不断培养自己的实践能力，做到举一反三、学以致用

思政目标★掌握使用AfterEffects制作图标、按钮和导航栏交互动效的方法和技巧

技能目标学习目标

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．图标特性法删除图标动效

图标特性法，是根据图标所表达的现实意义制作出与现实相符合的动效。5.1图标动效案例练习5-1制作信息图标动效

本案例制作的信息图标动效是使用图层蒙版与“填充”效果、“液化”效果共同实现的，其效果如图所示。另外，通过对关键帧的灵活运用实现了三种颜色逐个填充图标的动效。信息图标动效步骤1

在AfterEffects中新建项目，在“项目”面板下方文件列表区域空白处双击鼠标左键，在弹出的“导入文件”对话框中选择“素材与实例/第5章/案例5-1/信息.ai”，单击“导入”按钮，弹出设置对话框，在其中设置导入种类为“合成”，素材尺寸为“图层大小”，单击“确定”按钮导入素材并自动创建合成。步骤2

双击“项目”面板中的合成将其打开，单击“线条”图层左侧的“视频”按钮

隐藏图层内容。选择“选中”和“未选中”图层，按快捷键“S”显示其“缩放”属性，在5帧、15帧和1秒处为该属性添加关键帧，设置15帧处的属性值为70%，制作点击图标的效果，如图所示。5.1图标动效案例练习5-1制作信息图标动效步骤3

在工具栏中选择椭圆工具，选择“选中”图层，在“合成”窗口的图案左下角外按下鼠标左键并拖动绘制一个圆形蒙版，此时，“选中”图层中的内容不可见。

选择图层中“蒙版/蒙版1”属性组中的“蒙版扩展”属性，在15帧和1秒处为其添加关键帧，使“时间指示器”位于1秒位置，在“蒙版扩展”属性右侧的蓝色数字处按下鼠标左键向右拖动设置属性值，使圆形蒙版扩展到完全覆盖“合成”窗口中的图案，如图所示。5.1图标动效案例练习5-1制作信息图标动效设置“蒙版扩展”属性值步骤4

选择“选中”图层，按两次快捷键“Ctrl+D”复制两个图层副本。选中复制的两个图层，在“时间轴”面板中按下鼠标左键向下拖动所选图层到原图层下方，如图所示。5.1图标动效案例练习5-1制作信息图标动效复制两个图层副本5.1图标动效案例练习5-1制作信息图标动效添加“填充”效果步骤5

选中“选中3”图层中“蒙版”属性组中的“蒙版1”属性，在“效果和预设”面板的搜索框中输入“填充”并搜索，然后双击“填充”，为蒙版添加“填充”效果，此时在“项目”面板所在位置打开“效果控件”面板，在面板中设置填充颜色为蓝绿色“#4EE6D9”，如图所示。采用相同方法设置“选中2”图层中蒙版的填充颜色为橙色“#EF5B3E”。5.1图标动效案例练习5-1制作信息图标动效步骤6

同时选中“选中3”图层中“蒙版扩展”属性上的所有关键帧，按下鼠标左键向右整体拖动关键帧，使第一个关键帧位于18帧处；采用相同方法向右拖动“选中”图层中“蒙版扩展”属性上的所有关键帧，使第一个关键帧位于21帧处，此时1秒处的蒙版效果如图所示。5.1图标动效案例练习5-1制作信息图标动效步骤7

将“时间指示器”移到23帧位置，选择“选中2”图层中的“蒙版1”属性，选择“效果/扭曲/液化”菜单项，为蒙版添加“液化”效果。在“效果控件”面板中的“工具”属性下选择变形工具，在“变形工具选项”属性组中“画笔大小”属性右侧的蓝色数字处按下鼠标左键向右拖动设置画笔的大小，在“合成”窗口中按下鼠标左键并拖动以调整橙色填充的边缘，如图所示。5.1图标动效案例练习5-1制作信息图标动效步骤8

选择“选中2”图层下“效果/液化”属性组中的“扭曲百分比”属性，在23帧和1秒处为该属性添加关键帧，并设置1秒处的属性值为0%，使橙色填充的边缘恢复正常，如图所示。5.1图标动效案例练习5-1制作信息图标动效步骤9

使“选中2”图层处于选中状态，选择“效果控件”面板中的“液化”效果，按快捷键“Ctrl+C”复制该效果及其关键帧。选择“选中”图层，按快捷键“Ctrl+V”粘贴该效果及其关键帧。

按快捷键“U”显示“选中”图层上的所有关键帧，同时选中“扭曲百分比”属性中的所有关键帧，按下鼠标左键并拖动所选关键帧，使最后一个关键帧与该图层下“蒙版扩展”属性中的最后一个关键帧对齐，如图所示。将“液化”效果复制到“选中3”图层并执行与“选中”图层相同的操作。5.1图标动效案例练习5-1制作信息图标动效步骤10

单击“线条”图层左侧的“视频”按钮，显示图层内容并选择该图层。按快捷键“P”显示其“位置”属性，在1秒03帧和1秒13帧处为该属性添加关键帧，设置1秒03帧处“位置”属性的y值为-98。步骤11

选择“选中”图层，按快捷键“Ctrl+D”复制一个图层副本，按快捷键“Ctrl+Alt+Shift+↑”将复制的图层置顶，设置“线条”图层的“TrkMat”模式为“Alpha遮罩‘选中4’”，使线条嵌入信息图标中。步骤12

取消选中图层，按快捷键“U”显示所有图层中的关键帧。选中所有关键帧，按快捷键“F9”添加“缓动”效果，最后将文件保存。5.1图标动效案例练习5-2制作“播放—暂停”图标动效

本案例制作的播放—暂停图标动效是通过描边变换来实现从播放到暂停再到播放之间的转换，其重点是通过“修剪路径”属性组和钢笔工具来实现描边变换，动效如图所示。播放—暂停图标动效5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤1

在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，首先取消勾选“锁定长宽比为...”复选框，然后设置宽度和高度分别为1280和800，帧速率为30，持续时间为5秒，背景颜色为黑色，最后单击“确定”按钮新建合成。

在工具栏中选择椭圆工具，先按住快捷键“Alt”的同时重复单击填充色块，设置填充类型为无，使用相同方法设置描边颜色的类型为纯色；然后单击描边颜色色块，在弹出的“形状描边颜色”对话框中设置颜色为红色“#CD737B”（如图所示），并设置描边宽度为40。设置描边颜色5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤2

按住快捷键“Shift”的同时，在“合成”窗口中按下鼠标左键并拖动绘制正圆，此时在“时间轴”面板中会自动新建一个形状图层，选择新建图层并按快捷键“Enter”，将其重命名为“圆形”，设置其“内容/椭圆1/椭圆路径1”属性组中的“大小”属性值为“608，608”。

选中圆形，按快捷键“Ctrl+Alt+Home”使圆形的锚点位于其中心位置，单击“对齐”面板中的“水平对齐”按钮

和“垂直对齐”按钮

使圆形居中显示，如图所示。使圆形居中

★提示：在默认情况下，“水平对齐”按钮和“垂直对齐”按钮位于界面右侧的“对齐”面板中，如找不到该面板可选择“窗口/对齐”菜单项将其打开。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤3

按快捷键“F2”取消选中图层，在工具栏中选择多边形工具，按住快捷键“Shift”的同时，在“合成”窗口中圆形的中心位置绘制正三角形（绘制时按快捷键“↑/↓”可调节多边形边数）。

将图层重命名为“三角形”，设置其“内容/多边星形1/多边星形路径1”属性组中的“外径”属性值为129，并设置其锚点位于中心位置。使三角形居中显示，然后设置“变换”属性组中的“旋转”属性值为90°。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤4

此时，三角形的角为尖角，与圆形风格不符，单击“三角形”图层下“内容/多边星形1/描边1”属性组中“线段连接”属性右侧的“﹀”按钮，在下拉列表中选择“圆角连接”，使三角形的尖角变为圆角，如图所示。将三角形的角改为圆角5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤5

选择“圆形”图层，按快捷键“Ctrl+D”复制一个图层副本，按快捷键“Ctrl+Alt+Shift+↓”将复制的图层置底，设置其描边颜色为绿色“#6DAC93”，并单击图层左侧的“视频”按钮

隐藏图层内容。步骤

6右键单击“圆形”图层下“内容/椭圆1”属性组中的“椭圆路径1”属性，在弹出的快捷菜单中选择“转换为贝塞尔曲线路径”，即可在“合成”窗口中直接编辑圆形的顶点，如图所示。将圆形的路径转换为贝塞尔曲线路径5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤7

在工具栏中选择添加“顶点”工具，单击圆形上方顶点右侧路径添加一个新的顶点；在工具栏中选择选取工具，同时选中添加的顶点和圆形上方顶点，右键单击所选顶点，在弹出的快捷菜单中选择“蒙版和形状路径/已关闭”，取消“已关闭”的选择状态，此时两个顶点之间会断开连接，如图所示。断开顶点间的连接5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤8

单击“圆形”图层下“内容/椭圆1/描边1”属性组中“线段端点”下拉按钮，在下拉列表中选择“圆头端点”，使步骤7中的两个顶点在视觉上形成闭合，如图所示。改变圆形的线段端点5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤9

设置“三角形”图层“变换”属性组中的“不透明度”属性值为60%，以方便查看。在工具栏中选择钢笔工具，选择“圆形”图层，在“合成”窗口中单击步骤7添加的顶点并绘制路径，如图所示。绘制暂停图标左侧竖线

★提示：在修改路径时，选择图层下“内容/椭圆1”属性组中的“路径1”属性可以显示路径的顶点。在移动顶点的控制手柄时，按住快捷键“Alt”可以只移动顶点的一侧手柄，之后如果再次移动该顶点的控制手柄，默认是只移动顶点的一侧手柄，再次按快捷键“Alt”可同时移动顶点的两侧手柄。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤10

选择“三角形”图层，按快捷键“Ctrl+D”复制一个图层副本，设置复制图层“变换”属性组中的“旋转”属性值为270°。单击“合成”窗口下方的“选择网格和参考线选项”按钮，在下拉列表中选择“标尺”，使“标尺”处于选择状态，此时，“合成”窗口的上方和左侧会显示标尺，如图所示。显示标尺5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤10

在“合成”窗口的横向标尺处，按下鼠标左键向下拖动到合适位置，添加水平方向的辅助线；在竖向标尺处，按下鼠标左键向右拖动到合适位置，添加垂直方向的辅助线。使用相同方法再添加一条水平方向的辅助线和一条垂直方向的辅助线，效果如图所示。添加辅助线5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤11

隐藏“圆形”图层内容，右键单击“三角形”图层下“内容/多边星形1”属性组中的“多边星形路径1”属性，在弹出的快捷菜单中选择“转换为贝塞尔曲线路径”，使用添加“顶点”工具在三角形下方顶点偏上位置添加顶点，使用步骤7中的方法断开添加的顶点和下方顶点的连接，如图所示。

在“三角形”图层下“内容/多边星形1/描边1”属性组中“线段端点”属性的下拉列表中选择“圆头端点”，然后选择“三角形”图层，使用钢笔工具在“合成”窗口中单击添加的顶点并绘制路径，如图所示。断开顶点间的连接绘制暂停图标右侧竖线5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤12

选中“三角形2”图层，按快捷键“Delete”删除图层，并设置“三角形”图层“变换”属性组中的“不透明度”属性值为100%。

步骤13

单击“圆形”图层左侧的“视频”按钮

显示图层内容，选择该图层的“内容”属性，单击该属性右侧的按钮

，在弹出的菜单中选择“修剪路径”，添加“修剪路径”属性组，如图所示。将“时间指示器”移到0秒处，依次单击“内容/修剪路径1”属性组中“开始”属性和“结束”属性左侧的“秒表”按钮

，在当前位置添加关键帧，如图所示。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤14

按下鼠标左键向右拖动“开始”属性右侧的蓝色数字改变属性值，使圆形路径恢复为初始状态，修改后的“开始”属性值为19.5%，如图所示。

知识链接：“修剪路径”是作用于图形路径上的效果，可以改变路径的起止点。该属性组中的“开始”属性指路径起点的位置；“结束”属性指路径终点的位置；“偏移”属性右侧的第一个数值表示路径整体的旋转圈数，第二个数值表示路径整体的旋转角度值。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤15

在1秒处为“开始”属性和“结束”属性添加关键帧，并设置其属性值分别为0%和9.4%，使竖线的两个端点分别与水平方向上的两条参考线对齐，如图所示。

★提示：由于绘制路径的不同可能会导致“开始”属性和“结束”属性的属性值与文中所描述的属性值有所不同，在绘制时以实际情况为准。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤16

使用步骤13的方法在“三角形”图层中添加“修剪路径”属性组，在0秒和1秒处为“内容/修剪路径1”属性组中的“开始”属性和“结束”属性添加关键帧并设置属性值，两处的关键帧属性值如图所示。此时，便完成了简单的转换动效，接下来添加细节，为图标添加抖动和变色效果。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤17

同时选中“三角形”图层和“圆形”图层，按快捷键“P”显示它们的“位置”属性，在20帧、1秒和1秒06帧处为该属性添加关键帧，将“时间指示器”移到1秒位置，设置“三角形”图层中“位置”属性的y值为365，“圆形”图层中“位置”属性的y值为435，以制作抖动效果，如图所示。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤18

选择“三角形”图层下“内容/多边星形1/描边1”属性组中的“颜色”属性，在20帧和1秒处为该属性添加关键帧，设置1秒处的“颜色”属性为绿色“#6DAC93”。对“圆形”图层执行相同操作。步骤19

选择“三角形”图层下“内容/多边星形1/描边1”属性组中的“颜色”属性，在20帧和1秒处为该属性添加关键帧，设置1秒处的“颜色”属性为绿色“#6DAC93”。对“圆形”图层执行相同操作。如图所示。5.1图标动效案例练习5-2制作“播放—暂停”图标动效步骤20

按快捷键“F2”取消选中图层，按快捷键“U”显示所有图层中的关键帧，拖动鼠标同时选中所有关键帧，按快捷键“F9”添加“缓动”效果。至此，图标由播放到暂停的转换已制作完成。

将“时间指示器”移到2秒15帧位置，同时选中“三角形”图层中的所有关键帧，按快捷键“Ctrl+C”复制所选关键帧，然后按快捷键“Ctrl+V”从当前位置依次粘贴复制的关键帧。对其余图层执行相同操作。同时选中复制的所有关键帧，右键单击所选关键帧，在弹出的快捷菜单中选择“关键帧辅助/时间反向关键帧”（如图所示），使图标由暂停转换到播放。选择“关键帧辅助/时间反向关键帧”菜单5.1图标动效

工匠精神是我们民族精神和时代精神的生动体现，折射出各行各业一线劳动者的精神风貌，为各个专业领域高质量发展不断注入精神动力。

不只是劳动技术人员要具备工匠精神，我们UI交互设计师也要具备工匠精神，在设计原型图，制作交互动效时，要不断尝试，追求卓越，专注负责，在遵循设计规范的同时满足个性化需求，设计出既精美又能满足用户需求的产品。匠心筑梦5.2按钮交互动效5.2.1按钮的作用1．引导作用具有引导作用的按钮可以引导用户操作，提高用户对UI整体的认知，提升用户操作的成功率，提高用户使用产品的整体感受。例如，一些电商类App界面底部的“加入购物车”按钮和“立即购买”按钮，可以清楚地告诉产生购买欲望的用户下一步该如何操作，如图所示；还有一些App中的“点击领取”按钮，使用新颖的样式吸引用户眼球，引导用户点击，以进入下一个页面，如图所示。电商App底部的引导购买按钮

“点击领取”按钮示例5.2按钮交互动效5.2.1按钮的作用2．功能操作作用

具有功能操作作用的按钮可以实现相应的功能，如开关、确认、返回、折叠、展开、前进、后退等按钮。这类按钮强调的是其承载的功能，因此在设计时应当弱化按钮样式，重点突出主体功能，一些常见的功能类按钮如图所示。5.2按钮交互动效5.2.2如何设计出出色的交互按钮1．按钮需要看起来可点击

界面中的每个元素都需要用户花费时间和精力去理解。要想让用户快速、准确地理解哪些元素为按钮，首先就要确保该按钮在视觉上看起来是可点击的。具有阴影效果的按钮

由于设计师是界面元素的设计者，因此可以很容易地感知并理解哪些元素为按钮，以及界面各种元素的功能，这也导致了设计师对可点击按钮的理解与用户不同。在设计可点击按钮时，不可想当然地进行设计，要注意以下几个方法。

（1）为按钮添加适当的阴影效果，使按钮变得更加立体并浮于界面上，使用户可以快速感知，并有想按下去的冲动，如图所示。5.2按钮交互动效5.2.2如何设计出出色的交互按钮

（2）使用高饱和度或者对比度强烈的色彩，来突出按钮元素的不同，吸引用户点击，如明亮的黄色、蓝色和红色等，都比较抓人眼球，如图所示。

（3）注意按钮周围的留白，如果周围同类元素过多，且元素间间距过小，就很容易被用户忽视。色彩对比强烈的按钮2．合适的摆放位置

在设计时，应该把按钮摆放在合适的位置，即用户容易发现或者期待看到它的地方。这就要求设计师要尽可能使用传统的布局，将按钮放置到特定的位置。

例如，界面或者弹出框的底部、信息的正下方等。5.2按钮交互动效5.2.2如何设计出出色的交互按钮3．明确按钮的功能

除了让用户可以快速理解和发现按钮外，还需要清楚地告诉用户按下此按钮会产生什么效果，以免用户感到困惑，或进行错误操作。

有的按钮上会包含文本，以清楚地告诉用户该按钮的功能。这类按钮上的文本要尽可能简洁、直观，并且符合界面风格。

还有的按钮上绘制的是图形，如下载、关闭、确定等按钮。这类按钮使用图形代表文字向用户传达信息，这就要求按钮上图形所代表的含义是大众所接受、认可和理解的，否则很容易使用户对按钮功能产生误解。5.2按钮交互动效5.2.2如何设计出出色的交互按钮3．明确按钮的功能

例如，在登录界面中，向右的箭头按钮和对勾图形按钮虽然表面上没有登录的意思，但能感知按钮功能是可以切换到下一级界面或完成此界面操作的，与登录按钮功能相似，因此利于用户理解，并且可以代替文本式的登录按钮，如图所示。5.2按钮交互动效5.2.2如何设计出出色的交互按钮4．适当的尺寸

按钮要足够大才更容易引起用户注意，才能在众多界面元素中脱颖而出。按钮尺寸要足够大并不是说可以无限大，而是一个相对值，相对于界面中其他元素的尺寸。5．合理的顺序

按钮的顺序要符合按钮所具备的功能，也要符合用户的习惯。例如，在浏览电子书的上一页和下一页时，总是上一页的按钮在前，下一页的按钮在后。6．注意按钮的视觉层次

按钮除了要比界面中的其他元素突出，同一界面上的按钮与按钮之间也要注意层级关系，其可以通过对颜色、尺寸、排列顺序等进行处理使重要的按钮处于突出位置，其余按钮进行弱化处理。5.2按钮交互动效5.2.2如何设计出出色的交互按钮

例如，在界面中不止一个按钮时，重要的按钮使用明亮的绿色重点突出，其余按钮在保证其位置和尺寸的基础上使用灰色线框进行弱化处理，如图所示。突出重要按钮7．给予用户适当的反馈

当用户点击或轻触按钮时，他们会希望按钮或者界面可以给出适当的反馈，否则会认为自己没有触碰到按钮从而进行重复操作，或者认为该元素不属于按钮而导致理解错误。5.2按钮交互动效案例练习5-3制作开关按钮交互动效开关按钮交互动效

开关按钮交互动效是交互设计中最常见的动效之一，开关按钮常用于控制App界面中功能的开启与关闭，并且大多数开关按钮都是通过滑块来切换功能状态的，在制作时，要注意切换动效的流畅性与自然性，给用户一种舒适自然的感觉。

本案例制作开关按钮交互动效，效果如图所示。步骤1

在AfterEffects中新建项目，选择“合成/新建合成...”菜单项，弹出“合成设置”对话框，在其中设置宽度和高度分别为600和400，帧速率为30，持续时间为5秒，背景颜色为白色，然后单击“确定”按钮新建合成。步骤2

在工具栏中选择圆角矩形工具，先按住快捷键“Alt”的同时重复单击填充色块，设置填充类型为纯色；然后单击填充色块，在弹出的“形状填充颜色”对话框中设置颜色为浅灰色“#CFD1D2”，使用相同方法设置描边颜色的类型为无。

在“合成”窗口中按下鼠标左键并拖动绘制圆角矩形。选择“时间轴”面板中新建的形状图层，按快捷键“Enter”，将其重命名为“灰框”，作为按钮关闭时的背景。5.2按钮交互动效案例练习5-3制作开关按钮交互动效5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤3

选择“灰框”图层下“内容/矩形1/矩形路径1”属性组中的“大小”属性，先单击该属性名称右侧的“约束比例”按钮，使该按钮为不可见状态，然后设置“大小”属性值为“140，70”；选择“矩形路径1”属性组中的“圆度”属性，在该属性名称右侧的蓝色数字处按下鼠标左键并向右拖动，使圆角矩形两端显示为半圆，设置圆角矩形的锚点位于其中心位置，并使其居中显示，如图所示。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤4

选择“灰框”图层，按快捷键“Ctrl+D”复制一个图层副本，将复制的图层重命名为“绿框”，设置其填充颜色为绿色“#43C943”。按快捷键“Ctrl+Alt+Shift+↓”将图层置底，并隐藏该图层内容，作为按钮开启时的状态。步骤

5

取消选中图层，在工具栏中选择椭圆工具，设置填充颜色为白色，制作开关按钮交互动效在“合成”窗口中按住快捷键“Shift”的同时按下鼠标左键并拖动绘制正圆。先将新建图层重命名为“滑块”，设置其“大小”属性值为“60，60”；然后设置正圆的锚点位于其中心位置，并使其居中显示，作为开关按钮中左右滑动的滑块。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤

6

制作滑块左右滑动的动效。选择“滑块”图层，按快捷键“P”显示其“位置”属性，设置属性的x值为265，在10帧和1秒05帧处为该属性添加关键帧，设置1秒05帧处属性的x值为335，如图所示。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤

7

同时选中步骤6添加的关键帧，按快捷键“F9”添加“缓动”效果。单击“时间轴”面板图层控制区域右上方的“图表编辑器”按钮进入图表编辑器模式，显示“位置”属性的速度图表，单击曲线上的关键帧，显示关键帧手柄，按下鼠标左键并拖动手柄，调整速度曲线的坡度（速度图表曲线的坡度越陡速度越快，反之越慢），如图所示。单击“图表编辑器”按钮退出图表编辑器模式。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤

8

在1秒处为“滑块”图层的“位置”属性添加关键帧，并设置属性的x值为343。按快捷键“Shift+S”显示其“缩放”属性，在12帧、22帧和1秒05帧处为该属性添加关键帧，单击该属性名称右侧的“约束比例”按钮，使该按钮为不可见状态，然后设置22帧处水平方向的属性值为116%，选中“缩放”属性上的所有关键帧按快捷键“F9”添加“缓动”效果。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤

9

制作灰框从有缩小到无，并且在缩小过程中向右移动的效果。先显示“绿框”图层内容，然后选择“灰框”图层，依次按快捷键“P”和“Shift+S”，同时显示图层的“位置”属性和“缩放”属性，在10帧和1秒05帧处为它们添加关键帧，设置1秒05帧处“位置”属性的x值为320，“缩放”属性值为0%，如图所示。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤

10

选择“绿框”图层，按快捷键“T”显示其“不透明度”属性，在10帧和1秒05帧处为该属性添加关键帧，并设置10帧处的属性值为0%。取消选中图层，按快捷键“U”显示所有图层中的关键帧。同时选中“灰框”图层和“绿框”图层中的所有关键帧，按快捷键“F9”添加“缓动”效果。步骤

11将“时间指示器”移到2秒位置，先选择“滑块”图层中的所有关键帧，按快捷键“Ctrl+C”复制关键帧；然后按快捷键“Ctrl+V”将复制的关键帧从当前时间开始依次粘贴，对其余图层执行相同操作。同时选中复制的所有关键帧，右键单击选中关键帧，在弹出的快捷菜单中，选择“关键帧辅助/时间反向关键帧”，如图所示。5.2按钮交互动效案例练习5-3制作开关按钮交互动效步骤

12通过预览可以发现，滑块在1秒05帧和2秒之间不停移动。单击“时间轴”面板中的“图表编辑器”按钮进入图表编辑器模式，选择“滑块”图层的“位置”属性，显示“位置”属性的速度图表，选择1秒05帧处的关键帧，单击时间线区域下方的“将选定的关键帧转换为定格”按钮，使该时间段内的速度图表曲线变为直线，如图所示。步骤

13最后将文件保存。5.3导航栏交互动效5.3.1常见导航栏的类型

UI中常见的导航栏的类型有标签式导航、舵式导航、抽屉式导航、宫格式导航和列表式导航，如图所示。在设计时，可以根据页面内容、主次分类等选择合适的类型。需要注意的是，在设计导航栏时，相同等级的页面要尽可能保持一致。标签式导航

舵式导航

抽屉式导航

宫格式导航

列表式导航5.3导航栏交互动效5.3.1常见导航栏的类型

1．标签式导航

1）底部标签式导航

底部标签式导航位于界面底部，通常采用文字加图标的方式表现，也有纯图标的形式，一般有3～5个选项。该导航模式适合几个模块之间相互独立，使用频率基本相同，且需要频繁切换的情况。它会占据界面中一定高度的空间，减少了界面中的信息承载量。

2）顶部标签式导航

顶部标签式导航位于界面顶部，用于展示同一模块下不同类型的信息，一般不超过9个选项，通常与底部标签式导航组合使用。除如图所示的标准样式外，顶部标签式导航还有滑动样式和下拉样式两种。5.3导航栏交互动效5.3.1常见导航栏的类型

1．标签式导航

当选项数量较多，且没有优先级区分时，可以使用滑动样式，让用户通过左右滑动来查看更多的选项，如图所示。此类导航样式的缺点是，只能看见可见范围内的几个选项，其余选项处于不可见的状态，因此设计时需要提供足够的视觉线索来表明该导航栏可左右滑动。

当选项功能很多且没有那么重要时，可以使用下拉样式，如图所示。此类导航样式也需要有提示信息来向用户表明点击按钮可以展开下拉列表，如在导航文字旁边添加向下的箭头。5.3导航栏交互动效5.3.1常见导航栏的类型

2．舵式导航

当选项多到底部标签式导航难以承载时，会在其中间加一个功能按钮，并将一部分选项放到功能按钮中，这便是舵式导航，它属于底部标签式导航的扩展形式。

一般功能按钮与导航栏中的其他图标相比会更加醒目。当用户点击功能按钮时，其中的选项会以滑动、弹射等动效形式展开，在为用户提供更多选项和功能的同时，有效提高了导航栏的趣味性。5.3导航栏交互动效5.3.1常见导航栏的类型3．抽屉式导航

抽屉式导航也可称为“侧边式导航”，在默认情况下处于隐藏状态，当点击相应图标时会像抽屉一样从侧边拉出，如图所示。

这种导航节省了主页面空间，给用户带来更沉浸式的阅读与操作体验，适合不需要频繁切换的次要功能。

抽屉式导航的缺点是入口比较隐蔽，增加了用户的使用成本。5.3导航栏交互动效5.3.1常见导航栏的类型4．宫格式导航

宫格式导航将所有信息入口全部聚合在页面中，适合功能较多且功能之间差异较大的应用，如图所示。

此类导航具有较强的延展性，可以无限扩展内容，但一级页面大多为信息入口，具体信息在下一级页面中，增加了用户的认知成本，且不同入口间缺乏联动性。5.3导航栏交互动效5.3.1常见导航栏的类型5．列表式导航

列表式导航主要针对某个模块中的具体内容进行组织分类，并以列表的形式呈现，多用于辅助主导航展示模块中的内容层次，一般不会用在App首页，如图所示。

该导航结构清晰、易于用户理解，当列表中的内容信息量过大或列表条目过多时，可以加入搜索功能，以方便用户查找。5.3导航栏交互动效5.3.1常见导航栏的类型5．列表式导航

除上述常见导航类型外，还有轮播导航、瀑布导航和点聚导航等，如图所示。其中，轮播导航是指将所有信息平铺在界面中，并通过左右滑动来切换信息的导航。瀑布导航是指在界面中通过上下滚动来切换信息的导航，其表现方式以图片为主。点聚导航是指点击按钮，按钮中所包含功能信息在周围展开的导航，其展开方式与舵式导航相似，但不同的是该按钮的放置没有固定位置。

轮播导航

瀑布导航

点聚导航

在实际应用中，可单独使用一种导航类型，也可同时使用多种导航类型，但不管如何设计都要以满足用户需求为目的。（1）在设计导航栏时，可以通过改变颜色或添加图形等方法，设置当前选项的选中状态，使用户可以一眼识别当前所处页面的位置。（2）首先，导航栏中要尽可能使用通用图标，尤其是纯图标类型的导航栏，以传达正确的、不易被误解的信息；其次，包含文本的导航栏要注意文本长度，避免折行，还要注意文本所表达的信息是否准确。（3）在绘制导航栏时，要注意选项之间的间距，避免图标和文本之间过于紧凑。（4）导航结构并不是越复杂越好，相反，用户需要点击的导航层级越少，越便于用户操作，越容易受到用户青睐。5.3导航栏交互动效5.3.2交互式导航栏的设计要点

交互式导航栏可以为用户带来更好的体验，但在设计时不能忽略其本身的功能。接下来讲解一些交互式导航栏的设计要点。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效

顶部标签式导航栏是常用的导航类型，用户可以通过点击导航栏中的导航项跳转到其他界面，在点击导航项时可以给其添加适当的交互动效，以表明当前导航项的选中状态。为了使效果更加真实还要制作出鼠标点击的效果。

本案例制作顶部标签式导航栏交互动效，效果如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效步骤

1

在AfterEffects中新建项目，先选择“合成/新建合成...”菜单项，在弹出的“合成设置”对话框中设置宽度和高度分别为1200和600，帧速率为30，背景颜色为深蓝色“#28303B”，持续时间为12秒；然后单击“确定”按钮新建合成。1．绘制顶部标签式导航栏步骤2在工具栏中选择矩形工具，设置填充颜色为白色，描边为无，在“合成”窗口中按下鼠标左键并拖动以绘制矩形，将图层重命名为“导航框”。单击“导航框”图层下“内容/矩形1/矩形路径1”属性组中“大小”属性右侧的“约束比例”按钮，使该按钮为不可见状态，然后设置该属性值为“720，112”，之后设置矩形锚点位于其中心位置，并使矩形居中显示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效步骤

3

在工具栏中选择横排文字工具，在“合成”窗口中导航框上单击鼠标左键，输入“首页”。选中文字，在“字符”面板中设置其字体为“黑体”，字号为30，颜色为灰色“#919191”，如图所示。

绘制顶部标签式导航栏在工具栏中选择向后平移（锚点）工具，在“合成”窗口中按下鼠标左键并拖动锚点到文本框上边框的中心，如图所示；设置“首页”图层“变换”属性组中的“位置”属性值为“298，282”，使文字位于导航框中心靠上的位置，如图所示。1．绘制顶部标签式导航栏案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效步骤

4

选择“首页”图层，按快捷键“Ctrl+D”复制一个图层副本，双击“首页2”图层进入文本编辑模式，删除原文字“首页”，输入“推荐”。采用相同方法再复制3个图层副本，分别输入“电视剧”“电影”“动漫”。1．绘制顶部标签式导航栏

选择“电视剧”图层，在工具栏中选择向后平移（锚点）

工具，在“合成”窗口中按下鼠标左键向右拖动锚点到文本框上边框的中心。同时选中复制的4个图层副本，按快捷键“P”显示它们的“位置”属性，然后分别设置该属性的x值为413、537、664、776，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效步骤

5

取消选中图层，在工具栏中选择矩形工具，设置填充颜色为灰色“#918F9C”，描边为无，在“合成”窗口中按下鼠标左键并拖动以绘制矩形。将图层重命名为“菜单按钮”，单击“大小”属性右侧的“约束比例”按钮，然后设置该属性值为“38，3”。

使矩形的锚点位于其中心位置，然后设置“变换”属性组中的“位置”属性值为“904，288”。

选择“菜单按钮”图层并复制一个图层副本，设置复制图层“变换”属性组中“位置”属性的y值为304。1．绘制顶部标签式导航栏案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效1．绘制顶部标签式导航栏步骤

6

取消选中图层，使用矩形工具绘制一个“大小”属性值为“118，3”的矩形，设置其填充颜色为橙色“#ED7554”，描边为无，锚点位于其中心位置，“变换”属性组中的“位置”属性值为“299，355”，将图层重命名为“横条”，至此顶部标签式导航栏就绘制完成了，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

1

首先绘制鼠标点击首页导航项时，“首页”文本放大并改变颜色的效果。选择“首页”图层，按快捷键“S”显示其“缩放”属性，在1秒和1秒12帧处为该属性添加关键帧，设置1秒12帧处的属性值为130%，然后在1秒10帧处添加关键帧并设置属性值为135%。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

2

在“效果和预设”面板的搜索框输入“填充”并搜索，然后双击“填充”为“首页”图层添加“填充”效果，选择“首页”图层下“效果/填充”属性组中的“颜色”属性，在1秒和1秒12帧处为该属性添加关键帧，设置1秒处的“颜色”属性为灰色“#919191”，1秒12帧处的“颜色”属性为橙色“#ED7554”，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

3

制作鼠标点击首页导航项时横条渐显效果。选择“横条”图层，依次按快捷键“S”和“Shift+T”显示其“缩放”属性和“不透明度”属性，在1

秒和制作顶部标签式导航栏交互动效1秒12帧处为这两个属性添加关键帧。将“时间指示器”移到1秒位置，单击“缩放”属性右侧的“约束比例”按钮，使该按钮为不可见状态，然后设置其水平方向的属性值为0%，“不透明度”属性值也为0%，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

4

制作鼠标在0秒开始移动，1秒处点击首页导航项，然后在1秒10帧处消失的效果。取消选中图层，使用椭圆工具绘制一个“大小”属性值为“32，32”的正圆，设置其填充颜色为无，描边颜色为灰色“#838383”，描边宽度为1，锚点位于其中心位置。将图层重命名为“鼠标”，设置其“变换”属性组中的“位置”属性值为“288，308”，使鼠标位于首页导航项左下方位置。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

5

选择“鼠标”图层，在0秒、16帧和1秒10帧处为“变换”属性组中的“位置”属性添加关键帧，设置0秒处的属性值为“226，328”；在0秒、16帧、26帧、1秒和1秒10帧处为“变换”属性组中的“缩放”属性添加关键帧，设置0秒、16帧和26帧处的属性值为80%，1秒处的属性值为70%；在0秒、16帧、1秒和1秒10帧处为“变换”属性组中的“不透明度”属性添加关键帧，设置0秒和1秒10帧处的属性值为0%，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

6

将“时间指示器”移到1秒10帧位置，选择“鼠标”图层，按快捷键“Ctrl+Shift+D”将所选图层从当前位置拆分为两个图层。选择“鼠标2”图层，按快捷键“U”显示其上已添加的关键帧，同时选中该图层上的所有关键帧，按下鼠标左键向右拖动关键帧，使第一个关键帧位于2秒位置。

★提示：接下来制作鼠标点击推荐导航项时，“推荐”文本放大并改变颜色，下方“横条”由“首页”文本下方移至“推荐”文本下方，同时“首页”文本恢复原状的效果。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

6设置2秒处的“位置”属性值为“288，308”，2秒16帧和3秒10帧处的“位置”属性值为“408，306”，将“时间指示器”移到2秒位置，按快捷键“Alt+[”，将图层时间线入点修剪到当前时间，如图所示。“鼠标2”图层的关键帧设置案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

7将“时间指示器”移到3秒位置（鼠标进行点击的位置），选择“首页”图层中已添加的关键帧，按快捷键“Ctrl+C”复制关键帧，同时选中“首页”图层和“推荐”图层，按快捷键“Ctrl+V”将复制的关键帧从当前位置开始依次粘贴，此时“首页”和“推荐”文本从3秒处开始放大并改变颜色。

首先选中“首页”图层中复制的关键帧，右键单击所选关键帧，在弹出的快捷菜单中选择“关键帧辅助/时间反向关键帧”；然后选中“首页”图层中3秒12帧处的关键帧，按下鼠标左键向左拖动关键帧到3秒08帧处，制作“首页”文本恢复原状的效果，如图所示见下页。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效鼠标点击推荐导航项时“推荐”和“首页”图层的关键帧设置案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

8选择“横条”图层，在3秒和3秒12帧处为“变换”属性组中的“位置”属性添加关键帧，设置3秒12帧处属性的x值为412；在3秒、3秒05帧和3秒12帧处为“变换”属性组中的“不透明度”属性添加关键帧，设置3秒05帧处的属性值为50%，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

9接下来制作鼠标点击电视剧导航项时的动效。参照步骤6的方法，首先在“鼠标2”图层最后一个关键帧的位置拆分该图层；然后拖动“鼠标3”图层上的关键帧到4秒处，使该图层的第一个关键帧位于“鼠标2”图层最后一个关键帧的后20帧处。将时间线入点修剪到4秒，最后设置“位置”属性上关键帧的属性值，实现鼠标点击电视剧导航项的动效，关键帧设置如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

9复制“推荐”图层上的所有关键帧，粘贴到“电视剧”图层中，使粘贴的第一个关键帧位于5秒处，制作“电视剧”文本放大并改变颜色的效果。复制“首页”图层3秒到3秒08帧之间的关键帧（“首页”文本恢复原状的关键帧），粘贴到“推荐”图层中，使粘贴的第一个关键帧与位于5秒处，制作“推荐”文本恢复原状的效果，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

10制作横条从“推荐”文本下方移到“电视剧”文本下方的动效。首先将“时间指示器”移到5秒位置，选中步骤8添加的所有关键帧，按快捷键“Ctrl+C”复制关键帧；然后按快捷键“Ctrl+V”将复制的关键帧从当前位置开始依次粘贴，并设置5秒12帧处“位置”属性的x值为536。

制作横条移到“电视剧”文本下方后拉长的效果。在5秒和5秒12帧处为“横条”图层“变换”属性组中的“缩放”属性添加关键帧，设置5秒12帧处水平方向的属性值为125%，如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

11参照步骤9的方法制作鼠标点击电影导航项时的动效。注意鼠标图层第一个关键帧的位置位于之前鼠标图层最后一个关键帧的后20帧处。在制作“电影”文本放大并改变颜色，同时“电视剧”文本恢复原状的效果时，直接将相应的关键帧复制粘贴到鼠标进行点击时的位置即可，相应图层的关键帧设置如图所示。案例练习5-4制作顶部标签式导航栏交互动效5.3导航栏交互动效2．制作顶部标签式导航栏交互动效步骤

11选择“横条”图层，复制该图