H5移動(dòng)營銷廣告設(shè)計(jì)全攻略：軟件操作+應(yīng)用開發(fā)+視覺設(shè)計(jì)+實(shí)戰(zhàn)案例

H5移動(dòng)營銷廣告設(shè)計(jì)全攻略工具操作+應(yīng)用開發(fā)+視覺設(shè)計(jì)+實(shí)戰(zhàn)案例
目 錄
軟件操作篇
第 1章
H5微營銷：互動(dòng)性更強(qiáng)的場景體驗(yàn)
1．1 H5移動(dòng)營銷，更小、更快、更簡單．．．．．9
1．1．1 為什么選擇做H5營銷．．．．．．．．．．．．．．．．．．．．．．．9
1．1．2 H5移動(dòng)營銷的功能特色．．．．．．．．．．．．．．．．．．．．9
1．1．3 細(xì)數(shù)用戶的行為特征．．．．．．．．．．．．．．．．．．．．．．．10
1．2 用實(shí)力說話，H5移動(dòng)營銷的優(yōu)勢．．．．．．．11
第 2章
工具：H5常用工具簡介
2．1 設(shè)計(jì)方法：H5移動(dòng)設(shè)計(jì)的3種途徑．．．．16
2．2 元素設(shè)計(jì)：H5的圖形圖像、影音開發(fā)工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．16
2．2．1 Photoshop——功能強(qiáng)大的設(shè)計(jì)工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．17
2．2．2 Illustrator——專業(yè)的矢量圖繪制工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．17
2．2．3 Sketch——移動(dòng)UI界面設(shè)計(jì)工具．．．．18
2．2．4 After Effects——制作炫酷的視頻特效．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．18
2．2．5 Cinema 4D——專業(yè)的三維軟件工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
2．2．6 Final cut Pro——專業(yè)視頻非線性編輯軟件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
2．2．7 Garage Band——數(shù)碼音樂創(chuàng)作軟件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
2．3 動(dòng)畫設(shè)計(jì)：H5設(shè)計(jì)的演示動(dòng)畫制作工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
2．3．1 Keynote——設(shè)計(jì)吸引人的PPT．．．．．20
2．3．2 HYPE——做出悅目的動(dòng)畫效果．．．．．．21
2．4 技術(shù)實(shí)現(xiàn)：H5的定制化發(fā)揮和創(chuàng)作工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21
2．4．1 FWA——H5可以實(shí)現(xiàn)什么動(dòng)態(tài)效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21
2．4．2 W 3school——了解H5的基礎(chǔ)代碼知識(shí)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
2．5 快速套用：互聯(lián)網(wǎng)模板類H5開發(fā)平臺(tái)．23
2．5．1 人人秀——3分鐘制作H5微場景平臺(tái)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．23
2．5．2 易企秀——一鍵生成企業(yè)營銷H5．．．．25
2．5．3 兔展——讓H5設(shè)計(jì)不再單調(diào)．．．．．．．．．．．27
2．5．4 MAKA——輕松搞定H5定制推廣．．．．29
2．5．5 初頁——把你的照片變成故事和書．．．．30
2．6 創(chuàng)意設(shè)計(jì)：互聯(lián)網(wǎng)功能類H5開發(fā)平臺(tái)．31
2．6．1 互動(dòng)大師（iH5）——可視化的H5在線編輯器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．31
2．6．2 意派360——非常懂設(shè)計(jì)師的專業(yè)H5工具．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．34
2．7 組合使用：各種H5工具的選擇方式．．．37
2．7．1 開發(fā)類H5工具的選擇．．．．．．．．．．．．．．．．．．．．．37
2．7．2 網(wǎng)站類H5工具的選擇．．．．．．．．．．．．．．．．．．．．．37
2．8 省時(shí)省力：H5設(shè)計(jì)常用的輔助工具．．．37
2．8．1 格式工廠——聲音/視頻壓縮工具．．．．．37
2．8．2 Ps Play——在手機(jī)上預(yù)覽Photoshop設(shè)計(jì)稿．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．38
2．8．3 TinyPNG——圖片壓縮工具．．．．．．．．．．．38
2．8．4 草料——二維碼生成工具．．．．．．．．．．．．．．．．39
第3章
重點(diǎn)：H5之Photoshop詳解
3．1 圖像設(shè)計(jì)：輕松提升H5作品的顏值．．．．41
3．1．1 控制移動(dòng)H5圖像的畫布．．．．．．．．．．．．．．．．．．41
3．1．2 運(yùn)用工具裁剪移動(dòng)H5圖像．．．．．．．．．．．．．．42
3．1．3 移動(dòng)H5圖像的摳圖合成．．．．．．．．．．．．．．．．．．43
3．1．4 移動(dòng)H5圖像的影調(diào)調(diào)整．．．．．．．．．．．．．．．．．．44
3．1．5 移動(dòng)H5圖像的色彩調(diào)整．．．．．．．．．．．．．．．．．．45
3．1．6 移動(dòng)H5圖像設(shè)計(jì)的繪圖基礎(chǔ)．．．．．．．．．．．46
3．1．7 移動(dòng)H5圖像的路徑編輯技巧．．．．．．．．．．．47
3．1．8 移動(dòng)H5圖像的修飾與修復(fù)．．．．．．．．．．．．．．48
3．2 文字設(shè)計(jì)：做出有質(zhì)感的好作品．．．．．．．49
3．2．1 認(rèn)識(shí)移動(dòng)H5中的文字．．．．．．．．．．．．．．．．．．．．．49
3．2．2 輸入移動(dòng)H5圖像文字．．．．．．．．．．．．．．．．．．．．．50
3．2．3 設(shè)置移動(dòng)H5文字屬性．．．．．．．．．．．．．．．．．．．．．51
3．2．4 設(shè)置移動(dòng)H5段落屬性．．．．．．．．．．．．．．．．．．．．．52
3．2．5 設(shè)置H5文字的排版樣式．．．．．．．．．．．．．．．．．．53
3．2．6 設(shè)置H5的標(biāo)題文字格式．．．．．．．．．．．．．．．．．．55
3．2．7 制作移動(dòng)H5界面路徑文字．．．．．．．．．．．．．．56
3．2．8 制作與編輯變形移動(dòng)H5文字．．．．．．．．．．．57

應(yīng)用開發(fā)篇
第4章
流程：移動(dòng)H5的策劃與開發(fā)
4．1 前期準(zhǔn)備：讓H5設(shè)計(jì)事半功倍．．．．．．．．．59
4．1．1 定目標(biāo)：H5用來做什么．．．．．．．．．．．．．．．．．．59
4．1．2 找熱點(diǎn)：H5如何火起來．．．．．．．．．．．．．．．．．．60
4．1．3 寫策劃：H5如何做起來．．．．．．．．．．．．．．．．．．61
4．2 程序設(shè)計(jì)：做H5的基本流程．．．．．．．．．．．．62
4．2．1 選擇模板：一鍵生成H5作品．．．．．．．．．．．62
4．2．2 交互設(shè)計(jì)：讓H5更具互動(dòng)性．．．．．．．．．．．63
4．2．3 視覺設(shè)計(jì)：給H5錦上添花．．．．．．．．．．．．．．68
4．3 測試分析：做好H5的總結(jié)與沉淀．．．．．．．73
4．3．1 程序測試：進(jìn)行修改和完善．．．．．．．．．．．．73
4．3．2 活動(dòng)上線：做好H5的推廣．．．．．．．．．．．．．．74
4．3．3 效果分析：實(shí)現(xiàn)數(shù)據(jù)化營銷．．．．．．．．．．．．77
第5章
技術(shù)：移動(dòng)H5熱門開發(fā)技術(shù)
5．1 讓H5人氣值爆棚的“黑科技”．．．．．．．．．82
5．1．1 運(yùn)用720度全景技術(shù)打造全景畫面效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82
5．1．2 運(yùn)用3D旋轉(zhuǎn)技術(shù)讓H5畫面更加動(dòng)感．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82
5．1．3 運(yùn)用人臉識(shí)別技術(shù)實(shí)現(xiàn)H5趣味營銷．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．83
5．1．4 運(yùn)用物理引擎技術(shù)創(chuàng)建出虛擬世界．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．84
5．1．5 運(yùn)用重力感應(yīng)技術(shù)提升用戶的互動(dòng)體驗(yàn)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．85
5．1．6 運(yùn)用手指跟隨產(chǎn)生滑動(dòng)幻燈片效果．．．．86
5．2 H5 +VR/AR/AI：融合高端定制開發(fā)．．．．87
5．2．1 運(yùn)用AR技術(shù)結(jié)合線下活動(dòng)和線上互動(dòng)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．87
5．2．2 運(yùn)用VR技術(shù)生成一種虛擬的動(dòng)態(tài)情境．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．88
5．2．3 運(yùn)用AI技術(shù)讓移動(dòng)H5作品變智能．．．．89
5．3 展現(xiàn)動(dòng)態(tài)炫酷畫面的H5技術(shù)運(yùn)用．．．．．．92
5．3．1 運(yùn)用快閃影片讓H5作品更吸引眼球．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．92
5．3．2 運(yùn)用粒子特效展現(xiàn)炫酷的動(dòng)畫效果．．．．93
5．3．3 運(yùn)用視頻互動(dòng)更好地展示品牌內(nèi)容．．．．94
5．3．4 運(yùn)用多屏互動(dòng)打造互動(dòng)娛樂新模式．．．．95
5．3．5 運(yùn)用GIF動(dòng)畫讓頁面變得生動(dòng)．．．．．．．．．．96

視覺設(shè)計(jì)篇
第6章
風(fēng)格：移動(dòng)H5視覺風(fēng)格設(shè)計(jì)
6．1 設(shè)計(jì)原則：五大H5設(shè)計(jì)精髓要點(diǎn)．．．．．．98
6．1．1 有創(chuàng)意，少抄襲，多原創(chuàng)．．．．．．．．．．．．．．．．98
6．1．2 注重H5設(shè)計(jì)風(fēng)格的統(tǒng)一．．．．．．．．．．．．．．．．．．99
6．1．3 H5原型圖的繪制與構(gòu)思．．．．．．．．．．．．．．．．100
6．1．4 營造出合適的視覺氛圍．．．．．．．．．．．．．．．．．100
6．1．5 讓用戶真實(shí)參與和體驗(yàn)．．．．．．．．．．．．．．．．．101
6．2 設(shè)計(jì)風(fēng)格：12種H5設(shè)計(jì)風(fēng)格解析．．．．103
6．2．1 扁平、插畫視覺風(fēng)格設(shè)計(jì)．．．．．．．．．．．．．．103
6．2．2 手繪、動(dòng)漫視覺風(fēng)格設(shè)計(jì)．．．．．．．．．．．．．．105
6．2．3 水墨、復(fù)古視覺風(fēng)格設(shè)計(jì)．．．．．．．．．．．．．．105
6．2．4 寫實(shí)、科技視覺風(fēng)格設(shè)計(jì)．．．．．．．．．．．．．．106
6．2．5 極簡、拼貼視覺風(fēng)格設(shè)計(jì)．．．．．．．．．．．．．．108
6．2．6 攝影、小清新視覺風(fēng)格設(shè)計(jì)．．．．．．．．．．109
6．3 表現(xiàn)手法：6種H5視覺特效設(shè)計(jì)．．．．．．．110
6．3．1 來電視覺特效表現(xiàn)手法．．．．．．．．．．．．．．．．．110
6．3．2 擦除視覺特效表現(xiàn)手法．．．．．．．．．．．．．．．．．112
6．3．3 動(dòng)畫視覺特效表現(xiàn)手法．．．．．．．．．．．．．．．．．113
6．3．4 SVG視覺特效表現(xiàn)手法．．．．．．．．．．．．．．．．113
6．3．5 拍立得視覺特效表現(xiàn)手法．．．．．．．．．．．．．．114
6．3．6 玻璃碎掉視覺特效表現(xiàn)手法．．．．．．．．．．115
第7章
創(chuàng)意：移動(dòng)H5視覺創(chuàng)意設(shè)計(jì)
7．1 版式設(shè)計(jì)：讓你的設(shè)計(jì)越來越出色．．．．117
7．1．1 視覺動(dòng)線設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．117
7．1．2 畫面焦點(diǎn)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．117
7．1．3 頁面層級(jí)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．118
7．2 活動(dòng)設(shè)計(jì)：快速引爆H5頁面的熱度．．119
7．2．1 砍價(jià)活動(dòng)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．119
7．2．2 抽獎(jiǎng)活動(dòng)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121
7．2．3 調(diào)查問卷設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121
7．2．4 投票活動(dòng)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．123
7．2．5 微信卡券活動(dòng)設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．127
7．3 動(dòng)效設(shè)計(jì)：為H5頁面打造視覺動(dòng)效．．．．127
7．3．1 了解移動(dòng)H5的動(dòng)效知識(shí)．．．．．．．．．．．．．．．．127
7．3．2 H5動(dòng)效的主要類型與實(shí)現(xiàn)方法．．．．．128
7．3．3 在H5作品中運(yùn)用轉(zhuǎn)場類動(dòng)效．．．．．．．．．130
7．3．4 在H5作品中運(yùn)用內(nèi)容類動(dòng)效．．．．．．．．．131
7．3．5 在H5作品中運(yùn)用輔助性動(dòng)效．．．．．．．．．131
7．3．6 在H5作品中運(yùn)用功能性動(dòng)效．．．．．．．．．131
7．4 音效設(shè)計(jì)：更好展現(xiàn)H5作品個(gè)性與情感．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．132
7．4．1 不能忽略H5作品中的聲音．．．．．．．．．．．．132
7．4．2 H5背景音效的注意事項(xiàng)．．．．．．．．．．．．．．．．133
7．4．3 選擇合適的H5背景音效．．．．．．．．．．．．．．．．133
7．4．4 H5作品中常見的輔助音效．．．．．．．．．．．．134
7．4．5 如何獲取更好的音效．．．．．．．．．．．．．．．．．．．．．134
7．5 交互設(shè)計(jì)：增加互動(dòng)性吸引更多人氣．．．．135
7．5．1 彈幕評(píng)論設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．135
7．5．2 點(diǎn)擊觸發(fā)事件設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．136
7．5．3 互動(dòng)游戲設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．138

實(shí)戰(zhàn)案例篇
第8章
單頁：精美H5單頁移動(dòng)設(shè)計(jì)
8．1 旅行相冊H5頁面設(shè)計(jì)．．．．．．．．．．．．．．．．．．．142
8．1．1 設(shè)計(jì)旅行相冊顆粒背景效果．．．．．．．．142
8．1．2 設(shè)計(jì)旅行相冊文字信息效果．．．．．．．．143
8．1．3 設(shè)計(jì)旅行相冊照片裝飾效果．．．．．．．．145
8．2 促銷活動(dòng)H5頁面設(shè)計(jì)．．．．．．．．．．．．．．．．．．．147
8．2．1 設(shè)計(jì)促銷活動(dòng)背景紋理效果．．．．．．．．147
8．2．2 設(shè)計(jì)促銷活動(dòng)文字邊框效果．．．．．．．．148
8．2．3 設(shè)計(jì)促銷活動(dòng)產(chǎn)品布局效果．．．．．．．．151
8．3 年會(huì)邀請函H5頁面設(shè)計(jì)．．．．．．．．．．．．．．．．152
8．3．1 設(shè)計(jì)年會(huì)邀請函邊框效果．．．．．．．．．．．152
8．3．2 設(shè)計(jì)年會(huì)邀請函主題效果．．．．．．．．．．．155
8．3．3 設(shè)計(jì)年會(huì)邀請函整體效果．．．．．．．．．．．156
第9章
綜合：節(jié)日場景H5移動(dòng)設(shè)計(jì)
9．1 春節(jié)活動(dòng)H5作品設(shè)計(jì)的前期準(zhǔn)備．．．．159
9．1．1 整體的創(chuàng)意構(gòu)思．．．．．．．．．．．．．．．．．．．．．．．．．．．．159
9．1．2 素材圖像的收集．．．．．．．．．．．．．．．．．．．．．．．．．．．．160
9．2 通過Photoshop制作圖像效果．．．．．．160
9．2．1 制作節(jié)日主題文字效果．．．．．．．．．．．．．．．．．160
9．2．2 摳取新年裝飾素材圖案．．．．．．．．．．．．．．．．．163
9．3 通過工具網(wǎng)站生成H5作品．．．．．．．．．．．．．164
9．3．1 設(shè)計(jì)H5作品的第 1頁：活動(dòng)標(biāo)題．．．164
9．3．2 設(shè)計(jì)H5作品的第 2頁：祝福文案．．．168
9．3．3 設(shè)計(jì)H5作品的第3頁：紅包活動(dòng)．．．172
9．3．4 為H5作品添加背景音效．．．．．．．．．．．．．．．．175
9．4 移動(dòng)H5作品的發(fā)布和分享．．．．．．．．．．．．．176
9．4．1 發(fā)布與上線H5作品．．．．．．．．．．．．．．．．．．．．．．．176
9．4．2 將H5活動(dòng)頁面分享到微信群．．．．．．．．．178
第 10章
綜合：產(chǎn)品推廣H5移動(dòng)設(shè)計(jì)
10．1 產(chǎn)品推廣H5作品設(shè)計(jì)的前期準(zhǔn)備．．180
10．1．1 整體的創(chuàng)意構(gòu)思．．．．．．．．．．．．．．．．．．．．．．．180
10．1．2 素材圖像的拍攝與收集．．．．．．．．．．．．．180
10．2 通過Photoshop制作圖像效果．．．．．181
10．2．1 主題文字的設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．181
10．2．2 產(chǎn)品圖片的調(diào)色處理．．．．．．．．．．．．．．．．184
10．2．3 產(chǎn)品圖片的詳情展示．．．．．．．．．．．．．．．．185
10．3 通過工具網(wǎng)站生成H5作品．．．．．．．．．．．187
10．3．1 設(shè)計(jì)H5作品的第 1頁：首頁設(shè)計(jì)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．187
10．3．2 設(shè)計(jì)H5作品的第 2頁：推薦產(chǎn)品1．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．190
10．3．3 設(shè)計(jì)H5作品的第3頁：推薦產(chǎn)品2 ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．192
10．3．4 設(shè)計(jì)H5作品的第4頁：產(chǎn)品展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．193
10．3．5 設(shè)計(jì)H5作品的第5頁：產(chǎn)品預(yù)訂．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．194
10．3．6 為H5作品添加背景音效．．．．．．．．．．．196
10．4 移動(dòng)H5作品的發(fā)布和分享．．．．．．．．．．．196
10．4．1 發(fā)布與上線H5作品．．．．．．．．．．．．．．．．．．196
10．4．2 將H5作品分享到朋友圈．．．．．．．．．．．198
第 11章
綜合：企業(yè)招聘H5移動(dòng)設(shè)計(jì)
11．1 企業(yè)H5招聘廣告制作的前期準(zhǔn)備．．200
11．1．1 H5招聘廣告的整體創(chuàng)意構(gòu)思．．．．200
11．1．2 整理相關(guān)的招聘內(nèi)容．．．．．．．．．．．．．．．．201
11．2 通過Photoshop制作圖像效果．．．．201
11．2．1 使用Photoshop制作招聘主題圖片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．201
11．2．2 使用Photoshop調(diào)整企業(yè)相關(guān)圖片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．203
11．3 通過工具網(wǎng)站生成H5頁面．．．．．．．．．．．206
11．3．1 設(shè)計(jì)H5招聘廣告的第 1頁：招聘主題．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．206
11．3．2 設(shè)計(jì)H5招聘廣告的第 2頁：公司實(shí)力展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．209
11．3．3 設(shè)計(jì)H5招聘廣告的第3頁：工作環(huán)境展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．210
11．3．4 設(shè)計(jì)H5招聘廣告的第4頁：企業(yè)福利展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．211
11．3．5 設(shè)計(jì)H5招聘廣告的第5頁：招聘崗位展示．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．213
11．3．6 設(shè)計(jì)H5招聘廣告的第6頁：在線報(bào)名申請．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．216
11．3．7 為H5作品添加背景音效．．．．．．．．．．．219
11．4 移動(dòng)H5作品的發(fā)布和分享．．．．．．．．．．．220
11．4．1 發(fā)布與上線H5作品．．．．．．．．．．．．．．．．．．221
11．4．2 分享H5作品與收集求職者信息．221