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

来源:腾讯ISUX 作者:sisi

科技越发达、人类越懒惰。当我们在信息大爆炸的网络中疲倦于文字和图片,动态影像通常令人为之振奋。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

  写在最后

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

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/807/

(0)
Smiler李想Smiler李想
上一篇 2014-09-27
下一篇 2014-09-27

相关推荐

  • 也许你根本不会用百度搜索

    在谷哥被河蟹之后,大部分时间只有依靠度娘了,一直觉得度娘不好用,其实度娘也是有隐藏秘籍的——左右左右,上下上下BABA。   搜索引擎可以帮助使用者在Internet上找到特定的信息,但它们同时也会返回大量无关…

    原型设计教程 2014-12-08
  • 【Mockplus教程】表格

    Mockplus对于表格的控制,采用的是通过文字来控制外形和数据的方法。稍微熟悉后,你会发现,这种方式可以很快地组装表格。 如图,这里是一个表格: 双击这个表格,进入编辑,看到如下的文字: 好像很难? 别急,我…

    Mockplus 2015-10-17
  • Mockplus原型交互跟我做之10–关闭弹出面板的那点事儿

    弹出面板,是我们经常使用的组件。今天,就来说说关闭弹出面板的事儿。 内容相对不那么好玩,但是挺重要,所以你需要了解。耐心阅读下,你发现并不复杂,同样是简单的。 一、自动关闭 默认情况下,弹出面板弹出后,…

    2016-07-07
  • [自译]我们如何使用原型,原型又如何让我们更加高效

    原型是至关重要的,它能够帮助你的团队创造出最好的产品。它是一个机会来试验你的想法,并转化为有形的状态,你可以继续测试或者展开。当你的原型失败之后,你也会很软着陆-这里还有很多机会去迭代和改进。

    2016-09-08
  • 008. 认识axure部件库中各个部件的属性

    在axure中每一个部件都有自己的属性,下面这个表格,我们就首先来了解认识一下!以下内容来自网站蓝图,版权归原作者所有! 属性名称 属性说明 属性举例 标签 用来标示部件的名称,在axure中,部件名称并不是唯一的…

    2014-09-12
  • Axure中文版使用指南 PPT

    slideshare被和谐了,原来的PPT看不到了。大家移步到百度文库看吧。这个视频教程适合新手阅读,可以让你快速了解Axure RP.

    2015-01-01
  • Justinmind V6.7新功能简介和下载链接

    V6.7.0,提供Illustrator矢量图形和各种文字和按钮控件的复制/粘贴功能。此版本的主要目的是使您能够直接从Illustrator复制/粘贴矢量图像,同时,我们也修正了一些小错误。 从Illustrator复制/粘贴/编辑 现在已经支…

    2015-08-25
  • 以简书为案例讲述「尼尔森十大可用性原则」

    尼尔森(Jakob Nielsen)是一位人机交互学博士,于1995年1月1日发表了「十大可用性原则」。 1995年以来,他通过自己的 Alertbox 邮件列表以及 useit.com 网站,向成千上万的 Web 设计师传授 Web 易用性方面的知识,…

    原型设计教程 2014-10-09
  • Axure教程:如何学习AxureRP Axure学习方法

    【编者按】本文作者@朱军华Ronzhu , 本文借用官网的描述定义,介绍了在学习AxureRP过程当中所要经历的各个阶段,也结合了作者自身学习AxureRP使用的经验,讲一下在各个阶段中的一些学习方法和经验总结,以帮助刚开始学习使用AxureRP的朋友更好的制定自己的学习计划,以便尽早掌握其使用方法,设计出中高保真度的原型。

    2015-01-01
  • 016. 动态面板——axure线框图部件库介绍

    1、什么是Axure的动态面板 按照Axure官方网站的解释 :动态面板控件(Dynamic Panel)可以让你实现高级的交互功能,实现原型的高保真度。动态面板包含有多个状态(states),每个状态可包含一系列控件(你可以把一…

    2014-09-12