前言：本站為你精心整理了響應式設計技術(shù)在視頻網(wǎng)站中應用范文，希望能為你的創(chuàng)作提供參考價值，我們的客服老師可以幫助你提供個性化的參考范文，歡迎咨詢。

摘要：為探討響應式設計技術(shù)在視頻網(wǎng)站開發(fā)中應用，采用理論結(jié)合實踐的方法，立足響應式設計技術(shù)的優(yōu)勢，分析了響應式設計技術(shù)在視頻網(wǎng)站開發(fā)的應用要點以及實現(xiàn)方法。分析結(jié)果表明，響應式設計技術(shù)在改善用戶體驗、增加流量、開發(fā)難易程度方面具有顯著優(yōu)勢，值得在視頻網(wǎng)站開發(fā)中大力推廣應用。

關(guān)鍵詞：響應式設計技術(shù)；視頻網(wǎng)站；視覺設計

引言

在網(wǎng)絡技術(shù)飛速發(fā)展的大環(huán)境下，視頻網(wǎng)站不僅需要滿足計算機終端客戶的需求，也要迎合平板電腦、手機的發(fā)展的要求[1]。利用響應式設計技術(shù)可建立起一個促使視頻網(wǎng)站頁面能夠接入設備大小和分辨率不同的用戶系統(tǒng)上，以滿足不同用戶的觀看需求。只需要同一套代碼，就可以促使視頻網(wǎng)站上的內(nèi)容同步顯示到PC端、平面電腦以及智能手機上，更好地吸引用戶，提升市場競爭力。基于此，開展響應式設計技術(shù)在視頻網(wǎng)站開發(fā)中應用的分析研究就顯得尤為必要。

1響應式設計技術(shù)的優(yōu)勢

1）能夠很好地改善用戶體驗。響應式設計技術(shù)能夠為視頻播放用戶帶來更好的體驗，頁面設計技術(shù)只能在計算機上播放視頻，而響應式設計技術(shù)則不然，除計算機之外，在智能手機、平板電腦等移動終端上都可以隨意播放，從而提升客戶的體驗感。2）增加移動流量。在網(wǎng)絡時代，移動設備的網(wǎng)絡流量遠遠大于計算機互聯(lián)網(wǎng)的網(wǎng)絡流量。用戶不會每天都對著電腦觀看視頻，更多是在休憩時間、坐車或者其他閑暇時間觀看視頻，利用響應式設計技術(shù)研發(fā)的視頻網(wǎng)站，可滿足移動用戶碎片化時間觀看視頻的需求，從而增加視頻網(wǎng)站的移動流量。3）更快的研發(fā)速度。隨著網(wǎng)站和軟件技術(shù)的發(fā)展，很多高新技術(shù)被廣泛應用到視頻網(wǎng)絡研發(fā)中。但采用響應式設計技術(shù)研發(fā)視頻網(wǎng)站所需要的時間要遠遠小于開發(fā)網(wǎng)站移動版所需的時間。這是因為無論用戶選擇哪種視頻播放設備，響應式設計技術(shù)研發(fā)的視頻網(wǎng)站的外觀都能按照預期設計的方案工作，大大減少了研發(fā)所需要的時間。

2響應式設計技術(shù)在視頻網(wǎng)站研發(fā)中的應用要點

2.1響應式設計技術(shù)總體應用方案

響應式設計技術(shù)可實現(xiàn)對視頻網(wǎng)站的分割設計，無論是導航、菜單、按鈕，還是圖片、文字都能按照實際需求進行合理設計。一個友好的視頻網(wǎng)站界面，取決于兩個方面，其一是界面布局的合理性，其二是響應式布局。其中前者指的是通過對稱、平衡、比例、色彩等方法，對視頻網(wǎng)站上的所有元素進行合理布局，促使頁面更加美觀、友好，更好地契合人們的審美需求。而后者則是按照視頻網(wǎng)站頁面內(nèi)容優(yōu)先級來調(diào)整各個模塊的順序。比如：PC端視頻網(wǎng)站頁面的布局有三個欄目，其中左邊為局部導航區(qū)，中間為頁面主體信息，右邊為關(guān)聯(lián)導航。

2.2視頻網(wǎng)站視覺設計

播放視頻的設備不同，對視頻網(wǎng)站的功能以及內(nèi)容的優(yōu)先級也不相同，這就需要視頻網(wǎng)站在具體開發(fā)中，能夠通過CSS來定義不同的響應式規(guī)則。響應式設計主要是通過@media斷點設計方法，來設計出能夠滿足當前主流設備的視口寬度，通過相應的元素設計成適當?shù)谋壤龑挾龋湍軐崿F(xiàn)按照渲染時視口寬度的不同進行有效浮動。視頻網(wǎng)站在開發(fā)中，為更好地適應大眾需求，要盡量采取流體布局方式，可通過元素單位大小的不同，以百分比的方式呈現(xiàn)出來，并按照Web網(wǎng)頁設計原則，實現(xiàn)對視頻網(wǎng)站的響應式設計，比如在PC端視頻網(wǎng)站設計中，內(nèi)容要盡量清晰直觀，讓用戶一眼看上去，就能看到每個頁面上的內(nèi)容和主題，從而快速找到之間感興趣的視頻類別。在平板電腦頁面設計中，要盡量去掉無謂的廣告，其與PC端頁面的響應式設計內(nèi)容基本相同，只是在寬度自適應上進行略微的調(diào)整。在Mobile端視頻網(wǎng)站頁面設計中，由于該設備的寬度非常小，為改善用戶體驗，PC段頁面上原有的大量菜單元素要轉(zhuǎn)變?yōu)橄吕Ｊ?。比如在GameConter模塊，通常會布設多個stats元素，這就需要設計成下拉式菜單，在此種模式下，Mobile端上通常只會顯示第一個元素，其元素被隱藏起來，需要點擊喚醒，才能重新顯示出來?？偠灾?，響應式設計技術(shù)在視頻網(wǎng)站研發(fā)中應用時，必須嚴格遵循彈性化原則，就是按照用戶終端設備的不同，進行適當調(diào)整和優(yōu)化，促使研發(fā)出的視頻網(wǎng)站頁面具有良好的彈性，為用戶觀看視頻提供更加極致的體驗。

2.3Game頁面設計

Game頁面在視頻網(wǎng)站中可為用戶提供更多和元素相關(guān)的視頻，比如如果足球類的Game頁面，要包括中超、西甲、意甲、英超等不同聯(lián)賽的內(nèi)容，以便為用戶提供更多選擇，滿足不同用戶的觀看足球視頻的需求。響應式設計技術(shù)在Game頁面研發(fā)中，必須滿足ScoreStrip的需求，也是以足球類Game為例進行分析[2]。1）需要在ScoreStrip上，始終顯示當天的所有比賽。進行頁面加載中，可請求JionFeed來獲得默認的比賽列表。2）在Game頁面頂部，在進行各足球聯(lián)賽點擊時，可通過JS來填充此足球聯(lián)賽的所有比賽。3）在進行每場足球比賽點擊時，會同時刷新整個頁面請求該比賽的全部URL。并對當天尚未進行的足球比賽進行高亮顯示，如果目前正好有比賽，則要重點顯示，同時更新比賽時間和分數(shù)。4）ScoreStrip中列表Feed需要根據(jù)比賽是否正在、既要開始以及未來要開始的比賽進行輪詢請求，如果當前比賽已經(jīng)完成，則不需要輪詢。輪詢請求的時間要控制在30s左右，直到此場比賽完全結(jié)束。同時還要實時顯示出mockup上的全部信息，并支持不同類型的比賽，在此欄目中，足球比賽主要分為三種狀態(tài)，即upcoming、live和Gameover，而且要保證AllScores能夠連接到Schedulepage上。

2.4Schedule頁面設計

Schedule頁面也是組成視頻完整的主要頁面之一，和Gaem頁面相比，Schedule頁面比較注重細節(jié)，也是足球內(nèi)視頻網(wǎng)站頁面進行分析[3]。比如在Schedule頁面上需要清楚顯示各大足球聯(lián)賽的全部比賽日程，那一天有那場比賽，分別是那個隊伍隊長那個隊伍，比賽的地帶以及球員和教練員的信息。并附上比賽轉(zhuǎn)播的鏈接，保證Schedule頁面能夠跳轉(zhuǎn)到Game頁面。響應式設計技術(shù)在Schedule頁面研發(fā)中的應用主要體現(xiàn)在：在Schedule頁面中需要保證每場足球比賽，都能順利轉(zhuǎn)接到Game頁面上；Schedule頁面上的數(shù)據(jù)主要來來自于后端更新；Schedule頁面上的日歷需要能夠清楚顯示出那些天是有足球比賽的，那些天是沒用的，為用戶提供一目了然的賽程信息；如果足球比賽正在進行，要輪詢請求Schedulefeed進行實時更新，包括目前賽場上的人員、比賽分數(shù)、比賽的狀態(tài)等。

3響應式設計技術(shù)在視頻網(wǎng)站研發(fā)中的實現(xiàn)方法

3.1流體布局的實現(xiàn)

響應式視頻網(wǎng)站在進行流體布局時，多是根據(jù)用戶所用設備的分辨率進行判斷，主要針對PC設備、Pad設備、Mobile設備來實現(xiàn)的，具體的實現(xiàn)情況如下：@mediaalland（max-width：999px）{/*[0.999]*///頁面寬度在/[0，999]的樣式}。@mediaalland（max-width：767px）{/*[0.767]*///頁面寬度在/[0，767]的樣式，并要覆蓋上面的[0，999]的部分樣式}。

3.2液體圖片的實現(xiàn)

響應式視頻網(wǎng)站研發(fā)難度比較小，但如何讓每張圖片都具有自動適應的能力，是影響響應式視頻網(wǎng)站研發(fā)效果的關(guān)鍵[4]。若Web頁面并不會受到寬帶的影響，可先制作一張圖，適應最大的屏幕，再通過樣式來控制不同設備下現(xiàn)實的大小。也可以為不同的斷點，提供不同的圖片。

3.3響應式實現(xiàn)方法

目前很多視頻網(wǎng)站頁面上，經(jīng)常出現(xiàn)壓縮顯示在一個屏幕下的問題。響應式視頻網(wǎng)站中融入了CSS3，可有效擴展媒體類型概念，并檢查特定的屏幕尺寸，從而實現(xiàn)響應式應用[5-6]。

4結(jié)語

采用理論結(jié)合實踐的方法，分析了響應式設計技術(shù)在視頻網(wǎng)站開發(fā)中的應用，分析結(jié)果表明，在網(wǎng)絡技術(shù)和信息技術(shù)飛速發(fā)展的背景下，傳統(tǒng)網(wǎng)頁設計類視頻網(wǎng)站已經(jīng)難以滿足時代發(fā)展需求，存在很多弊端，無法為用戶提供更加良好的體驗。將響應式設計技術(shù)應用到視頻網(wǎng)站開發(fā)中，可按照用戶設備的實際情況，進行自動適應性響應，從而為用戶觀看視頻提供更好的體驗。

作者:張濤 么偉偉 單位:石家莊信息工程職業(yè)學院