場景豐富，120多個成功的H5營銷案例:包括產品推廣、品牌宣傳、自媒體“吸粉”、企業招聘、邀請函等，20多種設計開發H5作品的工具和軟件，H5營銷策劃推廣的技巧，包括:裂變增長、顧客留存、品牌營銷、打造“爆品”、策劃共鳴故事、超級IP營銷、豐富流量渠道等，附贈素材，同步在線教學視頻，讀者可以邊學習邊練習，提高學習效率。

●H5移動營銷廣告設計全攻略工具操作+應用開發+視覺設計+實戰案例目 錄軟件操作篇第 1章H5微營銷：互動性更強的場景體驗1.1 H5移動營銷，更小、更快、更簡單.....91.1.1 為什麼選擇做H5營銷.......................91.1.2 H5移動營銷的功能特色....................91.1.3 細數用戶的行為特征.......................101.2 用實力說話，H5移動營銷的優勢.......11第 2章工具：H5常用工具簡介2.1 設計方法：H5移動設計的3種途徑....162素設計：H5的圖形圖像、影音開發工具............................................162.2.1 Photoshop——功能強大的設計工具...............................................172.2.2 Illustrator——專業的矢量圖繪制工具...............................................172.2.3 Sketch——移動UI界面設計工具....182.2.4 After Effects——制作炫酷的視頻特效........................................182.2.5 Cinema 4D——專業的三維軟件工具........................................192.2.6 Final cut Pro——專業視頻非線性編輯軟件........................................192.2.7 Garage Band——數碼音樂創作軟件...............................................202.3 動畫設計：H5設計的演示動畫制作工具............................................202.3.1 Keynote——設計吸引人的PPT.....202.3.2 HYPE——做出悅目的動畫效果......212.4 技術實現：H5的定制化發揮和創作工具............................................212.4.1 FWA——H5可以實現什麼動態效果...............................................212.4.2 W 3school——了解H5的基礎代碼知識...............................................222.5 快速套用：互聯網模板類H5開發平臺.232.5.1 人人秀——3分鐘制作H5微場景平臺...............................................232.5.2 易企秀——一鍵生成企業營銷H5....252.5.3 兔展——讓H5設計不再單調...........272.5.4 MAKA——輕松搞定H5定制推廣....292.5.5 初頁——把你的照片變成故事和書....302.6 創意設計：互聯網功能類H5開發平臺.312.6.1 互動大師（iH5）——可視化的H5在線編輯器........................................312.6.2 意派360——非常懂設計師的專業H5工具..........................................342.7 組合使用：各種H5工具的選擇方式...372.7.1 開發類H5工具的選擇.....................372.7.2 網站類H5工具的選擇.....................372.8 省時省力：H5設計常用的輔助工具...372.8.1 格式工廠——聲音/視頻壓縮工具.....372.8.2 Ps Play——在手機上預覽Photoshop設計稿...........................................382.8.3 TinyPNG——圖片壓縮工具...........382.8.4 草料——二維碼生成工具................39第3章重點：H5之Photoshop詳解3.1 圖像設計：輕松提升H5作品的顏值....413.1.1 控制移動H5圖像的畫布..................413.1.2 運用工具裁剪移動H5圖像..............423.1.3 移動H5圖像的摳圖合成..................433.1.4 移動H5圖像的影調調整..................443.1.5 移動H5圖像的色彩調整..................453.1.6 移動H5圖像設計的繪圖基礎...........463.1.7 移動H5圖像的路徑編輯技巧...........473.1.8 移動H5圖像的修飾與修復..............483.2 文字設計：做出有質感的好作品.......493.2.1 認識移動H5中的文字.....................493.2.2 輸入移動H5圖像文字.....................503.2.3 設置移動H5文字屬性.....................513.2.4 設置移動H5段落屬性.....................523.2.5 設置H5文字的排版樣式..................533.2.6 設置H5的標題文字格式..................553.2.7 制作移動H5界面路徑文字..............563.2.8 制作與編輯變形移動H5文字...........57應用開發篇第4章流程：移動H5的策劃與開發4.1 前期準備：讓H5設計事半功倍.........594.1.1 定目標：H5用來做什麼..................594.1.2 找熱點：H5如何火起來..................604.1.3 寫策劃：H5如何做起來..................614.2 程序設計：做H5的基本流程............624.2.1 選擇模板：一鍵生成H5作品...........624.2.2 交互設計：讓H5更具互動性...........634.2.3 視覺設計：給H5錦上添花..............684.3 測試分析：做好H5的總結與沉澱.......734.3.1 程序測試：進行修改和完善............734.3.2 活動上線：做好H5的推廣..............744.3.3 效果分析：實現數據化營銷............77第5章技術：移動H5熱門開發技術5.1 讓H5人氣值爆棚的“黑科技”.........825.1.1 運用720度全景技術打造全景畫面效果........................................825.1.2 運用3D旋轉技術讓H5畫面更加動感...............................................825.1.3 運用人臉識別技術實現H5趣味營銷...............................................835.1.4 運用物理引擎技術創建出虛擬世界...............................................845.1.5 運用重力感應技術提升用戶的互動體驗........................................855.1.6 運用手指跟隨產生滑動幻燈片效果....865.2 H5 +VR/AR/AI：融合高端定制開發....875.2.1 運用AR技術結合線下活動和線上互動...............................................875.2.2 運用VR技術生成一種虛擬的動態情境........................................885.2.3 運用AI技術讓移動H5作品變智能....895.3 展現動態炫酷畫面的H5技術運用......925.3.1 運用快閃影片讓H5作品更吸引眼球...............................................925.3.2 運用粒子特效展現炫酷的動畫效果....935.3.3 運用視頻互動更好地展示品牌內容....945.3.4 運用多屏互動打造互動娛樂新模式....955.3.5 運用GIF動畫讓頁面變得生動..........96視覺設計篇第6章風格：移動H5視覺風格設計6.1 設計原則：五大H5設計精髓要點......986.1.1 有創意，少抄襲，多原創................986.1.2 注重H5設計風格的統一..................996.1.3 H5原型圖的繪制與構思................1006.1.4 營造出合適的視覺氛圍.................1006.1.5 讓用戶真實參與和體驗.................1016.2 設計風格：12種H5設計風格解析....1036.2.1 扁平、插畫視覺風格設計..............1036.2.2 手繪、動漫視覺風格設計..............1056.2.3 水墨、復古視覺風格設計..............1056.2.4 寫實、科技視覺風格設計..............1066.2.5 極簡、拼貼視覺風格設計..............1086.2.6 攝影、小清新視覺風格設計..........1096.3 表現手法：6種H5視覺特效設計.......1106.3.1 來電視覺特效表現手法.................1106.3.2 擦除視覺特效表現手法.................1126.3.3 動畫視覺特效表現手法.................1136.3.4 SVG視覺特效表現手法................1136.3.5 拍立得視覺特效表現手法..............1146.3.6 玻璃碎掉視覺特效表現手法..........115第7章創意：移動H5視覺創意設計7.1 版式設計：讓你的設計越來越出色....1177.1.1 視覺動線設計...............................1177.1.2 畫面焦點設計...............................1177.1.3 頁面層級設計...............................1187.2 活動設計：快速引爆H5頁面的熱度..1197.2.1 砍價活動設計...............................1197.2.2 抽獎活動設計...............................1217.2.3 調查問卷設計...............................1217.2.4 投票活動設計...............................1237.2.5 卡券活動設計........................1277.3 動效設計：為H5頁面打造視覺動效....1277.3.1 了解移動H5的動效知識................1277.3.2 H5動效的主要類型與實現方法.....1287.3.3 在H5作品中運用轉場類動效.........1307.3.4 在H5作品中運用內容類動效.........1317.3.5 在H5作品中運用輔助性動效.........1317.3.6 在H5作品中運用功能性動效.........1317.4 音效設計：更好展現H5作品個性與情感.........................................1327.4.1 不能忽略H5作品中的聲音............1327.4.2 H5背景音效的注意事項................1337.4.3 選擇合適的H5背景音效................1337.4.4 H5作品中常見的輔助音效............1347.4.5 如何獲取更好的音效.....................1347.5 交互設計：增加互動性吸引更多人氣....1357.5.1 彈幕評論設計...............................1357.5.2 點擊觸發事件設計........................1367.5.3 互動遊戲設計...............................138實戰案例篇第8章單頁：精美H5單頁移動設計8.1 旅行相冊H5頁面設計...................1428.1.1 設計旅行相冊顆粒背景效果........1428.1.2 設計旅行相冊文字信息效果........1438.1.3 設計旅行相冊照片裝飾效果........1458.2 促銷活動H5頁面設計...................1478.2.1 設計促銷活動背景紋理效果........1478.2.2 設計促銷活動文字邊框效果........1488.2.3 設計促銷活動產品布局效果........1518.3 年會邀請函H5頁面設計................1528.3.1 設計年會邀請函邊框效果...........1528.3.2 設計年會邀請函主題效果...........1558.3.3 設計年會邀請函整體效果...........156第9章綜合：節日場景H5移動設計9.1 春節活動H5作品設計的前期準備....1599.1.1 整體的創意構思............................1599.1.2 素材圖像的收集............................1609.2 通過Photoshop制作圖像效果......1609.2.1 制作節日主題文字效果.................1609.2.2 摳取新年裝飾素材圖案.................1639.3 通過工具網站生成H5作品.............1649.3.1 設計H5作品的第 1頁：活動標題...1649.3.2 設計H5作品的第 2頁：祝福文案...1689.3.3 設計H5作品的第3頁：紅包活動...1729.3.4 為H5作品添加背景音效................1759.4 移動H5作品的發布和分享.............1769.4.1 發布與上線H5作品.......................1769.4.2 將H5活動頁面分享到群.........178第 10章綜合：產品推廣H5移動設計10.1 產品推廣H5作品設計的前期準備..18010.1.1 整體的創意構思.......................18010.1.2 素材圖像的拍攝與收集.............18010.2 通過Photoshop制作圖像效果.....18110.2.1 主題文字的設計.......................18110.2.2 產品圖片的調色處理................18410.2.3 產品圖片的詳情展示................18510.3 通過工具網站生成H5作品...........18710.3.1 設計H5作品的第 1頁：首頁設計........................................18710.3.2 設計H5作品的第 2頁：推薦產品1......................................19010.3.3 設計H5作品的第3頁：推薦產品2 .....................................19210.3.4 設計H5作品的第4頁：產品展示........................................19310.3.5 設計H5作品的第5頁：產品預訂........................................19410.3.6 為H5作品添加背景音效...........19610.4 移動H5作品的發布和分享...........19610.4.1 發布與上線H5作品..................19610.4.2 將H5作品分享到朋友圈...........198第 11章綜合：企業招聘H5移動設計11.1 企業H5招聘廣告制作的前期準備..20011.1.1 H5招聘廣告的整體創意構思....20011.1.2 整理相關的招聘內容................20111.2 通過Photoshop制作圖像效果....20111.2.1 使用Photoshop制作招聘主題圖片.................................20111.2.2 使用Photoshop調整企業相關圖片.................................20311.3 通過工具網站生成H5頁面...........20611.3.1 設計H5招聘廣告的第 1頁：招聘主題........................................20611.3.2 設計H5招聘廣告的第 2頁：公司實力展示.................................20911.3.3 設計H5招聘廣告的第3頁：工作環境展示.................................21011.3.4 設計H5招聘廣告的第4頁：企業福利展示.................................21111.3.5 設計H5招聘廣告的第5頁：招聘崗位展示.................................21311.3.6 設計H5招聘廣告的第6頁：在線報名申請.................................21611.3.7 為H5作品添加背景音效...........21911.4 移動H5作品的發布和分享...........22011.4.1 發布與上線H5作品..................22111.4.2 分享H5作品與收集求職者信息.221

本書是一本介紹移動H5設計的實例操作型教程，講解了H5的開發工具、圖文內容設計、應用開發制作、移動視覺營銷和創意制作，以及H5設計實戰案例等方面知識，幫助讀者從新手成長為移動H5設計高手。本書共11章，包括H5營銷的優勢、工具軟件簡介、Photoshop制作詳解，移動H5的策劃與開發、熱門開發技術，移動H5的視覺風格、視覺創意設計要點與方法，還有H5移動單頁及節日場景、產品推廣、企業招聘廣告綜合設計等內容，讀者學後可以融會貫通、舉一反三，制作出更多精彩、完美的移動H5頁面效果。本書適合從事移動互聯網工作的設計師、營銷人員，以及利用H5進行營銷的公司和需要進行移動互聯網營銷的企業相關人員使用。隨書附贈教學資源，包括書中案例的素材文件、效果文件，以及在線操作演示視頻，讀者可以邊學習邊練習，提高學習效率。

劉松異 著