H5設計商業實戰案例教程（微課版）
張婷
相關主題
商品描述
本書是以易企秀軟件為技術基礎，講解H5設計商業實戰案例設計與制作的專業教程。全書共分為7個章節：第1章講解H5設計概述，包括H5營銷的優勢、H5的應用方向/渠道、H5的類型等內容；第2章講解易企秀軟件，包括易企秀簡介、平臺編輯器、作品尺寸與屏幕適配等內容；第3章~第6章講解創建靜態、動態H5的方法，H5制作的高級功能應用，H5爆款頁面設計，H5創意互動設計等知識與實戰；第7章用4個綜合商業案例幫助讀者了解H5完整的設計流程並應用所學知識。 本書可作為數字媒體技術、數字媒體藝術和新媒體藝術等相關專業教材，也適合從事H5相關的各類設計師學習。
作者簡介
張婷，易企秀H5資深設計師，入行7年，創造模板數量高達2萬+！ 對H5從喜歡到熱愛，從熱愛到執著，這7年作者只幹了兩件事：做模板、做定制客戶。 做定制方面：對H5設計有自己獨到的見解，從不懂到精通。風格選取及設計排版獲得過無數客戶的稱贊。 做模板方面：從細膩文案到顏色搭配，從內容架構到客戶實用，都精確到模板中，客戶修改少，滿意度高。 服務過的客戶覆蓋全國各地，為四川電視臺、餓了麼平臺、美姿舞蹈、新疆中天眾城、四川財經職業學院、奔馳、平安人壽、津濱物業等多個知名企業合作過。
目錄大綱
第 1 章 H5 設計概述 001
1.1 H5概述 .................................002
1.1.1 H5 的概念..........................................002
1.1.2 H5 與 App 的區別.............................002
1.2 H5營銷的優勢........................002
1.3 H5的應用方向和渠道 ............. 003
1.4 H5的常見類型 ...................... 003
1.4.1 靜態普通類........................................003
1.4.2 基礎動畫類........................................004
1.4.3 炫酷交互類........................................004
1.4.4 數據圖表類........................................005
1.4.5 隨機事件類........................................005
1.4.6 長頁展示類........................................006
1.4.7 綜合類................................................006
第 2 章 認識易企秀008
2.1 易企秀簡介 ........................... 009
2.1.1 什麼是易企秀....................................009
2.1.2 賬號註冊和登錄方式........................009
2.1.3 賬號類型和產品矩陣........................010
2.1.4 認識易企秀導航欄及商城產品........010
2.1.5 易企秀 PC 端和移動端的區別.........011
2.2 認識易企秀H5編輯器 .............012
2.2.1 作品創建功能....................................012
2.2.2 左側導航欄功能................................013
2.2.3 各項組件功能....................................014
2.2.4 作品分享設置及分享樣式................ 017
2.2.5 保存與發布........................................018
2.2.6 頁面設置、圖層管理、頁面管理.....019
2.3 作品尺寸與屏幕適配................020
2.3.1 作品尺寸............................................020
2.3.2 文件大小和文件模式........................020
2.3.3 識別文件中的文字............................020
2.3.4 常規頁面及長頁面............................020
2.4 課後習題：制作浪漫粉紫色
賀卡等 ..................................021
第 3 章 創建 H5 作品 024
3.1 創建靜態H5作品....................025
3.1.1 準備工作............................................025
3.1.2 制作過程............................................025
3.1.3 保存並發布........................................028
3.2 創建動態H5 ......................... 028
3.2.1 元素組件設置....................................029
3.2.2 元素樣式設置....................................030
3.2.3 元素的動畫設置................................031
3.2.4 進入動畫、強調動畫、退出動畫..... 033
3.2.5 元素動畫的設置................................034
3.2.6 添加音樂............................................035
3.2.7 作品分享設置和加載頁設置............036
3.2.8 尾頁設置及廣告去除........................ 037
3.3 實戰案例：制作小清新粉色羽毛
邀請函 ................................. 038
3.4 課後習題：制作水墨中國風
邀請函 ................................. 045
第 4 章 H5 制作的高級功能應用 047
4.1 認識高級組件 ........................ 048
4.1.1 拼圖、輪播圖....................................048
4.1.2 數據圖表、隨機事件........................049
4.1.3 一鏡到底、快閃、畫中畫、立體魔方............................................052
4.1.4 地圖、撥打電話、跳轉鏈接............059
4.1.5 實時日期、實時位置、天氣、畫板....................................................062
4.1.6 動態數字、音效、目錄....................064
4.1.7 底部菜單、點擊截圖、計時............ 067
4.2 認識表單組件........................ 068
4.2.1 輸入框................................................069
4.2.2 單選和多選........................................069
4.2.3 下拉列表............................................070
4.2.4 評分.................................................... 071
4.2.5 手機號驗證........................................ 072
4.2.6 提交按鈕............................................ 072
4.3 認識互動組件.........................073
4.3.1 微信頭像、微信語音........................ 073
4.3.2 上傳照片、頭像墻............................ 075
4.3.3 投票、點贊、瀏覽次數.................... 076
4.3.4 留言板、彈幕.................................... 077
4.4 智能組件 .............................. 079
4.4.1 自說字畫、年齡改變........................ 079
4.4.2 人臉識別、人臉融合........................081
4.4.3 紅包、抽獎、打賞............................082
4.4.4 在線收款、實時對話........................086
4.5 特效 .................................... 087
4.5.1 塗抹....................................................088
4.5.2 指紋....................................................088
4.5.3 飄落物................................................088
4.5.4 漸變....................................................089
4.5.5 重力感應............................................090
4.5.6 砸玻璃................................................090
4.5.7 模擬對話............................................090
4.6 實戰案例：制作復雜H5...........091
4.7 課後習題：制作小清新唯美紫色H5 ............................... 098
第 5 章 爆款 H5 頁面設計 101
5.1 風格百變：常見的H5頁面風格.... 102
5.2 色彩搭配：H5頁面色彩設計.....106
5.2.1 H5 頁面設計中常用的配色方案...... 106
5.2.2 H5 頁面色彩設計策略...................... 109
5.2.3 常用的 H5 配色工具......................... 109
5.3 圖文設計：用高顏值圖文提升
畫面質感 ............................... 112
5.3.1 H5 頁面的排版設計.......................... 113
5.3.2 H5 頁面的層級和元素設計.............. 114
5.3.3 H5 頁面信息的可視化設計.............. 116
5.3.4 H5 頁面留白設計.............................. 116
5.3.5 H5 頁面視覺平衡設計...................... 117
5.3.6 H5 頁面視覺心理設計...................... 118
5.3.7 H5 頁面圖片設計.............................. 120
5.3.8 H5 頁面文本設計.............................. 122
5.4 實戰案例：制作爆款高級
質感H5 ................................ 124
5.5 課後習題：制作招聘宣傳H5..... 131
第 6 章 H5 創意互動設計 134
6.1 影音設計：增強H5畫面的張力...................................... 135
6.1.1 加入外接視頻.................................... 135
6.1.2 加入外鏈視頻.................................... 135
6.1.3 常用的 H5 動畫和視頻制作工具..... 136
6.1.4 H5 背景音樂和音效設計.................. 138
6.1.5 音樂素材的搜集與編輯.................... 139
6.1.6 搜集音效素材的渠道........................140
6.2 動效設計：打造H5頁面交互體驗感 .................................. 142
6.2.1 優化 H5 頁面動畫............................. 142
6.2.2 翻頁動畫............................................ 142
6.2.3 頁面元素動畫.................................... 143
6.2.4 運用 GIF 動畫特效打造視覺效果...... 144
6.2.5 實戰案例：使用易企秀制作 H5動效頁面............................................ 144
6.3 高級互動組件：打造炫酷H5.....146
6.3.1 運用一鏡到底、快閃功能................ 146
6.3.2 怎樣運用一鏡到底............................ 148
6.3.3 設置動畫時間.................................... 150
6.3.4 運用智能組件.................................... 151
6.3.5 添加特效............................................ 152
6.3.6 運用彈幕............................................ 153
6.3.7 運用觸發功能.................................... 154
6.3.8 運用輪播圖........................................ 162
6.4 實戰案例：制作高端創意互動H5 ................................ 163
6.5 課後習題：制作清新淡綠色婚禮邀請函 .................................. 167
第 7 章 H5 實戰案例 170
7.1 實戰案例：企業宣傳翻頁型H5的制作...................................... 171
7.2 實戰案例：長頁版H5制作 ....... 175
7.3 實戰案例：炫酷動畫型H5制作 .....................................178
7.4 實戰案例：觸發答題互動型H5制作 ..................................... 181
