如何利用动态影像提升网页魅力?

  网页上以动态影像传达信息,从技术上早已不是难题。如何围绕主题,让其形式追随传播的内容,运用动态影像使得网页更具魅力?


  科技越发达、人类越懒惰。当我们在信息大爆炸的网络中疲倦于文字和图片,动态影像通常令人为之振奋。UGC短视频社区的红火,说明用户渐渐喜爱自产视频记录和表达;即时通讯软件功能从单一的发送文字加入音视频,用户的交流方式正在改变。网页上以动态影像传达信息,从技术上早已不是难题。如何围绕主题,让其形式追随传播的内容,运用动态影像使得网页更具魅力?

  A.关注内容,迅速带入

  视频,是最直观的信息传达方式,大大减少了文字的阅读成本,适用于短时间内讲清楚一件事,有利于传播分享。先从基于用户内容的创意众筹平台说起,Kickstarter相信,“一个好的创意,透过适当的沟通,可以快速地广为流传”。随着观众对视频表达的青睐,视频成为项目创意的主流曝光方式,大多数创意者选择深情并茂演说,使得idea本身更具说服力和感染力。Kickstarter每年都会选取年度最佳项目,制作网站的年度集锦宣传专题页,提高网站平台的品牌魅力。专题页先飞入提纲挈领的slogan和几则关键数据来撑满浏览器,缓解网页加载时间,让大视频背景动态影像得以流畅切换播放。年度项目以动态影像方式把新用户迅速带入内容,了解平台理念。


  →Kickstarter年度集锦

  B. 序曲铺垫,身临其境

  文字和图像还不足够身临其境?用视频创造场景感,增强用户的真实体验。Eleks公司创意制作的GoogleGlass概念网站是这么做的,网页前加上一段动态影像序曲,呈现沉浸式的场景。戴上GoogleGlass,通过主观镜头让用户把真实生活想象成电子游戏世界,给足用户脑补画面。序曲过后,在动态影像中加入鼠标互动,通过慢慢引导有重点的把技术信息等内容阐述清楚。增强体验的同时,也不失为提高网站停留时间的有效途径。


  → Google Glass Experiment-Real-Life Digital Game

  C. 一条好线索,影像碎片蒙太奇。

  影像碎片也足以撑起一个有趣的小视频,首先需要寻找一条好线索。先举个小栗子,Google今年的国际妇女节Doodle选择动态影像突破常规的艺术插画形式,点亮搜索首页。这枚视频Doodle以世界各地的妇女的一个笑容、一句地方语祝福拼贴出一支影像串烧。亲民的路人形象与平民式镜头感拉近了用户距离,视频欢快的小节奏配乐格外小清新,令人感到简单轻松、贴近生活。


  →Google Doodle-国际妇女节

  影像碎片的节奏与想要传达何种情感紧密相关,怎么形成节奏感?把相似镜头感的影像碎片,以一致画面运动速度组织起来,就能构成特有的秩序。 NISSIN(日清食品) 在进入官网前加入了动态影像,通过特写慢镜头把日清食品、食材和人物满足的表情组织起来,以5秒一个片段切换和慢镜头内容形成快慢对比。视频开头的动态影像可以设置烹饪倒计时时间,作为线索,点题“速食”,并加入新鲜食物的画面让人产生等待日清速食的美好体验,唤醒用户的味觉,带着好心情进入官网。


  →NISSINGroup

  寻找一条好线索串起碎片化影像,可使得整个创意表现的丰厚完整。再举个财大气粗的栗子,年初的Mac30年专题页企划,彰显了Apple品牌的磅礴气势。”同一时间,不同时区,使用Apple设备创造奇迹。”摄制团队在五大洲不同时区选取15个拍摄地点,以洛杉矶的摄影棚为指挥中心,同一时间用 iPhone5s拍摄素材,记录世界各地的人使用Apple产品所做的超乎想像的片刻。由于同一时间拍摄与指挥中心的实时沟通和影像同步,Mac30年视频在几天时间内制作完成。从整个记录与制作团队的使用设备到被记录的内容,紧锁主题,强有力传达Apple的品牌承诺:将科技的创造力赋予每个人。


  →Mac 30-years


  →Mac 30-years behind-the-scenes Story

  D. 故事与话题,优雅地劈情操

  网页通过讲故事的方式把信息富有情感的传达给用户,是未来的趋势之一,而视频是讲故事的好手段。Mac30年之后的故事还没完,Apple在官网 ipad栏目开辟专题作为品牌承诺的延续,“你的诗篇”系列故事,记录着人们对生活的热爱和激情。值得一提的是此专题已陆续持续半年了,激情不断,差不多每月会带给我们新的故事和惊喜。最近此专题跨平台,在地方电视台投放了电视广告的剪辑版本。“你的诗篇”企划最初源于年初 Apple拉开的序曲,《Your Verse Anthem》(你的赞美诗)中对人生的崇高追求和真正生活的意义的解读,在Apple的品牌理念中注入生活态度。


  →Apple.com Your-verse

  设立一个开放式的话题展开用户互动,通过动态影像娓娓道来。Eastpak品牌广告活动网页以唯美的影像碎片记录方式表达宣传话题:#The last time you did the first thing#(最近一次做生平第一次做的事情),视频碎片轮回滚动5s左右表达一个事件。唯美的镜头让视线无法移开,动态画面阅读顺序抢先于文字并略带意识流节奏,向旅行者和爱好极限运动的年轻用户传达了一个38年老品牌的勇于突破和坚持。网页互动落地于官方Facebook留言墙,记录此话题的延展讨论。


  →eastpak.com

  写在最后

  也许有人感叹视频的制作成本高,但创意无价。如果你有心思,不妨为产品寻觅一条好线索,抬起照相机或手机,捕捉搜集些影像碎片,故事就在身边。浮躁的互联网还有什么能吸引眼球、打动人心?出其不意和产生共鸣。

时间: 2024-10-03 15:13:36

如何利用动态影像提升网页魅力?的相关文章

网页设计新人要学会利用威客提升自己的经验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 ​初从事网页设计的新人,既然选择该行业,一定是有着对设计.对生活的爱好.又非常想要一展拳脚,将自己的想法与爱好充分展现出来.但却时常出现下 笔困难.经验不支的现象.如果单纯是模仿与借鉴仍旧很难成长起来,身为网页设计者实践比理论比兴趣甚至比理想来得重要的多,更何况是网页设计新人.但往 往,想法与现实是违背的,又或者可以说现实没有想象的那样简单.

[译]如何运用最新的技术提升网页速度和性能

本文讲的是[译]如何运用最新的技术提升网页速度和性能, 原文链接 : Why our website is faster than yours 原文作者 : by Declan 译文出自 : 掘金翻译计划 译者 : hpoenixf 校对者: MAYDAY1993,circlelove 我们最近升级了我们的网站.虽然这主要是界面方面的大调整,但作为一个软件开发者,我们更关注在技术细节上面.我们的目标是加强控制,关注性能,在未来可以灵活地调整和让在网站上撰写内容变得有趣.下面讲述了我们是如何让我们

如何通过预加载器提升网页加载速度

预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措.Mozilla 官方发布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的提升. 它并不是一门新技术,有人认为只有 Chrome 才具备这个功能.也有人认为它是有史以来提升浏览器性能最有效的方法.如果你第一次接触预加载器,也许心中已经有了无数个问号.什么是预加载器?它是如何提升浏览器性能的? 首先需要了解浏览器是如何加载网页的 一个网页的加载依赖于脚本文件.CS

利用HTML5做网页

利用HTML5做网页 首先,我们要声明并创建文档类型,我们不再HTML 4或XHTML 1.0 那样 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional.....声明,我们可以这样写: <!DOCTYPE html> 看看吧,简单而明显,不区分大小写.它可以更容易向后兼容.至少可以节省你一些打字的时间. 我们现在已经为HTML 5文档定义了类型.到目前为止一切顺利.现在,这们看看HTML5的新标签.在我们浏览新标签之前,先看看我们平常是怎么写的: &

125个提升网页可用性的优化小技巧(四)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> <有图有案例!125个提升网页可用性的优化小技巧(三)> 尽可能兼顾不同用户的知识和技能水平 用户可能是新手.专家或介于两者之间,要根据用户情况设计界面. △ 使用适当的新人引导(四种主要的新人引导策略) 这四种用法刚好可以用一个2*2的矩阵来表示.根据下方图示选择最适合你界面的方式: △ 为新手用户添加提示而不干扰专家用户 △ 使用卡片分

125个提升网页可用性的优化小技巧(三)

  往期回顾: <有图有案例!125个提升网页可用性的优化小技巧(一)> <有图有对比!125个提升网页可用性的优化小技巧(二)> 除了引导用户,还要减少他们的认知流程,以保持流畅状态. 尽可能少让用户做计算 千万别把计算这种事情丢给用户,让计算机来处理. △ 显示剩余数量 在界面内体现用户当前所处位置 界面就像机场,如果没有"你在这里"的标记,用户会迷路,因此记得提供标记. △ 在导航菜单上突出当前所选 △ 在复杂的界面中提供面包屑导航或步骤图示 △ 在页面标

125个提升网页可用性的优化小技巧(二)

  第一期回顾:<有图有案例!125个提升网页可用性的优化小技巧(一)> 让常用功能和重要数据信息更接近用户 预测用户的意图,让他们尽可能接近目标. △ 筛选出或跳至用户正在搜索的条目 △ 将用户常选项目列为默认选项 △ 产品列表页上把重要数据信息展示出来 很多时候用户需要像踩弹簧高跷杖一样,点击一个产品,查看信息,返回上一页,再反复操作以查看其他产品.这种设计的可用性差.应把重要信息直接放在主要页面,减少用户反复操作的次数. 如果你怕这样页面会杂乱,也可以设计成鼠标悬停时显示(如下面这样)

利用交换机提升无盘网络性能

一个稳定快点的网络环境对于网吧来说是很关键的,网络现在流行的有千M网络和百M网络,万M的也有,无盘网吧网络要达到更大M的网络环境.交换机在网吧网络环境中扮演很重要的角色,如何利用交换机提升无盘网吧网络性能呢? 要提高网络传送速度我们只能用好点交换机网线网卡或做汇聚等来解决. 必须具备网吧里的所有交换机为纯千M,所有机器网卡为千M网卡,达到这样条件后网络中机器与任意机器之间的速度自然就是1000M了,千M交换机是指所有端口都是千M口,而老点的交换机象有26口的那种. 一般是24口百M,2个主干千M

win7系统下提升网页浏览速度的方法

  许多用户在win7系统中都遇到过打开网页出现速度慢的问题,对于这种问题网页打开速度慢是由三部分原因造成的,其一是网站所在服务器资源不足,造成网页打开速度慢,第二种原因是因为宽带网络不稳定,造成的网络丢包.延时高,前两种是我们无法通过自身解决的,那么我们看下第三种,第三种也是本文主要介绍的内容,我们通过对系统注册表修改,从而达到快速访问网页的目的,下面和小编一起看下吧! 设置方法: 1.首先打开Win7系统的注册表编辑器,只要打开开始菜单中的运行,然后输入regedit 回车即可打开; 2.注