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

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