H5+ 营销设计手册 创意 视觉 实战

　　本书是为H5的入门学习者编写的，以“图书”+“动态演示”+“视频教程”+“社群交流”+“行业文章”的立体教学模式，系统讲解H5设计的常识和规范，以及制作方法和技巧。 全书共11章。第1～2章从认识H5开始讲起，阐明其特征和功能，详细讲解H5的设计规范与常用工具，并介绍如何为设计与制作做好高质量的素材准备工作；第3～9章围绕H5的设计与制作的全流程，逐步讲解H5的策划，页面设计，元素与文字设计，动态设计和音频设计等内容，并阐述H5的数据分析与测试方法；第10章精选了翻页类、长图类、数据类和功能类等4个H5设计全流程案例，详细讲解了H5的设计思路和制作方法，帮助读者巩固前面所学的知识，提高读者的应用能力。第11章介绍了进阶专业级H5设计的方法，帮读者搭好提高的台阶。 为了让读者能更好地学习H5的制作，本书以二维码的形式在书中植入了大量的动态辅助内容，包括动态演示、声效演示、H5案例演示和全套的教学视频。另外，通过本书作者的微信公众号，读者还能获得行业“干货”文章，并能加入读者社群进行讨论。 除了从事设计工作的设计师外，本书还适合H5设计的初学者和H5设计的爱好者阅读。

　　苏杭（小呆） 从最初的平面广告设计师到后来的互联网视觉设计师，再到如今的设计内容媒体人，小呆在设计行业已从业8年。 他在H5领域的学习与研究已经持续了4年，并且于2017年出版了《H5+移动营销设计宝典》一书，向学习H5的读者分享了自己的方法和经验。

第 1章　重新认识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

 

第6章　元素与文字设计技巧　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

 

第 10章　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

 

第 11章　H5的进阶学习　215

 

11.1　普通级H5与专业级H5的差别 　216

 

11.2　H5的更多可能性　217

 

11.3　专业级H5工具推荐　220

 

11.3.1　可制作专业级H5的工具　220

 

11.3.2　工具的几个关键点　220