第9章新媒體H5頁面設計H5是由HTML5簡化而來的詞匯，其設計目的是為了在移動設備上支持多媒體。與傳統(tǒng)廣告媒介相比，H5頁面具有開發(fā)周期短、傳播范圍廣、傳播速度快、開發(fā)成本小、形式豐富等優(yōu)勢，因此H5頁面已經(jīng)成為如今新媒體營銷的首要選擇。本章將介紹新媒體H5頁面設計的相關知識。目錄contents01了解H502H5頁面設計基礎03H5頁面設計Part/

01了解H5H5是HTML5的簡稱，也指用H5語言制作的一切數(shù)字產(chǎn)品。H5之所以能夠引發(fā)廣泛關注，根本原因在于它為下一代互聯(lián)網(wǎng)提供了全新的框架和平臺，包括提供免插件的音頻或視頻、圖像動畫、本體存儲及更多炫酷且重要的功能，并使這些應用標準化和開放化。H5最顯著的優(yōu)勢在于其跨平臺性，用H5搭建的站點與應用可以兼容PC端與移動端。它可以輕易地移植到各種不同的開放平臺與應用平臺上，這種強大的兼容性可以顯著降低站點與應用的開發(fā)與運營成本，讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機遇。H5的本地存儲特性也給用戶帶來了更多的便利性。基于H5開發(fā)的輕應用比本地App擁有更短的啟動時間和更快的聯(lián)網(wǎng)速度，而且無須下載占用存儲空間，特別適合手機等移動終端。H5讓開發(fā)者無須依賴第三方瀏覽器插件即可創(chuàng)建高級圖形、版式、動畫及過渡效果，這也能讓用戶用較少的流量就可以欣賞到炫酷的視覺與聽覺效果。Part/

02H5頁面設計基礎H5頁面通過簡單明了的文字介紹、炫酷的動畫及圖片拼接，并搭配背景音樂和視頻的形式，將營銷內(nèi)容以一種合理、有趣的方式來進行推廣。由于其營銷效果顯著，傳播方便，H5頁面已經(jīng)成為眾多企業(yè)開展營銷推廣活動的首選方式之一。9.2.1H5頁面的類型活動運營型H5頁面是為進行活動推廣而專門設計的，其展示形式包括游戲、賀卡、邀請函和測試題等?！窕顒舆\營型活動運營型H5頁面9.2.1H5頁面的類型品牌宣傳型H5頁面相當于一個品牌的微型官網(wǎng)，其主要作用是塑造品牌形象，向用戶傳達品牌理念。在設計品牌宣傳型H5頁面時，要使用與品牌氣質(zhì)相符合的視覺語言。●品牌宣傳型“一個奶盒的五行之旅”H5頁面9.2.1H5頁面的類型產(chǎn)品介紹型H5頁面主要用于介紹產(chǎn)品的功能，通過運用H5頁面形成的互動效果全面、形象地展示產(chǎn)品的特性，以刺激用戶的購買興趣?！癞a(chǎn)品介紹型“放·自由我”H5頁面9.2.1H5頁面的類型近幾年，年度使用報告是各大平臺常見的H5玩法，通過互動式體驗將原本枯燥乏味的總結(jié)報告變得生動有趣，并且讓用戶覺得這樣的總結(jié)報告與自己息息相關。●總結(jié)報告型“小紅書之城，我的足跡報告”H5頁面9.2.1H5頁面的類型為了更好地展示自己的企業(yè)文化，很多企業(yè)會將職位招聘廣告做成H5頁面，并將其分享到微信、微博、QQ等平臺。求職者可以在H5頁面一鍵報名，同時企業(yè)還可以對相關數(shù)據(jù)進行實時監(jiān)控?！衤毼徽衅感鸵恍┎襟E式的教學教程，非常適合采用H5翻頁的形式來展現(xiàn)。一頁展示一個步驟，通過滑動頁面交互形式，讓用戶加深對教程步驟的認識和理解，進而達到良好的學習效果?！窠虒W教程型9.2.2H5頁面的展示形式簡單圖文式是典型的H5頁面展示形式。其中，“圖”可以是插畫、漫畫、照片、GIF圖等多種形式，“文”是標題與文字。簡單圖文式的H5頁面通過翻頁、滑動頁面、點擊頁面等簡單的交互操作，讓頁面產(chǎn)生類似幻燈片的顯示效果?！窈唵螆D文式簡單圖文式H5頁面9.2.2H5頁面的展示形式禮物式、賀卡式、邀請函式的H5頁面抓住了用戶喜歡收到禮物這一心理，通過給用戶制造好感來潛移默化地達到宣傳產(chǎn)品與品牌的目的。●禮物、賀卡、邀請函式賀卡式H5頁面邀請函式H5頁面9.2.2H5頁面的展示形式問答、評分、測試式的H5頁面利用用戶的求知欲和探索欲，吸引用戶不斷關注頁面中的信息，不斷地探索，以尋找最終的答案。這類H5頁面要求文案主線邏輯清晰，頁面視覺效果出眾，問題有趣?！駟柎稹⒃u分、測試式測試式H5頁面9.2.2H5頁面的展示形式問答、評分、測試式的H5頁面利用用戶的求知欲和探索欲，吸引用戶不斷關注頁面中的信息，不斷地探索，以尋找最終的答案。這類H5頁面要求文案主線邏輯清晰，頁面視覺效果出眾，問題有趣?！駟柎稹⒃u分、測試式視頻、動畫式的H5頁面以全屏視頻或動畫為主，大多通過講述故事來吸引用戶的注意力，結(jié)合音樂和音效使用戶全身心沉浸其中。整個H5頁面播放過程幾乎沒有交互，或者只使用簡單的交互（如點擊按鈕后繼續(xù)播放），當故事進入尾聲時會出現(xiàn)一屏廣告畫面?！褚曨l、動畫式隨著H5技術(shù)的發(fā)展與成熟，全景/VR式的H5頁面已經(jīng)成為行業(yè)流行趨勢之一。用戶可以滑動手機屏幕或移動手機，查看上下左右360°或720°的畫面，這種互動能讓用戶看到的視角更大，更有身臨其境的體驗?！袢?、VR式9.2.3H5頁面設計的原則無論H5頁面中包含的內(nèi)容有多少，都要按照一定的順序進行展示，做到“一個頁面只講一件事”。在設計H5頁面時，要先對頁面內(nèi)容做一個整體的規(guī)劃，分清頁面內(nèi)容的主次、并列等關系，將頁面內(nèi)容有條理地展示出來。1．頁面內(nèi)容要有條理性H5頁面中所包含的內(nèi)容要精簡，挑選最精準、最核心的內(nèi)容進行展示，其他次要或多余的內(nèi)容可以去除。此外，為了更好地幫助用戶理解頁面內(nèi)容，可以設置一些概括性的標題提升頁面內(nèi)容的條理性和簡潔性。2．頁面內(nèi)容要精簡虛擬元素是指向用戶解釋關于頁面內(nèi)容的信息或操作該內(nèi)容的提示。在H5頁面中添加這些虛擬元素往往會造成頁面空間的浪費，使有效內(nèi)容的展示區(qū)域減少，進而降低用戶的閱讀體驗。若有些虛擬元素是不可缺少的，可以將其簡化，或者將其設置為隱藏狀態(tài)。3．少使用虛擬元素如果用戶打開H5頁面花費的時間過長，往往會導致一部分用戶因缺乏耐心而直接關閉頁面，所以要保證H5頁面的加載速度。在設計H5頁面時，可以通過減少頁面數(shù)量、合理添加圖片及精簡信息等方式來提高H5頁面的加載速度。4．提高頁面加載速度9.2.4H5頁面設計的技巧在設計H5頁面時，可以將信息融入一定的故事情景中，最好是多數(shù)人都經(jīng)歷過的情景，這樣才能讓用戶從中找到熟悉感，讓用戶感同身受，進而喚起發(fā)自心底的認同感，更樂意接受H5頁面所傳達的信息。1．信息情景化、故事化“父親的老相冊——播客種草機”H5頁面9.2.4H5頁面設計的技巧在設計H5頁面時，可以將信息融入一定的故事情景中，最好是多數(shù)人都經(jīng)歷過的情景，這樣才能讓用戶從中找到熟悉感，讓用戶感同身受，進而喚起發(fā)自心底的認同感，更樂意接受H5頁面所傳達的信息。1．信息情景化、故事化在H5頁面加入互動機制，能讓用戶在充滿趣味的氛圍中深入地感知與體驗H5頁面所宣傳的產(chǎn)品，進而提升其對產(chǎn)品的認知。2．增強互動性“閱字如愿”H5頁面9.2.4H5頁面設計的技巧在設計H5頁面時，可以將信息融入一定的故事情景中，最好是多數(shù)人都經(jīng)歷過的情景，這樣才能讓用戶從中找到熟悉感，讓用戶感同身受，進而喚起發(fā)自心底的認同感，更樂意接受H5頁面所傳達的信息。1．信息情景化、故事化在H5頁面加入互動機制，能讓用戶在充滿趣味的氛圍中深入地感知與體驗H5頁面所宣傳的產(chǎn)品，進而提升其對產(chǎn)品的認知。2．增強互動性讓用戶深入了解產(chǎn)品的一種有效方法是讓其切實地參與產(chǎn)品的設計與生產(chǎn)，所以能讓用戶產(chǎn)生參與感的H5頁面更容易獲得他們的喜愛。在設計H5頁面時，新媒體編輯可以根據(jù)產(chǎn)品本身的特性和用戶的喜好進行參與機制的設置。3．增加參與感“360°探索RedmiK30Pro”H5頁面9.2.4H5頁面設計的技巧在設計H5頁面時，可以將信息融入一定的故事情景中，最好是多數(shù)人都經(jīng)歷過的情景，這樣才能讓用戶從中找到熟悉感，讓用戶感同身受，進而喚起發(fā)自心底的認同感，更樂意接受H5頁面所傳達的信息。1．信息情景化、故事化在H5頁面加入互動機制，能讓用戶在充滿趣味的氛圍中深入地感知與體驗H5頁面所宣傳的產(chǎn)品，進而提升其對產(chǎn)品的認知。2．增強互動性想讓H5頁面迅速爆紅，第一時間抓住當前熱點并借機進行品牌宣傳是一條捷徑。4．借勢營銷，增強話題性讓用戶深入了解產(chǎn)品的一種有效方法是讓其切實地參與產(chǎn)品的設計與生產(chǎn)，所以能讓用戶產(chǎn)生參與感的H5頁面更容易獲得他們的喜愛。在設計H5頁面時，新媒體編輯可以根據(jù)產(chǎn)品本身的特性和用戶的喜好進行參與機制的設置。3．增加參與感“流言之書”H5頁面Part/

03H5頁面設計當前，H5頁面所帶來的驚艷展示效果越來越受用戶的歡迎。隨著諸多H5頁面設計工具的不斷涌現(xiàn)，H5頁面的設計變得越來越簡單。9.3.1常用的H5頁面設計工具易企秀是一個基于智能內(nèi)容創(chuàng)意設計的數(shù)字化營銷軟件，主要提供H5創(chuàng)景、海報圖片、營銷長頁、問卷表單、互動抽獎小游戲和特效視頻等各式內(nèi)容的在線設計，且支持PC、App、小程序、WAP多端使用，用戶可以根據(jù)自己的需要自由選擇使用端進行創(chuàng)意設計，并快速分享到社交媒體平臺開展營銷?！褚灼笮鉓AKA是一個集在線設計、活動營銷于一身的全平臺工具，用戶可以使用MAKA輕松設計H5、海報、視頻等類型的作品，以及策劃報名預約、接力、在線投票、抽獎、趣味答題、收款、拼團等活動。MAKA還支持分渠道數(shù)據(jù)統(tǒng)計和社交關系傳播貢獻分析，幫助用戶高效地進行裂變管理和渠道激勵?！馦AKA秀米是一款微信公眾號圖文編輯工具，也可以在線設計H5頁面。秀米H5是針對于移動端的一種營銷應用方式，可以設計集文字、圖片、音樂等信息形式于一身的展示頁面，非常適合移動端傳播。使用秀米H5可以制作固定頁H5、長頁H5及合集H5，其中長頁H5還可以與秀米圖文互通。●秀米9.3.1常用的H5頁面設計工具人人秀是一個數(shù)字化活動營銷中臺，主要提供互動營銷、H5、問卷、小程序、海報和畫冊的6合1產(chǎn)品營銷矩陣、豐富的場景解決方案以及技術(shù)開放能力。人人秀的H5設計工具，一鍵拖拽即可設計VR、游戲、投票、抽獎、紅包、答題、拼團等H5頁面，內(nèi)置豐富的模板，可以輕松實現(xiàn)活動推廣、公司招聘等需要?！袢巳诵阃谜咕哂蠬5、短視頻、互動游戲、小程序等多種表現(xiàn)形式，是使用H5技術(shù)的全面專業(yè)生產(chǎn)平臺，它為微場景、微信H5頁面、微信邀請函、短視頻和場景應用提供獨特的解決方案?！裢谜筰H5是一款專業(yè)級H5設計工具，功能非常強大，能夠?qū)崿F(xiàn)很多其他H5設計工具無法實現(xiàn)的功能。作為一款基于云端的網(wǎng)頁交互設計工具，用戶在無須編碼的前提下，通過對多媒體元素的拖拉、排放、設置等可視化的操作，實現(xiàn)在線編輯功能?！駃H59.3.2使用易企秀設計H5頁面下面以易企秀為例，