響應(yīng)式設(shè)計(jì)技術(shù)在視頻網(wǎng)站中應(yīng)用

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

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

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

引言

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

1響應(yīng)式設(shè)計(jì)技術(shù)的優(yōu)勢

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

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

2.1響應(yīng)式設(shè)計(jì)技術(shù)總體應(yīng)用方案

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

2.2視頻網(wǎng)站視覺設(shè)計(jì)

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

2.3Game頁面設(shè)計(jì)

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

2.4Schedule頁面設(shè)計(jì)

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

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

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

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

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

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

3.3響應(yīng)式實(shí)現(xiàn)方法

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

4結(jié)語

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

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