网页设计中视频运用的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

相关推荐

  • 以人为中心的沉浸式交互设计如何做?

    对于VR的产品中很多的的问题,我们并没有一个通用的解决方式,最好的办法依然是迭代、迭代、迭代!比如头部参考系:它通常定义了一个透明的光标来定位屏幕坐标系。
    又比如虚拟现实坐标系:由于我们容易在虚拟世界中迷路,所以放一个指南针在脚下使得用户一直有方向感是个不错的选择。
    还有躯干参考系:我们可以把信息和工具放在躯干的周围,使它一直跟随着用户,这样当用户低下头时就能看见他需要的东西。
    此外,现实世界参考系:我们可以提供和现实世界有着稳固联系的线索来减少VR眩晕,通过现实参考系可以减少用户看到的和感觉到的感知冲突。

    2017-05-21
  • UX设计师不得不掌握的心理学技巧

    不要让视觉效果过重以至于霸占了整个网页的重心
    视频比起文本和图片更容易吸引用户的注意力
    女性和孩子的形象更容易吸引用户的注意力
    用户浏览页面的视觉轨迹是“F”型的

    动机
    能力
    触发

    2017-05-23
  • 2015-2016交互体验趋势

    移动产品篇: 2015年移动应用数量增长依然强劲,但是移动交互体验却在发生着变化。较之去年层出不穷的新颖形式,今年交互体验趋势中,更多的是某一个方面的体验优化与深耕,而较少有创造性的引领者出现。这说明移动…

    2015-04-20
  • 全面掌握算法交互设计,你的设计你做主

    在OF COURSE学习最纯粹的创意编程Processing生成艺术进阶课程全面掌握算法交互设计12周成为顶尖设计师👇△课程介绍《Processing&OF算法交互线上课程》你将要学习的第一部分:培养算法创造能力,学习运用高级算法模拟真实环境中的自然变化。第二部分:理解并掌握算法交互的原理。第三部分:培养软硬件结合能力,学习使用手部识别设备Leap motion、体感识别摄像头Kinect和算法的交互。第四部分:运用openCV计算机图...

    2018-04-08
  • 用户体验很重要,外卖小票了解一下

    失恋了,今天很丧,老板给我画一个小猪佩奇好吗?这个要求是四川资阳的一个女孩子点外卖时,在订单上给店主留的言。没有想到,店主竟然答应了。1当顾客在向外卖商家提需求时他们究竟要的是什么?不久前,一个在外卖小票上画画的帖子在网上刷了屏。原来,四川资阳一女子失恋点外卖要求画小猪佩奇,店主竟然答应了。据店主回忆,“大概在下午4点的时候,店里接到订单,在备注栏中,顾客称‘失恋了,今天很丧,老板给我画一个小猪佩奇好吗?’ ”为了安慰失恋的顾客,王女士...

    2018-03-26
  • 弹出式抽屉特效

                    利用动态面板轻松实现。 分分钟搞定那些写函数的都是纸老虎! 请下载源文件弹出抽屉特效-艾欧交互 视屏文件

    2014-09-08
  • 快来感受一下美帝的体验创新之旅

    追逐着2014年最后一天的时光尾巴,MUX五位同学加入了IXDC美国体验创新之旅,从北京跨国太平洋来到旧金山(San Francisco),深入参访硅谷多家互联网创新企业,交流和感悟体验创新。 8 ▲先来张大合照,三十多人,我…

    2015-01-20
  • 交互设计自我发展三部曲——“器、势、人”

    数十万互联网从业者的共同关注!作者: 集创堂-纯色个人微信号:jichuangtang作者授权早读课发表,转载请联系原作者欢迎投稿到早读课,投稿邮箱:mm@zaodula.com交互设计师(或者称UI设计师)发展的三部曲——器、势…

    2017-08-01
  • APP常见的几种刷新类型

    这两天无意看到一些内容刷新案例,发现原来光一个刷新操作,也是有不同的刷新类型区分的,所以在这里记录一下。

    2017-05-30
  • 我们都在交互稿中放了些什么?

    作为一名交互设计师,在输出交互稿件之时,要考虑的不仅是如何将需求转为具体页面,而且还要清晰的将其中的思想传达给对方。

    2017-05-08