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

第1章 初識H5 1.1 H5是什么 2 1.1.1 概念 2 1.1.2 類型 3 1.1.3 優(yōu)勢 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頁面專業(yè)設計平臺 14 1.3.3 H5頁面輔助設計工具 17 1.4 H5頁面的制作流程及注意事項 20 1.4.1 頁面的設計規(guī)范 20 1.4.2 頁面制作的基本流程 20 1.4.3 頁面制作需注意的細節(jié) 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 案例實戰(zhàn)：在宣傳頁面加入彈幕效果 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 案例實戰(zhàn)：制作新品預售宣傳H5封面頁 72 新手答疑 77     第4章 H5頁面動效與活動設計 4.1 設置H5頁面動效 79 4.1.1 頁面動效的作用 79 4.1.2 頁面動效的類型 79 4.1.3 頁面動效的常規(guī)設置 81 4.2 設置頁面創(chuàng)意動效 84 4.2.1 VR全景動效 84 4.2.2 一鏡到底動效 85 動手練 制作新春祝福動態(tài)頁面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 案例實戰(zhàn)：制作店慶活動的H5頁面 95 新手答疑 103     第5章 用易企秀平臺制作H5頁面 5.1 認識易企秀 105 5.1.1 易企秀的應用領域 105 5.1.2 易企秀的使用優(yōu)勢 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 頁面的創(chuàng)建與管理 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 案例實戰(zhàn)：制作民宿宣傳的H5頁面 134 新手答疑 138     第6章 企業(yè)宣傳頁面的設計與制作 6.1 制作開業(yè)宣傳頁面 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 發(fā)布與分享課程宣傳H5頁面 160 新手答疑 163     第7章 營銷活動頁面的設計與制作 7.1 制作企業(yè)培訓問卷調查頁面 165 7.1.1 制作問卷調查類H5頁面的背景 165 7.1.2 設置問卷調查組件 167 7.1.3 發(fā)布并收集調查問卷信息 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 發(fā)布有獎答題活動 186 新手答疑 187     附 錄 H5頁面營銷模式與引流方法 附錄A 常見營銷思維模式 189 附錄B 常見引流方式 193 附錄C 常見推廣渠道 198