●章 重新認識H5 13
1.1 H5是什麼 14
1.1.1 H5真的就是手機PPT嗎？ 14
1.1.2 原來H5隻是一個“洋外號” 15
1.2 H5的各項特征 17
1.2.1 H5現階段的應用領域 17
1.2.2 H5目前的應用形式 20
1.2.3 H5能實現的功能 21
1.2.4 H5的優勢與不足 23
第2章 了解H5設計的工具和規範 29
2.1 H5設計要經歷的流程 30
2.1.1 認真了解需求 31
2.1.2 做設計規劃 31
2.1.3 有計劃地設計 32
2.1.4 利用工具制作H5 33
2.1.5 體驗與測試 33
2.1.6 總結分析數據 33
2.2 關於H5，你不可不知的工具 35
2.2.1 制作H5的常用工具 35
2.2.2 制作H5最常用軟件 38
2.3 H5設計要特別注意的規範 41
2.3.1 選擇瀏覽器 41
2.3.2 常用設計尺寸 42
2.3.3 H5響應式特征 43
2.3.4 頁面“安全區” 45
第3章 怎麼獲得高質量的素材 49
3.1 H5案例素材在哪裡找？ 50
3.1.1 資訊網站 50
3.1.2 資訊自媒體 53
3.2 獲得圖片與設計素材 53
3.2.1 綜合類素材庫 54
3.2.2 付費類素材庫 54
3.2.3 國外素材庫 54
3.2.4 圖標類素材庫 55
3.2.5 素材庫的素材庫 55
3.2.6 教你尋找圖片出處 56
3.3 H5字體素材 57
3.3.1 優質字體素材 57
3.3.2 特殊字體素材 58
3.3.3 實用字體推薦 59
3.4 H5音效素材 61
3.4.1 雲音樂搜索平臺 61
3.4.2 免費音效素材庫 62
3.4.3 版權音效素材庫 63
第4章 H5的策劃技巧 65
4.1 了解移動端用戶習慣 66
4.1.1 畫面尺寸差異 66
4.1.2 閱讀習慣差異 66
4.1.3 場景習慣差異 67
4.2 根據用戶心理設計H5內容 68
4.2.1 認同感 68
4.2.2 獎勵 70
4.2.3 熟悉度 71
4.2.4 制造意外 72
4.3 根據項目特征選擇對應形式 74
4.3.1 邀請函 74
4.3.2 個人簡歷 75
4.3.3 企業幻燈片 75
4.3.4 電子宣傳冊 76
4.3.5 促銷廣告 77
4.3.6 問卷、信息收集 77
第5章 頁面設計技巧 81
5.1 繪制頁面原型圖 82
5.1.1 什麼是原型圖 82
5.1.2 H5設計的原型圖 82
5.2 把握頁面視覺氛圍 84
5.2.1 色彩是決定氛圍的關鍵 84
5.2.2 色彩的情感 85
5.2.3 色彩的4種風格 86
5.2.4 頁面的3階配色法 90
5.2.5 配色工具推薦 94
5.3 H5版面設計技巧 95
5.3.1 好的版式讓內容更清晰 95
5.3.2 創造畫面焦點 96
5.3.3 單個頁面的層級 99
5.3.4 多個頁面的層級 102
5.3.5 讓H5更有節奏感 103
第素與文字設計技巧 107
6.1 H5的視覺設計技巧 108
6.1.1 圖形永遠好過文字 108
6.1.2素要盡量統一 108
6.2 H5的圖片設計技巧 109
6.2.1 盡量使用全圖 109
6.2.2 可營造空間感 110
6.2.3 多用特寫圖片 111
6.2.4 圖片版式要統一 112
6.3 H5的標題設計技巧 113
6.3.1 標題的空間 113
6.3.2 標題的層級 115
6.3.3 標題與圖形 116
6.3.4 標題與背景 116
6.4 H5的正文設計技巧 117
6.4.1 壓縮內容量 118
6.4.2 控制字號 119
6.4.3 字體及其顏色 120
6.4.4 字體裝飾 121
第7章 動態設計技巧 123
7.1 H5動態基本常識 124
7.1.1 正確理解動效的作用 124
7.1.2 動效要還原物理特征 125
7.2 內頁動效設計 126
7.2.1 內容展示動態特征 126
7.2.2 運動樣式的統一 128
7.2.3 動效展示的層級 129
7.3 轉場動效設計 130
7.3.1 最實用的轉場效果 130
7.3.2 轉場效果的時間 131
7.4 功能動效設計 131
第8章 音效設計技巧 135
8.1 如何看待音效 136
8.1.1 聽覺和視覺哪個更重要 136
8.1.2 聲畫對位關繫 137
8.2 背景音效制作技巧 138
8.2.1 如何獲得合適的音效 138
8.2.2 盡量不要使用歌曲 139
8.2.3 音樂要短小 139
8.2.4 加入“淡入”與“淡出”效果 140
8.2.5 學會采集音效 141
8.3 背景音效制作流程 142
8.3.1 用GarageBand制作音效 142
8.3.2 用Audition制作音效 147
第9章 H5數據分析與測試 153
9.1 你要了解的數據常識 154
9.1.1 常規數據概念 154
9.1.2 數據的作用 156
9.2 你也可以做的H5測試 157
9.2.1 好友、朋友圈和社群測試 158
9.2.2 公眾號測試 160
0章 H5設計案例全流程實戰 161
10.1 翻頁類H5-線下門店案例 162
10.1.1 項目素材（模擬案例） 162
10.1.2 項目主題與內容框架 162
10.1.3 H5原型和設計構思 164
10.1.4 H5制作過程 166
10.2 長圖類H5-線下活動案例 176
10.2.1 項目素材 176
10.2.2 項目主題與內容框架 176
10.2.3 H5原型與設計思路 178
10.2.4 H5制作過程 179
10.3 數據類H5-模擬案例 186
10.3.1 項目素材（模擬案例） 186
10.3.2 項目主題與內容框架 186
10.3.3 H5原型和設計構思 188
10.3.4 H5制作過程 189
10.4 功能類H5-模版案例 197
10.4.1 投票模版類H5設計 197
10.4.2 抽獎模版類H5設計 204
10.4.3 小遊戲模版類H5設計 209
1章 H5的進階學習 215
11.1 普通級H5與專業級H5的差別 216
11.2 H5的更多可能性 217
11.3 專業級H5工具推薦 220
11.3.1 可制作專業級H5的工具 220
11.3.2 工具的幾個關鍵點 220
本書是為H5的入門學習者編寫的，以“圖書”+“動態演示”+“視頻教程”+“社群交流”+“行業文章”的立體教學模式，繫統講解H5設計的常識和規範，以及制作方法和技巧。
全書共11章。～2章從認識H5開始講起，闡明其特征和功能，詳細講解H5的設計規範與常用工具，並介紹如何為設計與制作做好高質量的素材準備工作；第3～9章圍繞H5的設計與制作的全流程，逐步講解H5的策劃，頁面素與文字設計，動態設計和音頻設計等內容，並闡述H5的數據分析與測試方法；0章精選了翻頁類、長圖類、數據類和功能類等4個H5設計全流程案例，詳細講解了H5的設計思路和制作方法，幫助讀者鞏固前面所學的知識，提高讀者的應用能力。1章介紹了進階專業級H5設計的方法，幫讀者搭好提高的臺階。
為了讓讀者能更好地學習H5的制作，本書以二維碼的形式在書中植入了大量的動態輔助內容，包括動態演示、聲效演示、H5案例等
