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

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