使用创意视频背景视频的网页设计.docx
《使用创意视频背景视频的网页设计.docx》由会员分享，可在线阅读，更多相关《使用创意视频背景视频的网页设计.docx（41页珍藏版）》请在冰点文库上搜索。
使用创意视频背景视频的网页设计
使用创意视频（背景视频）的网页设计
长久以来，视频一直被视为一种最具力量和效果的视觉沟通工具。
它能够向广大的观众传达直接而清晰的信息并且让观众关注在这些信息上。
用一个在视觉上具有感染力的视频来介绍产品、服务或者品牌是一种非常杰出的方法，并且能带来更多交互层面的用户体验。
因此，优雅的、具有创意的以及专业的视频在网页设计中正逐渐变得流行。
一些设计师甚至走得更远，在浏览器中利用背景视频的支持，利用交互的导航菜单，流畅的转换和特殊的视觉效果，营造出类似蓝光的体验。
这些都可以通过Flash或者HTML5来实现，然而大多数网站只使用Flash来体现背景视频。
为了丰富跨平台的浏览体验，我们有必要考虑增加后备视频方案来满足那些不支持Flash播放的浏览器。
然而，我们并不想就技术细节做深入讨论，我们希望找出什么才是真正适合设计师在网页上运用的。
一个包含背景视频网站的表现情况会明显依赖与用户的网络链接速度。
背景视频并不完全匹配每项设置;他们也不能在在线杂志和博客中手动调试。
然而，他们可以在娱乐和一些特定公司的网站上表现的非常出色，比如用于表现艺术的品质，品牌甚至是更高层级的标准。
正如你将看到的，他们在portfolio（作品选辑）类网站，时尚网站和活动类网站上表现出色。
下面你可以找到全面实施屏幕动态视觉效果的案例，也许很优秀或者并不那么优秀。
时尚类网站：
服装，鞋子，珠宝（点击图片进入）
BulgariB.Zero1
Bulgari,一个来自意大利的珠宝和奢侈品零售商，运用一个背景视频来展示（或者庆祝）他的新B.Zero1产品线。
尽管现在整个网站表现的很自然也很出色，但此前也存在很大的潜在问题使得浏览器便慢而影响网站的浏览体验。
这也许就是Bulgari利用小版本来代替每个页面上的视频的原因;但这给人带来了层层覆盖的感觉，为销售的产品增加了高贵的感觉。
整个网站总体感觉非常像DVDs，有交互导航菜单，流畅的转换和特别的视觉图形效果。
Uniqlock
Uniqlock是Uniqlo的一个活动广告网站，Uniqlo是日本最大的休闲服饰零售商之一。
包括一个常规的舞蹈视频，时间信号的音乐和时钟工具，设计师利用背景视频技术精心打造了一种独一无二的用户体验。
这是一种通过极具创意和风格的虚拟24/7的表现手法来展示Uniqlo的服装。
它赢得了2008D&AD得网络广告类一只黑铅笔！
GudrunogGudrun
GudrunogGudrun是一个由两位来自Faroe岛的服装设计师创立的手工服装品牌。
设计师用背景视频来展示他们的服装秀，并且通过巧妙的转场将其始终贯穿整个网站。
这个网站相比其他的会有点老，但是他依然非常有趣且吸引人。
JayJaysDance/Off
Dance/Off是年轻时尚品牌JayJays为其新产品线打造的3D在线商品目录网站。
这个网站的概念确实非常特别，但在执行上有所欠缺。
3D是一种创新的方式，但是也因此使得网站不能实现。
没有3D的实现效果时，用户会发现视频呈现出象素化效果并且没有吸引力。
交互元素也只是在概念上吸引人，但在使用网站时长时间的加载和大量的指令令大多数用户选择离开。
此外，页面的加载时间过长。
有趣的一点是：
你可以通过键盘来导航网站。
YvesRocher:
ToutleFilm
“Cequiestessentielrendbelle”是这个网站上增进的一个小视频。
这个视频挑战了任何年龄的性欲的禁忌，突出其生理上的作用。
网站的其余部分精致且简洁，使系统资源变得简洁。
这个视频不是自动播放，要求用户首先点击巨大的绿色按钮“Play”才能播放。
简洁且友好
LouisVuittonJourneys
LouisVuittonJourneys是一个推荐三位足坛传奇人物ZinedineZidane,PeleandDiegoMaradona的广告活动网站。
视频前的热场有点太快以至于无法捕捉到加载是的每个信息，但总的来说控制的不错。
视频导航和转换非常流畅，而且视频本身具有互动效果。
Valentino
Valentino是一个来自意大利的国际时装公司。
在这个技术上他做了很多精妙的以及轻化处理。
虽然视频元素贯穿与整个网站，但是在主页上如果你不选择一个导航条目视频将不会自动播放。
因为由你选择是否开启视频，所以声音也在你的控制之中。
更加友好、干净的设计。
Byblos（->Runway）
Byblos是一个非常巧妙地利用背景视频来完成的意大利时尚之家的网站。
首页是一个单帧页面，整个网站的背景音乐持续不断除非你将他关掉。
但一旦你跳过首页，让真正的视频素材仅限于网站得某一些部分,即”Runway”部分。
这使得使用这项技术更加地自然;整个网站并没有过渡地依赖资源而且倾向于保证缓冲速度。
Nike:
M6
带有JordanMelo签名的六号NIKE球鞋是背景视频的推荐重点;他一个多部分的幕后新产品设计观察。
有一次的，这里存在一个潜在的滞后问题，因为影片非常大并且循环不断。
相比一个视频自动自动转到下一个视频，网站可以更加简单地加上暂停和提示用户继续前进，让他们可以有时间去消化他们刚才看到的东西。
控制视频暂停是可见的，所以用户有这个选择，但是自动暂停也许更有帮助。
AntiSweden
AntiSweden是一个挪威的时尚品牌，它巧妙地采用背景视频来完成抽象的表现方式。
没有采用厚重的图像和声音来完成这个技术，这个网站不像其他资源密集型的网站，它做了一个很棒的改变。
这个网站证明了如何使用轻量级的技术来完成富有魅力的概念。
ISurfBecause
“ISurfBecause”网站是Billabong的数字营销活动的一部分。
在这里，Billabong利用在主页上的背景视频来推动他的活动，但是这个技术出现在更深级的页面中。
这样使得网站对于CPU更加的友好，即使在主页效果后植入的YouTube视频稍感欠佳。
一个有趣的想法：
有时暂停视频，知道时间线显示为适合观看才继续。
VibramFiveFingers（Becautious:
NSFW!
）
FiveFingers是一个Vibram的鞋子制造品牌，它被认为是一个完全运行于背景视频之上的网站。
执行也非常有意思。
独特的流线型导航元素贯穿于整个网站，这个有趣的网站同时推荐产品本身和其相关的数据，营造了一个确实独特的概念，在运用这项技术上堪称完美。
如果是在网速比较慢的地区，Thesplashpage让用户可以自由选择是否要进入正常网站或是全屏页面。
SamEdelman
SamEdelman是一个时尚鞋子品牌，它展示了一个可以不运用视频技术来完成的交互级别。
在这个案例中，巧妙的动画代替了视频。
整个网站清新雅致，就像背景视频的调子和主题，做得非常到位。
同样，没有音乐，清爽依旧。
一种背景视频非常美妙的替换。
汽车网站
ToyotaAvalon
这个为ToyotaAvalon宣传的网站是通过五个目的地以及车辆的特征来展现五个完整的互动之旅。
这个网站的背景视频创造性的采用最充分和最有潜力的部分。
一个宣传网站，基本上极具互动效果，创意，精良的图像和导航。
创意由NorthKingdom和Saatchi&Saatchi合作完成。
Scion
这个是ToyotaScion的官方网站,他的背景视频似乎并未得到充分利用。
该网站不接收你的声音添加到背景视频中，虽然众多的视频转换觉得他们应该是健全的;因此视频感觉有所欠缺或者部分被损坏了。
其他视频在较小的单独窗口打开，感觉像是有一次错过采用这个技术。
顺便提一下：
页面上的字号太小了。
饮料和食品网站
LemonAid
LemonAid是一种有机饮料，公平贸易几乎完全消失，而该公司运用了一种复古风格的背景视频来告诉每个人这是怎么一回事。
在进入主页时，系统资源使用明显增加，这意味着一些用户将感觉到视频和声音的卡壳。
除此之外，整个概念非常简单，并且产品的实施工作完成地非常好。
一个主要的缺点：
显示的字号太小。
RussianStandardVodka
俄罗斯领先的高档伏特加酒在其大多数网站信息中表现的低调而含蓄;主要部分会自动通过宣传材料进行筛选。
该导航是上下文感知的，被显示在菜单中供用户徘徊。
你也可以点击视频暂停播放。
Elcultoalavida
“Elcultoalavida”是HavanaClub的一个广告活动，他是一个由圣克鲁斯城北，古巴创造的甜酒品牌。
背景视频在整个网站中被用作多个用途。
一切从生活与电影胶片出发成为互动元素，影片充分配合该品牌的外观和色调。
TubGin
TubGin是一个杜松子酒品牌，他用视频来体现该项目的幽默和强硬的形象，同时提供有用的产品信息。
你的CPU将会进行一系列费力的运转，但鉴于该网站是如此有趣，所以你几乎感觉不到这些。
BattleoftheCheetos
BattleoftheCheetos是一个在线推广的多玩家的游戏网站，游戏的复杂性足以让用户不能自拔。
在Flash电影中的各种有趣的视频元素，它生动地邀请用户参与进来。
由NorthKingdom和Goodby,Silverstein&Partners.开发完成。
Asylum626
Asylum626是Doritos的一个广告活动，整个活动表现了一种类似恐怖活动的用户体验。
“治疗”活动仅在下午六时至上午06时进行，用户可以预约“参与”。
从整个网站来看看，有一种类似一个人在电影院看恐怖片的感觉。
但对于浏览这个网站的体验，当看到最终产品之后，这些过量的恐怖关系不大。
MyAmoy
AmoyFood是东南亚食品和饮料品牌之一，使用背景视频来补充他的互动宣传网站。
该网站可让您进行实际视觉部分的添加并且看到他们的过程。
准备好浪费一些时间在配方制造商的部分，它是整个活动突出的重点。
音乐和舞蹈网站MusicAndDanceWebsites
WhiteLies
WhiteLies是一支来自伦敦西部的另类摇滚乐队，当用户浏览网站时，网站使用背景视频来播放音乐视频列表。
设计师对视频分辨率做了一个糟糕的选择：
在高分辨率下，它看起来显得像素化且模糊–即使是大一点的分辨率也应该做得更好。
大多数导航活动不完整，主要原因在于外部链接在新标签页中打开，留下少量资源为主的视频继续播放。
此外，即使该网站是一个乐队网站，但是网站在默认打开情况下是静音的，这是一个不错的选择。
SickCityClub
SickCityClub是一个来自英国伯明翰的独立摇滚乐队，该网站采用视频播放技术来支持用户的浏览。
从另一方面看，视频播放从来没有中断或滞后的状况出现。
对于其中大部分重量级资源元素来说，这点似乎有些不同寻常。
这些元素在这里似乎被优化了许多，使得其能非常好得适应网站使用。
TomatoJaws
TomatoJaws是一个来自乌克兰的电子乐队。
他使用具有气氛渲染作用的背景视频作为独特的用户导航。
不过，这里的差别是音乐录像，在后台播放的不一定是他们的音乐。
事实上，在一个短视角内，乐队的音乐视频在一个较小的播放器中打开，而背景视频则继续播放，而消耗的CPU是超负荷的，并使音乐和背景视频相互造成影响。
ArcadeFire:
NeonBible
一开始网站看上去比较简单，只是重点推荐了一个音乐录像，但观众可以随后自由将有趣的元素放在一起排序播放。
这里仍然有一个资源过于庞大的问题，即使这已经是可以想到的最低限度控制资源的方法，但是结果仍然可以想象。
RadioSoulwax
“PartoftheWeekendNeverDies”是一部由导演SaamFarahmand拍摄的关于电台Soulwax的２００６夏季巡回的纪录片。
网站特别利用背景视频创造了一些功能：
它使用户能够通过鼠标点击产生不同的循环、组合，从而创建自己的视频剪辑。
在资源密集型网站中，这是一个有趣的例子。
DestroyRankin
为庆祝青年音乐的10岁生日，７０位世界上最伟大的音乐家和视觉艺术家大胆突破，在音乐家Rankin标志性肖像的基础上进行再次创作。
一句话，艺术也是摄影工作一个有价值的补充
1001Attitude
1001Attitude是巴黎Montfermeil的一所舞蹈学校，它使用背景视频来展示学生的舞姿，有时起到热场的作用。
这样的使用对舞蹈学校来说很好，但是视频为适应背景而被拉伸地变形，这样一来原本优雅的效果就被削弱了很多。
RandomDance
RandomDance,一家国际知名的舞蹈公司，背景视频在其主页上得到充分展示。
当你进入内页，会用到一个较小的视频播放器，这更加适合于网站的流量和结构。
酒店、餐馆、酒吧和夜店网站
Iberostar
“渡假，我们都是的星星”是Iberostar渡假村为推广安东尼奥班德拉斯而提出的活动口号。
一个互动的背景影片将带领你身临其境地进行一次虚拟之旅。
这次参观以一种有趣的方式为酒店提供这方面的经验。
TheWood
TheWood是一家位于布鲁塞尔市中心的全新酒吧/餐厅。
设计师使用背景视频营造了一种温和的气氛，似乎以适合其餐厅独特的木质感觉和他的装修方式。
这次导航采用了一种奇妙的结构，使其与整个网站体验浑然天成。
JazzowniaLiberalna
azzowniaLiberalna是一个音乐俱乐部和餐厅，它将这种技术以时尚的方式来呈现。
添加菜单以外的各种元素，业主们汇集了爵士乐历史上的很多信息，并显示在一个简单的互动年表上。
该网站的其他部分出现了也完成地非常流畅。
在背景的基础上打破一两次可能会有所帮助。
Byblos
Byblos是克罗地亚Porec的一家舞蹈俱乐部。
它使用背景视频，不仅显示了俱乐部本身的场景，而是建立起了他的调子。
该网站很难在系统上运行，但你一开始就会被告知，所以要做好准备。
专场和悬浮层和背景融合地非常到位，相互之间合作也非常完美，不会产生偏离。
广告、设计代理公司和电影工作室
Razorfish
Razorfish公司是一个市场营销，互动体验设计的企业机构。
他使用的背景视频巧妙且不低调。
整个网站之用了很少的声音和有力的图形来表现，工作的流畅自如。
LessRain
LessRain是一个数字创意机构，它在伦敦，柏林和东京均设有办事处。
他在网站上使用背景视频以配合网站的整体环境。
但是，由于视频资源在其他网站上，所以在资源库中打开的视频会在新的播放器中播放，而不是在后台运行（其中主视频停止播放）。
随着这类工作逐渐被展示利用，拥有一个更大的介绍似乎更为合适。
1stAveMachine
1stAveMachine是一家来自纽约市的CGI，视觉效果和动画制作公司，他们使用视频背景来丰富其网站的用户体验。
在后台播放的视频序列并不总是配合导航中的元素;在许多情况下，它们使内容难以辨认。
IDEALProductionCompany
IdealProduction公司是一家来自华沙，波兰的动画设计工作室，它使用一个交互式导航元素以提高整个背景视频在网站上的利用率。
这种导航似乎也是因为那是在一个较小的独立的播放器播放网站中的大多数视频。
尽管如此，由于这些影片的特质，较小型的演示在这里是起作用的。
BlackBeltMonkey
BlackBeltMonkey是德国的通信互动设计公司，这里的背景影片有一个微妙的变化。
虽然增加了一些独特而奇怪的互动元素，设计师始终保持背景的完整与统一。
还有一些关于文字和背景颜色匹配的问题，有一些呈现出难以辨认的标题。
Marketel
Marketel是魁北克，加拿大最大的广告公司之一，他使用了一个有效的元素来引导悬停背景视频。
时尚的背景增加了复杂性，它依然被使用在网站的其他部分。
但是，当电视广告在资源库中运行，背景会给用户带来很大的滞后感。
Designkitchen
Designkitchen是一个互动设计机构，在数字界屡获殊荣：
社交，病毒，移动和网络。
它将背景视频运用于整个网站中，每次播放的影片取决于你的导航。
特别是在新闻部分的影片，不停地循环重复（有时交替进行，但很少）会使他们转移了重心。
此外，在目录中一些白色背景和白色文字的组合，给用户的阅读也带来了困难。
LukasLindemannRosinski
总部设在Hamburg的广告公司的LLR（卢卡斯，林德曼，Rosinski）也同样使用了这种技术。
伴随其独特的导航设计元素，设计师将整个网站营造出一种时尚的感觉，给用户留下深刻印象。
WorkingElement
WorkingElementLLC公司是由导演，摄影师，作家，排字，编辑，插图师，设计师和摄影师共同构成。
该网站使用背景视频来说明其名字的意义所在。
不过，由于打开作品集后视频在后台继续播放，感觉有点刺激过渡。
同样，这个想法很有前途，但可以运用时做一些调整。
Metaproject
Metaproject是一个纽约的创造性机构设。
它的背景视频在某些方面比我们所看到的运用得更加巧妙和宏大，但从来没有让用户受到干扰或分心，这点是很难做到的。
页面和资源库的背景是不同的，但是过渡是平稳的。
MediaNovak
MediaNovak的背景视频处理令人印象深刻，因为很少有过度刺激。
但它丢弃在投资组合中部分球。
背景以缩略图填充，但它会因为你鼠标移动的速度而滚动得太快。
没有静止的一刻。
当你打开一个窗口，背景的持续滚动可能会令某些用户分散注意，从而导致不快。
Filmhouse
Filmhouse是一家电影工作室，他的网站上也结合使用了背景视频技术。
（以及从少量到大量的系统资源的使用）像在其他网站上一样，当要播放目录中的视频时会在另一个独立的小窗口中打开，并且完全关闭的背景视频的播放。
但看过许多大背景播放的视频后，这些小组件会给人留下深刻印象。
About:
blank
About:
blank将此技术发挥地非常出色。
结合流媒体，烟雾般的效果在一个半透明层覆盖在背景上播放，把网站设计得非常精致流畅。
而事实上，连续播放的视频并不妨碍显示在其上面文字的阅读性，如此优雅的效果竟可以通过如此简单的手法来实现。
FromScratchDesignStudio
FromScratch的背景视频很大导致其在进行导航时经常产生问题。
然而，这里还是有一些有趣的想法。
例如，当从目录中选择一个影片进行播放，他会跳转到另一个较小的独立窗口中打开，但是你并不会有被打断的感觉。
整个转换体验浑然天成。
HipopotamStudio
这是由两个来自Warsaw和Poland的设计师创立的这个小型天才设计工作室，他们将这项site-wide技术用于整个网站。
因此，滞后因素可以得到更好的解决。
但是，浏览目录中的项目时，系统的可用率下降得相当可观;即使视频在这里得到了巧妙的利用，但它始终以互动的方式进行。
9elements
9elements将背景视频用在他们的主页和所有主要的网站上，但并没有用在他的博客上。
官网的背景不会分散任何来自顶部的内容，这是很优美的呈现方式。
流畅的转场降低了视频中断的可能。
GDSH
GDSH的背景视频处理地很巧妙，几乎难以察觉。
虽然以上许多网站将这项技术作为切入点，但是在这里它只作为简单的背景应用，并没有干扰主要内容，作为背景来处理。
更多案例
WeChoosetheMoon
WeChoosetheMoon是一个为JohnF.Kennedy图书馆和博物馆打造的实时交互网站。
这是为了纪念Apollo11号时JFK’s首次登上月球４０周年。
背景视频的采用，使得用户可以通过其个阶段来跟踪整个任务中的元素，结合沿途的活动停止和元素的增加。
LostinValSinestra
LostinValSinestra 是Swisscom为促进其电视产品而推出的病毒营销活动。
它允许用户从Facebook好友中或从电脑硬盘中上传他们的照片来创建个性化的电影预告片明星。
Philips:
Cinema
ParallelLines是一个为促进Philips电视机销售的短片项目。
这部影片探讨了最热门的电影类型——包括戏剧、动作、动画、科幻和惊悚片——一个通过使用视频提供非常难忘、丰富、友好的用户体验的网站实例。
NeaveTelevision
NeaveTelevision使用背景视频提出了一个真正原创和娱乐的概念。
一些看似上下文无关，奇怪而荒谬的视频剪辑一个接着一个地展现，从而使用户能够通过鼠标点击跳到下一个影片剪辑。
MTL12
MTL12是一部有关蒙特利尔和当地人民生活的电视系列纪录片（12集）。
一个程式化和互动参与的背景视频技术给这个网站带来独特的外观和感觉，在整个过程中突出了项目和整个进程。
NewturnGroup’sWebartExhibition
来自Newturn集团的第一个在线艺术展览网站。
然而，影片会被延迟很多，有时甚至无法观看。
一旦你离开主页开始浏览网站，会觉得该网站有点轻。
AaronOhlmann
AaronOhlmann是一个关注艺术、政治结构和社会结构的编辑、制作人和项目负责人。
他的网站有一个自动缩放，资源友好的背景视频。
不过，考虑到主页的外观，我们期望每个项目都有相同的格式，遗憾的是，该网站中的其他视频在一个较小的新播放器中打开。
Yodabaz
Yodabaz是一个BasileTournier的portfolio，由Web创作工作室组FCINQ共同创办。
再次，我们有一个主要背景视频元素，而该网站顶部铺设的其他元素的行为只是作为一个背景。
其背景是融入于网站的，不受任何干扰或滞后
EagleClean
EagleClean是一个位于伦敦市中心的专业清洁公司，该网站一种巧妙的方法结合了背景视频的运用。
它有效地提出了快速清洁的概念，现在又提供清理屏幕污迹的服务。
真是一个富有创意的想法。
WimVanhenden
WimVanhenden由比利时艺术家创造，他使用背景视频不仅要强调他以前的工作，更要通过网站的构建来提升其艺术创作。
当提示用户输入自己的想法和其他信息时，网站搜索网络中相关图片并且为他们制作成具有艺术美感的背景幻灯片。
Futuretainment
Futuretainment:
”昨天世界被改变了，现在轮到你了“这是MikeWalsh所写的一本书。
通过一系列的短片循环重复播放使得背景视频在这个网站上显得有些冒失。
这段重复也是如此，他们会分散注意力，而最重要的画面也呈现出不清晰的像素化，这点也做得不是很好。
Walt’sWarning
Walt’sWarning是索尼电影公司为突破本身所打造的一个以第一人称来实现的交互式体验网站。
使用背景视频来吸引用户进入他们的节目世界，设计师添加了其他的交互性元素和响应鼠标悬停滚动。
总体而言，这是一个短时体验，并且在资源要求上率高。
升级会员 