让网站更生动!那些在网页中完美运用视频元素的案例 - 优设网 - UISDC

让网站更生动!那些在网页中完美运用视频元素的案例

2013/11/08 6431评论区

视频有着不算短的历史:最早是电影,然后是电视,现在出现在我们随身携带的手机、平板上。网页中也很早便出现了视频。最开始的时候是Flash格式的视频和动效。而现在除了Flash之外,我们还有HTML5和其它选择。说简单也简单,只需要在网页中嵌入几段代码,就能实现视频效果。但实际上,视频要想用的出彩,并不容易。

视频的进化

过去的网页设计,如果想要加入视频,同时还保证整体美感,不是很容易。我们来和现在做个对比。

过去:因为优美的网页设计必然需要高清高质的视频,若想拍摄好的视频,那么需要昂贵的硬件支持。
现在:相机设备越来越平易近人,手机拍照效果也越来越好,拍摄高清视频不是什么难事。

过去:若想在网页中添加动画片的,需要懂一点Flash知识或者动作脚本知识,或者干脆雇人。
现在:数不清的软件和工具,能够帮助你实现目标。

我们再来想想YouTube,创立于2005年。YouTube是广受大众欢迎的视频网站,在其中用户可以上传自己拍摄的视频片段。现在,即便是一些公司,也利用YouTube来发布产品预告。

我的看法是,YouTube催进了互联网视频的进化。他们让视频病毒式的传播于互联网中。YouTube的理念前无古人:任何人都可以发布视频、分享喜爱的视频,不论视频拍摄者水平的高低、经验的多寡。更平易近人。

现在的互联网视频

时至今日,我们的技术越来越先进,手段越来越丰富,我们甚至可以抛弃Flash.HTML5技术可轻松实现视频播放。技术越先进,我们的设计便越方便,可设计的空间也越大,用户体验也自然更好。

那么,在网页设计中加入视频的好处是什么呢?

视频元素有哪些用处?

视频的使用方法有很多,均能够提高用户的浏览体验。一图胜千言?没错,那么只要播放流畅、加载迅速,那么视频的传达能力完全可以超越图像,从而提高整体设计水品。

不过设计前还是要理性思考一番:添加视频,利大于弊,还是弊大于利?

倘若是视频可以更好的传达想要传达的信息,更好的传递品牌、产品、服务的信息,那么便采用。

倘若添加视频后,同时引入了一些不利于浏览的元素,这时候便该谨慎取舍了。

1.用来介绍产品/服务

用来介绍产品或者服务,视频再适合不过了,能够例举出一大堆功能,无论文字、图片都没有视频更形象。很多SaaS(软营)网站基本都使用视频来介绍产品。

优秀视频的要诀在于,一定要抓住重点。那些无关痛痒的功能可以在下面用图像、文字叙述。但是视频一定要利用有限的时间,向用户展示最主要的功能,这样才能使用户印象深刻,从而激发他们购买产品的兴趣。

我们来看看Clear应用以及Papper应用的网页设计

Clear

Clear是一款待办清单应用。若想学习在网页设计中使用视频,那么Clear的网站很值得一看,他们的视频运用很典范:聚焦重点。

此外,还有一点值得学习,即便网络出问题、浏览器不支持,无法播放视频,那么产品信息依然能够通过图片、文字来清晰传递。

clear-1

视频位于网页的标头中,处于应用下载链接的正右方

视频仅仅是关于应用的介绍,但是效果极佳,和品牌形象、和网站的视觉风格相一致。一致性能够使松散的元素整合,联合打造清晰、明朗的品牌形象,让用户对品牌产生信任,用户会想:”嗯,不错,很整体,够专业,这款应用不会差。”从而购买应用。

clear-2

Paper

Paper是一款iPad应用,允许用户在其中画草图或者随意涂鸦。

Paeper的网页设计非常注意视频元素。相较Clear网站中的视频,Paper的视频更大,更有趣,也更容易引人注意。硕大的”播放”图标,引起了浏览用户的兴趣,很有效的行为召唤。

paper-1

整体风格匹配,风格优美,视频流畅,用户购买的可能性很大。再强调一次:视频一定要和品牌、网页设计相一致。

paper-2
 

2.带给用户隐藏惊喜

视频还有一个功能,便是愉悦用户。通常都会把视频隐藏起来,作为隐藏功能,当用户进行某种操作后,便会出现,会带给他们意想不到的惊喜。有点像复活节彩蛋,但是更有趣!

是否使用视频,取决于所传达的内容。一些严谨、保守的公司网站,很明显不适合使用视频,但是一些非常随意、轻松的网站,运用视频可以让用户的浏览体验更愉快。

Handheld Conf

Handheld Conf提倡 “小设备上的大理念”在Handheld Conf 的主页上,陈列了很多演讲者的照片和演讲题目,只需把鼠标悬停在演讲者的图像中,他们便会”动”起来!有趣吧?

handheldconf

利用这种悬停手段来实现意想不到的惊喜,可以增加网站的交互性。除此之外,我们可以举一反三,想出更多的细节,愉悦用户。

Playground Inc

Playground Inc 是一家多伦多的数字创意机构。在他们的主页中,他们聪明的利用动画来描述他们的理念。滚动页面一定量时,动画才会出现,而不滚动时,更像是静态的插画。

playgroundinc

很有趣,像不像游戏中的隐藏关,仔细探索才会发现?虽然我们一直都说要满足用户的预期,但是突然出现的小礼物,谁都不会拒绝吧?偶尔出用户意料,用户会感到有意思。

3.愉悦视觉

除了带给用户惊喜,还可以让视觉元素更有趣味,更有份量。

如果你的视觉元素很少,那么不妨”精炼”一点,让它们”动”起来。

Symbolset

Symbolset的图标字体运用得当,看看这里,如果是静态的字体,那么效果肯定一般,而这种可爱的手法能够吸引每位用户,彰显不同。

symbolset

背景色彩的渐变也很有意思,仿佛这个网站具有生命,在跟你说话,跟你沟通。有趣的、人性化的设计,能够建立用户与公司间的信任。

4.取代大背景图

最近的网页设计趋势是超大高清背景图,经常是全屏尺寸的背景图。而现在有些公司改用全屏视频做展示。

然而这也带来了一些挑战,精挑细选的静态图片肯定能够和其他元素完美融合。但是动态的视频,可能会破坏其他元素的视觉效果。因此视频挑选要审慎。

Spotify

Spotify是倍受欢迎的音乐流媒体服务。他们网站的主页使用了大比例的背景视频,效果很赞,循环的视频与其他极简主义设计元素很好的匹配。

spotify

视频中包含了音效,可以听听,能够更好的诠释视频。

视觉+听觉,多种体验的糅合,能够帮助用户更好的理解Spotify的服务和理念。

5.Slow Mo

Slow Mo 专攻高速摄像。主页的中心区域他们用视频取代了图像。

slowmo

所播放的视频采用慢动作模式,完美的阐释了品牌名称。能够清清楚楚的记录快速的瞬间。而且视频而视频层上方的文字结合良好。

6.更完美的表达故事

想要讲个故事?可辞不达意怎么办?用视频试试,可以显著的提高表达能力。故事可以提高设计的情感色彩以及人性感触。

Daneden.me

Dan是一名设计师,最近被Dropbox雇佣。在Dan的个人网站中,有部分内容和描述是用视频的方式呈现的,让浏览者更好的理解他所说的话

daneden

无需截图,无需链接,提高用户理解,只需一段简短的视频。而且让页面活了起来。
我们每天都要浏览很多网站,能够记住的却寥寥无几,可以参考一下Dan的设计,他的网站让人记忆深刻。

总结

因此,网页设计中使用视频,将会提高设计的表现力,只要使用得当,你的页面会更加出彩。如何学习使用视频?根据个人实际经验,多看看优秀的案例,然后多思考,哪里好,可以进行借鉴,哪里一般,可以摒弃。
最后,别忘了添加视频元素后,整体的审查一番,看看视频能否和整体风格匹配。

原文地址:webdesign
优设网翻译:@MartinRGB
转摘请注明优设网译文出处,谢谢各位小编。

 
================关于优设网================
“优设网uisdc.com“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册:网页设计师必须修炼的内功技法,更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/
设计微博:拥有粉丝量57万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

youshege
 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/video-element-in-web-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 版式设计 界面设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里