將視頻融入網(wǎng)頁設(shè)計有哪些講究?

2017-2-3    資深UI設(shè)計者


如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


隨著網(wǎng)絡(luò)傳輸速度的提升,視頻在網(wǎng)頁中的應(yīng)用越來越多,也越來越廣泛,帶寬和流量對于網(wǎng)頁視頻的限制已經(jīng)不再像5年前那么明顯。而移動端設(shè)備的性能的提升,在移動端網(wǎng)頁中使用視頻也并不顯得吃力。所以,今天我們常常能在不同的網(wǎng)頁中看到各種不同功用的視頻。

常言道一圖勝千言,而視頻比起圖片所能承載的信息量更大。如果能夠有效的使用視頻,它對于用戶的吸引力會非常明顯——它可以更好的傳遞情緒,更加富有表現(xiàn)力,能讓用戶更容易“感受”到你想要傳遞的信息。不過,相比于其他元素,視頻都比較“重”的媒體,使用的時候要謹慎。

今天這篇文章,我們來聊聊網(wǎng)頁設(shè)計中視頻的運用技巧。

另外,你還需要這些視頻素材:

  1. 《酷站丨超過4000部影片+動畫的高畫質(zhì)素材免費可商用》
  2. 《在線就能用!10個幫你修圖+剪輯視頻+PPT制作的網(wǎng)站》
  3. 《酷站兩連發(fā)!超實用的圖庫搜索引擎+可商用的短片素材站》

1、不要完全依賴視頻

無論是在網(wǎng)站還是APP當中,用戶查看視頻的方式千差萬別,并沒有一套完全標準化的規(guī)程。有些用戶喜歡立刻查看視頻,有些用戶則喜歡先查看周圍的文本和其他的信息,而且有的用戶希望能夠掌控視頻的播放與否,有些則完全不在意。從這個角度上來說,如果視頻自動播放,其實是無法確保用戶能夠即時查看的。因此,如果用戶無法直接訪問內(nèi)容,或者單純的不想查看內(nèi)容的時候,應(yīng)該以某種方式提醒用戶。

小貼士:至少保證視頻中所包含的重要信息,以文字或者圖片這樣的靜態(tài)媒體的形式呈現(xiàn)出來。

2、自動靜音

在默認情況下,最好將音量設(shè)置為靜音,并且可以通過設(shè)置打開。

當用戶打開網(wǎng)頁的時候,并不喜歡這種未經(jīng)許可就自動播放的行為,因為外放的聲音常常會讓人驚愕。那些受此影響或者不想查看視頻的用戶,需要花費額外的聲音來關(guān)閉外放的聲音,或者暫停播放,這些超出用戶預(yù)期的情況會打斷用戶正在做的事情,讓他們無法專注。忙亂之間,有的用戶能找到關(guān)閉音頻或者視頻的辦法,而有的用戶則會干脆關(guān)閉頁面或者APP,它給用戶帶來的負面影響是非常明顯的。

1-sxsQBUFoorO3mM5mCyeM3A

Facebook 的視頻同樣被設(shè)置為自動播放,但是音頻并沒有默認外放,而是保持關(guān)閉狀態(tài),當用戶決定查看視頻的時候,可以選擇音頻外放。

3、留下好的第一印象

視頻的表現(xiàn)力是非常突出的,冗長的介紹不如直接而富有沖擊力的視覺呈現(xiàn)。

融入網(wǎng)頁的視頻,通常不會太長,直觀而清晰的開頭是非常重要的。網(wǎng)站如果本身不是Youtube 這種視頻平臺的話,用戶在此看到視頻的時候,通常會需要快速了解它所要呈現(xiàn)的內(nèi)容,了解其中的價值,否則他們會立刻轉(zhuǎn)向網(wǎng)站其他地方,尋求更加直觀可見的內(nèi)容。想要留住用戶,就需要讓視頻給用戶留下好的第一印象,抓住人們的注意力,讓他們盡可能留下來,將更多的時間花費在這里。

4、充分利用每一秒

在網(wǎng)頁中所使用的視頻和電影的邏輯并不同,短小精悍的視頻更符合網(wǎng)頁的使用場景和用戶的心理需求。許多優(yōu)秀的網(wǎng)頁設(shè)計實例中,視頻大都是選擇是精悍綿密的剪輯。用戶無法像查看文字內(nèi)容一樣一目十行,快速了解信息,同時他們在瀏覽網(wǎng)頁的時候并不會像在視頻平臺上那樣靜候劇情推進,不同的場景和需求促使他們希望在網(wǎng)頁中更快獲取信息,所以,即使幾秒的等待也會讓用戶無法忍受。

1-PUVJn9JC1NvRZrS1Y14oPQ

小貼士:信息集中而又短小的視頻更容易引起訪客的注意力。

5、讓用戶來掌控

讓用戶來決定如何查看視頻、何時播放視頻才能讓視頻內(nèi)容真正為用戶所用。用戶應(yīng)當能夠?qū)λ麄兯榭吹囊曨l進行完全控制,無論是播放和暫停,還是音量的大小,都應(yīng)該在用戶的掌控范疇以內(nèi)。當然,控制權(quán)的大小和設(shè)計的目的是有關(guān)系的,和視頻在整個設(shè)計中的角色也有關(guān)系。有些視頻是作為視頻背景而存在,重在營造氛圍,通常也不會有外放的聲音,很多時候并不會給用戶以較高的控制權(quán),但是這樣也不會有太大的問題。

1-xGdvMDhAsyCZdyJZKMfGpw

6、確??稍L問性

為用戶提供多種不同獲取內(nèi)容的方式,提升網(wǎng)頁內(nèi)容本身的可訪問性。對于無法查看或者無法聽到視頻內(nèi)容的用戶而言,輔助性的字幕和完整的文本內(nèi)容是不錯的補充方案。比如TED的視頻就涵蓋了字幕和文本內(nèi)容,兼顧到了許多有訪問性問題的用戶。

1-XboL_0MPTrsE5zXfNNBFkw

小貼士:將相關(guān)的文本內(nèi)容放在靠近視頻的地方,便于用戶獲取信息。

7、提供后續(xù)步驟

作為網(wǎng)頁的設(shè)計者,有必要考慮一下用戶看完視頻之后后續(xù)能做什么。實際上,許多網(wǎng)站的設(shè)計者并沒有深入的思考這樣的問題,使得視頻最終僅僅只是作為單純的內(nèi)容而存在,當用戶看完之后,并不會提供后續(xù)操作的可能性。實際上,當用戶看完視頻之后,你可以引導(dǎo)他們查看更多的內(nèi)容,甚至將它融入到整個網(wǎng)頁的信息流當中,讓內(nèi)容活起來。最常見的處理方法,就是推薦相關(guān)的視頻。

1-D_Vw2Po-MDyXctHFCf2tEQ

結(jié)語

視頻作為富媒體而存在,會在網(wǎng)頁和APP中越來越多的呈現(xiàn),它的玩法眾多,用戶在體驗和設(shè)計上的需求也千變?nèi)f化。如何讓視頻更加貼合使用場景,讓用戶積極參與,還能靈活地同其他內(nèi)容聯(lián)動起來,都是設(shè)計師需要思考的問題。

【這些最佳實踐幫你在UI設(shè)計上更上一層樓】

  1. 《網(wǎng)頁設(shè)計中,如何突破柵格的限制又保持協(xié)調(diào)?》
  2. 《幫你搞定長滾動網(wǎng)頁的設(shè)計最佳實踐》
  3. 《覺得自己學(xué)了假設(shè)計?真正的新用戶引導(dǎo)應(yīng)該這么設(shè)計》
  4. 《老生常談!設(shè)計高素質(zhì)的UI應(yīng)該掌握這7個關(guān)鍵屬性》
  5. 《這8個要點,能讓你的網(wǎng)頁首圖抓住用戶注意力》

原文地址:uxplanet
原文作者:Nick Babich

優(yōu)設(shè)譯文:@陳子木

文章鏈接:http://www.uisdc.com/best-practices-for-video


藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔