微信扫码下载

编辑推荐

适读人群:H5设计入门小白、H5设计爱好者、初级设计师、想要学习H5的在校学生。

遵循H5设计流程;

详细讲解设计规范、策划技巧和素材获取方法;

全面阐述页面、元素、文字、动态、音效,以及数据分析与测试的设计技巧;

分析四大类H5营销设计全流程案例。

H5设计系统学习方法倾情奉献;

创意方法、设计方法和教学视频全套收录。

内容简介

H5 营销设计手册 创意 视觉 实战》是为H5的入门学习者编写的,以“图书”+“动态演示”+“视频教程”+“社群交流”+“行业文章”的立体教学模式,系统讲解H5设计的常识和规范,以及制作方法和技巧。

H5 营销设计手册 创意 视觉 实战》共11章。第1~2章从认识H5开始讲起,阐明其特征和功能,详细讲解H5的设计规范与常用工具,并介绍如何为设计与制作做好高质量的素材准备工作;第3~9章围绕H5的设计与制作的全流程,逐步讲解H5的策划,页面设计,元素与文字设计,动态设计和音频设计等内容,并阐述H5的数据分析与测试方法;第10章精选了翻页类、长图类、数据类和功能类等4个H5设计全流程案例,详细讲解了H5的设计思路和制作方法,帮助读者巩固前面所学的知识,提高读者的应用能力。第11章介绍了进阶专业级H5设计的方法,帮读者搭好提高的台阶。

为了让读者能更好地学习H5的制作,《H5 营销设计手册 创意 视觉 实战》以二维码的形式在书中植入了大量的动态辅助内容,包括动态演示、声效演示、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


其他推荐