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