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