网页设计中视频运用的7个技巧

随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。


随着网络传输速度的提升,视频在网页中的应用越来越多,也越来越广泛,带宽和流量对于网页视频的限制已经不再像5年前那么明显。而移动端设备的性能的提升,在移动端网页中使用视频也并不显得吃力。所以,今天我们常常能在不同的网页中看到各种不同功用的视频。

网页设计中视频运用的7个技巧

常言道一图胜千言,而视频比起图片所能承载的信息量更大。如果能够有效的使用视频,它对于用户的吸引力会非常明显——它可以更好的传递情绪,更加富有表现力,能让用户更容易“感受”到你想要传递的信息。不过,相比于其他元素,视频都比较“重”的媒体,使用的时候要谨慎。

今天这篇文章,我们来聊聊网页设计中视频的运用技巧。

1、不要完全依赖视频

无论是在网站还是APP当中,用户查看视频的方式千差万别,并没有一套完全标准化的规程。有些用户喜欢立刻查看视频,有些用户则喜欢先查看周围的文本和其他的信息,而且有的用户希望能够掌控视频的播放与否,有些则完全不在意。从这个角度上来说,如果视频自动播放,其实是无法确保用户能够即时查看的。因此,如果用户无法直接访问内容,或者单纯的不想查看内容的时候,应该以某种方式提醒用户。

小贴士:至少保证视频中所包含的重要信息,以文字或者图片这样的静态媒体的形式呈现出来。

2、自动静音

在默认情况下,最好将音量设置为静音,并且可以通过设置打开。

当用户打开网页的时候,并不喜欢这种未经许可就自动播放的行为,因为外放的声音常常会让人惊愕。那些受此影响或者不想查看视频的用户,需要花费额外的声音来关闭外放的声音,或者暂停播放,这些超出用户预期的情况会打断用户正在做的事情,让他们无法专注。忙乱之间,有的用户能找到关闭音频或者视频的办法,而有的用户则会干脆关闭页面或者APP,它给用户带来的负面影响是非常明显的。

网页设计中视频运用的7个技巧

Facebook 的视频同样被设置为自动播放,但是音频并没有默认外放,而是保持关闭状态,当用户决定查看视频的时候,可以选择音频外放。

3、留下好的第一印象

视频的表现力是非常突出的,冗长的介绍不如直接而富有冲击力的视觉呈现。

融入网页的视频,通常不会太长,直观而清晰的开头是非常重要的。网站如果本身不是Youtube 这种视频平台的话,用户在此看到视频的时候,通常会需要快速了解它所要呈现的内容,了解其中的价值,否则他们会立刻转向网站其他地方,寻求更加直观可见的内容。想要留住用户,就需要让视频给用户留下好的第一印象,抓住人们的注意力,让他们尽可能留下来,将更多的时间花费在这里。

4、充分利用每一秒

在网页中所使用的视频和电影的逻辑并不同,短小精悍的视频更符合网页的使用场景和用户的心理需求。许多优秀的网页设计实例中,视频大都是选择是精悍绵密的剪辑。用户无法像查看文字内容一样一目十行,快速了解信息,同时他们在浏览网页的时候并不会像在视频平台上那样静候剧情推进,不同的场景和需求促使他们希望在网页中更快获取信息,所以,即使几秒的等待也会让用户无法忍受。

网页设计中视频运用的7个技巧

小贴士:信息集中而又短小的视频更容易引起访客的注意力。

5、让用户来掌控

让用户来决定如何查看视频、何时播放视频才能让视频内容真正为用户所用。用户应当能够对他们所查看的视频进行完全控制,无论是播放和暂停,还是音量的大小,都应该在用户的掌控范畴以内。当然,控制权的大小和设计的目的是有关系的,和视频在整个设计中的角色也有关系。有些视频是作为视频背景而存在,重在营造氛围,通常也不会有外放的声音,很多时候并不会给用户以较高的控制权,但是这样也不会有太大的问题。

网页设计中视频运用的7个技巧

6、确保可访问性

为用户提供多种不同获取内容的方式,提升网页内容本身的可访问性。对于无法查看或者无法听到视频内容的用户而言,辅助性的字幕和完整的文本内容是不错的补充方案。比如TED的视频就涵盖了字幕和文本内容,兼顾到了许多有访问性问题的用户。

网页设计中视频运用的7个技巧

小贴士:将相关的文本内容放在靠近视频的地方,便于用户获取信息。

7、提供后续步骤

作为网页的设计者,有必要考虑一下用户看完视频之后后续能做什么。实际上,许多网站的设计者并没有深入的思考这样的问题,使得视频最终仅仅只是作为单纯的内容而存在,当用户看完之后,并不会提供后续操作的可能性。实际上,当用户看完视频之后,你可以引导他们查看更多的内容,甚至将它融入到整个网页的信息流当中,让内容活起来。最常见的处理方法,就是推荐相关的视频。

网页设计中视频运用的7个技巧

结语

视频作为富媒体而存在,会在网页和APP中越来越多的呈现,它的玩法众多,用户在体验和设计上的需求也千变万化。如何让视频更加贴合使用场景,让用户积极参与,还能灵活地同其他内容联动起来,都是设计师需要思考的问题。

 

原文地址:uxplanet

作者:Nick Babich

译者:@陈子木

译文地址:http://www.uisdc.com/best-practices-for-video

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/24370/

(0)
CatherineCatherine
上一篇 2017-05-08 10:47
下一篇 2017-05-08 12:38

相关推荐

  • 重磅消息!Adobe又出新神器了!

    Adobe Experience Design CC(预览版)官方介绍 原文: 今天,我代表Project Comet团队非常兴奋地向大家宣布:Project Comet将更名变成Adobe Experience Design CC(预览版),简称Adobe XD。 今天我们在Mac OS平台…

    2016-03-15
  • 分屏式设计正在逐渐流行,常见的玩法有哪些?

    不论如何,内容为王,而形式服从于内容,谨慎选择。

    2017-05-06
  • 京东金融产品体验报告

    (1)产品定位这是一款多功能互联网金融产品,在满足大众理财(定投、基金)需求的同时,主打白条(也就是借贷)、众筹,简单说,就是将消费金融业务拓展到商城平台之外的大学、农村、旅游、企业采购、租房等8大场景领域,尽可能覆盖更多的额业务。

    2017-05-20
  • 设计师应不应该培养“审丑”能力?

    作者:TanghuiDesign   “审丑能力”是指 克服“与心理预期不符而产生的情绪抵触”的能力 无法审丑 几乎是所有设计师都难以治愈的毛病 或者说短板   没错,你如果是看到标题进来的,想必是“审丑”二字吸引了你。 关于设…

    交互专题 2017-08-07
  • 孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

    复古一直在流行,这也是为什么过去许多设计趋势常常会沉寂若干年之后,又再次走到潮流的最前线。今天,我们要聊的是孟菲斯设计风(Memphis Design),这种设计风格充满了80年代的特征,明亮的色彩和多样的图形与线条充斥其间,它也是近年重归流行的设计风格之一。

    2017-05-12
  • 伦艺交互设计(MA)offer入手,工科出身、完全零基础的她是如何做到的

    对于零基础申请的同学来说,短时间内接触并掌握一个陌生的专业,既需要勇气,又需要决心。这是因为,科班出身的同学申请国外名校尚有难度,更何况是毫无专业基础的同学,过程中遭遇困难、挫折也可想而知。正因为申请难度大,如果能从其他同学的申请过程中吸取成功经验,规避问题,少走弯路,必然会有利于未来申请。本期,简清为同学们请到了拿下伦艺交互设计(Interaction Design Communication)专业offer的L同学,作为一名零基础申...

    2018-04-12
  • 平衡用户体验设计和精益设计

    来源:人人都是产品经理 作者:AB Tester Blog 对你而言哪个更重要:是制作出拥有杀手级用户体验的产品来吸引用户?还是尽快制作出能满足用户的产品并抢占大量的市场份额? 如果一款产品用户体验很差的话,用户不会使…

    2014-09-27
  • 聊一聊不同应用场景下的验证码

    最近在做关于验证码的项目的时候,从交互的角度梳理了产品各个平台验证码的应用场景。在一个产品中,会有多个设计师分工协作,不同的设计师做设计迭代。由于验证码在整体设计中太容易被忽略,它在每个场景的显示逻辑可能不尽相同。下面,我们就来聊一聊不同应用场景下的验证码。

    2017-05-05
  • 关于增强移动端交互设计的7条小建议

    本文转译自TubikStudio,内容有删减如果你要问某个产品的移动端交互设计好不好?很简单,如果用户能够很轻松愉快的使用以至于没有感受到它的存在,这就表示这款产品的设计是专业的、成功的。另一方面,如果整套交互中存在不合理的地方,用户一定会注意到他们,并且引发吐槽。移动应用的设计,需要清晰易用,可以随时随地进行有效使用。设计师的认识是创建一个直观的界面,指导用户们,帮助他们顺利操作使用。1、降低学习成本每个产品经理或者交互设计师,都想创...

    2018-02-17
  • 浅谈动效设计,帮你掌握视觉都需要的动效知识

    精细而恰当的动画效果可以传达状态,增强用户对于直接操纵的感知,通过视觉化的方式向用户呈现操作结果。

    2017-05-10