響應式設計技術在視頻網站中應用

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

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

關鍵詞：響應式設計技術；視頻網站；視覺設計

引言

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

1響應式設計技術的優勢

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

2響應式設計技術在視頻網站研發中的應用要點

2.1響應式設計技術總體應用方案

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

2.2視頻網站視覺設計

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

2.3Game頁面設計

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

2.4Schedule頁面設計

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

3響應式設計技術在視頻網站研發中的實現方法

3.1流體布局的實現

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

3.2液體圖片的實現

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

3.3響應式實現方法

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

4結語

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

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