H5頁面設(shè)計與制作標(biāo)準教程（全彩微課版）

第1章 初識H5 1.1 H5是什么 2 1.1.1 概念 2 1.1.2 類型 3 1.1.3 優(yōu)勢 6 1.2 常見的H5頁面風(fēng)格 7 1.2.1 簡約風(fēng)格 7 1.2.2 科技風(fēng)格 8 1.2.3 水墨風(fēng)格 8 1.2.4 插畫風(fēng)格 9 1.2.5 手繪風(fēng)格 10 1.2.6 扁平風(fēng)格 10 1.3 常見的H5頁面制作工具 11 1.3.1 H5頁面快速制作平臺 11 1.3.2 H5頁面專業(yè)設(shè)計平臺 14 1.3.3 H5頁面輔助設(shè)計工具 17 1.4 H5頁面的制作流程及注意事項 20 1.4.1 頁面的設(shè)計規(guī)范 20 1.4.2 頁面制作的基本流程 20 1.4.3 頁面制作需注意的細節(jié) 22 新手答疑 23     第2章 H5視覺交互設(shè)計技巧 2.1 頁面版式設(shè)計技巧 25 2.1.1 合理的視覺動線 25 2.1.2 突出頁面的主體 27 2.1.3 厘清頁面的層次 28 2.2 H5頁面的色彩設(shè)計 29 2.2.1 色彩的基本常識 29 2.2.2 H5頁面設(shè)計常用的配色技巧 38 2.2.3 實用的配色網(wǎng)站 41 2.3 H5頁面的交互設(shè)計 44 2.3.1 頁面交互類型 44 2.3.2 H5頁面的交互設(shè)計原則 46 案例實戰(zhàn)：在宣傳頁面加入彈幕效果 47 新手答疑 48     第3章 H5頁面元素的設(shè)計與制作 3.1 設(shè)置H5頁面的尺寸 50 3.1.1 iOS設(shè)備的屏幕分辨率及尺寸 50 3.1.2 Android設(shè)備的屏幕尺寸 50 3.2 H5頁面的文字設(shè)置 51 3.2.1 字體 51 3.2.2 字號 53 3.2.3 字間距與行間距 54 動手練 為產(chǎn)品圖片添加文字標(biāo)識55 3.3 H5頁面的圖片設(shè)置 57 3.3.1 圖片選擇的三個原則 57 3.3.2 圖片的獲取途徑 58 3.3.3 圖片的處理 59 動手練 改變產(chǎn)品固有顏色60 3.4 H5頁面的音頻設(shè)置 61 3.4.1 H5頁面中常見的音頻類型 61 3.4.2 音頻文件的獲取方法 63 動手練 從視頻中提取背景樂65 3.4.3 對音頻進行簡單處理 66 動手練 將背景樂與獨白音頻進行混合68 案例實戰(zhàn)：制作新品預(yù)售宣傳H5封面頁 72 新手答疑 77     第4章 H5頁面動效與活動設(shè)計 4.1 設(shè)置H5頁面動效 79 4.1.1 頁面動效的作用 79 4.1.2 頁面動效的類型 79 4.1.3 頁面動效的常規(guī)設(shè)置 81 4.2 設(shè)置頁面創(chuàng)意動效 84 4.2.1 VR全景動效 84 4.2.2 一鏡到底動效 85 動手練 制作新春祝福動態(tài)頁面86 4.2.3 手指跟隨動效 89 4.3 營銷活動頁面設(shè)計 90 4.3.1 投票評選類活動設(shè)計 90 4.3.2 紅包抽獎類活動設(shè)計 91 4.3.3 微信場景模擬設(shè)計 92 動手練 模擬微信朋友圈場景92 4.3.4 趣味游戲頁面設(shè)計 95 案例實戰(zhàn)：制作店慶活動的H5頁面 95 新手答疑 103     第5章 用易企秀平臺制作H5頁面 5.1 認識易企秀 105 5.1.1 易企秀的應(yīng)用領(lǐng)域 105 5.1.2 易企秀的使用優(yōu)勢 105 5.1.3 易企秀的主要功能 107 5.2 易企秀的基本操作 107 5.2.1 頁面背景的設(shè)置 107 5.2.2 文字的添加與編輯 109 5.2.3 圖片的添加與編輯 110 動手練 完善公司簡介的H5頁面113 5.2.4 動畫及特效的設(shè)置 115 動手練 為公司簡介頁面添加動畫117 5.2.5 音頻與視頻的設(shè)置 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頁面中的應(yīng)用 129 5.4.1 應(yīng)用易企秀AIGC工具 130 5.4.2 應(yīng)用外部AIGC工具 131 案例實戰(zhàn)：制作民宿宣傳的H5頁面 134 新手答疑 138     第6章 企業(yè)宣傳頁面的設(shè)計與制作 6.1 制作開業(yè)宣傳頁面 140 6.1.1 制作宣傳封面頁面 140 6.1.2 制作宣傳內(nèi)容頁面 143 6.1.3 制作宣傳結(jié)尾頁面 148 6.2 制作課程宣傳頁面 151 6.2.1 制作快閃動畫效果 151 6.2.2 制作課程宣傳封面頁 153 6.2.3 制作課程宣傳內(nèi)容頁 156 6.2.4 制作課程宣傳結(jié)尾頁 159 6.2.5 發(fā)布與分享課程宣傳H5頁面 160 新手答疑 163     第7章 營銷活動頁面的設(shè)計與制作 7.1 制作企業(yè)培訓(xùn)問卷調(diào)查頁面 165 7.1.1 制作問卷調(diào)查類H5頁面的背景 165 7.1.2 設(shè)置問卷調(diào)查組件 167 7.1.3 發(fā)布并收集調(diào)查問卷信息 171 7.2 制作手抄報網(wǎng)絡(luò)投票活動 173 7.2.1 制作投票活動封面頁 173 7.2.2 制作活動內(nèi)容頁 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