《H5設計與制作（全彩慕課版）（第2版）》 課件 1 H5初識、2 H5的設計與制作

H5初識隨著移動互聯(lián)網(wǎng)的興起，H5逐漸成為了互聯(lián)網(wǎng)傳播領域的一個重要傳播形式，因此學習和掌握H5成為了廣大互聯(lián)網(wǎng)從業(yè)人員的重要技能之一。本章對H5的定義、發(fā)展、特點、應用以及類型進行系統(tǒng)講解。通過對本章的學習，讀者可以對H5有一個宏觀的認識，有助于高效便利地進行后續(xù)的H5設計制作。掌握H5的定義了解H5的定義了解H5的特點熟悉H5的應用熟悉H5的類型學習目標H5指的是移動端上基于HTML5技術的交互動態(tài)網(wǎng)頁，是用于移動互聯(lián)網(wǎng)的一種新型營銷工具，通過移動平臺（如微信）傳播。1.1H5的定義網(wǎng)易云音樂：你的榮格心理原型PUPUPULA：2018汪年全家福我是創(chuàng)益人×騰訊廣告×騰訊基金會：敦煌數(shù)字修復開始階段引爆階段綻放階段成熟階段1.2H5的發(fā)展

1.2H5的發(fā)展1.開始階段H5的開始可以追溯到2014年，其最初的呈現(xiàn)狀態(tài)和PPT類似，將經(jīng)過簡單設計的靜態(tài)頁面設置成滑動翻頁效果，常用于婚禮邀請、企業(yè)招聘等。免費婚禮邀請函模版2.引爆階段2014年下半年，一款名為《圍住神經(jīng)貓》的H5小游戲，引爆了微信朋友圈，最后頁面瀏覽量達數(shù)億級。隨后相繼產(chǎn)生的《看你有多色》等小游戲，讓H5真正的開啟了引爆。

1.2H5的發(fā)展圍住神經(jīng)貓博雅：看你有多色3.綻放階段2015年～2016年是H5的全面綻放階段。在這一階段中的H5交互設計酷炫、表現(xiàn)形式新穎，以最大限度加強用戶參與感，提高用戶分享H5的意愿。

1.2H5的發(fā)展2016萬科濱水大宅新作登臨方舟淘寶×京東：造物節(jié)邀請函火車記憶4.成熟階段2017年后，H5慢慢褪去了一些復雜酷炫的交互效果，開始走向成熟。這一階段的H5輕互動，重內(nèi)容，傳播量最大的主要有兩種形式，一種是純視頻類H5，另一種是測試類H5。

1.2H5的發(fā)展騰訊：穿越未來來看你貝殼租房×奇葩說：100年后你將住在哪個奇葩星球H5具有跨平臺、多媒體、強互動以及易傳播的特點。

1.3H5的特點H5的特點H5的應用形式多樣，常見的應用領域有品牌宣傳、產(chǎn)品展示、活動推廣、知識分享、新聞熱點、會議邀請、企業(yè)招聘、培訓招生等。

1.4H5的應用網(wǎng)易云音樂：尋找「夢想」的旅程，用于品牌宣傳騰訊：2016騰訊WE大會·無境，用于會議邀請奧美：稀有動物懸賞令，用于企業(yè)招聘營銷宣傳類知識新聞類游戲互動類網(wǎng)站應用類1.5H5的類型1.營銷宣傳類營銷宣傳類H5是最常見的，它通常都是為產(chǎn)品、品牌以及活動做宣傳推廣而設計的。

1.5H5的類型招商銀行APP：來！坐！騰訊：NextIdeax故宮寶馬：全新BMWM2即將上市2.知識新聞類知識新聞類H5同樣比較普遍，它通常都是根據(jù)社會重大事件進行宣傳新聞、普及知識的。

1.5H5的類型澎湃新聞：垃圾分類可視化查詢手冊騰訊新聞×WWF×微公益：騰訊新聞3.游戲互動類游戲互動類H5一般比較簡單，在微信中點開就可以直接玩，不用安裝卸載，通常多為娛樂或引流而制作。

1.5H5的類型網(wǎng)易新聞×噠噠×999皮炎平：守護你的幸運足球網(wǎng)易新聞×噠噠：睡姿大比拼小米：我在宮里遇到一件奇怪的事4.網(wǎng)站應用類網(wǎng)站應用類H5在產(chǎn)品設計領域中常被稱為“H5網(wǎng)站”，可以直接在瀏覽器中觀看和操作，不像App那樣需要安裝，它通常帶有大量信息及App中的部分功能。

1.5H5的類型站酷花瓣UI中國H5的設計與制作從0到1開始打造一款H5，這是策劃、交互設計、視覺設計以及制作開發(fā)相互配合的綜合過程。本章對H5設計與制作的項目流程、常用軟件、基本規(guī)范、注意事項以及創(chuàng)意方法進行系統(tǒng)講解。通過對本章的學習，讀者可以對H5的整體設計與制作有一個基本的認識，有助于高效便利地進行后續(xù)的H5設計和制作。了解設計與制作H5的項目流程熟悉設計與制作H5的常用軟件掌握設計與制作H5的基本規(guī)范掌握設計與制作H5的注意事項熟悉設計與制作H5的創(chuàng)意方法學習目標設計與制作H5的項目流程可以按照前期策劃、交互設計、設計執(zhí)行、制作開發(fā)、測試發(fā)布以及運營推廣來進行。通常大型互聯(lián)網(wǎng)公司在制作時往往會由團隊分工合作完成，受眾面較窄的H5則只需要由一個綜合能力較強的人員獨立完成。2.1H5設計與制作的項目流程設計與制作H5的項目流程H5的常用軟件包括前期策劃、交互設計、視覺設計、動效設計、影音編輯、制作開發(fā)以及在線輔助這7類。2.2H5設計與制作的常用軟件2.3設計與制作H5的基本規(guī)范設計與制作H5的基本規(guī)范可以分為設計尺寸、頁面適配、文字使用以及圖片壓縮。畫面最終的有效尺寸凡科H5制作中設置的出血H5的圖片壓縮瀏覽器的選擇交互控件的使用H5的加載優(yōu)化微信誘導分享2.4H5制作的注意事項1.瀏覽器的選擇由于H5的制作都是通過線上工具完成，因此在瀏覽器的選擇方面一定要注意。這里建議使用谷歌瀏覽器，因為谷歌瀏覽器可以最大程度保證線上操作的順暢。2.4H5制作的注意事項2.交互控件的使用（1）輸入框（2）播放器“2017拉勾之夜|年度盛典”的輸入框設計“騰訊新聞：2019斷舍離”案例“32分貝美好之旅”中的“跳過”按鈕“網(wǎng)易新聞：各憑態(tài)度乘風浪“案例中的視頻嵌套2.4H5制作的注意事項3.H5的加載優(yōu)化加載呈現(xiàn)決定了用戶是否觀看H5的關鍵，因此要根據(jù)策劃的內(nèi)容選擇對應的加載模式。全局加載優(yōu)先加載分段加載2.4H5制作的注意事項4.微信誘導分享誘導分享類內(nèi)容誘導關注類內(nèi)容H5游戲、測試類內(nèi)容向微信團隊申訴恢復訪問2.4H5制作的注意事項H5的常用策劃方法H5的常用交互方法H5的創(chuàng)意設計風格H5的動效設計運用H5的音效設計方法H5的常用測試方法H5的常規(guī)數(shù)據(jù)分析2.5H5的創(chuàng)意實現(xiàn)1.符合用戶習慣H5主要依靠手機進行傳播，因此H5的策劃需要符合移動端用戶的習慣。移動端用戶的習慣主要體現(xiàn)在畫面尺寸、閱讀習慣、場景習慣3個方面。2.5.1H5的常用策劃方法移動端用戶的習慣2.結合用戶心理用戶在觀看H5時，通常利用碎片化時間快速瀏覽，為了能獲取用戶更多的注意力，H5的策劃一定要根據(jù)用戶心理進行。精品H5的用戶心理主要表現(xiàn)為情感共鳴、構思新奇、加入鼓勵以及主動參與這4個方面。2.5.1H5的常用策劃方法情感共鳴構思新奇加入鼓勵主動參與3.制定對應形式策劃時根據(jù)不同的內(nèi)容，需要制定對應的展現(xiàn)形式，展現(xiàn)形式可以分為頁面展示、交互引導以及用戶操作3大類型。2.5.1H5的常用策劃方法頁面展示交互引導用戶操作H5的常用交互方法可以總結為結合手勢、利用硬件以及使用技術3個方面。2.5.2H5的常用交互方法H5的常用創(chuàng)意設計風格可以總結為極簡冷淡、扁平圖形、攝影圖像、拼貼疊加、懷舊復古、現(xiàn)代科技、仿真寫實以及手繪插畫8種。2.5.3H5的創(chuàng)意設計風格H5的動效設計運用可以通過轉場動效、內(nèi)容動效、功能動效以及輔助動效這4個方面進行介紹。2.5.4H5的動效設計運用H5音效設計可以分為背景音效以及輔助音效。1.背景音效H5常見的背景音效有3類，分別是功能音效、擬聲音效以及環(huán)境音效。2.輔助音效H5常見的輔助音效有3類，分別是功能音效、擬聲音效以及環(huán)境音效。2.5.5H5的音效設計方法在H5正式上線之前，都會進行幾次測試以收獲反饋及效果。常用的測試方法微信有小范圍測試以及微信公眾號測試。2.5.6H5的常用測試方法常見的問題PV：PV(PageView)即頁面瀏覽量或點擊量。用戶每一次對H5的每個頁面訪問均被記錄1次。用戶對同一頁面的多次訪問，訪問量累計。UV：UV(UniqueVisitor)即獨立訪客數(shù)，指訪問H5的人數(shù)。在同一天內(nèi)，相同的客戶端只被計算一次。IP：IP(lnternetProt0COI)即互聯(lián)網(wǎng)協(xié)議，IP值指一天內(nèi)舊地址不同的用戶訪問H5的數(shù)量。在同一天內(nèi)，相同的IP只被計算1次。2.5.7H5的常規(guī)數(shù)據(jù)分析跳出率：跳出率指僅瀏覽了H5其中的一個