H5頁面設(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 常見的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頁面快速制作平臺(tái) 11 1.3.2 H5頁面專業(yè)設(shè)計(jì)平臺(tái) 14 1.3.3 H5頁面輔助設(shè)計(jì)工具 17 1.4 H5頁面的制作流程及注意事項(xiàng) 20 1.4.1 頁面的設(shè)計(jì)規(guī)范 20 1.4.2 頁面制作的基本流程 20 1.4.3 頁面制作需注意的細(xì)節(jié) 22 新手答疑 23     第2章 H5視覺交互設(shè)計(jì)技巧 2.1 頁面版式設(shè)計(jì)技巧 25 2.1.1 合理的視覺動(dòng)線 25 2.1.2 突出頁面的主體 27 2.1.3 厘清頁面的層次 28 2.2 H5頁面的色彩設(shè)計(jì) 29 2.2.1 色彩的基本常識(shí) 29 2.2.2 H5頁面設(shè)計(jì)常用的配色技巧 38 2.2.3 實(shí)用的配色網(wǎng)站 41 2.3 H5頁面的交互設(shè)計(jì) 44 2.3.1 頁面交互類型 44 2.3.2 H5頁面的交互設(shè)計(jì)原則 46 案例實(shí)戰(zhàn)：在宣傳頁面加入彈幕效果 47 新手答疑 48     第3章 H5頁面元素的設(shè)計(jì)與制作 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 字號(hào) 53 3.2.3 字間距與行間距 54 動(dòng)手練 為產(chǎn)品圖片添加文字標(biāo)識(shí)55 3.3 H5頁面的圖片設(shè)置 57 3.3.1 圖片選擇的三個(gè)原則 57 3.3.2 圖片的獲取途徑 58 3.3.3 圖片的處理 59 動(dòng)手練 改變產(chǎn)品固有顏色60 3.4 H5頁面的音頻設(shè)置 61 3.4.1 H5頁面中常見的音頻類型 61 3.4.2 音頻文件的獲取方法 63 動(dòng)手練 從視頻中提取背景樂65 3.4.3 對(duì)音頻進(jìn)行簡單處理 66 動(dòng)手練 將背景樂與獨(dú)白音頻進(jìn)行混合68 案例實(shí)戰(zhàn)：制作新品預(yù)售宣傳H5封面頁 72 新手答疑 77     第4章 H5頁面動(dòng)效與活動(dòng)設(shè)計(jì) 4.1 設(shè)置H5頁面動(dòng)效 79 4.1.1 頁面動(dòng)效的作用 79 4.1.2 頁面動(dòng)效的類型 79 4.1.3 頁面動(dòng)效的常規(guī)設(shè)置 81 4.2 設(shè)置頁面創(chuàng)意動(dòng)效 84 4.2.1 VR全景動(dòng)效 84 4.2.2 一鏡到底動(dòng)效 85 動(dòng)手練 制作新春祝福動(dòng)態(tài)頁面86 4.2.3 手指跟隨動(dòng)效 89 4.3 營銷活動(dòng)頁面設(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 微信場景模擬設(shè)計(jì) 92 動(dòng)手練 模擬微信朋友圈場景92 4.3.4 趣味游戲頁面設(shè)計(jì) 95 案例實(shí)戰(zhàn)：制作店慶活動(dòng)的H5頁面 95 新手答疑 103     第5章 用易企秀平臺(tái)制作H5頁面 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 頁面背景的設(shè)置 107 5.2.2 文字的添加與編輯 109 5.2.3 圖片的添加與編輯 110 動(dòng)手練 完善公司簡介的H5頁面113 5.2.4 動(dòng)畫及特效的設(shè)置 115 動(dòng)手練 為公司簡介頁面添加動(dòng)畫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 動(dòng)手練 制作意見反饋表單125 5.3.4 微信組件 128 5.3.5 活動(dòng)組件 129 5.4 AIGC在H5頁面中的應(yīng)用 129 5.4.1 應(yīng)用易企秀AIGC工具 130 5.4.2 應(yīng)用外部AIGC工具 131 案例實(shí)戰(zhàn)：制作民宿宣傳的H5頁面 134 新手答疑 138     第6章 企業(yè)宣傳頁面的設(shè)計(jì)與制作 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 制作快閃動(dòng)畫效果 151 6.2.2 制作課程宣傳封面頁 153 6.2.3 制作課程宣傳內(nèi)容頁 156 6.2.4 制作課程宣傳結(jié)尾頁 159 6.2.5 發(fā)布與分享課程宣傳H5頁面 160 新手答疑 163     第7章 營銷活動(dòng)頁面的設(shè)計(jì)與制作 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 制作手抄報(bào)網(wǎng)絡(luò)投票活動(dòng) 173 7.2.1 制作投票活動(dòng)封面頁 173 7.2.2 制作活動(dòng)內(nèi)容頁 176 7.2.3 分享投票活動(dòng) 181 7.3 制作中秋有獎(jiǎng)答題活動(dòng)的H5頁面 182 7.3.1 制作答題背景頁 182 7.3.2 制作有獎(jiǎng)答題頁面 184 7.3.3 發(fā)布有獎(jiǎng)答題活動(dòng) 186 新手答疑 187     附 錄 H5頁面營銷模式與引流方法 附錄A 常見營銷思維模式 189 附錄B 常見引流方式 193 附錄C 常見推廣渠道 198