轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   m.hengshangtqd.cn  )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來源：http://www.uisdc.com/100-things-you-should-know-about-design

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

視頻有著不算短的歷史：最早是電影，然后是電視，現(xiàn)在出現(xiàn)在我們隨身攜帶的手機(jī)、平板上。網(wǎng)頁中也很早便出現(xiàn)了視頻。最開始的時候是Flash格式的視頻和動效。而現(xiàn)在除了Flash之外，我們還有HTML5和其它選擇。說簡單也簡單，只需要在網(wǎng)頁中嵌入幾段代碼，就能實(shí)現(xiàn)視頻效果。但實(shí)際上，視頻要想用的出彩，并不容易。

視頻的進(jìn)化

過去的網(wǎng)頁設(shè)計(jì)，如果想要加入視頻，同時還保證整體美感，不是很容易。我們來和現(xiàn)在做個對比。

過去：因?yàn)閮?yōu)美的網(wǎng)頁設(shè)計(jì)必然需要高清高質(zhì)的視頻，若想拍攝好的視頻，那么需要昂貴的硬件支持。
現(xiàn)在：相機(jī)設(shè)備越來越平易近人，手機(jī)拍照效果也越來越好，拍攝高清視頻不是什么難事。

過去：若想在網(wǎng)頁中添加動畫片的，需要懂一點(diǎn)Flash知識或者動作腳本知識，或者干脆雇人。
現(xiàn)在：數(shù)不清的軟件和工具，能夠幫助你實(shí)現(xiàn)目標(biāo)。

我們再來想想YouTube，創(chuàng)立于2005年。YouTube是廣受大眾歡迎的視頻網(wǎng)站，在其中用戶可以上傳自己拍攝的視頻片段?，F(xiàn)在，即便是一些公司，也利用YouTube來發(fā)布產(chǎn)品預(yù)告。

我的看法是，YouTube催進(jìn)了互聯(lián)網(wǎng)視頻的進(jìn)化。他們讓視頻病毒式的傳播于互聯(lián)網(wǎng)中。YouTube的理念前無古人：任何人都可以發(fā)布視頻、分享喜愛的視頻，不論視頻拍攝者水平的高低、經(jīng)驗(yàn)的多寡。更平易近人。

現(xiàn)在的互聯(lián)網(wǎng)視頻

時至今日，我們的技術(shù)越來越先進(jìn)，手段越來越豐富，我們甚至可以拋棄Flash.HTML5技術(shù)可輕松實(shí)現(xiàn)視頻播放。技術(shù)越先進(jìn)，我們的設(shè)計(jì)便越方便，可設(shè)計(jì)的空間也越大，用戶體驗(yàn)也自然更好。

那么，在網(wǎng)頁設(shè)計(jì)中加入視頻的好處是什么呢？

視頻元素有哪些用處?

視頻的使用方法有很多，均能夠提高用戶的瀏覽體驗(yàn)。一圖勝千言？沒錯，那么只要播放流暢、加載迅速，那么視頻的傳達(dá)能力完全可以超越圖像，從而提高整體設(shè)計(jì)水品。

不過設(shè)計(jì)前還是要理性思考一番：添加視頻，利大于弊，還是弊大于利？

倘若是視頻可以更好的傳達(dá)想要傳達(dá)的信息，更好的傳遞品牌、產(chǎn)品、服務(wù)的信息，那么便采用。

倘若添加視頻后，同時引入了一些不利于瀏覽的元素，這時候便該謹(jǐn)慎取舍了。

1.用來介紹產(chǎn)品/服務(wù)

用來介紹產(chǎn)品或者服務(wù)，視頻再適合不過了，能夠例舉出一大堆功能，無論文字、圖片都沒有視頻更形象。很多SaaS(軟營）網(wǎng)站基本都使用視頻來介紹產(chǎn)品。

優(yōu)秀視頻的要訣在于，一定要抓住重點(diǎn)。那些無關(guān)痛癢的功能可以在下面用圖像、文字?jǐn)⑹觥５且曨l一定要利用有限的時間，向用戶展示最主要的功能，這樣才能使用戶印象深刻，從而激發(fā)他們購買產(chǎn)品的興趣。

我們來看看Clear應(yīng)用以及Papper應(yīng)用的網(wǎng)頁設(shè)計(jì)

Clear

Clear是一款待辦清單應(yīng)用。若想學(xué)習(xí)在網(wǎng)頁設(shè)計(jì)中使用視頻，那么Clear的網(wǎng)站很值得一看，他們的視頻運(yùn)用很典范：聚焦重點(diǎn)。

此外，還有一點(diǎn)值得學(xué)習(xí)，即便網(wǎng)絡(luò)出問題、瀏覽器不支持，無法播放視頻，那么產(chǎn)品信息依然能夠通過圖片、文字來清晰傳遞。

視頻位于網(wǎng)頁的標(biāo)頭中，處于應(yīng)用下載鏈接的正右方

視頻僅僅是關(guān)于應(yīng)用的介紹，但是效果極佳，和品牌形象、和網(wǎng)站的視覺風(fēng)格相一致。一致性能夠使松散的元素整合，聯(lián)合打造清晰、明朗的品牌形象，讓用戶對品牌產(chǎn)生信任，用戶會想：”嗯，不錯，很整體，夠?qū)I(yè)，這款應(yīng)用不會差。”從而購買應(yīng)用。

Paper

Paper是一款iPad應(yīng)用，允許用戶在其中畫草圖或者隨意涂鴉。

Paeper的網(wǎng)頁設(shè)計(jì)非常注意視頻元素。相較Clear網(wǎng)站中的視頻，Paper的視頻更大，更有趣，也更容易引人注意。碩大的”播放”圖標(biāo)，引起了瀏覽用戶的興趣，很有效的行為召喚。

整體風(fēng)格匹配，風(fēng)格優(yōu)美，視頻流暢，用戶購買的可能性很大。再強(qiáng)調(diào)一次：視頻一定要和品牌、網(wǎng)頁設(shè)計(jì)相一致。

 

2.帶給用戶隱藏驚喜

視頻還有一個功能，便是愉悅用戶。通常都會把視頻隱藏起來，作為隱藏功能，當(dāng)用戶進(jìn)行某種操作后，便會出現(xiàn)，會帶給他們意想不到的驚喜。有點(diǎn)像復(fù)活節(jié)彩蛋，但是更有趣！

是否使用視頻，取決于所傳達(dá)的內(nèi)容。一些嚴(yán)謹(jǐn)、保守的公司網(wǎng)站，很明顯不適合使用視頻，但是一些非常隨意、輕松的網(wǎng)站，運(yùn)用視頻可以讓用戶的瀏覽體驗(yàn)更愉快。

Handheld Conf

Handheld Conf提倡 “小設(shè)備上的大理念”在Handheld Conf 的主頁上，陳列了很多演講者的照片和演講題目，只需把鼠標(biāo)懸停在演講者的圖像中，他們便會”動”起來！有趣吧？

利用這種懸停手段來實(shí)現(xiàn)意想不到的驚喜，可以增加網(wǎng)站的交互性。除此之外，我們可以舉一反三，想出更多的細(xì)節(jié)，愉悅用戶。

Playground Inc

Playground Inc 是一家多倫多的數(shù)字創(chuàng)意機(jī)構(gòu)。在他們的主頁中，他們聰明的利用動畫來描述他們的理念。滾動頁面一定量時，動畫才會出現(xiàn)，而不滾動時，更像是靜態(tài)的插畫。

很有趣，像不像游戲中的隱藏關(guān)，仔細(xì)探索才會發(fā)現(xiàn)？雖然我們一直都說要滿足用戶的預(yù)期，但是突然出現(xiàn)的小禮物，誰都不會拒絕吧？偶爾出用戶意料，用戶會感到有意思。

3.愉悅視覺

除了帶給用戶驚喜，還可以讓視覺元素更有趣味，更有份量。

如果你的視覺元素很少，那么不妨”精煉”一點(diǎn)，讓它們”動”起來。

Symbolset

Symbolset的圖標(biāo)字體運(yùn)用得當(dāng)，看看這里，如果是靜態(tài)的字體，那么效果肯定一般，而這種可愛的手法能夠吸引每位用戶，彰顯不同。

背景色彩的漸變也很有意思，仿佛這個網(wǎng)站具有生命，在跟你說話，跟你溝通。有趣的、人性化的設(shè)計(jì)，能夠建立用戶與公司間的信任。

4.取代大背景圖

最近的網(wǎng)頁設(shè)計(jì)趨勢是超大高清背景圖，經(jīng)常是全屏尺寸的背景圖。而現(xiàn)在有些公司改用全屏視頻做展示。

然而這也帶來了一些挑戰(zhàn)，精挑細(xì)選的靜態(tài)圖片肯定能夠和其他元素完美融合。但是動態(tài)的視頻，可能會破壞其他元素的視覺效果。因此視頻挑選要審慎。

Spotify

Spotify是倍受歡迎的音樂流媒體服務(wù)。他們網(wǎng)站的主頁使用了大比例的背景視頻，效果很贊，循環(huán)的視頻與其他極簡主義設(shè)計(jì)元素很好的匹配。

視頻中包含了音效，可以聽聽，能夠更好的詮釋視頻。

視覺+聽覺，多種體驗(yàn)的糅合，能夠幫助用戶更好的理解Spotify的服務(wù)和理念。

5.Slow Mo

Slow Mo 專攻高速攝像。主頁的中心區(qū)域他們用視頻取代了圖像。

所播放的視頻采用慢動作模式，完美的闡釋了品牌名稱。能夠清清楚楚的記錄快速的瞬間。而且視頻而視頻層上方的文字結(jié)合良好。

6.更完美的表達(dá)故事

想要講個故事？可辭不達(dá)意怎么辦？用視頻試試，可以顯著的提高表達(dá)能力。故事可以提高設(shè)計(jì)的情感色彩以及人性感觸。

Daneden.me

Dan是一名設(shè)計(jì)師，最近被Dropbox雇傭。在Dan的個人網(wǎng)站中，有部分內(nèi)容和描述是用視頻的方式呈現(xiàn)的，讓瀏覽者更好的理解他所說的話

無需截圖，無需鏈接，提高用戶理解，只需一段簡短的視頻。而且讓頁面活了起來。

我們每天都要瀏覽很多網(wǎng)站，能夠記住的卻寥寥無幾，可以參考一下Dan的設(shè)計(jì)，他的網(wǎng)站讓人記憶深刻。

總結(jié)

因此，網(wǎng)頁設(shè)計(jì)中使用視頻，將會提高設(shè)計(jì)的表現(xiàn)力，只要使用得當(dāng)，你的頁面會更加出彩。如何學(xué)習(xí)使用視頻？根據(jù)個人實(shí)際經(jīng)驗(yàn)，多看看優(yōu)秀的案例，然后多思考，哪里好，可以進(jìn)行借鑒，哪里一般，可以摒棄。
最后，別忘了添加視頻元素后，整體的審查一番，看看視頻能否和整體風(fēng)格匹配。