过去的网页设计,如果想要加入视频,同时还保证整体美感,不是很容易。我们来和现在做个对比。
过去:若想在网页中添加动画片的,需要懂一点Flash知识或者动作脚本知识,或者干脆雇人。现在:数不清的软件和工具,能够帮助你实现目标。
我们再来想想YouTube,创立于2005年。YouTube是广受大众欢迎的视频网站,在其中用户可以上传自己拍摄的视频片段。现在,即便是一些公司,也利用YouTube来发布产品预告。
时至今日,我们的技术越来越先进,手段越来越丰富,我们甚至可以抛弃Flash.HTML5技术可轻松实现视频播放。技术越先进,我们的设计便越方便,可设计的空间也越大,用户体验也自然更好。
那么,在网页设计中加入视频的好处是什么呢?
视频的使用方法有很多,均能够提高用户的浏览体验。一图胜千言?没错,那么只要播放流畅、加载迅速,那么视频的传达能力完全可以超越图像,从而提高整体设计水品。
不过设计前还是要理性思考一番:添加视频,利大于弊,还是弊大于利?
倘若是视频可以更好的传达想要传达的信息,更好的传递品牌、产品、服务的信息,那么便采用。
倘若添加视频后,同时引入了一些不利于浏览的元素,这时候便该谨慎取舍了。
用来介绍产品或者服务,视频再适合不过了,能够例举出一大堆功能,无论文字、图片都没有视频更形象。很多SaaS(软营)网站基本都使用视频来介绍产品。
我们来看看Clear应用以及Papper应用的网页设计
Clear是一款待办清单应用。若想学习在网页设计中使用视频,那么Clear的网站很值得一看,他们的视频运用很典范:聚焦重点。
此外,还有一点值得学习,即便网络出问题、浏览器不支持,无法播放视频,那么产品信息依然能够通过图片、文字来清晰传递。
视频位于网页的标头中,处于应用下载链接的正右方
视频仅仅是关于应用的介绍,但是效果极佳,和品牌形象、和网站的视觉风格相一致。一致性能够使松散的元素整合,联合打造清晰、明朗的品牌形象,让用户对品牌产生信任,用户会想:"嗯,不错,很整体,够专业,这款应用不会差。"从而购买应用。
Paper是一款iPad应用,允许用户在其中画草图或者随意涂鸦。
Paeper的网页设计非常注意视频元素。相较Clear网站中的视频,Paper的视频更大,更有趣,也更容易引人注意。硕大的"播放"图标,引起了浏览用户的兴趣,很有效的行为召唤。
整体风格匹配,风格优美,视频流畅,用户购买的可能性很大。再强调一次:视频一定要和品牌、网页设计相一致。
视频还有一个功能,便是愉悦用户。通常都会把视频隐藏起来,作为隐藏功能,当用户进行某种操作后,便会出现,会带给他们意想不到的惊喜。有点像复活节彩蛋,但是更有趣!
是否使用视频,取决于所传达的内容。一些严谨、保守的公司网站,很明显不适合使用视频,但是一些非常随意、轻松的网站,运用视频可以让用户的浏览体验更愉快。
HandheldConf提倡"小设备上的大理念"在HandheldConf的主页上,陈列了很多演讲者的照片和演讲题目,只需把鼠标悬停在演讲者的图像中,他们便会"动"起来!有趣吧?
利用这种悬停手段来实现意想不到的惊喜,可以增加网站的交互性。除此之外,我们可以举一反三,想出更多的细节,愉悦用户。
PlaygroundInc是一家多伦多的数字创意机构。在他们的主页中,他们聪明的利用动画来描述他们的理念。滚动页面一定量时,动画才会出现,而不滚动时,更像是静态的插画。
很有趣,像不像游戏中的隐藏关,仔细探索才会发现?虽然我们一直都说要满足用户的预期,但是突然出现的小礼物,谁都不会拒绝吧?偶尔出用户意料,用户会感到有意思。
除了带给用户惊喜,还可以让视觉元素更有趣味,更有份量。
如果你的视觉元素很少,那么不妨"精炼"一点,让它们"动"起来。
Symbolset的图标字体运用得当,看看这里,如果是静态的字体,那么效果肯定一般,而这种可爱的手法能够吸引每位用户,彰显不同。
背景色彩的渐变也很有意思,仿佛这个网站具有生命,在跟你说话,跟你沟通。有趣的、人性化的设计,能够建立用户与公司间的信任。
最近的网页设计趋势是超大高清背景图,经常是全屏尺寸的背景图。而现在有些公司改用全屏视频做展示。
然而这也带来了一些挑战,精挑细选的静态图片肯定能够和其他元素完美融合。但是动态的视频,可能会破坏其他元素的视觉效果。因此视频挑选要审慎。
Spotify是倍受欢迎的音乐流媒体服务。他们网站的主页使用了大比例的背景视频,效果很赞,循环的视频与其他极简主义设计元素很好的匹配。
视频中包含了音效,可以听听,能够更好的诠释视频。
视觉+听觉,多种体验的糅合,能够帮助用户更好的理解Spotify的服务和理念。
所播放的视频采用慢动作模式,完美的阐释了品牌名称。能够清清楚楚的记录快速的瞬间。而且视频而视频层上方的文字结合良好。
想要讲个故事?可辞不达意怎么办?用视频试试,可以显著的提高表达能力。故事可以提高设计的情感色彩以及人性感触。
无需截图,无需链接,提高用户理解,只需一段简短的视频。而且让页面活了起来。我们每天都要浏览很多网站,能够记住的却寥寥无几,可以参考一下Dan的设计,他的网站让人记忆深刻。
因此,网页设计中使用视频,将会提高设计的表现力,只要使用得当,你的页面会更加出彩。如何学习使用视频?根据个人实际经验,多看看优秀的案例,然后多思考,哪里好,可以进行借鉴,哪里一般,可以摒弃。最后,别忘了添加视频元素后,整体的审查一番,看看视频能否和整体风格匹配。