现在的位置: 首页 > 综合 > 正文

蓝蓝设计 谈一谈视频元素对网页设计的作用

2014年06月27日 ⁄ 综合 ⁄ 共 1827字 ⁄ 字号 评论关闭

网页设计中使用视频,将会提高设计的表现力,只要使用得当,你的页面会更加出彩。如何学习使用视频?根据蓝蓝设计实际经验,朋友们多看看优秀的案例,然后多思考,哪里好,可以进行借鉴,哪里一般,可以摒弃。

视频元素有哪些用处?

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

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

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

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

1.愉悦视觉

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

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

Symbolset

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

symbolset

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

2.用来介绍产品/服务

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

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

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

Paper

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

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

paper-1

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

paper-2
 

3.带给用户隐藏惊喜

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

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

Playground Inc

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

playgroundinc

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

4.更完美的表达故事

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

Daneden.me

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

daneden

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

最后,别忘了添加视频元素后,整体的审查一番,看看视频能否和整体风格匹配。

5.取代大背景图

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

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

Spotify

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

spotify

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

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

6.Slow Mo

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

slowmo

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

抱歉!评论已关闭.