手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

讓網(wǎng)站更生動!那些在網(wǎng)頁中完美運用視頻元素的案例

2013-11-28    藍藍設(shè)計的小編

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

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

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

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

視頻的進化

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

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

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

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

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

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

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

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

視頻元素有哪些用處?

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

不過設(shè)計前還是要理性思考一番:添加視頻,利大于弊,還是弊大于利?

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

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

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

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

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

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

Clear

Clear是一款待辦清單應用。若想學習在網(wǎng)頁設(shè)計中使用視頻,那么Clear的網(wǎng)站很值得一看,他們的視頻運用很典范:聚焦重點。

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

clear-1

視頻位于網(wǎng)頁的標頭中,處于應用下載鏈接的正右方

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

clear-2

Paper

Paper是一款iPad應用,允許用戶在其中畫草圖或者隨意涂鴉。

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

paper-1

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


paper-2

 

2.帶給用戶隱藏驚喜

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

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

Handheld Conf

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

handheldconf

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

Playground Inc

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

playgroundinc

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

3.愉悅視覺

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

如果你的視覺元素很少,那么不妨”精煉”一點,讓它們”動”起來。

Symbolset

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

symbolset

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

4.取代大背景圖

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

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

Spotify

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

spotify

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

視覺+聽覺,多種體驗的糅合,能夠幫助用戶更好的理解Spotify的服務和理念。

5.Slow Mo

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

slowmo

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

6.更完美的表達故事

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

Daneden.me

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

daneden

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

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

總結(jié)

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

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.88yangsc.com

存檔