H5面创意设计课件 项目6 综合案例：活动运营H5面的设计与制作

项目6H5页面的创意设计6.1H5页面的交互创意设计6.2H5页面的动效创意设计目录Content6.3项目实训6.1.1使用H5+720°全景技术查看全景画面720°全景技术又被称为三维实景技术，是一种新兴的新媒体技术。该技术与视频、声音、图片等展现方式的显著区别是可操作、可交互。下图所示的H5页面利用720°全景技术，通过长卷寻宝和VR展馆的形式，展示黄河文明中的宝贵文化遗产，呼吁大家保护黄河文明，参与互动，了解非遗。6.1.2使用H5+人脸识别技术让内容更有趣人脸识别技术是指将人脸图像输入识别系统中，计算机根据人物的脸部特征进行人脸识别的技术。在下图所示的H5页面中，当用户点击“我要拍照”按钮后将进入合成毕业照界面，系统会调用手机摄像头，此时用户只需拍摄或选择照片，系统会自动识别用户的面部表情数据，并根据数据合成图像。6.1.3使用H5+物理引擎技术创建虚拟世界物理引擎技术是一种仿真程序技术，用于创建一种虚拟环境，在这个虚拟的环境中除了物体的相互作用（如运动、旋转和碰撞），还有施加到它们身上的力（如重力）。右图所示的H5页面通过让用户操作汽车躲避障碍进行游戏互动，其中躲避障碍的过程运用了物理引擎技术。6.1.4使用H5+重力感应技术让用户的互动体验更好重力感应原指对地球重力方向变化的感知技术，应用于H5页面中能提升用户体验，如赛车游戏中的左右转弯控制、屏幕横屏和竖屏切换等H5场景，都需要用到重力感应技术。如下图所示。6.1.5使用H5+手指跟随技术让操作更生动为了模拟原生应用的触控效果，大多数H5都运用了手指跟随技术，让操作变得更加生动，同时也加强了与用户的互动性。在右图所示的H5页面中，把鸡与鸭作为主角，让用户在游戏中锻炼眼力，在轻松热闹的卡通场景中释放压力，感受与萌宠互动的游戏乐趣。6.1.6设计案例：使用凡科微传单制作全景H5页面凡科微传单是一款简单易用的H5制作工具，使用该工具可以制作720°全景H5页面。本例将使用凡科微传单制作720°全景H5页面。在制作时先制作外景和内景，然后编辑内容，再设置样式。具体操作如下。创建页面6.1.6设计案例：使用凡科微传单制作全景H5页面单击“模板”按钮6.1.6设计案例：使用凡科微传单制作全景H5页面添加全景页面添加模板6.1.6设计案例：使用凡科微传单制作全景H5页面展开编辑全景6.1.6设计案例：使用凡科微传单制作全景H5页面设置背景颜色设计内圈背景6.1.6设计案例：使用凡科微传单制作全景H5页面添加素材图片6.1.6设计案例：使用凡科微传单制作全景H5页面添加按钮设置按钮样式并调整位置6.1.6设计案例：使用凡科微传单制作全景H5页面设置动画添加弹窗6.1.6设计案例：使用凡科微传单制作全景H5页面设置文字样式输入文字6.1.6设计案例：使用凡科微传单制作全景H5页面输入文字并保存设置点击音效6.1.6设计案例：使用凡科微传单制作全景H5页面添加“活动注意事项”按钮设置动画6.1.6设计案例：使用凡科微传单制作全景H5页面设置背景音乐设置分享样式6.1.6设计案例：使用凡科微传单制作全景H5页面完整的页面效果6.1H5页面的交互创意设计6.2H5页面的动效创意设计目录Content6.3项目实训6.2.1使用H5+快闪广告提升浏览体验快闪广告是指在短时间内快速闪过大量文字、图片的广告方式。设计人员可在快闪广告中直接插入活动内容或产品介绍，可有效提高用户转化率。制作快闪广告通常需要选材设计、视频剪辑、渲染输出3个步骤，较为复杂和费时。此外，快闪广告虽然拥有吸睛效果，但是信息闪现速度较快，可能会造成信息缺漏。下图所示的H5页面以快闪广告的形式展现，不但具有节奏感，而且更能突出主题。6.2.2使用H5+粒子特效提升视觉体验粒子特效指将大量的单个粒子组合，使其呈现出固定形态，并借由控制器、脚本来控制粒子整体或单个粒子进行运动，模拟出真实的动效。粒子特效常用于模拟现实中的水、火、雾、气等物质的效果。下图所示的H5页面采用科技风格，以浩瀚的宇宙为背景，应用粒子特效，通过星辰粒子的组合与聚散让整个页面效果充满科技感。6.2.3使用H5+视频提升内容的展现效果视频也是H5页面中常用的动效展现方式。设计人员可直接在H5页面中插入视频，并对视频进行设计，以提升内容的展现效果。右图所示的H5页面采用手绘动画的方式引入游戏场景，其中穿插相关影视视频，以此达到了推广游戏的目的。6.2.4使用H5+多屏互动提升营销的娱乐性多屏互动指用户在多个屏幕上体验活动，在每个屏幕上的操作都会同时反应到其他屏幕上，一般以双屏互动为主。在H5页面中使用多屏互动能实现手机、平板计算机、电视的互动，打造互动性更强的H5页面。下图所示的H5页面采用了双屏互动的动效设计。在页面的开始是一个人在黑白的孤岛上漫游，朋友扫码互动后，H5中的人物可以跨越至另一个屏幕，实现多屏互动。6.2.5使用H5+GIF动画让画面更生动动画是H5页面中重要的一部分，出色的动画能让H5页面更加生动。GIF动画是一种文件体积小、可压缩、制作成本低的动效类型，多用于小型动效的制作。下图所示为引入GIF动画的H5页面，其通过字体元素的变化，使页面更具动感。6.2.6设计案例：制作快闪广告H5页面快闪广告的制作方式多样，既可以通过专门的编辑器来完成，也能先利用即梦AI生成背景，再借助Photoshop和Premiere进行后续制作。本例先使用即梦AI生成背景素材，接着用Photoshop把文字分割成单独的页面，再通过Premiere制作动效，最后将各部分组合起来，从而完成整个快闪广告的制作。具体操作如下。生成的图片6.2.6设计案例：制作快闪广告H5页面去除部分内容

输入文字“变量”对话框6.2.6设计案例：制作快闪广告H5页面“导入数据组”对话框“将数据组作为文件导出”对话框6.2.6设计案例：制作快闪广告H5页面导入音乐放大音乐编辑界面6.2.6设计案例：制作快闪广告H5页面添加标记为其他区域添加标记6.2.6设计案例：制作快闪广告H5页面添加到时间轴上添加字幕6.2.6设计案例：制作快闪广告H5页面调整字幕选择“反转”效果

6.2.6设计案例：制作快闪广告H5页面添加完成添加“反转”效果6.2.6设计案例：制作快闪广告H5页面参考效果6.1H5页面的交互创意设计6.2H5页面的动效创意设计目录Content6.3项目实训实训

制作元旦GIF动画实训要求运用本项目所学知识，使用Photoshop制作元旦GIF动画。在元旦GIF动画中，不仅要以动画的形式展现文字，还要制作动态的老鼠图像，丰富动效。完成后的参考效果如右图所示。实训

制作元旦GIF动画制作思路（1）打开“元旦快乐动画.psd”素材文件（配套资源：\素材\项目6\元旦快乐动画.psd）。（2）选择“窗口”/“时间轴”命令，在工作界面底部打开“时间轴”面板，单击“时间轴”面板底部的“创建视频时间轴”按钮，创建一帧动画。（3）在时间轴上选择“旦”所在的图层，将鼠标指针移动到图层的最前方，当鼠标指针变为

形状时，向右进行拖曳，将图层调整至“1:00f”处。（4）在时间轴上选择“快”所在的图层，将鼠标指针移动到图层的最前方，当鼠标指针变为

形状时，向右进行拖曳，将图层调整至“2:00f”处。实训

制作元旦GIF动画（5）使用相同的方法将“乐”所在的图层调整至“3:00f”处。（6）在时间轴上选择“旦”所在的图层，单击鼠标右键，在弹出的快捷菜单中选择“旋转”命令，使用相同的方法为其他图层设置动效。（7）选择最下方的老