第4章
H5页面动效与活动设计

在H5中添加动画特效可创造出流畅的视觉效果，使页面内容生动、自然。此外，营销活动设计也是H5设计领域的一大特色，用户可通过设计各类营销活动进行吸粉、引流，以此提高企业品牌的知名度。本章将对H5动画特效的制作及营销活动的设计进行简单介绍。

4.1 设置H5页面动效
H5页面已经成为企业和个人展示、宣传、营销的重要工具。为了提高用户体验和品牌形象，许多设计师会在H5页面中添加动效。下面对H5页面动效的相关知识点进行简单介绍。

4.1.1 页面动效的作用
H5页面动效的作用主要体现在以下几方面。
	引导用户操作。页面动效设计可以引导用户进行点击、翻页等操作，使用户能够更方便快捷地使用H5页面。
	增加人机交互的乐趣。通过有趣的页面动效设计，可以让H5页面更具有趣味性和互动性，增加用户的参与度。
	提高用户体验。页面动效设计可以提供更好的视觉效果和交互体验，使用户在使用H5页面的过程中更加流畅、舒适。
	增强品牌形象。通过页面动效设计，可以突出品牌特色和形象，提高品牌的认知度和美誉度。
	提高用户留存率。页面动效设计可以让用户对H5页面产生更多的兴趣和好奇心，增加用户在页面的停留时间，提高用户留存率。

4.1.2 页面动效的类型
H5页面动效可分为页面元素动效、交互动效、辅助动效和翻页动效4种。
1. 页面元素动效
页面元素动效指的是为页面中的元素添加不同的动效，例如淡入淡出、飞入飞出、放大缩小、弹入弹出等。通过调整动效的属性，让元素依次有序地进行展现，使内容更具有动感和趣味性。图4-1所示是去哪儿网站推出的《去哪儿代玩》H5作品，该作品会在每一个关键信息上添加强调动效，引导用户快速获取页面的重点内容。
图4-1

注意事项
合理的动效可使页面效果锦上添花，但是不能一味追求动效设计，而忽略主体内容的展现。因为过多的动效设计只会造成视觉疲劳，从而影响用户的关注力。

2. 交互动效
交互动效指的是在页面中加入交互按钮或交互动作，让用户的操作与页面产生关联，以增加页面互动性，图4-2所示是腾讯推出的《云游北京中轴线》宣传类H5作品。该作品利用点击转盘随机得到不同的步数，用户按照指定的步数了解这条中轴线上所有的文化遗产项目。
图4-2

3. 辅助动效
H5页面中的辅助动效指的是那些渲染力强的、持续时间短的动画效果。例如光芒动效、闪烁动效、滚动动效、加载动效（Loading）等。图4-3所示是三体和长安汽车联合推出的《面壁者招募计划》闯关类H5作品，该作品利用各种光线闪烁动效来渲染主题氛围，使得页面科技感十足。
图4-3

4. 翻页动效
翻页动效是指页与页之间的过渡动画，常用于内容的承上启下、场景过渡或空间的转换。常见的转场动效有上下翻页、左右翻页、缩放翻页、卡片翻页等。
单击页面右上角的“预览和设置”按钮，在打开的预览界面中用户可对当前的翻页方式、翻页动画进行设置，如图4-4所示。
图4-4

4.1.3 页面动效的常规设置
在制作H5页面时，用户可以直接根据需求为关键元素添加动效。虽说各类H5制作平台的动画功能不尽相同，但大致设置流程是相似的。可以说，只要会使用一个平台的动画操作，其他平台的也就游刃有余了。
以人人秀平台为例，在页面中选择所需的元素，例如选择文本，然后选择“动画”选项，单击“添加”按钮，创建“动画1”选项组。单击“动画”下拉按钮可选择要添加的动画效果。单击右侧箭头按钮可设置动画播放的方向，如图4-5所示。
图4-5

其他参数如没有特殊要求，只需保持默认即可，单击按钮可预览该元素动画。如果在一个元素中需要添加多组动画，可再次单击“添加”按钮创建“动画2”选项组，在此设置第2组动画参数。例如，添加一个退出动画，如图4-6所示。
图4-6

注意事项
动画可分为“进入”“强调”和“退出”3种类型。如果要添加“退出”动画，那么就需要在“退出”类型中选择。此外，如要添加两组或两组以上的动画，那么就需要从第2组动画开始设置“延迟”时间。

动画设置完成后，可单击工具栏中的按钮对当前页面动画进行预览，如图4-7所示，文字先由大到小进入页面，停顿1.5秒后，再逐渐消失。
图4-7

在人人秀中用户还可设置一些屏幕特效，例如语音来电、指纹开屏、粒子开屏等，如图4-8所示。在页面上方单击“组件”按钮，在打开的“特效”界面中，用户可根据需要选择所需的特效进行设置，图4-9所示是动态爱心屏幕特效的操作。
图4-8
图4-9

知识点拨
在人人秀平台用户可以一键套用页面动画。打开预览界面，在“动画设置”选项组中即可根据需要套用页面动画效果。该效果包含渐入、弹入、翻滚和移入4组动画，如图4-10所示。
图4-10

4.2 设置页面创意动效
在H5页面中添加一些创意动画效果可以有效地提升页面展示效果，使页面内容更有吸引力。常用的创意动效有VR全景动效、一镜到底动效、手指跟随动效等。
4.2.1 VR全景动效
VR全景采用虚拟现实技术，将展示内容完全数字化，并通过3D建模打造一个仿真的场景。在H5页面中应用VR全景特效可为用户提供身临其境的沉浸式体验，增强用户的参与感和互动性。用户可通过手指滑动屏幕来改变视角，浏览全景图像。该技术常用于展示城市风光、旅游景点、商业空间等领域，为用户提供更加真实、直观的体验。图4-11所示的是新华通讯社和中影基地联合推出的《VR全景看新时代之美》宣传类H5作品，该作品利用内嵌入VR技术，通过重力感应，或者滑动屏幕两种交互方式来展现中国之美和时代发展的各项成就。
图4-11

在凡科微传单H5制作平台用户可使用720°全景功能制作VR全景动效。进入该网站，新建页面后，单击页面上方的“趣味”按钮，选择“720°全景”选项即可添加“全景”组件，如图4-12所示。用户可在“全景”面板中单击“展开编辑全景”按钮，展开编辑页面。单击该面板中的“外圈背景”的“自定义”按钮添加背景图，如图4-13所示。此时简单的VR场景就生成了，用户可根据需要在该场景中设置相应的内容。单击“预览和设置”按钮即可查看设置效果，如图4-14所示。
图4-12
图4-13
图4-14

以上介绍的VR全景操作只是一个简单的场景创建，想要实现高质量的VR场景还需要结合其他专业的VR编辑软件才可实现。
4.2.2 一镜到底动效
一镜到底是视频拍摄的一种表现手法，在拍摄过程中没有中断，运用一定技巧将视频一次性拍摄完成。而H5页面中的一镜到底是指在整个页面中使用一个长图作为背景，通过动画实现页面元素的依次展示，给用户一种连续的、流畅的视觉体验。该动效比较适合用于时间轴叙事的场景，例如企业发展历程、企业大事记等。
图4-15所示是光明科学城推出的《一进到底看光明》宣传类H5作品。该作品通过一镜到底的交互方式，让用户上下滑动屏幕，由远及近地观看和了解光明科学城的发展历程。
图4-15

动手练  制作新春祝福动态页面 
每逢重大节日，企业或商家就会利用H5技术制作大量节日祝福进行线上传播，以提高曝光量，为自己引流。下面利用凡科微传单网站的一镜到底功能，制作新春祝福H5动态页面。
步骤01 进入凡科微传单网站，新建空白页面。单击页面上方的“趣味”按钮，选择“视觉黑科技”|“一镜到底”选项，如图4-16所示。
图4-16

步骤02 在打开的界面中单击“添加”按钮，添加“一镜到底”的组件页面，如图4-17所示。
图4-17

步骤03 单击第1幕的“背景”按钮，打开“背景”面板，单击“开启背景”按钮，开启背景功能，单击+按钮添加背景素材，如图4-18所示。
图4-18

步骤04 单击页面上方的“素材”按钮，上传中国结素材至素材库，单击即可添加至页面中，如图4-19所示。
步骤05 单击“文本”按钮，在中国结上输入文字内容，并在“文本”面板中设置好文本格式，如图4-20所示。
图4-19	图4-20

步骤06 单击页面右侧的按钮，复制该场景后新建第2幕场景。更改该场景的文字内容，结果如图4-21所示。
步骤07 按照同样的方法，复制并创建第3幕～第5幕场景，更改其文字内容，图4-22所示是第5幕场景。
步骤08 在“一镜到底”面板中单击“最后一幕”按钮，切换到最后一幕空白页，如图4-23所示。
图4-21	图4-22	图4-23

步骤09 单击按钮，添加相同的背景图片。单击“素材”按钮，在“素材库”中选择合适的装饰素材，将其添加至页面中，如图4-24所示。
图4-24

步骤10 继续添加其他装饰元素来丰富页面，如图4-25所示。
步骤11 单击“文本”按钮，在页面中输入文字内容，设置文字格式，结果如图4-26所示。
步骤12 在“页面”面板中删除第一页空白页，如图4-27所示。
图4-25	图4-26	图4-27

步骤13 单击页面上方的按钮，为当前页面添加背景音乐。单击“预览和设置”按钮进入预览界面，单击“手机预览”按钮可在手机上预览效果。向上滑动屏幕可开启一镜到底动态页面，如图4-28所示。滑动速度快，动效播放就快；滑动速度慢，动效播放就慢。
图4-28

4.2.3 手指跟随动效
手指跟随动效指的是在移动设备中，当用手指在屏幕上滑动时，页面上的元素会跟随手指的移动而移动。手指跟随动效经常被用于H5页面的游戏场景中。通常该动效要通过JavaScript或相关框架来实现。
图4-29所示是网易新闻和贵州茅台联合推出的《茅台重阳登高计划》游戏类H5作品。该作品通过手指滑动来掌控茅台公仔跳跃台阶进行闯关。
图4-29

4.3 营销活动页面设计
H5页面营销是一种创新的网络营销方式，它可以借助媒体传播、社交分享、互动游戏和创意营销等元素，来提升企业品牌的知名度和用户的参与度。H5页面营销活动的类型有很多种，如投票评选、红包抽奖、微信场景模拟、趣味游戏等。
以人人秀平台为例，用户可在页面上方单击“互动”按钮，在打开的“互动”界面根据需要选择相应的营销活动进行设置，如图4-30所示。
图4-30

4.3.1 投票评选类活动设计
投票评选类活动比较常用，企业可在页面中设置多个产品选项，让用户选择自己心仪的产品并进行投票。该活动能够激发用户的参与热情，增加用户互动，同时也能促进用户的口碑传播。
图4-31所示是网易新闻数码频道推出的2022年《年度数码好物评选》H5作品。该作品利用评选的方式排除不喜欢的数码产品，生成好物清单，形成裂变传播。
图4-31

4.3.2 红包抽奖类活动设计
H5红包抽奖类活动是结合传统的抽奖活动形式和现代的H5技术，为用户提供一种全新的互动体验。用户可以通过摇一摇、大转盘抽奖、答题等多种互动形式来获取奖项，不仅可以增强用户的参与感，提高用户对品牌的记忆，还能有效地收集用户数据，为后续的市场分析和产品推广提供支持。
图4-32所示是长隆推出的《翻牛年福气卡 召祥隆十八奖》活动类H5作品，该作品利用翻福气卡的方式获取相应的奖品奖券。
图4-32

4.3.3 微信场景模拟设计
H5微信场景模拟就是利用HTML 5技术，在微信平台上制作接近原生应用体验的网页。这些网页能够模拟现实生活中的场景，为用户提供仿佛置身其境的感受。利用微信场景可以制作活动的广告推广页面，提高用户的参与度和品牌的曝光度。
图4-33所示是凡科微传单推出的《做一个Logo，少一个朋友》H5作品，该作品模拟微信聊天界面，将主体内容一一呈现出来，场景代入感很强烈。
图4-33

动手练  模拟微信朋友圈场景 
下面利用凡科微传单平台制作微信朋友圈的营销场景。
步骤01 进入凡科微传单网站，新建空白页面。单击页面上方的“趣味”按钮，在列表中选择“微信模拟”|“朋友圈”选项。
步骤02 在打开的界面中根据需要选择朋友圈类型，这里选择“日常生活”类型，单击“创建”按钮即可创建朋友圈页面，如图4-34所示。
步骤03 单击“更换封面”按钮可更换朋友圈封面，如图4-35所示。
图4-34	图4-35

步骤04 在页面右侧的“朋友圈”面板中，用户可以对朋友圈成员进行管理。例如添加设置圈主身份、添加或删除微信分享人等，这里设为默认，如图4-36所示。
步骤05 在页面中选择任意一条朋友圈信息，单击“添加”按钮可新建一条信息，如图4-37所示。
图4-36	图4-37

步骤06 选中“我”的朋友圈信息，将其拖至最顶端，如图4-38所示。
步骤07 双击这条信息，即可进入信息编辑界面。在“内容”选项中输入文本内容，如图4-39所示。
步骤08 单击“图片”按钮即可添加配图，如图4-40所示。
图4-38	图4-39	图4-40

步骤09 切换到“点赞/评论”选项，单击+按钮可设置点赞人及相关评论，如图4-41所示。
步骤10 设置完成后，单击页面空白处即可返回页面，如图4-42所示。
步骤11 在右侧“朋友圈”面板中单击“播放背景音乐”按钮，开启音乐功能，单击按钮为该页面添加合适的音乐，如图4-43所示。
图4-41	图4-42	图4-43

步骤12 单击“保存”按钮保存当前页面设置。单击“预览和设置”按钮进入预览界面，单击“手机预览”按钮即可使用手机预览真实场景，预览效果如图4-44所示。
图4-44

4.3.4 趣味游戏页面设计
H5页面游戏作为一种轻量级的游戏形式受到越来越多的关注。相对于传统的App游戏，H5游戏具有无须下载安装、跨平台兼容等特点，因此在营销方面也有着自身的独特优势。
游戏活动可通过创新的玩法和题材吸引用户的注意力。有趣、刺激的游戏玩法往往能够吸引用户的参与和分享，进而扩大品牌的曝光度。同时，多样化的题材也能够满足不同用户的需求，增加用户的参与度。
H5页面游戏具备较强的互动性和社交性。通过游戏中的排行榜、奖品等机制，可以激发用户的竞争欲望和分享欲望，进而吸引更多的用户参与其中。另外，游戏还可以与其他营销手段相结合，进一步提升品牌效应。例如，通过植入广告、品牌Logo等方式将品牌信息融入游戏场景中，增加用户对品牌的认可度和好感。
图4-45所示是极致品牌推出的《极致红包保卫战》游戏类H5作品，该作品利用红包消除游戏，让用户参与闯关互动。闯关成功后可获得相应的积分进行抽奖。通过小游戏成功达成了品牌宣传的目的。
图4-45

案例实战：制作店庆活动的H5页面
本案例将结合以上所学的知识内容，利用人人秀平台制作某琴行十周年店庆活动页面。其中涉及的知识点包括内页动画的添加、砸金蛋活动的设置等。下面介绍具体的制作流程。
步骤01 进入人人秀网站，新建空白页面。单击页面右侧的“上传背景图”按钮，在打开的“图片库”界面中上传背景素材，如图4-46所示。
图4-46

步骤02 单击上传的背景图即可添加至当前页面中，如图4-47所示。
步骤03 单击“文字”按钮，在文本框中输入标题文本，并在右侧“文字”面板中对该文本的格式进行设置，如图4-48所示。
步骤04 再次单击“文字”按钮，在页面中输入其他文本，并设置文本的格式及位置，结果如图4-49所示。
图4-47	图4-48	图4-49

步骤05 在左侧“页面”面板中单击“添加页面”按钮，可新建一张空白页面，如图4-50所示。
步骤06 单击“上传图片”按钮，在打开的“图片库”界面中选择一款合适的背景作为活动背景图，如图4-51所示。
图4-50	图4-51

步骤07 单击“文字”按钮，输入活动标题文本。在“文字”面板中单击“默认样式”按钮，选择“描边”艺术字，并设置文字样式，放置在页面的合适位置，如图4-52所示。
步骤08 按照同样的方法完成标题文本的添加操作，效果如图4-53所示。
步骤09 再次单击“文字”按钮，输入页面其他文字内容，设置文字的格式和位置，如图4-54所示。
图4-52	图4-53	图4-54

步骤10 单击“图片”按钮，在“图片库”中选择合适的图片素材放置在标题位置处。选中图片，在“图片”面板中单击“翻转”按钮，可将图片进行水平翻转，如图4-55所示。
步骤11 按照同样的方法，添加其他装饰图片来丰富页面效果，如图4-56所示。
图4-55	图4-56

步骤12 单击“互动”按钮，在“互动”界面中选择“抽奖”|“抽奖”选项，打开抽奖设置界面。在“基本设置”界面中设置“活动主题”和“活动时间”，将“活动类型”设为“砸金蛋”，并输入活动规则，如图4-57所示。
图4-57

步骤13 切换到“奖品设置”界面，选择第一项奖品，单击“编辑”按钮，在“修改”界面中将“奖品类型”设为“实物奖”，如图4-58所示。
图4-58

步骤14 在“选择营销商品”界面选中第1项奖品，并单击“编辑”按钮，在打开的“快速编辑商品”界面对一等奖商品进行设置，如图4-59所示。
图4-59

步骤15 返回“选择营销商品”界面，按照同样的方法设置二等奖、三等奖及感恩奖的奖品信息，如图4-60所示。
步骤16 选择第一项奖品，单击“确定”按钮，返回“修改”界面，设置“奖品总数”“中奖概率”“配送方式”“奖品领取有效期”，如图4-61所示。
图4-60	图4-61


步骤17 单击“确定”按钮，返回“奖品设置”界面，此时即可看到一等奖奖品信息设置完毕。按照同样的方法，添加二等奖奖品信息，如图4-62所示。
图4-62

步骤18 继续添加三等奖和感恩奖奖品信息，如图4-63所示。
步骤19 切换到“高级设置”界面，根据需要设置“活动设置”选项组中的参数，如图4-64所示。
图4-63	图4-64

步骤20 设置完成后单击“确定”按钮，完成砸金蛋活动的添加操作，如图4-65所示。
步骤21 选择第1张页面，选中标题文字，在“动画”面板中单击“添加”按钮将“动画”设为“缩放”“由小到大”，其他参数保持为默认，如图4-66所示。
图4-65	图4-66

步骤22 按照同样的方法，为该页面其他文本添加缩放动画（除“十周年庆”的动画顺序为“由大到小”），其参数保持不变，单击页面右侧的按钮可预览当前页的动画效果，如图4-67所示。
图4-67

步骤23 选择第2页，为该页文字和砸金蛋组件添加相应的动画效果，如图4-68所示。
图4-68

步骤24 选择第1页，单击“音乐”按钮，在“音乐库”界面选择合适的音乐作为背景音乐添加至页面中。
步骤25 单击“预览和设置”按钮，在打开的预览界面中单击“手机扫码”按钮，可使用手机预览活动效果，如图4-69所示。
图4-69

新手答疑
1.	Q：在易企秀工具中，想要在页面中添加按钮链接，怎么操作？
A：很简单，选择所需的按钮，在“组件设置”面板中选择“触发”选项卡，在“点击触发”下拉列表中选择一种链接的方式，然后再选择需要链接的类型，例如是跳转至外链页面，还是跳转至某内页面，或者是链接到视频播放，还是跳转到某个小程序等。选择好之后，只需根据相关信息进行操作即可。
2.	Q：人人秀工具中如何制作快闪效果？
A：选择“组件”选项，在“特效”界面中选择“快闪”选项，即可添加快闪组件。在“快闪”面板中选择第1张页面，并在该页面中输入快闪文字，或者添加所需的图片即可，如图4-70所示。然后单击“添加页面”创建第2张页面，按同样的方法继续创建快闪内容。当所有快闪内容设置好之后，单击“音乐”按钮，添加合适的卡点音乐即可。
图4-70

当然，在设置过程中，为了能够与音乐节奏点相吻合，可在“快闪”面板中对每张页面停留的时间进行设置，单击按钮即可进行设置。
3.	Q：做好的底图，如何导入H5平台使用？
A：以易企秀平台为例，在右侧工具栏中单击PS按钮，在打开的“PSD上传”界面中单击“+上传原图PSD文件”按钮，选择所需PSD文件即可，如图4-71所示。
图4-71