H5頁面創(chuàng)意設(shè)計(jì)（全彩慕課版）

第1章 認(rèn)識H5　/ 1
1．1　H5的基礎(chǔ)知識 /　2
1．1．1　H5是什么 /　2
1．1．2　H5的類型 /　3
1．1．3　H5的風(fēng)格 /　7
1．1．4　H5的優(yōu)勢與不足 /　8
1．1．5　H5頁面設(shè)計(jì)的五大
原則　/　9
1．2　如何學(xué)好H5設(shè)計(jì) /　10
1．2．1　優(yōu)秀的H5設(shè)計(jì)作品應(yīng)
具備的特點(diǎn)　/　10
1．2．2　H5設(shè)計(jì)人員應(yīng)具備的
能力　/　13
1．3　H5的設(shè)計(jì)與制作流程 /　13
1．3．1　明確設(shè)計(jì)目標(biāo) /　14
1．3．2　內(nèi)容策劃 /　14
1．3．3　頁面設(shè)計(jì) /　15
1．3．4　交互設(shè)計(jì) /　16
1．3．5　H5的生成和發(fā)布 /　17
1．4　項(xiàng)目實(shí)訓(xùn) /　17
項(xiàng)目一　旅游推廣H5頁面素材的
搜集與制作　/　17
項(xiàng)目二　邀請函H5頁面素材的
搜集與制作　/　18
實(shí)戰(zhàn)演練　/　19
第2章　認(rèn)識H5的設(shè)計(jì)規(guī)范和工具 /　20
2．1　H5的設(shè)計(jì)規(guī)范 /　21
2．1．1　瀏覽器的選擇 /　21
2．1．2　H5的常用設(shè)計(jì)尺寸 /　22
2．1．3　H5頁面的安全區(qū) /　22
2．2　H5的元素設(shè)計(jì)工具 /　23
2．2．1　功能強(qiáng)大的設(shè)計(jì)
工具——Photoshop　/　23
2．2．2　專業(yè)的矢量圖繪制
工具——Illustrator　/　23
2．2．3　酷炫視頻特效制作
工具——After　Effects /　24
2．2．4　音效設(shè)計(jì)制作工具——
Audition　/　25
2．3　H5的設(shè)計(jì)生成制作
工具　/　25
2．3．1　定制推廣H5制作
工具——MAKA　/　25
2．3．2　企業(yè)營銷H5制作
工具——易企秀　/　26
2．3．3　快速制作H5工具——
兔展　/　26
2．3．4　微場景H5制作工具——
人人秀　/　27
2．3．5　照片故事H5制作工具——
初頁　/　27
2．4　H5的創(chuàng)意開發(fā)工具 /　28
2．4．1　專業(yè)H5工具——意派
Epub360　/　28
2．4．2　在線編輯H5工具——
iH5　/　29
2．5　H5的輔助設(shè)計(jì)工具 /　30
2．5．1　音視頻壓縮工具——
格式工廠　/　30
2．5．2　手機(jī)預(yù)覽設(shè)計(jì)稿——
PS　Play /　31
2．5．3　圖片壓縮工具——
TinyPNG　/　31
2．5．4　二維碼生成工具——
草料二維碼　/　32
2．6　項(xiàng)目實(shí)訓(xùn) /　33
項(xiàng)目一　使用MAKA制作H5活動(dòng)頁面 /　33
項(xiàng)目二　使用格式工廠將JPG格式的圖片
轉(zhuǎn)換為PNG格式　/　34
實(shí)戰(zhàn)演練　/　35
第3章　H5頁面的設(shè)計(jì)基礎(chǔ) /　36
3．1　H5原型圖 /　37
3．1．1　H5原型圖是什么 /　37
3．1．2　H5原型圖應(yīng)具備的
要素　/　39
3．2　色彩 /　39
3．2．1　/ 認(rèn)識色彩的三大
要素　/　39
3．2．2　色彩決定情感 /　41
3．2．3　色彩決定氛圍 /　45
3．2．4　H5頁面的配色方法 /　46
3．2．5　案例分析 “跑步App”
H5頁面的色彩分析　/　47
3．3　版面 /　48
3．3．1　認(rèn)識H5版面類型 /　48
3．3．2　創(chuàng)建畫面焦點(diǎn) /　50
3．3．3　單頁面視覺層級 /　51
3．3．4　多頁面視覺層級 /　51
3．3．5　版面設(shè)計(jì)的原則 /　52
3．3．6　案例分析 分析“2020
年度店長總結(jié)”H5頁面
版面布局　/　53
3．4　項(xiàng)目實(shí)訓(xùn) /　54
項(xiàng)目一　音樂H5頁面的色彩與版面
鑒賞　/　54
項(xiàng)目二　抽獎(jiǎng)H5頁面的色彩與版面
鑒賞　/　54
實(shí)戰(zhàn)演練　/　55
第4章　H5頁面的素材設(shè)計(jì) /　56
4．1　H5頁面的圖片設(shè)計(jì) /　57
4．1．1　H5頁面圖片素材的獲取
方法　/　57
4．1．2　H5頁面圖片的設(shè)計(jì)
原則　/　59
4．1．3　設(shè)計(jì)案例 裁剪H5頁面的
背景圖片　/　61
4．1．4　設(shè)計(jì)案例 調(diào)整H5頁面的
圖片色彩　/　63
4．1．5　設(shè)計(jì)案例 繪制H5頁面的
矢量人物　/　66
4．1．6　設(shè)計(jì)案例 優(yōu)化H5頁面的
圖片效果　/　69
4．2　H5頁面的文字設(shè)計(jì) /　73
4．2．1　認(rèn)識H5頁面中的文字及
字體　/　73
4．2．2　H5頁面標(biāo)題文字的設(shè)計(jì)
技巧　/　76
4．2．3　H5頁面正文文字的設(shè)計(jì)
技巧　/　77
4．2．4　設(shè)計(jì)案例 制作招聘H5
頁面文字　/　78
4．2．5　設(shè)計(jì)案例 制作招聘H5
頁面長圖文字　/　81
4．3　H5頁面的音效設(shè)計(jì) /　84
4．3．1　H5頁面中音效設(shè)計(jì)的
重要性　/　84
4．3．2　H5頁面音效素材的獲取
方法　/　84
4．3．3　H5頁面音效的選擇與
添加注意事項(xiàng)　/　85
4．3．4　設(shè)計(jì)案例 使用Audition
制作音效　/　86
4．4　項(xiàng)目實(shí)訓(xùn) /　88
項(xiàng)目一　制作節(jié)氣H5頁面 /　88
項(xiàng)目二　制作搶紅包H5頁面 /　89
實(shí)戰(zhàn)演練　/ /90
第5章　H5頁面的動(dòng)效設(shè)計(jì) /　91
5．1　H5頁面動(dòng)效設(shè)計(jì)基礎(chǔ) /　92
5．1．1　H5頁面動(dòng)效的作用 /　92
5．1．2　H5頁面的主要?jiǎng)有?br />類型　/　93
5．2　H5頁面的內(nèi)頁動(dòng)效設(shè)計(jì) /　98
5．2．1　內(nèi)頁動(dòng)效的選擇 /　98
5．2．2　內(nèi)頁動(dòng)效的層級 /　98
5．2．3　設(shè)計(jì)案例 制作微信紅包H5
頁面的內(nèi)頁動(dòng)效　/　98
5．3　H5頁面的轉(zhuǎn)場動(dòng)效
設(shè)計(jì)　/　102
5．3．1　設(shè)計(jì)轉(zhuǎn)場動(dòng)效的注意
事項(xiàng)　/　102
5．3．2　設(shè)計(jì)案例 制作微信
紅包H5頁面的
轉(zhuǎn)場動(dòng)效　/　102
5．4　項(xiàng)目實(shí)訓(xùn) /　105
項(xiàng)目一　制作產(chǎn)品推廣H5頁面動(dòng)效 /　105
項(xiàng)目二　制作招聘H5頁面動(dòng)效 /　106
實(shí)戰(zhàn)演練　/ /108
第6章　H5頁面的創(chuàng)意設(shè)計(jì) /　109
6．1　H5頁面的交互創(chuàng)意
設(shè)計(jì)　/　110
6．1．1　使用H5+720度全景技術(shù)
查看全景畫面　/　110
6．1．2　使用H5+人臉識別技術(shù)讓
內(nèi)容更有趣　/　111
6．1．3　使用H5+物理引擎技術(shù)
創(chuàng)建虛擬世界　/　112
6．1．4　使用H5+重力感應(yīng)
技術(shù)讓用戶的互動(dòng)
體驗(yàn)更強(qiáng)　/　113
6．1．5　使用H5+手指跟隨技術(shù)讓
操作更生動(dòng)　/　114
6．1．6　設(shè)計(jì)案例 使用凡科微傳
單制作全景H5頁面　/　114
6．2　H5頁面的動(dòng)態(tài)創(chuàng)意
設(shè)計(jì)　/　122
6．2．1　使用H5+快閃廣告提升
瀏覽體驗(yàn)　/　122
6．2．2　使用H5+粒子特效提升
視覺體驗(yàn)　/　124
6．2．3　使用H5+視頻提升內(nèi)容的
展現(xiàn)效果　/　124
6．2．4　使用H5+多屏互動(dòng)提升
營銷的娛樂性　/　125
6．2．5　使用H5+GIF動(dòng)畫讓畫面
更生動(dòng)　/　126
6．2．6　設(shè)計(jì)案例 制作快閃廣告
H5頁面　/　127
6．3　項(xiàng)目實(shí)訓(xùn) 制作元旦GIF
動(dòng)畫　/　132
實(shí)戰(zhàn)演練　/ /133
第7章　綜合案例 活動(dòng)運(yùn)營H5頁面的設(shè)計(jì)與制作 /　135
7．1　制作元宵節(jié)活動(dòng)H5頁面的前期準(zhǔn)備 /　137
7．1．1　元宵節(jié)活動(dòng)H5頁面設(shè)計(jì)
構(gòu)思　/　137
7．1．2　繪制元宵節(jié)活動(dòng)H5頁面
原型圖　/　138
7．1．3　搜集元宵節(jié)活動(dòng)H5頁面
素材　/　138
7．2　元宵節(jié)活動(dòng)H5頁面的
設(shè)計(jì)　/　139
7．2．1　設(shè)計(jì)元宵節(jié)活動(dòng)
標(biāo)題頁　/　139
7．2．2　設(shè)計(jì)元宵節(jié)活動(dòng)
內(nèi)容頁　/　42
7．2．3　設(shè)計(jì)元宵節(jié)活動(dòng)
紅包頁　/　146
7．2．4　設(shè)計(jì)元宵節(jié)活動(dòng)
介紹頁　/　148
7．3　元宵節(jié)活動(dòng)H5頁面的動(dòng)效
制作與發(fā)布　/　151
7．3．1　為元宵節(jié)活動(dòng)H5頁面
添加動(dòng)效　/　151
7．3．2　為元宵節(jié)活動(dòng)H5頁面
添加音效　/　157
7．3．3　/ 發(fā)布元宵節(jié)活動(dòng)H5
頁面　/　158
7．4　項(xiàng)目實(shí)訓(xùn) /　159
項(xiàng)目一　制作會議邀請函H5頁面 /　159
項(xiàng)目二　制作會議邀請函H5頁面
動(dòng)效　/　160
實(shí)戰(zhàn)演練　/ /162
8．1　制作產(chǎn)品推廣H5頁面的
前期準(zhǔn)備　/　165
8．1．1　產(chǎn)品推廣H5頁面設(shè)計(jì)
構(gòu)思　/　165
8．1．2　繪制產(chǎn)品推廣H5頁面
原型圖　/　166
8．1．3　搜集產(chǎn)品推廣H5頁面
素材　/　167
8．2　產(chǎn)品推廣H5頁面的
設(shè)計(jì)　/　168
8．2．1　設(shè)計(jì)產(chǎn)品推廣H5
首頁　/　168
8．2．2　設(shè)計(jì)產(chǎn)品推廣H5
內(nèi)頁　/　170
8．2．3　設(shè)計(jì)產(chǎn)品推廣H5
尾頁　/　172
8．3　產(chǎn)品推廣H5頁面的動(dòng)效
制作與發(fā)布　/　174
8．3．1　為產(chǎn)品推廣H5頁面添加
動(dòng)效　/　174
8．3．2　為產(chǎn)品推廣H5頁面添加
音效　/　179
8．3．3　發(fā)布產(chǎn)品推廣H5
頁面　/　180
8．4　項(xiàng)目實(shí)訓(xùn) /　181
項(xiàng)目一　制作紅酒推廣H5頁面 /　182
項(xiàng)目二　制作紅酒推廣H5頁面
動(dòng)效　/　183
實(shí)戰(zhàn)演練　/ /186
第9章　綜合案例 企業(yè)招聘H5頁面的設(shè)計(jì)與制作 /　187
9．1　制作企業(yè)招聘H5頁面的
前期準(zhǔn)備　/　189
9．1．1　/ 企業(yè)招聘H5頁面設(shè)計(jì)
構(gòu)思　/　189
9．1．2　繪制企業(yè)招聘H5頁面
原型圖　/　190
9．1．3　整理招聘內(nèi)容并搜集
素材　/　191
9．2　企業(yè)招聘H5頁面的
設(shè)計(jì)　/　192
9．2．1　導(dǎo)入企業(yè)招聘H5頁面
素材　/　192
9．2．2　設(shè)計(jì)一鏡到底企業(yè)招聘
H5頁面首頁　/　193
9．2．3　設(shè)計(jì)企業(yè)招聘H5頁面
內(nèi)頁　/　195
9．3　企業(yè)招聘H5頁面的動(dòng)效
制作與發(fā)布　/　202
9．3．1　為企業(yè)招聘H5頁面添加
動(dòng)效　/　202
9．3．2　為企業(yè)招聘H5頁面添加
音效　/　205
9．3．3　/ 發(fā)布企業(yè)招聘H5
頁面　/　206
9．4　項(xiàng)目實(shí)訓(xùn) 制作招聘簡章
H5頁面　/　207
實(shí)戰(zhàn)演練　/ /210