H5頁面創意設計（全彩慕課版）

隨著移動互聯網技術的日益普及和迅猛發展，“H5”這個新興名詞逐漸被更多的人認識和瞭解。本書從H5頁面設計與製作的角度出發，以設計案例和項目實踐相結合的方式，介紹了H5頁面設計與製作的相關知識與操作技能。全書共9章內容，分別是認識H5、認識H5的設計規範和工具、H5頁面的設計基礎、H5頁面的素材設計、H5頁面的動效設計、H5頁面的創意設計、活動運營H5頁面的設計與製作、產品推廣H5頁面的設計與製作、企業招聘H5頁面的設計與製作。各章都設有“學習引導”“項目實訓”“實戰演練”等模塊，能幫助讀者理解和掌握H5頁面設計與製作的關鍵知識，開拓讀者的設計思維，提高其實際操作能力。

作者多年從事計算機教育工作,有著豐富的教學經驗,參與企業項目製作,有著豐富的實踐經驗,主編過多部教材,得到老師們的認可。作者專注於計算機教材以及教輔資源研發，為學校提供全套完整的教學方案。

第1章 認識H5　/ 1
1．1　H5的基礎知識 /　2
1．1．1　H5是什麼 /　2
1．1．2　H5的類型 /　3
1．1．3　H5的風格 /　7
1．1．4　H5的優勢與不足 /　8
1．1．5　H5頁面設計的五大原則　/　9
1．2　如何學好H5設計 /　10
1．2．1　優秀的H5設計作品應具備的特點　/　10
1．2．2　H5設計人員應具備的能力　/　13
1．3　H5的設計與製作流程 /　13
1．3．1　明確設計目標 /　14
1．3．2　內容策劃 /　14
1．3．3　頁面設計 /　15
1．3．4　交互設計 /　16
1．3．5　H5的生成和發布 /　17
1．4　項目實訓 /　17
項目一　旅遊推廣H5頁面素材的
蒐集與製作　/　17
項目二　邀請函H5頁面素材的
蒐集與製作　/　18
實戰演練　/　19

第2章　認識H5的設計規範和工具 /　20
2．1　H5的設計規範 /　21
2．1．1　瀏覽器的選擇 /　21
2．1．2　H5的常用設計尺寸 /　22
2．1．3　H5頁面的安全區 /　22
2．2　H5的元素設計工具 /　23
2．2．1　功能強大的設計工具——Photoshop　/　23
2．2．2　專業的矢量圖繪製工具——Illustrator　/　23
2．2．3　酷炫視頻特效製作工具——After　Effects /　24
2．2．4　音效設計製作工具——Audition　/　25
2．3　H5的設計生成製作工具　/　25
2．3．1　定制推廣H5製作工具——MAKA　/　25
2．3．2　企業營銷H5製作工具——易企秀　/　26
2．3．3　快速製作H5工具——兔展　/　26
2．3．4　微場景H5製作工具——人人秀　/　27
2．3．5　照片故事H5製作工具——初頁　/　27
2．4　H5的創意開發工具 /　28
2．4．1　專業H5工具——意派Epub360　/　28
2．4．2　在線編輯H5工具——iH5　/　29
2．5　H5的輔助設計工具 /　30
2．5．1　音視頻壓縮工具——格式工廠　/　30
2．5．2　手機預覽設計稿——PS　Play /　31
2．5．3　圖片壓縮工具——TinyPNG　/　31
2．5．4　二維碼生成工具——草料二維碼　/　32
2．6　項目實訓 /　33
項目一　使用MAKA製作H5活動頁面 /　33
項目二　使用格式工廠將JPG格式的圖片轉換為PNG格式　/　34
實戰演練　/　35

第3章　H5頁面的設計基礎 /　36
3．1　H5原型圖 /　37
3．1．1　H5原型圖是什麼 /　37
3．1．2　H5原型圖應具備的要素　/　39
3．2　色彩 /　39
3．2．1　/ 認識色彩的三大要素　/　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　認識H5版麵類型 /　48
3．3．2　創建畫面焦點 /　50
3．3．3　單頁面視覺層級 /　51
3．3．4　多頁面視覺層級 /　51
3．3．5　版面設計的原則 /　52
3．3．6　案例分析 分析“2020年度店長總結”H5頁面版面佈局　/　53
3．4　項目實訓 /　54
項目一　音樂H5頁面的色彩與版面鑑賞　/　54
項目二　抽獎H5頁面的色彩與版面鑑賞　/　54
實戰演練　/　55

第4章　H5頁面的素材設計 /　56
4．1　H5頁面的圖片設計 /　57
4．1．1　H5頁面圖片素材的獲取方法　/　57
4．1．2　H5頁面圖片的設計原則　/　59
4．1．3　設計案例 裁剪H5頁面的背景圖片　/　61
4．1．4　設計案例 調整H5頁面的圖片色彩　/　63
4．1．5　設計案例 繪製H5頁面的矢量人物　/　66
4．1．6　設計案例 優化H5頁面的圖片效果　/　69
4．2　H5頁面的文字設計 /　73
4．2．1　認識H5頁面中的文字及字體　/　73
4．2．2　H5頁面標題文字的設計技巧　/　76
4．2．3　H5頁面正文文字的設計技巧　/　77
4．2．4　設計案例 製作招聘H5頁面文字　/　78
4．2．5　設計案例 製作招聘H5頁面長圖文字　/　81
4．3　H5頁面的音效設計 /　84
4．3．1　H5頁面中音效設計的重要性　/　84
4．3．2　H5頁面音效素材的獲取方法　/　84
4．3．3　H5頁面音效的選擇與添加註意事項　/　85
4．3．4　設計案例 使用Audition製作音效　/　86
4．4　項目實訓 /　88
項目一　製作節氣H5頁面 /　88
項目二　製作搶紅包H5頁面 /　89
實戰演練　/ /90

第5章　H5頁面的動效設計 /　91
5．1　H5頁面動效設計基礎 /　92
5．1．1　H5頁面動效的作用 /　92
5．1．2　H5頁面的主要動效類型　/　93
5．2　H5頁面的內頁動效設計 /　98
5．2．1　內頁動效的選擇 /　98
5．2．2　內頁動效的層級 /　98
5．2．3　設計案例 製作微信紅包H5頁面的內頁動效　/　98
5．3　H5頁面的轉場動效設計　/　102
5．3．1　設計轉場動效的注意事項　/　102
5．3．2　設計案例 製作微信紅包H5頁面的轉場動效　/　102
5．4　項目實訓 /　105
項目一　製作產品推廣H5頁面動效 /　105
項目二　製作招聘H5頁面動效 /　106
實戰演練　/ /108

第6章　H5頁面的創意設計 /　109
6．1　H5頁面的交互創意設計　/　110
6．1．1　使用H5+720度全景技術查看全景畫面　/　110
6．1．2　使用H5+人臉識別技術讓內容更有趣　/　111
6．1．3　使用H5+物理引擎技術創建虛擬世界　/　112
6．1．4　使用H5+重力感應技術讓用戶的互動體驗更強　/　113
6．1．5　使用H5+手指跟隨技術讓操作更生動　/　114
6．1．6　設計案例 使用凡科微傳單製作全景H5頁面　/　114
6．2　H5頁面的動態創意設計　/　122
6．2．1　使用H5+快閃廣告提升瀏覽體驗　/　122
6．2．2　使用H5+粒子特效提升視覺體驗　/　124
6．2．3　使用H5+視頻提升內容的展現效果　/　124
6．2．4　使用H5+多屏互動提升營銷的娛樂性　/　125
6．2．5　使用H5+GIF動畫讓畫面更生動　/　126
6．2．6　設計案例 製作快閃廣告H5頁面　/　127
6．3　項目實訓 製作元旦GIF
動畫　/　132
實戰演練　/ /133

第7章　綜合案例 活動運營H5頁面的設計與製作 /　135
7．1　製作元宵節活動H5頁面的前期準備 /　137
7．1．1　元宵節活動H5頁面設計構思　/　137
7．1．2　繪製元宵節活動H5頁面原型圖　/　138
7．1．3　蒐集元宵節活動H5頁面素材　/　138
7．2　元宵節活動H5頁面的設計　/　139
7．2．1　設計元宵節活動標題頁　/　139
7．2．2　設計元宵節活動內容頁　/　42
7．2．3　設計元宵節活動紅包頁　/　146
7．2．4　設計元宵節活動介紹頁　/　148
7．3　元宵節活動H5頁面的動效製作與發布　/　151
7．3．1　為元宵節活動H5頁面添加動效　/　151
7．3．2　為元宵節活動H5頁面添加音效　/　157
7．3．3　/ 發布元宵節活動H5頁面　/　158
7．4　項目實訓 /　159
項目一　製作會議邀請函H5頁面 /　159
項目二　製作會議邀請函H5頁面動效　/　160
實戰演練　/ /162

8．1　製作產品推廣H5頁面的前期準備　/　165
8．1．1　產品推廣H5頁面設計構思　/　165
8．1．2　繪製產品推廣H5頁面原型圖　/　166
8．1．3　蒐集產品推廣H5頁面素材　/　167
8．2　產品推廣H5頁面的設計　/　168
8．2．1　設計產品推廣H5首頁　/　168
8．2．2　設計產品推廣H5內頁　/　170
8．2．3　設計產品推廣H5尾頁　/　172
8．3　產品推廣H5頁面的動效製作與發布　/　174
8．3．1　為產品推廣H5頁面添加動效　/　174
8．3．2　為產品推廣H5頁面添加音效　/　179
8．3．3　發布產品推廣H5頁面　/　180
8．4　項目實訓 /　181
項目一　製作紅酒推廣H5頁面 /　182
項目二　製作紅酒推廣H5頁面動效　/　183
實戰演練　/ /186

第9章　綜合案例 企業招聘H5頁面的設計與製作 /　187
9．1　製作企業招聘H5頁面的前期準備　/　189
9．1．1　/ 企業招聘H5頁面設計構思　/　189
9．1．2　繪製企業招聘H5頁面原型圖　/　190
9．1．3　整理招聘內容並蒐集素材　/　191
9．2　企業招聘H5頁面的設計　/　192
9．2．1　導入企業招聘H5頁面素材　/　192
9．2．2　設計一鏡到底企業招聘H5頁面首頁　/　193
9．2．3　設計企業招聘H5頁面內頁　/　195
9．3　企業招聘H5頁面的動效製作與發布　/　202
9．3．1　為企業招聘H5頁面添加動效　/　202
9．3．2　為企業招聘H5頁面添加音效　/　205
9．3．3　/ 發布企業招聘H5頁面　/　206
9．4　項目實訓 製作招聘簡章H5頁面　/　207
實戰演練　/ /210