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

相关推荐

  • 好的人机交互设计(UX)评判标准的四个原则

    一些设计的基本原则往往是通用的,甚至可以说放之四海皆准的,例如优先级、一致性、界面的隐喻等等,好的设计都需要考虑到这些问题,甚至再更广的范围内也同样适用,而不仅仅是交互设计范畴。 一个设计师&产品…

    2015-04-14
  • 关于用户体验&交互设计的视频分享【日常思考0001】

    (。・∀・)ノ゙嗨这里是Chiki的深夜抽风小记录,做个日常思(bing)考(zheng)收集。公众号取名“Design for What"是希望以后自己做设计的时候可以多思考设计是为什么Find your passion,and let it kill you那么开始今天的开场首秀!今晚本想磕磕榛子垫垫肚子就……就开始做事来着,结果不小心打开平板……看了会视频(明明是好久……都是借口😭)不过视频不错分享给大家👇视频在这:截了有点不一样...

    2018-04-14
  • 交互设计:超越人机交互(原书第4版)

    本书由交互设计界的三位顶尖学者联袂撰写,是该领域的经典著作,被全球各地的大学选作教材。新版本继承了本书一贯的跨学科特色,并与时俱进地更新了大量实例,涉及敏捷用户体验、社会媒体与情感交互、混合现实与脑机界面等。全书紧紧围绕设计与评估的迭代过程,不仅包含了传统的理论知识、实例解析、实践指导等内容,还通过“窘境”模块讨论了一系列启迪思考的开放问题。此外,本书网站www.id-book.com也为读者提供了丰富的资源,包括教学PPT以及大量的案...

    2018-03-09
  • 看似平淡无奇的Icons,到底什么才是它的正确使用方式?

    了解食材是厨师的基本功课之一,了解器材是摄影师的基本功课之一,了解城管的时间表是卖热干面大叔大妈的基本功课之一,了解各个组件的设计模式和属性是交互设计师的基本功课之一。

    2017-05-08
  • Smartisan OS v2.0 正式发布

    本次升级坚果手机新增功能 94 项,优化细节 108 项,修复 bug 若干;Smartisan T1 新增功能 91 项,优化细节 109 项 ,修复 bug 若干。升级主要增加了系统应用“语音搜索”、“安全中心”、“游戏中心”,增加了应用启动…

    交互设计 2015-09-16
  • 给用户带来新的feel|5个好玩的交互设计效果

    真正的科学家应当是个幻想家;谁不是幻想家,谁就只能把自己称为实践家。—— 巴尔扎克近期在工作中偶然发现的3种移动界面布局,从移动端的分辨率、配合设计布局变化的web端响应式、以及H5的设计布局。另外加上2个好玩的设计方式,更多的让点击率、产品凸显展示,总共5个好玩的交互效果给大家分享。开发资源不够或快速上线的页面交互设计上图在专业术语中叫做流体交互效果,这种交互效果的好处与坏处优点:避免小分辨率的情况下,出现水平条的情况。缺点:分辨率小...

    2018-04-17
  • 你们做交互设计都使用哪些权威的工具呢?

    达内UI设计,中国UID课程标准制定者工具是设计师的重要榜首,好的设计离不开好的工具,那么你交互设计都使用哪些权威的工具呢?本文为大家总结一下。哪里能学到企业需要的设计技术?2018学设计到哪里学就业更好?零基础学设计多久能学会?转行学设计学完好就业么?1月达内UI免费训练营火热报名中,全程大咖级讲师亲授,为你解析UI行业发展趋势,就业前景,帮你了解设计,轻松入门,更快一步成为设计大牛!马上阅读原文或者回复:姓名+电话+城市报名吧!好消...

    2018-01-30
  • 房屋建造实例映射出的用户体验原则

    来源:摩客专访(公众号)翻译:Tangerine设计构架如何在创造吸引人的应用程序时产生更好的情感影响?设计理念并不是某一领域—专门为某个具有一定需求的人群提供解决方案的专业人士独有的。我们在任何地方都能看到设计,但我们总是把注意力集中在某些我们觉得有需求的领域。在过去的几年里,我一直担任一名用户体验设计师。而我从来没想过类似这样的话题,直到最近我住进一家旅店。房子是如何建造的房屋是我们的基本需求之一。我们根据我们的需求以及预算来建造房...

    2018-03-12
  • 校园招聘 | 网易交互设计实习生

    网易交互设计实习生公司简介网易2001年正式成立在线游戏事业部,与广大游戏热爱者一同成长15年,是全球领先的游戏开发与发行公司,自主研发了《梦幻西游2》《大话西游2》《天下3》《乱斗西游》《梦幻西游手游》等几十款倍受玩家喜爱的热门端游和手游,更独家代理了《魔兽世界》《炉石传说》等多款风靡全球的游戏。 2015年,网易游戏正式开启“游戏热爱者”品牌战略,用自身行动传导热爱者价值,并全面启动“聚合精品,共享热爱”战略计划,以全球化视野为游戏...

    2018-02-10
  • 用户运营 | 《破茧成蝶 用户体验设计师的成长之路》读书笔记

    1. 设计师如何参与一个具体的项目需求分析,了解需求,清楚我们要做一个什么样的产品,目标用户是谁,要达到什么效果,具体有什么内容、功能…然后我们开始进行设计,在草图上梳理信息架构,设计任务流程,设计界面,确认没有问题后再用专业的软件工具把设计方案呈现出来。经过设计评审后,设计师要去跟进后续的视觉、前端、开发、测试环节,确保最后的产出物和自己的设计方案一致。2. 在项目中设计师容易遇到的问题团队成员的专业能力外界因素的影响团队凝聚力3. ...

    2018-04-25