2013-11-28 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( www.73404.com.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
來(lái)源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
視頻有著不算短的歷史：最早是電影，然后是電視，現(xiàn)在出現(xiàn)在我們隨身攜帶的手機(jī)、平板上。網(wǎng)頁(yè)中也很早便出現(xiàn)了視頻。最開(kāi)始的時(shí)候是Flash格式的視頻和動(dòng)效。而現(xiàn)在除了Flash之外，我們還有HTML5和其它選擇。說(shuō)簡(jiǎn)單也簡(jiǎn)單，只需要在網(wǎng)頁(yè)中嵌入幾段代碼，就能實(shí)現(xiàn)視頻效果。但實(shí)際上，視頻要想用的出彩，并不容易。
過(guò)去的網(wǎng)頁(yè)設(shè)計(jì)，如果想要加入視頻，同時(shí)還保證整體美感，不是很容易。我們來(lái)和現(xiàn)在做個(gè)對(duì)比。
過(guò)去：因?yàn)閮?yōu)美的網(wǎng)頁(yè)設(shè)計(jì)必然需要高清高質(zhì)的視頻，若想拍攝好的視頻，那么需要昂貴的硬件支持。
現(xiàn)在：相機(jī)設(shè)備越來(lái)越平易近人，手機(jī)拍照效果也越來(lái)越好，拍攝高清視頻不是什么難事。
過(guò)去：若想在網(wǎng)頁(yè)中添加動(dòng)畫(huà)片的，需要懂一點(diǎn)Flash知識(shí)或者動(dòng)作腳本知識(shí)，或者干脆雇人。
現(xiàn)在：數(shù)不清的軟件和工具，能夠幫助你實(shí)現(xiàn)目標(biāo)。
我們?cè)賮?lái)想想YouTube，創(chuàng)立于2005年。YouTube是廣受大眾歡迎的視頻網(wǎng)站，在其中用戶可以上傳自己拍攝的視頻片段。現(xiàn)在，即便是一些公司，也利用YouTube來(lái)發(fā)布產(chǎn)品預(yù)告。
我的看法是，YouTube催進(jìn)了互聯(lián)網(wǎng)視頻的進(jìn)化。他們讓視頻病毒式的傳播于互聯(lián)網(wǎng)中。YouTube的理念前無(wú)古人：任何人都可以發(fā)布視頻、分享喜愛(ài)的視頻，不論視頻拍攝者水平的高低、經(jīng)驗(yàn)的多寡。更平易近人。
時(shí)至今日，我們的技術(shù)越來(lái)越先進(jìn)，手段越來(lái)越豐富，我們甚至可以拋棄Flash.HTML5技術(shù)可輕松實(shí)現(xiàn)視頻播放。技術(shù)越先進(jìn)，我們的設(shè)計(jì)便越方便，可設(shè)計(jì)的空間也越大，用戶體驗(yàn)也自然更好。
那么，在網(wǎng)頁(yè)設(shè)計(jì)中加入視頻的好處是什么呢？
視頻的使用方法有很多，均能夠提高用戶的瀏覽體驗(yàn)。一圖勝千言？沒(méi)錯(cuò)，那么只要播放流暢、加載迅速，那么視頻的傳達(dá)能力完全可以超越圖像，從而提高整體設(shè)計(jì)水品。
不過(guò)設(shè)計(jì)前還是要理性思考一番：添加視頻，利大于弊，還是弊大于利？
倘若是視頻可以更好的傳達(dá)想要傳達(dá)的信息，更好的傳遞品牌、產(chǎn)品、服務(wù)的信息，那么便采用。
倘若添加視頻后，同時(shí)引入了一些不利于瀏覽的元素，這時(shí)候便該謹(jǐn)慎取舍了。
用來(lái)介紹產(chǎn)品或者服務(wù)，視頻再適合不過(guò)了，能夠例舉出一大堆功能，無(wú)論文字、圖片都沒(méi)有視頻更形象。很多SaaS(軟營(yíng)）網(wǎng)站基本都使用視頻來(lái)介紹產(chǎn)品。
優(yōu)秀視頻的要訣在于，一定要抓住重點(diǎn)。那些無(wú)關(guān)痛癢的功能可以在下面用圖像、文字?jǐn)⑹觥５且曨l一定要利用有限的時(shí)間，向用戶展示最主要的功能，這樣才能使用戶印象深刻，從而激發(fā)他們購(gòu)買(mǎi)產(chǎn)品的興趣。
我們來(lái)看看Clear應(yīng)用以及Papper應(yīng)用的網(wǎng)頁(yè)設(shè)計(jì)
Clear是一款待辦清單應(yīng)用。若想學(xué)習(xí)在網(wǎng)頁(yè)設(shè)計(jì)中使用視頻，那么Clear的網(wǎng)站很值得一看，他們的視頻運(yùn)用很典范：聚焦重點(diǎn)。
此外，還有一點(diǎn)值得學(xué)習(xí)，即便網(wǎng)絡(luò)出問(wèn)題、瀏覽器不支持，無(wú)法播放視頻，那么產(chǎn)品信息依然能夠通過(guò)圖片、文字來(lái)清晰傳遞。
視頻位于網(wǎng)頁(yè)的標(biāo)頭中，處于應(yīng)用下載鏈接的正右方
視頻僅僅是關(guān)于應(yīng)用的介紹，但是效果極佳，和品牌形象、和網(wǎng)站的視覺(jué)風(fēng)格相一致。一致性能夠使松散的元素整合，聯(lián)合打造清晰、明朗的品牌形象，讓用戶對(duì)品牌產(chǎn)生信任，用戶會(huì)想：”嗯，不錯(cuò)，很整體，夠?qū)I(yè)，這款應(yīng)用不會(huì)差。”從而購(gòu)買(mǎi)應(yīng)用。
Paper是一款iPad應(yīng)用，允許用戶在其中畫(huà)草圖或者隨意涂鴉。
Paeper的網(wǎng)頁(yè)設(shè)計(jì)非常注意視頻元素。相較Clear網(wǎng)站中的視頻，Paper的視頻更大，更有趣，也更容易引人注意。碩大的”播放”圖標(biāo)，引起了瀏覽用戶的興趣，很有效的行為召喚。
整體風(fēng)格匹配，風(fēng)格優(yōu)美，視頻流暢，用戶購(gòu)買(mǎi)的可能性很大。再?gòu)?qiáng)調(diào)一次：視頻一定要和品牌、網(wǎng)頁(yè)設(shè)計(jì)相一致。
視頻還有一個(gè)功能，便是愉悅用戶。通常都會(huì)把視頻隱藏起來(lái)，作為隱藏功能，當(dāng)用戶進(jìn)行某種操作后，便會(huì)出現(xiàn)，會(huì)帶給他們意想不到的驚喜。有點(diǎn)像復(fù)活節(jié)彩蛋，但是更有趣！
是否使用視頻，取決于所傳達(dá)的內(nèi)容。一些嚴(yán)謹(jǐn)、保守的公司網(wǎng)站，很明顯不適合使用視頻，但是一些非常隨意、輕松的網(wǎng)站，運(yùn)用視頻可以讓用戶的瀏覽體驗(yàn)更愉快。
Handheld Conf提倡 “小設(shè)備上的大理念”在Handheld Conf 的主頁(yè)上，陳列了很多演講者的照片和演講題目，只需把鼠標(biāo)懸停在演講者的圖像中，他們便會(huì)”動(dòng)”起來(lái)！有趣吧？
利用這種懸停手段來(lái)實(shí)現(xiàn)意想不到的驚喜，可以增加網(wǎng)站的交互性。除此之外，我們可以舉一反三，想出更多的細(xì)節(jié)，愉悅用戶。
Playground Inc 是一家多倫多的數(shù)字創(chuàng)意機(jī)構(gòu)。在他們的主頁(yè)中，他們聰明的利用動(dòng)畫(huà)來(lái)描述他們的理念。滾動(dòng)頁(yè)面一定量時(shí)，動(dòng)畫(huà)才會(huì)出現(xiàn)，而不滾動(dòng)時(shí)，更像是靜態(tài)的插畫(huà)。
很有趣，像不像游戲中的隱藏關(guān)，仔細(xì)探索才會(huì)發(fā)現(xiàn)？雖然我們一直都說(shuō)要滿足用戶的預(yù)期，但是突然出現(xiàn)的小禮物，誰(shuí)都不會(huì)拒絕吧？偶爾出用戶意料，用戶會(huì)感到有意思。
除了帶給用戶驚喜，還可以讓視覺(jué)元素更有趣味，更有份量。
如果你的視覺(jué)元素很少，那么不妨”精煉”一點(diǎn)，讓它們”動(dòng)”起來(lái)。
Symbolset的圖標(biāo)字體運(yùn)用得當(dāng)，看看這里，如果是靜態(tài)的字體，那么效果肯定一般，而這種可愛(ài)的手法能夠吸引每位用戶，彰顯不同。
背景色彩的漸變也很有意思，仿佛這個(gè)網(wǎng)站具有生命，在跟你說(shuō)話，跟你溝通。有趣的、人性化的設(shè)計(jì)，能夠建立用戶與公司間的信任。
最近的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)是超大高清背景圖，經(jīng)常是全屏尺寸的背景圖。而現(xiàn)在有些公司改用全屏視頻做展示。
然而這也帶來(lái)了一些挑戰(zhàn)，精挑細(xì)選的靜態(tài)圖片肯定能夠和其他元素完美融合。但是動(dòng)態(tài)的視頻，可能會(huì)破壞其他元素的視覺(jué)效果。因此視頻挑選要審慎。
Spotify是倍受歡迎的音樂(lè)流媒體服務(wù)。他們網(wǎng)站的主頁(yè)使用了大比例的背景視頻，效果很贊，循環(huán)的視頻與其他極簡(jiǎn)主義設(shè)計(jì)元素很好的匹配。
視頻中包含了音效，可以聽(tīng)聽(tīng)，能夠更好的詮釋視頻。
視覺(jué)+聽(tīng)覺(jué)，多種體驗(yàn)的糅合，能夠幫助用戶更好的理解Spotify的服務(wù)和理念。
Slow Mo 專攻高速攝像。主頁(yè)的中心區(qū)域他們用視頻取代了圖像。
所播放的視頻采用慢動(dòng)作模式，完美的闡釋了品牌名稱。能夠清清楚楚的記錄快速的瞬間。而且視頻而視頻層上方的文字結(jié)合良好。
想要講個(gè)故事？可辭不達(dá)意怎么辦？用視頻試試，可以顯著的提高表達(dá)能力。故事可以提高設(shè)計(jì)的情感色彩以及人性感觸。
Dan是一名設(shè)計(jì)師，最近被Dropbox雇傭。在Dan的個(gè)人網(wǎng)站中，有部分內(nèi)容和描述是用視頻的方式呈現(xiàn)的，讓瀏覽者更好的理解他所說(shuō)的話
無(wú)需截圖，無(wú)需鏈接，提高用戶理解，只需一段簡(jiǎn)短的視頻。而且讓頁(yè)面活了起來(lái)。
我們每天都要瀏覽很多網(wǎng)站，能夠記住的卻寥寥無(wú)幾，可以參考一下Dan的設(shè)計(jì)，他的網(wǎng)站讓人記憶深刻。
因此，網(wǎng)頁(yè)設(shè)計(jì)中使用視頻，將會(huì)提高設(shè)計(jì)的表現(xiàn)力，只要使用得當(dāng)，你的頁(yè)面會(huì)更加出彩。如何學(xué)習(xí)使用視頻？根據(jù)個(gè)人實(shí)際經(jīng)驗(yàn)，多看看優(yōu)秀的案例，然后多思考，哪里好，可以進(jìn)行借鑒，哪里一般，可以摒棄。
最后，別忘了添加視頻元素后，整體的審查一番，看看視頻能否和整體風(fēng)格匹配。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.73404.com.cn