《H5設(shè)計與制作（全彩慕課版）（第2版）》 課件2 H5的設(shè)計與制作

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