如何自建外贸网站,网站建设的第一阶段,微信网站建设方案ppt,利用百度网盘自动播放做视频网站这是该系列文章的第2篇#xff0c;我们仍然会选择三个互动营销案例#xff0c;从技术角度加以分析。这个系列并非为程序员而写#xff0c;因为这些内容就是我们的日常工作。我们的目标是让更多的朋友能够了解技术可以实现的效果#xff0c;以及更重要的——不能实现的效果。…这是该系列文章的第2篇我们仍然会选择三个互动营销案例从技术角度加以分析。这个系列并非为程序员而写因为这些内容就是我们的日常工作。我们的目标是让更多的朋友能够了解技术可以实现的效果以及更重要的——不能实现的效果。技术不是互动营销的全部但技术可以让互动营销更加精彩。1. 民生信用卡 x 敦煌壁画该项目是民生银行与敦煌壁画合作推出的定制卡面信用卡推广利用敦煌这一传统文化符号来为信用卡产品增加新的卖点。近几年随着故宫文创的火热许多传统的文化符号被不断挖掘出来并用于推广各种竞争激烈的产品敦煌作为佛教的重要标志自然能够在其中发挥重要的作用。说实话我个人看过之后被转化了……该项目使用了全手绘风格的视频将敦煌壁画的特色进行了较为完整的展示。视频之后是敦煌系列信用卡的介绍这里使用了知名的 swiper 控件来实现不同卡片的横向切换。每张卡片都有指向办卡页面的按钮方便用户快速进入转化环节。从引用资源方式来看该项目在开发过程中使用了 Vue 框架关于什么是框架我们之后会为大家介绍这是一款优秀的 JavaScript 框架。该框架为H5的开发提供了众多优秀的特性加成例如按需加载/延迟加载等加载策略的方便调整更加重视页面逻辑的实现等等。该页面中使用了视频和大量的图片设计风格要求导致文件数量和尺寸都会相对较大因此加载策略就变得非常重要。通过对文件的压缩和加载策略的调整可以保证用户有更为流畅的浏览体验。2. 滴滴打车H5丈母娘的账你敢算么该项目主要为推广滴滴打车的代叫功能与以往走温情路线的方式不同这支H5选择了丈母娘和女婿这种看似有些“矛盾”的关系并使用丰富的动画和戏剧化的情节来表现其中的冲突最后引出需要推广的产品功能。从技术角度讲该项目的互动方式非常值得参考。整个页面分为几个相对独立的场景每个场景的交互方式基本类似通过横轴按钮的左右拖动来播放不同的动画。在用户按钮拖动过程中通过程序实时监测按钮所在的位置并对上方左右分屏的动画做放大和缩小的处理。判断动画是否开始播放的逻辑点是按钮位置最左或最右和手指抬起的动作这种交互方式交互非常自然。但是在实际开发中还需要考虑到一些特殊情况的处理例如动画播放未完成时用户拖动按钮看另一段动画之前正在播放的动画状态需要重置到播放的起始点等等。这些细节都是在开发过程中需要格外注意的。从页面代码中可以看出动画的实现是通过分帧图片的方式顺序播放完成后最后几帧不断循环。我们从外部无法判断采取这种方式的目的但是可以确认的是这种方式将导致页面的资源量非常大。总计三个主场景加两个小场景每个主场景两个动画每个动画大概几十张图片算上背景音乐等需要加载的文件数量过百。而从加载时间轴中也可以看出大量的文件加载导致前期loading的时间较长这将很可能导致页面跳出率偏高。9秒的loading时间并非不可接受但如果能够做一些更加有趣的小动画可能用户会更愿意等待。此外如果把这些动画换成视频或者是gif都可以极大减少资源加载量让页面的浏览更加顺畅一些。当然不同的资源文件格式其控制方法和逻辑都需要做出相应的改变。3. 网易考拉轻松瘦该项目是网易考拉瘦身产品专场的推广关注“瘦身”这个永恒的话题。整个页面的核心就是一段视频但是在视频的播放和交互方式上非常新颖。从页面代码和资源文件中可以看出这是两段视频的合并其内容有所不同但完全同步播放。视频的上半部分是疲惫瘦身模式下半部分则是轻松瘦身模式。页面通过CSS控制视频的宽度为手机屏幕宽度的两倍播放时用户只能看到一半的视频内容另一半则隐藏在屏幕之外而这也恰恰是这种交互方式的核心。如果不加操作用户看到的是上半部分的疲惫瘦身模式内容。用户长按屏幕时将会触发视频位置的调整视频整体上移50%用户就看到了下半部分轻松瘦身模式的内容上半部分内容则跳出了屏幕之外。对于视频切换的控制方法很多如两段视频一段播放、另一段播放但隐藏通过程序切换或者两段视频在不同的层级一段播放时会盖住另一段程序通过改变视频层级来切换遮挡关系等等。在选择控制方法时要考虑程序的执行效率问题。如果视频过大或者手机过旧程序执行效率偏低在进行视频切换时就很可能出现不太流畅的情况或因为加载问题导致视频播放不同步等。该案例使用视频位置的切换方式能够最大程度地保证视频内容的流畅切换而两段视频合并成一段也解决了同步播放的问题。不能说这种方式一定好但在该案例中这种切换方式应该是最合适的。在其他的项目中还应该根据实际项目的需求和资源文件的制作难度来区别对待。这一期的三个案例我们刻意选择了使用视频、动画并包含丰富交互功能的页面希望能为大家带来一些启发。众创科技是一家专注于创意实现的互动营销技术供应商我们为您提供最全面的互动技术服务更为您提供面向业务的技术方案选择和排雷服务。如需了解我们的服务内容请访问我们的官网www.masscrunch.com
