根據應用的目標和功用不同, H5專題頁分為多種表現形式, 如類似幻燈片的圖文加音效形式, 問答、測試類形式, 禮物、賀卡、簡歷、邀請函形式, 以及游戲形式等幾大類。
不論形式如何, 能夠吸引眼球并成功傳播, 且使用戶建立對品牌形象的良好認知等, 才是衡量一個H5設計精彩的最終標準。那么, 如何達到這個效果呢?作為一名設計師, 下面就H5頁面的視覺設計, 結合一些案例, 與大家一起探討“如何給H5頁面設計品質加分的一些小技巧”:
一、講究細節, 風格統一
要成就高品質的用戶體驗, 除了在細節上體現設計師別具匠心之處, 更要注意設計整體風格的統一性。如整體走漫畫風, 音效也必須與之相配;時尚的畫面效果, 字體就不能過于古典;輕松詼諧的基調, 圖文就不能太刻板;想走情感路線, 動效就不能過于酷炫。例如, 騰訊公益為宣傳99公益日活動所打造的作品, 其H5動畫的設計制作就很好體現了這一點。其畫面采取了上下分屏的形式, 將手繪和動畫相結合, 色彩時而多彩, 時而黑白, 隨著觀眾點擊畫面出現的愛心舉動文字, 女主人公動畫會配合文字內容將分屏中的黑白部分變為彩色畫面, 呼吁人們為公益做出行動。除了畫面, 背景音效等也都與視覺風格保持一致, 給用戶一個協調整體的互動體驗。
此外, 細節的設計常能讓受眾眼前一亮, 達到讓人印象深刻的效果。
以“分享提示”這個細節設計為例, 比起一句簡單的“點擊可分享”, 用心的細節設計帶來的吸睛感、參與度是顯而易見的。此類設計案例如下圖:
二、講好故事, 引發共鳴
不論H5的形式如何豐富多彩, 內容才是王道。在有限的篇幅里, 講個好故事, 能夠讓觀眾產生情感共鳴, 愿意觀看并分享始終是最重要的。
例如, 杰士邦產品的“每一段青春, 都是限量版”主題H 5動畫——
熟悉馮唐的人必定也聽說過《春風十里不如你》這部小說, 而隨著小說被改編為熱播電視劇, 馮唐也與品牌展開了合作營銷。下面這支H5就是杰士邦聯手馮唐所做的一次產品推廣, 以“青春”“愛情”這些元素為著眼點, 畫面以漫畫的形式講述著書中的劇情, 同時以4個書簽作為引導故事的分支, 洋溢著文藝清新的畫風。
三、緊跟熱點, 吸引眼球
想要你的H5頁面吸引大眾目光, 迅速抓住當下熱點作為由頭, 利用話題效應, 借機進行主題宣傳也不失為一條捷徑。
例如, 故宮博物院與天天P圖合作推出了名為《故宮國寶唇彩》的H5互動頁面, 借著最近熱播的清宮劇《如懿傳》《延禧攻略》的人氣, 一口氣推出了數十款口紅, 每款色號都與故宮內的一些藏品相對應。對用戶來說, 這個H5互動頁面操作簡單易上手:點開H5, 欣賞完佳麗選色動畫后, 直接進入色號選擇模式, 同時, 還可了解與之相對應的國寶簡介;一鍵上傳照片后, 挑出最合適自己的唇色, 立刻能體驗在線上妝效果, 然后保存或分享照片。此H5利用熱點話題來吸睛, 既娛樂了大眾, 又迅速推廣了軟件、同時介紹了故宮藏品。
四、運用技術, 避免堆砌
隨著技術的發展, 如今的H5動畫已可實現眾多酷炫效果和功能, 如:選項點擊、搖一搖、繪圖、3D視圖、重力感應等互動效果。但需合理運用技術, 實現為受眾提供流暢舒適的互動體驗。避免將各種不同種類動效進行堆砌, 使畫面顯得凌亂無序。案例如下:ofo共享單車品牌推出的名為《小黃車研發車間》的主題H5頁面, ofo小黃車和小黃人的聯盟可謂是一只“雙黃”彩蛋, 二者聯手也自然少不了一支優秀的H5作品。設計師巧妙的營造了一個奇妙可愛的三維小黃車研發車間, 它的界面顏色以小黃人與ofo共有的黃色為主色調, 大大增強了產品辨識度。還利用技術讓受眾通過點擊、滑動、搖一搖等不同形式進行交互體驗, 但并不突兀, 整體形式統一流暢, 配合生動有趣的背景音效帶給受眾舒適的互動觀感。
隨著信息技術的不斷升級和多媒體技術的廣泛應用, HTML5技術迅速發展并日趨成熟, 具有跨平臺、低成本、易傳播、效果佳、更新快、互動性強等優勢的H5作品, 將迎來更加廣闊的應用前景。作為一種新的媒體傳播形式, 它的產生與發展, 必然需要與之相適應的藝術表現形式, 這就要求設計師們不斷提高藝術審美能力、設計水平, 并加深對多媒體新技術的認識與運用, 從而不斷創作出精彩的作品, 滿足并引領人們的審美需求, 使運用HTML5這種新技術呈現出的數字作品更好地服務于人們的生活, 并不斷帶給人們驚喜!
摘要：近年來, 隨著智能手機以及“微信”這個移動社交平臺的廣泛應用, “H5”這個由HTML5簡化而來的詞匯, 這種能夠跨平臺并在移動端上呈現各種多媒體效果、具有互動性的傳播形式, 也為人們所熟知。它被廣泛應用于活動運營、品牌宣傳、產品介紹、總結報告中。
關鍵詞：H5,設計,小技巧