响应式设计技术在视频网站中的应用

张 涛，么伟伟

（石家庄信息工程职业学院，河北 石家庄 050000）

引言

在网络技术飞速发展的大环境下，视频网站不仅需要满足计算机终端客户的需求，也要迎合平板电脑、手机的发展的要求[1]。利用响应式设计技术可建立起一个促使视频网站页面能够接入设备大小和分辨率不同的用户系统上，以满足不同用户的观看需求。只需要同一套代码，就可以促使视频网站上的内容同步显示到PC端、平面电脑以及智能手机上，更好地吸引用户，提升市场竞争力。基于此，开展响应式设计技术在视频网站开发中应用的分析研究就显得尤为必要。

1 响应式设计技术的优势

1）能够很好地改善用户体验。响应式设计技术能够为视频播放用户带来更好的体验，页面设计技术只能在计算机上播放视频，而响应式设计技术则不然，除计算机之外，在智能手机、平板电脑等移动终端上都可以随意播放，从而提升客户的体验感。

2）增加移动流量。在网络时代，移动设备的网络流量远远大于计算机互联网的网络流量。用户不会每天都对着电脑观看视频，更多是在休憩时间、坐车或者其他闲暇时间观看视频，利用响应式设计技术研发的视频网站，可满足移动用户碎片化时间观看视频的需求，从而增加视频网站的移动流量。

3）更快的研发速度。随着网站和软件技术的发展，很多高新技术被广泛应用到视频网络研发中。但采用响应式设计技术研发视频网站所需要的时间要远远小于开发网站移动版所需的时间。这是因为无论用户选择哪种视频播放设备，响应式设计技术研发的视频网站的外观都能按照预期设计的方案工作，大大减少了研发所需要的时间。

2 响应式设计技术在视频网站研发中的应用要点

2.1 响应式设计技术总体应用方案

响应式设计技术可实现对视频网站的分割设计，无论是导航、菜单、按钮，还是图片、文字都能按照实际需求进行合理设计。一个友好的视频网站界面，取决于两个方面，其一是界面布局的合理性，其二是响应式布局。其中前者指的是通过对称、平衡、比例、色彩等方法，对视频网站上的所有元素进行合理布局，促使页面更加美观、友好，更好地契合人们的审美需求。而后者则是按照视频网站页面内容优先级来调整各个模块的顺序。比如：PC端视频网站页面的布局有三个栏目，其中左边为局部导航区，中间为页面主体信息，右边为关联导航。

2.2 视频网站视觉设计

播放视频的设备不同，对视频网站的功能以及内容的优先级也不相同，这就需要视频网站在具体开发中，能够通过CSS来定义不同的响应式规则。响应式设计主要是通过@media断点设计方法，来设计出能够满足当前主流设备的视口宽度，通过相应的元素设计成适当的比例宽度，就能实现按照渲染时视口宽度的不同进行有效浮动。视频网站在开发中，为更好地适应大众需求，要尽量采取流体布局方式，可通过元素单位大小的不同，以百分比的方式呈现出来，并按照Web网页设计原则，实现对视频网站的响应式设计，比如在PC端视频网站设计中，内容要尽量清晰直观，让用户一眼看上去，就能看到每个页面上的内容和主题，从而快速找到之间感兴趣的视频类别。

在平板电脑页面设计中，要尽量去掉无谓的广告，其与PC端页面的响应式设计内容基本相同，只是在宽度自适应上进行略微的调整。

在Mobile端视频网站页面设计中，由于该设备的宽度非常小，为改善用户体验，PC段页面上原有的大量菜单元素要转变为下拉模式。比如在Game Conter模块，通常会布设多个stats元素，这就需要设计成下拉式菜单，在此种模式下，Mobile端上通常只会显示第一个元素，其元素被隐藏起来，需要点击唤醒，才能重新显示出来。总而言之，响应式设计技术在视频网站研发中应用时，必须严格遵循弹性化原则，就是按照用户终端设备的不同，进行适当调整和优化，促使研发出的视频网站页面具有良好的弹性，为用户观看视频提供更加极致的体验。

2.3 Game页面设计

Game页面在视频网站中可为用户提供更多和元素相关的视频，比如如果足球类的Game页面，要包括中超、西甲、意甲、英超等不同联赛的内容，以便为用户提供更多选择，满足不同用户的观看足球视频的需求。响应式设计技术在Game页面研发中，必须满足Score Strip的需求，也是以足球类Game为例进行分析[2]。

1）需要在Score Strip上，始终显示当天的所有比赛。进行页面加载中，可请求Jion Feed来获得默认的比赛列表。

2）在Game页面顶部，在进行各足球联赛点击时，可通过JS来填充此足球联赛的所有比赛。

3）在进行每场足球比赛点击时，会同时刷新整个页面请求该比赛的全部URL。并对当天尚未进行的足球比赛进行高亮显示，如果目前正好有比赛，则要重点显示，同时更新比赛时间和分数。

4）Score Strip中列表Feed需要根据比赛是否正在、既要开始以及未来要开始的比赛进行轮询请求，如果当前比赛已经完成，则不需要轮询。轮询请求的时间要控制在30 s左右，直到此场比赛完全结束。同时还要实时显示出mockup上的全部信息，并支持不同类型的比赛，在此栏目中，足球比赛主要分为三种状态，即upcoming、live和Game over，而且要保证All Scores能够连接到Schedule page上。

2.4 Schedule页面设计

Schedule页面也是组成视频完整的主要页面之一，和Gaem页面相比，Schedule页面比较注重细节，也是足球内视频网站页面进行分析[3]。比如在Schedule页面上需要清楚显示各大足球联赛的全部比赛日程，那一天有那场比赛，分别是那个队伍队长那个队伍，比赛的地带以及球员和教练员的信息。并附上比赛转播的链接，保证Schedule页面能够跳转到Game页面。响应式设计技术在Schedule页面研发中的应用主要体现在：在Schedule页面中需要保证每场足球比赛，都能顺利转接到Game页面上；Schedule页面上的数据主要来来自于后端更新；Schedule页面上的日历需要能够清楚显示出那些天是有足球比赛的，那些天是没用的，为用户提供一目了然的赛程信息；如果足球比赛正在进行，要轮询请求Schedule feed进行实时更新，包括目前赛场上的人员、比赛分数、比赛的状态等。

3 响应式设计技术在视频网站研发中的实现方法

3.1 流体布局的实现

响应式视频网站在进行流体布局时，多是根据用户所用设备的分辨率进行判断，主要针对PC设备、Pad设备、Mobile设备来实现的，具体的实现情况如下：

@media all and（max-width：999px）{/*[0.999]*///页面宽度在/[0，999]的样式}。

@media all and（max-width：767px）{/*[0.767]*///页面宽度在/[0，767]的样式，并要覆盖上面的[0，999]的部分样式}。

3.2 液体图片的实现

响应式视频网站研发难度比较小，但如何让每张图片都具有自动适应的能力，是影响响应式视频网站研发效果的关键[4]。若Web页面并不会受到宽带的影响，可先制作一张图，适应最大的屏幕，再通过样式来控制不同设备下现实的大小。也可以为不同的断点，提供不同的图片。

3.3 响应式实现方法

目前很多视频网站页面上，经常出现压缩显示在一个屏幕下的问题。响应式视频网站中融入了CSS3，可有效扩展媒体类型概念，并检查特定的屏幕尺寸，从而实现响应式应用[5-6]。

4 结语

采用理论结合实践的方法，分析了响应式设计技术在视频网站开发中的应用，分析结果表明，在网络技术和信息技术飞速发展的背景下，传统网页设计类视频网站已经难以满足时代发展需求，存在很多弊端，无法为用户提供更加良好的体验。将响应式设计技术应用到视频网站开发中，可按照用户设备的实际情况，进行自动适应性响应，从而为用户观看视频提供更好的体验。