H5頁面設計與製作標準教程（全彩微課版）

《H5頁面設計與製作標準教程（全彩微課版）》以H5為寫作基礎，以實際應用為指導思想，用通俗易懂的語言對H5頁面設計與製作的相關知識進行詳細介紹。H5頁面設計的**魅力在於通過巧妙的設計手法，將復雜的功能簡化，將枯燥的信息趣味化，讓用戶在享受視覺盛宴的同時，輕松獲取所需內容。 《H5頁面設計與製作標準教程（全彩微課版）》共7章，內容涵蓋初識H5、H5視覺交互設計技巧、H5頁面元素的設計與製作、H5頁面動效與活動設計、用易企秀平臺製作H5頁面，每章內容穿插“動手練”“案例實戰”或“新手答疑”板塊，以鞏固所學知識。最後兩章為綜合性實操案例，即企業宣傳和營銷活動典型案例的設計與製作，案例講解一步一圖，即學即用。同時，還專門安排了H5頁面營銷模式與引流方法等知識內容，以真正做到“授人以漁”。 《H5頁面設計與製作標準教程（全彩微課版）》結構合理，所選案例貼合實際需求，實操性強，易教易學，適合H5頁面設計者、新媒體頁面設計與運營人員閱讀使用，也適合高等院校相關專業的師生學習使用，還適合作為社會培訓機構的培訓用書。

目 錄

第1章 初識H5

1.1 H5是什麽 2

1.1.1 概念 2

1.1.2 類型 3

1.1.3 優勢 6

1.2 常見的H5頁面風格 7

1.2.1 簡約風格 7

1.2.2 科技風格 8

1.2.3 水墨風格 8

1.2.4 插畫風格 9

1.2.5 手繪風格 10

1.2.6 扁平風格 10

1.3 常見的H5頁面製作工具 11

1.3.1 H5頁面快速製作平臺 11

1.3.2 H5頁面專業設計平臺 14

1.3.3 H5頁面輔助設計工具 17

1.4 H5頁面的製作流程及註意事項 20

1.4.1 頁面的設計規範 20

1.4.2 頁面製作的基本流程 20

1.4.3 頁面製作需註意的細節 22

新手答疑 23

第2章 H5視覺交互設計技巧

2.1 頁面版式設計技巧 25

2.1.1 合理的視覺動線 25

2.1.2 突出頁面的主體 27

2.1.3 釐清頁面的層次 28

2.2 H5頁面的色彩設計 29

2.2.1 色彩的基本常識 29

2.2.2 H5頁面設計常用的配色技巧 38

2.2.3 實用的配色網站 41

2.3 H5頁面的交互設計 44

2.3.1 頁面交互類型 44

2.3.2 H5頁面的交互設計原則 46

案例實戰：在宣傳頁面加入彈幕效果 47

新手答疑 48

第3章 H5頁面元素的設計與製作

3.1 設置H5頁面的尺寸 50

3.1.1 iOS設備的屏幕分辨率及尺寸 50

3.1.2 Android設備的屏幕尺寸 50

3.2 H5頁面的文字設置 51

3.2.1 字體 51

3.2.2 字號 53

3.2.3 字間距與行間距 54

動手練 為產品圖片添加文字標識 55

3.3 H5頁面的圖片設置 57

3.3.1 圖片選擇的三個原則 57

3.3.2 圖片的獲取途徑 58

3.3.3 圖片的處理 59

動手練 改變產品固有顏色 60

3.4 H5頁面的音頻設置 61

3.4.1 H5頁面中常見的音頻類型 61

3.4.2 音頻文件的獲取方法 63

動手練 從視頻中提取背景樂 65

3.4.3 對音頻進行簡單處理 66

動手練 將背景樂與獨白音頻進行混合 68

案例實戰：製作新品預售宣傳H5封面頁 72

新手答疑 77

第4章 H5頁面動效與活動設計

4.1 設置H5頁面動效 79

4.1.1 頁面動效的作用 79

4.1.2 頁面動效的類型 79

4.1.3 頁面動效的常規設置 81

4.2 設置頁面創意動效 84

4.2.1 VR全景動效 84

4.2.2 一鏡到底動效 85

動手練 製作新春祝福動態頁面 86

4.2.3 手指跟隨動效 89

4.3 營銷活動頁面設計 90

4.3.1 投票評選類活動設計 90

4.3.2 紅包抽獎類活動設計 91

4.3.3 微信場景模擬設計 92

動手練 模擬微信朋友圈場景 92

4.3.4 趣味游戲頁面設計 95

案例實戰：製作店慶活動的H5頁面 95

新手答疑 103

第5章 用易企秀平臺製作H5頁面

5.1 認識易企秀 105

5.1.1 易企秀的應用領域 105

5.1.2 易企秀的使用優勢 105

5.1.3 易企秀的主要功能 107

5.2 易企秀的基本操作 107

5.2.1 頁面背景的設置 107

5.2.2 文字的添加與編輯 109

5.2.3 圖片的添加與編輯 110

動手練 完善公司簡介的H5頁面 113

5.2.4 動畫及特效的設置 115

動手練 為公司簡介頁面添加動畫 117

5.2.5 音頻與視頻的設置 118

5.2.6 頁面的創建與管理 119

5.3 常用的易企秀組件 121

5.3.1 視覺組件 121

5.3.2 功能組件 123

5.3.3 表單組件 124

動手練 製作意見反饋表單 125

5.3.4 微信組件 128

5.3.5 活動組件 129

5.4 AIGC在H5頁面中的應用 129

5.4.1 應用易企秀AIGC工具 130

5.4.2 應用外部AIGC工具 131

案例實戰：製作民宿宣傳的H5頁面 134

新手答疑 138

第6章 企業宣傳頁面的設計與製作

6.1 製作開業宣傳頁面 140

6.1.1 製作宣傳封面頁面 140

6.1.2 製作宣傳內容頁面 143

6.1.3 製作宣傳結尾頁面 148

6.2 製作課程宣傳頁面 151

6.2.1 製作快閃動畫效果 151

6.2.2 製作課程宣傳封面頁 153

6.2.3 製作課程宣傳內容頁 156

6.2.4 製作課程宣傳結尾頁 159

6.2.5 發布與分享課程宣傳H5頁面 160

新手答疑 163

第7章 營銷活動頁面的設計與製作

7.1 製作企業培訓問捲調查頁面 165

7.1.1 製作問捲調查類H5頁面的背景 165

7.1.2 設置問捲調查組件 167

7.1.3 發布並收集調查問捲信息 171

7.2 製作手抄報網絡投票活動 173

7.2.1 製作投票活動封面頁 173

7.2.2 製作活動內容頁 176

7.2.3 分享投票活動 181

7.3 製作中秋有獎答題活動的H5頁面 182

7.3.1 製作答題背景頁 182

7.3.2 製作有獎答題頁面 184

7.3.3 發布有獎答題活動 186

新手答疑 187

附 錄 H5頁面營銷模式與引流方法

附錄A 常見營銷思維模式 189

附錄B 常見引流方式 193

附錄C 常見推廣渠道 198