第1章 認(rèn)識(shí)H5　/ 1 1.1　H5的基礎(chǔ)知識(shí) /　2 1.1.1　H5是什么 /　2 1.1.2　H5的類型 /　3 1.1.3　H5的風(fēng)格 /　7 1.1.4　H5的優(yōu)勢與不足 /　8 1.1.5　H5頁面設(shè)計(jì)的五大 原則　/　9 1.2　如何學(xué)好H5設(shè)計(jì) /　10 1.2.1　優(yōu)秀的H5設(shè)計(jì)作品應(yīng) 具備的特點(diǎn)　/　10 1.2.2　H5設(shè)計(jì)人員應(yīng)具備的 能力　/　13 1.3　H5的設(shè)計(jì)與制作流程 /　13 1.3.1　明確設(shè)計(jì)目標(biāo) /　14 1.3.2　內(nèi)容策劃 /　14 1.3.3　頁面設(shè)計(jì) /　15 1.3.4　交互設(shè)計(jì) /　16 1.3.5　H5的生成和發(fā)布 /　17 1.4　項(xiàng)目實(shí)訓(xùn) /　17 項(xiàng)目一　旅游推廣H5頁面素材的 搜集與制作　/　17 項(xiàng)目二　邀請(qǐng)函H5頁面素材的 搜集與制作　/　18 實(shí)戰(zhàn)演練　/　19 第2章　認(rèn)識(shí)H5的設(shè)計(jì)規(guī)范和工具 /　20 2.1　H5的設(shè)計(jì)規(guī)范 /　21 2.1.1　瀏覽器的選擇 /　21 2.1.2　H5的常用設(shè)計(jì)尺寸 /　22 2.1.3　H5頁面的安全區(qū) /　22 2.2　H5的元素設(shè)計(jì)工具 /　23 2.2.1　功能強(qiáng)大的設(shè)計(jì) 工具——Photoshop　/　23 2.2.2　專業(yè)的矢量圖繪制 工具——Illustrator　/　23 2.2.3　酷炫視頻特效制作 工具——After　Effects /　24 2.2.4　音效設(shè)計(jì)制作工具—— Audition　/　25 2.3　H5的設(shè)計(jì)生成制作 工具　/　25 2.3.1　定制推廣H5制作 工具——MAKA　/　25 2.3.2　企業(yè)營銷H5制作 工具——易企秀　/　26 2.3.3　快速制作H5工具—— 兔展　/　26 2.3.4　微場景H5制作工具—— 人人秀　/　27 2.3.5　照片故事H5制作工具—— 初頁　/　27 2.4　H5的創(chuàng)意開發(fā)工具 /　28 2.4.1　專業(yè)H5工具——意派 Epub360　/　28 2.4.2　在線編輯H5工具—— iH5　/　29 2.5　H5的輔助設(shè)計(jì)工具 /　30 2.5.1　音視頻壓縮工具—— 格式工廠　/　30 2.5.2　手機(jī)預(yù)覽設(shè)計(jì)稿—— PS　Play /　31 2.5.3　圖片壓縮工具—— TinyPNG　/　31 2.5.4　二維碼生成工具—— 草料二維碼　/　32 2.6　項(xiàng)目實(shí)訓(xùn) /　33 項(xiàng)目一　使用MAKA制作H5活動(dòng)頁面 /　33 項(xiàng)目二　使用格式工廠將JPG格式的圖片 轉(zhuǎn)換為PNG格式　/　34 實(shí)戰(zhàn)演練　/　35 第3章　H5頁面的設(shè)計(jì)基礎(chǔ) /　36 3.1　H5原型圖 /　37 3.1.1　H5原型圖是什么 /　37 3.1.2　H5原型圖應(yīng)具備的 要素　/　39 3.2　色彩 /　39 3.2.1　/ 認(rèn)識(shí)色彩的三大 要素　/　39 3.2.2　色彩決定情感 /　41 3.2.3　色彩決定氛圍 /　45 3.2.4　H5頁面的配色方法 /　46 3.2.5　案例分析 “跑步App” H5頁面的色彩分析　/　47 3.3　版面 /　48 3.3.1　認(rèn)識(shí)H5版面類型 /　48 3.3.2　創(chuàng)建畫面焦點(diǎn) /　50 3.3.3　單頁面視覺層級(jí) /　51 3.3.4　多頁面視覺層級(jí) /　51 3.3.5　版面設(shè)計(jì)的原則 /　52 3.3.6　案例分析 分析“2020 年度店長總結(jié)”H5頁面 版面布局　/　53 3.4　項(xiàng)目實(shí)訓(xùn) /　54 項(xiàng)目一　音樂H5頁面的色彩與版面 鑒賞　/　54 項(xiàng)目二　抽獎(jiǎng)H5頁面的色彩與版面 鑒賞　/　54 實(shí)戰(zhàn)演練　/　55 第4章　H5頁面的素材設(shè)計(jì) /　56 4.1　H5頁面的圖片設(shè)計(jì) /　57 4.1.1　H5頁面圖片素材的獲取 方法　/　57 4.1.2　H5頁面圖片的設(shè)計(jì) 原則　/　59 4.1.3　設(shè)計(jì)案例 裁剪H5頁面的 背景圖片　/　61 4.1.4　設(shè)計(jì)案例 調(diào)整H5頁面的 圖片色彩　/　63 4.1.5　設(shè)計(jì)案例 繪制H5頁面的 矢量人物　/　66 4.1.6　設(shè)計(jì)案例 優(yōu)化H5頁面的 圖片效果　/　69 4.2　H5頁面的文字設(shè)計(jì) /　73 4.2.1　認(rèn)識(shí)H5頁面中的文字及 字體　/　73 4.2.2　H5頁面標(biāo)題文字的設(shè)計(jì) 技巧　/　76 4.2.3　H5頁面正文文字的設(shè)計(jì) 技巧　/　77 4.2.4　設(shè)計(jì)案例 制作招聘H5 頁面文字　/　78 4.2.5　設(shè)計(jì)案例 制作招聘H5 頁面長圖文字　/　81 4.3　H5頁面的音效設(shè)計(jì) /　84 4.3.1　H5頁面中音效設(shè)計(jì)的 重要性　/　84 4.3.2　H5頁面音效素材的獲取 方法　/　84 4.3.3　H5頁面音效的選擇與 添加注意事項(xiàng)　/　85 4.3.4　設(shè)計(jì)案例 使用Audition 制作音效　/　86 4.4　項(xiàng)目實(shí)訓(xùn) /　88 項(xiàng)目一　制作節(jié)氣H5頁面 /　88 項(xiàng)目二　制作搶紅包H5頁面 /　89 實(shí)戰(zhàn)演練　/ /90 第5章　H5頁面的動(dòng)效設(shè)計(jì) /　91 5.1　H5頁面動(dòng)效設(shè)計(jì)基礎(chǔ) /　92 5.1.1　H5頁面動(dòng)效的作用 /　92 5.1.2　H5頁面的主要?jiǎng)有?類型　/　93 5.2　H5頁面的內(nèi)頁動(dòng)效設(shè)計(jì) /　98 5.2.1　內(nèi)頁動(dòng)效的選擇 /　98 5.2.2　內(nèi)頁動(dòng)效的層級(jí) /　98 5.2.3　設(shè)計(jì)案例 制作微信紅包H5 頁面的內(nèi)頁動(dòng)效　/　98 5.3　H5頁面的轉(zhuǎn)場動(dòng)效 設(shè)計(jì)　/　102 5.3.1　設(shè)計(jì)轉(zhuǎn)場動(dòng)效的注意 事項(xiàng)　/　102 5.3.2　設(shè)計(jì)案例 制作微信 紅包H5頁面的 轉(zhuǎn)場動(dòng)效　/　102 5.4　項(xiàng)目實(shí)訓(xùn) /　105 項(xiàng)目一　制作產(chǎn)品推廣H5頁面動(dòng)效 /　105 項(xiàng)目二　制作招聘H5頁面動(dòng)效 /　106 實(shí)戰(zhàn)演練　/ /108 第6章　H5頁面的創(chuàng)意設(shè)計(jì) /　109 6.1　H5頁面的交互創(chuàng)意 設(shè)計(jì)　/　110 6.1.1　使用H5+720度全景技術(shù) 查看全景畫面　/　110 6.1.2　使用H5+人臉識(shí)別技術(shù)讓 內(nèi)容更有趣　/　111 6.1.3　使用H5+物理引擎技術(shù) 創(chuàng)建虛擬世界　/　112 6.1.4　使用H5+重力感應(yīng) 技術(shù)讓用戶的互動(dòng) 體驗(yàn)更強(qiáng)　/　113 6.1.5　使用H5+手指跟隨技術(shù)讓 操作更生動(dòng)　/　114 6.1.6　設(shè)計(jì)案例 使用凡科微傳 單制作全景H5頁面　/　114 6.2　H5頁面的動(dòng)態(tài)創(chuàng)意 設(shè)計(jì)　/　122 6.2.1　使用H5+快閃廣告提升 瀏覽體驗(yàn)　/　122 6.2.2　使用H5+粒子特效提升 視覺體驗(yàn)　/　124 6.2.3　使用H5+視頻提升內(nèi)容的 展現(xiàn)效果　/　124 6.2.4　使用H5+多屏互動(dòng)提升 營銷的娛樂性　/　125 6.2.5　使用H5+GIF動(dòng)畫讓畫面 更生動(dòng)　/　126 6.2.6　設(shè)計(jì)案例 制作快閃廣告 H5頁面　/　127 6.3　項(xiàng)目實(shí)訓(xùn) 制作元旦GIF 動(dòng)畫　/　132 實(shí)戰(zhàn)演練　/ /133 第7章　綜合案例 活動(dòng)運(yùn)營H5頁面的設(shè)計(jì)與制作 /　135 7.1　制作元宵節(jié)活動(dòng)H5頁面的前期準(zhǔn)備 /　137 7.1.1　元宵節(jié)活動(dòng)H5頁面設(shè)計(jì) 構(gòu)思　/　137 7.1.2　繪制元宵節(jié)活動(dòng)H5頁面 原型圖　/　138 7.1.3　搜集元宵節(jié)活動(dòng)H5頁面 素材　/　138 7.2　元宵節(jié)活動(dòng)H5頁面的 設(shè)計(jì)　/　139 7.2.1　設(shè)計(jì)元宵節(jié)活動(dòng) 標(biāo)題頁　/　139 7.2.2　設(shè)計(jì)元宵節(jié)活動(dòng) 內(nèi)容頁　/　42 7.2.3　設(shè)計(jì)元宵節(jié)活動(dòng) 紅包頁　/　146 7.2.4　設(shè)計(jì)元宵節(jié)活動(dòng) 介紹頁　/　148 7.3　元宵節(jié)活動(dòng)H5頁面的動(dòng)效 制作與發(fā)布　/　151 7.3.1　為元宵節(jié)活動(dòng)H5頁面 添加動(dòng)效　/　151 7.3.2　為元宵節(jié)活動(dòng)H5頁面 添加音效　/　157 7.3.3　/ 發(fā)布元宵節(jié)活動(dòng)H5 頁面　/　158 7.4　項(xiàng)目實(shí)訓(xùn) /　159 項(xiàng)目一　制作會(huì)議邀請(qǐng)函H5頁面 /　159 項(xiàng)目二　制作會(huì)議邀請(qǐng)函H5頁面 動(dòng)效　/　160 實(shí)戰(zhàn)演練　/ /162 8.1　制作產(chǎn)品推廣H5頁面的 前期準(zhǔn)備　/　165 8.1.1　產(chǎn)品推廣H5頁面設(shè)計(jì) 構(gòu)思　/　165 8.1.2　繪制產(chǎn)品推廣H5頁面 原型圖　/　166 8.1.3　搜集產(chǎn)品推廣H5頁面 素材　/　167 8.2　產(chǎn)品推廣H5頁面的 設(shè)計(jì)　/　168 8.2.1　設(shè)計(jì)產(chǎn)品推廣H5 首頁　/　168 8.2.2　設(shè)計(jì)產(chǎn)品推廣H5 內(nèi)頁　/　170 8.2.3　設(shè)計(jì)產(chǎn)品推廣H5 尾頁　/　172 8.3　產(chǎn)品推廣H5頁面的動(dòng)效 制作與發(fā)布　/　174 8.3.1　為產(chǎn)品推廣H5頁面添加 動(dòng)效　/　174 8.3.2　為產(chǎn)品推廣H5頁面添加 音效　/　179 8.3.3　發(fā)布產(chǎn)品推廣H5 頁面　/　180 8.4　項(xiàng)目實(shí)訓(xùn) /　181 項(xiàng)目一　制作紅酒推廣H5頁面 /　182 項(xiàng)目二　制作紅酒推廣H5頁面 動(dòng)效　/　183 實(shí)戰(zhàn)演練　/ /186 第9章　綜合案例 企業(yè)招聘H5頁面的設(shè)計(jì)與制作 /　187 9.1　制作企業(yè)招聘H5頁面的 前期準(zhǔn)備　/　189 9.1.1　/ 企業(yè)招聘H5頁面設(shè)計(jì) 構(gòu)思　/　189 9.1.2　繪制企業(yè)招聘H5頁面 原型圖　/　190 9.1.3　整理招聘內(nèi)容并搜集 素材　/　191 9.2　企業(yè)招聘H5頁面的 設(shè)計(jì)　/　192 9.2.1　導(dǎo)入企業(yè)招聘H5頁面 素材　/　192 9.2.2　設(shè)計(jì)一鏡到底企業(yè)招聘 H5頁面首頁　/　193 9.2.3　設(shè)計(jì)企業(yè)招聘H5頁面 內(nèi)頁　/　195 9.3　企業(yè)招聘H5頁面的動(dòng)效 制作與發(fā)布　/　202 9.3.1　為企業(yè)招聘H5頁面添加 動(dòng)效　/　202 9.3.2　為企業(yè)招聘H5頁面添加 音效　/　205 9.3.3　/ 發(fā)布企業(yè)招聘H5 頁面　/　206 9.4　項(xiàng)目實(shí)訓(xùn) 制作招聘簡章 H5頁面　/　207 實(shí)戰(zhàn)演練　/ /210