如何透過動態影像提升網頁魅力?

如何透過動態影像提升網頁魅力?

技越發達、人類越懶惰。當我們在訊息大爆炸的網路中疲倦于文字和圖片中。令人耳目一新的動態影像通常容易脫穎而出吸引用戶的注意。

科技越發達、人類越懶惰。當我們在訊息大爆炸的網路中疲憊於文字和圖片中。令人耳目一新的動態影像通常容易脫穎而出吸引用戶的注意。比如 SnapChat 的崛起,讓我們了解到原來更年輕族群的使用者漸漸喜愛自己產出影像去表達個人喜好;即時通訊軟體功能從過去的發送文字溝通到現在人們卻慢慢的習慣透過傳送語音信息。這種種跡象都在告訴我們,用戶的交流方式正在改變。
因此身為網頁設計師的我們在網頁設計上加上影音效果,從 HTML5 為基礎的技術上實現早已不是難題。但更重要的思考點將會是:如何設計出圍繞主題,隨著需傳達的資訊,運用動態影像讓網頁本身更具魅力?

A. 關注內容,迅速帶入

影片,是最直觀的訊息傳達方式,大大減少了文字的閱讀成本,適用於短時間內講清楚一件事,有利於傳播分享。先從基於用戶內容的創意眾籌平台說起,Kickstarter 相信,「一個好的創意,透過適當的溝通,可以快速地廣為流傳」。隨著觀眾對影像表達的青睞,影片成為創意的主流曝光方式,大多數創意者選擇深情並茂演說,使得 idea 本身更具說服力和感染力。Kickstarter 每年都會選取年度最佳項目,製作網站的年度集錦宣傳專題頁,提高網站平台的品牌魅力。專題頁先飛入提綱挈領的 slogan 和幾則關鍵數據來撐滿瀏覽器,緩解網頁載入時間,讓影片背景動態影像得以流暢切換播放。年度項目以動態影像方式把新用戶迅速帶入內容,了解平台理念。
motion-web-kickstarter-1
→Kickstarter年度集錦

B. 序曲鋪墊,身歷其境

文字和圖像還不足以身歷其境?透過影片創造臨場感,增強用戶的真實體驗。Eleks 公司創意製作的 GoogleGlass 概念網站這麼做:網頁前加上一段動態影像序曲,呈現沉浸式的場景。戴上 GoogleGlass,透過主觀鏡頭把用戶的真實生活想象成電子遊戲世界。序曲過後,在動態影像中加入滑鼠互動,透過引導重點式的把技術細節闡述清楚。增強體驗的同時,也不失為提高網站停留時間的有效途徑。
motion-web-kickstarter-2
→ Google Glass Experiment-Real-Life Digital Game

C. 一條好線索,影像碎片蒙太奇

影像碎片也足以撐起一個有趣的小視頻,首先需要尋找一條好線索。先舉個小栗子,Google 今年的國際婦女節 Doodle 選擇動態影像突破常規的藝術插畫形式,點擊搜尋首頁。這部影片 Doodle 將世界各地婦女的一個笑容、一句地方語祝福拼貼成一支影像串燒。親民的路人形象與平民式鏡頭感拉近了用戶距離,影片歡快的小節奏配樂格外清新,令人感到簡單輕鬆、貼近生活。
motion-web-kickstarter-3
→Google Doodle-國際婦女節
影像碎片的節奏與想要傳達何種情感緊密相關,怎麼形成節奏感?把相似鏡頭感的影像碎片,以一致畫面運動速度組織起來,就能構成特有的秩序。NISSIN(日清食品)在進入官網前加入了動態影像,通過特寫慢鏡頭把日清食品、食材和人物滿足的表情組織起來,以 5 秒一個片段切換和慢鏡頭內容形成快慢對比。影片開頭的動態影像可以設置烹飪倒計時時間,作為線索,點題「速食」,並加入新鮮食物的畫面讓人產生等待日清速食的美好體驗,喚醒用戶的味覺,帶著好心情進入官網。
motion-web-kickstarter-4
→NISSINGroup
找出一條好線索串起碎片化影像,可使得整個創意表現的豐厚完整。再舉個財大氣粗的栗子,年初的 Mac30 年專題頁企劃,彰顯了 Apple 品牌的磅礴氣勢。」同一時間,不同時區,使用 Apple 設備創造奇跡。」攝製團隊在五大洲不同時區選取 15 個拍攝地點,以洛杉磯的攝影棚為指揮中心,同一時間用 iPhone5s 拍攝素材,記錄世界各地的人使用 Apple 產品所做的超乎想像的片刻。由於同一時間拍攝與指揮中心的實時溝通和影像同步,Mac30 年影片在幾天時間內製作完成。從整個記錄與製作團隊的使用設備到被記錄的內容,緊鎖主題,強有力傳達 Apple 的品牌承諾:將科技的創造力賦予每個人。
motion-web-kickstarter-5
→Mac 30-years
motion-web-kickstarter-6
→Mac 30-years behind-the-scenes Story

D. 故事與話題,優雅地劈情操

網頁通過講故事的方式把信息富有情感的傳達給用戶,是未來的趨勢之一,而視頻是講故事的好手段。Mac30 年之後的故事還沒完,Apple 在官網 ipad 欄目開闢專題作為品牌承諾的延續,「你的詩篇」系列故事,記錄著人們對生活的熱愛和激情。值得一提的是此專題已陸續持續半年了,激情不斷,差不多每月會帶給我們新的故事和驚喜。最近此專題跨平台,在地方電視台投放了電視廣告的剪輯版本。「你的詩篇」企劃最初源於年初 Apple 拉開的序曲,《Your Verse Anthem》(你的讚美詩)中對人生的崇高追求和真正生活的意義的解讀,在 Apple 的品牌理念中注入生活態度。

motion-web-kickstarter-5

→Apple.com Your-verse

設立一個開放式的話題展開用戶互動,通過動態影像娓娓道來。Eastpak 品牌廣告活動網頁以唯美的影像碎片記錄方式表達宣傳話題:#The last time you did the first thing#(最近一次做生平第一次做的事情),視頻碎片輪迴滾動 5s 左右表達一個事件。唯美的鏡頭讓視線無法移開,動態畫面閱讀順序搶先於文字並略帶意識流節奏,向旅行者和愛好極限運動的年輕用戶傳達了一個 38 年老品牌的勇於突破和堅持。網頁互動落地于官方 Facebook 留言牆,記錄此話題的延展討論。
motion-web-kickstarter-7
→ #The last time you did the first thing Vimeo
→eastpak.com

寫在最後

也許有人感嘆視頻的製作成本高,但創意無價。如果有心,不妨為產品尋覓一條好線索,抬起照相機或手機,捕捉搜集些影像碎片,故事就在身邊。浮躁的網路世界還有什麼能吸引眼球、打動人心?從出其不意和產生共鳴下手吧。
轉載自:騰訊 ISUX

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。