《H5設(shè)計(jì)與制作（全彩慕課版）（第2版）》 課件 1 H5初識(shí)、2 H5的設(shè)計(jì)與制作

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

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

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

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

1.2H5的發(fā)展騰訊：穿越未來(lái)來(lái)看你貝殼租房×奇葩說(shuō)：100年后你將住在哪個(gè)奇葩星球H5具有跨平臺(tái)、多媒體、強(qiáng)互動(dòng)以及易傳播的特點(diǎn)。

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

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

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

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

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

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