网页 设计 怎么添加视频

随着网络传输速度的提升，视频在网页中的应用越来越多，也越来越广泛，带宽和流量对于网页视频的限制已经不再像5年前那么明显。接下来小编告诉你网页设计怎么添加视频。

不要完全依赖视频

(资料图片仅供参考)

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

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

自动静音

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

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

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

留下好的第一印象

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

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

充分利用每一秒

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

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

让用户来掌控

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

确保可访问性

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

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

提供后续步骤

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

结语

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

如何提高网页设计水平

1. 学好HTML和CSS编程

这条之所以成为第一条是因为它是网页设计中最重要的部分。明白网页是如何在浏览器中渲染的可以防止你做出不合理的设计，比如那些无法用网页实现的设计。要保持与时俱进，弄清楚现什么效果可以用现在的CSS技术实现，什么效果不可以。

2. 注重细节

好的设计和伟大设计之间的距离在于是否做好细节。

3. 善于使用留白

世界上最痛苦的事情莫过于当你想阅读一些东西却发现页面上各种元素的旁边充满了文字，页面设计者这么做的目的仅仅是想要在页面狭小的控件里放下更多的信息，但这只能给别人带来一种痛苦的体验。合理的使用留白可以给页面中的元素以呼吸的空间，减少阅读者眼镜的压力，从而让用户有一种愉快的浏览体验。

4. 图片很重要

如果你有一个天才的设计，但却没有高质量的图片，那将是非常悲哀的。图片应当辅助你的设计来推销产品或传达一定的信息，或者仅仅来吸引眼球。

5. 充分发挥色彩的威力

色彩在网页设计中的重要性经常被忽视。在网页设计中应当对色彩的使用给予更多的注意，因为它可以按照你的意愿来对用户进行一定的引导。例如，页面中的链接应当与页面正文文字的颜色有所区别，以便用户能够认出它们是链接。如果链接的颜色和正文的颜色差不多，那么用户如何能注意到它们并点击它们呢?

6. 不要忘了页脚

页脚设计经常被忽视，因为设计人员没有认识到它们的重要性。它们有时比你想象的要有用的多，因为它们可以包含页面任何地方都无法承载的额外信息。它们也可以作为引导用户到站点其它部分的向导。

7. 清晰的导航

导航栏是页面中最重要的部分，因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏，可以提升网站的易用性，还可以减少用户在寻找自己需要的内容时遇到的麻烦。 很简单，网页设计的技巧其实就是对于网页设计细节的把握。我们要做好的，就是将网页设计的细节深入到我们自身的主观能动性中，用自身的行为去改变网页设计本身，进而将网页设计的水平提高。

网页设计最标准的尺寸

1、显示器的分辨率 这个由科技发展和用户购买力及喜好决定，其数据取决于统计。

2、操作系统 毫无疑问目前是Windows的天下，其中Windows7占绝大多数。

3、网页浏览器 IE依旧份额最高，但是Firefox、Opera和Safari等也有一定市场。

4、个人定制 主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式，但是总体上这部分应该属于高级用户，绝大部分用户依旧会使用操作系统和浏览器的默认样式。

所以计算一屏大小应基于以下原则：

1、一屏指绝大部分用户的浏览器显示网页的有效可视区域。

2、一屏的计算环境是Windows7和浏览器均处于默认样式。

3、由于IE无论是否超过一屏都存在纵向滚动条的位置，Firefox和Opera是在页面超过一屏的时候出现纵向滚动条，且浏览绝大部分网页都有纵向滚动条的存在，所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。

4、由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏，而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页，所以一屏大小在Firefox中指多窗口的控制栏存在时。

网页设计标准尺寸：

1. 最保守最有兼容性的网页设计尺寸为：779×432 ，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。

2. 1024×768下，网页宽度保持在1002以内，如果满框显示的话，高度是612눯之间，就不会出现水平滚动条和垂直滚动条。

3. 在ps里面做网页可以在800×600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740×560左右。

4. 在PS里做的图到了网上就不一样了，颜色等等方面，因为web上面只用到256web安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象。

学好网页设计路线

学习简单的html，先学习好简单的html，这个非常的简单，大家可以在网上找点资料，书籍看看，半个月的时间就可以学会。当然也有好多软件可以自动生成的，多看看代码，然后自己练习练习。

学习JS，网页里面好多触发，动作都是靠js来实现的。所以学好网页设计，大家也要把js学习好，js虽然要有点编程基础，但是也是很容易就可以学会的。

学习css，我们平时看到网页中各种好看的效果，这是网页设计中css来实现的，网页中的各种样式，在css中编写，所以如果你想做一个好看的网页，建议多了解一下css的编写，以便以后可以做出自己想要的样式。

有设计的头脑，一个好看的网页一定要有个好的设计。无论你的技术多么厉害，没有设计，也一样不好看。所以平时建议大家一定要多在网上看看别人的网页。

最主要的是你要有颗能坚持的心。