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

来源:腾讯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

相关推荐

  • 004. 如何关闭IE浏览器在生成原型时候的安全警告

    在上一节中,我们学习了如何生成网页原型的三种方法,当时我们采用的默认浏览器,搜狗浏览器,没有弹出安全警告,一般情况下,如果你的浏览器是IE的话,在每次生成网页原型的时候都会弹出如下安全警告,如图: &nbs…

    2014-09-12
  • 第五章 PC软件首页交互设计

    互联网产品的第一印象就是首页,重要性毋庸置疑,首页可突出设计值或决策者希望第一时间重点表达的内容。现在市场上的WEB产品,APP产品,PC产品等没有完全相同的首页,几乎所有的团队都根据自家的需求与侧重点进行…

    2014-10-12
  • 国内外人气UX/UI/PD设计社区推荐,纯干货

    对于很多人尤其新手而言,要把握最新的设计动态及发展趋势,似乎不是一件轻松的事情。如果你也像我一样是个设计小白,而且正在担心自己设计的作品是否符合客户需求、烦恼找不到设计解决方案、得不到有效的用户反馈…

    2023-03-03
  • 使用Axure制作App原型怎样设置尺寸?

    最近有几位小伙伴儿都提出同样一个疑问:想用Axure设计一个 APP原型 放到真实的移动设备中演示,但不知道应该使用什么尺寸?
    若要解释清楚像素和分辨率需要的篇幅比较长,请大家参考百度百科。
    这里金乌直接给大家提供一个常用的移动设备尺寸列表,制作原型时根据查询的尺寸在axure中设置大小即可,设计完毕后在生成HTML时设置 手机/移动设备 中勾选包含视图接口( include Viewport tag ),并进行配置即可。

    2014-12-31
  • 【译】Axure RP 8 Beta 官方教程 - 钢笔工具

    From: Learn Axure RP 8 Beta: Pen Tool(http://www.axure.com/c/blog/160-learn-axure-rp-8-beta-pen-tool.html)   Axure RP 8 引入了一个新的钢笔工具功能用来绘制自定义形状。自定义形状是基于矢量的,这…

    2015-09-08
  • 『交互指南』即便你已经是一个交互设计师,这篇文章也值得一读,交互设计入门完全指南。

    准备好涉足交互设计了吗?在这篇文章中,作者对交互设计的各个方面做了简单介绍:包括历史、原则、知名设计师,以及他们的设计方法等等。即便你已经是一个交互设计师,这篇文章也值得一读。 相较于网页设计波澜不惊…

    2015-01-27
  • 009.图片组件——axure线框图部件库介绍

    我们在后面的组件使用中,都统一使用“从部件区域拖拽图片组件到页面区域中”   1. 图片载入 1.1 将图片组件拖拽到页面区域 1.2 双击图片组件 1.3 选择合适图片,点击打开 1.4 载入图片时会询问是进行优化。 1.5…

    2014-09-12
  • Web首页交互设计

    关于首页,每天处在互联网的生活中访问的网站首先映入眼帘的,都是网站向你展示的该网站的首页 我们还是来分析下“著名”的百度首页。说起首页设计分析百度就像编程开发第一堂课要讲Hello World!一样..... ^_^。 先…

    2014-09-27
  • Justinmind V6.7新功能简介和下载链接

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

    2015-08-25
  • Justinmind6.8汉化包下载以及Justinmind6.8新功能新增苹果手表部件库

    Justinmind6.8汉化包已经出来了,您如果更新到最新版本截至2015年9月11日 可以下载本汉化包,汉化包来自QQ群:156360020 邀请码iamue 安装汉化的方法压缩包里都有,还有你还可以参考历史版本的汉化包: Justinmind6…

    2015-09-11