H5+移动营销设计宝典

目录

01 认识H5与广告

1.1 传统广告怎么了？\ 4

聊点传统广告的事儿 \ 4

传统广告如今还是行业大佬么？ \ 6

那么，传统广告会被打败么？ \ 8

1.2 H5究竟是什么？ \ 10

“H5=HTML5”是否可以成立？ \ 12

“H5=微信网页”是否可以成立？ \ 13

“H5=移动PPT\APP”又是否可以成立？ \ 14

那么H5究竟是什么？ \ 15

了解定义的作用 \ 17

1.3 H5与未来数码设计\ 18

超媒体是什么？ \ 19

那么超媒体的 “非线性” 又是什么样子？ \ 21

超媒体的具体特征 \ 22

超媒体实现的4个条件 \ 23

H5是超媒体么？ \ 25

1.4 一个水果的比喻，让你认识H5的优势\ 27

水果是否有营养价值 \ 27

水果是否新鲜，好吃 \ 28

水果的成熟周期 \ 30

水果是否物美价廉 \ 32

02 设计流程与规范技巧

2.1 H5 的设计流程 \ 36

目前H5 在设计方法上可以笼统地划分为三大类型 \ 36

了解需求，选好方向 \ 38

确定表现形式 \ 40

设计表现 \ 42

开发执行阶段 \ 43

数据总结分析 \ 45

2.2 H5 常用设计工具箱 \ 48

H5 设计师使用工具 \ 48

H5 动效展示工具 \ 51

H5 设计生成工具 \ 53

H5 常用辅助设计工具 \ 57

2.3 H5 页面尺寸设计注意事项 \ 58

03 H5 的设计方法

3.1 认识H5 的原型图 \ 66

什么是原型图 \ 66

H5 的原型图 \ 67

H5 原型图应具备的因素 \ 70

原型图存在的作用 \ 72

3.2 把握好H5 设计的表现力 \ 73

视觉气氛（传递情感） \ 73

形式感（打动用户的重要方法） \ 79

参与感（H5 设计的爆点） \ 82

3.3 H5 页面的版式设计要领 \ 86

H5 与平面设计的版式到底哪里不同？ \ 86

要如何应对H5 版面设计？ \ 89

3.4 H5 的文字设计 \ 103

设计师！你需要重新认识文字 \ 103

改变你的排版习惯 \ 112

H5 的标题设计 \ 115

3.5 H5 的动效设计 \ 124

关于动效，你要清楚一些事情 \ 124

在H5 ，我们可以实现哪些动效？ \ 139

动效在H5 的一些实际运用 \ 146

3.6 H5 的声效设计 \ 154

你一直在忽略声音 \ 154

声音的3 个类别 \ 156

H5 的背景音效 \ 157

H5 的辅助音效 \ 164

一些采样常识 \ 166

04 H5 的精品案例

精品案例 4.1 大众点评—我们之间就一个字 \ 176

精品案例 4.2 LPI—梦幻H5 \ 189

精品案例 4.3 寻龙诀一起来寻龙摸金，活蒸大粽子 \ 202

精品案例 4.4 腾讯游戏—众粉丝哭倒？吴亦凡圆寸疑为入伍做准备 \ 214

精品案例 4.5 阿迪达斯—罗斯绝不凋零 \ 228

精品案例 4.6 大众点评—你一身的渴望，我们从头开始满足你！ \ 239

工具类精品案例 4.7 工具类精品案例—手机有话对你说 \ 252

05 H5 的内容访谈

鱼脸互动Fish Face 专访内容（节选）\ 265

UID WORKS 专访内容（节选）\ 268

LxU 专访内容（节选）\ 270

LPI 良品互动 专访内容（节选）\ 272

W 上海 专访内容（节选）\ 274

腾讯TGideas 专访内容（节选）\ 278

搜狐新闻 专访内容\ 280

万达集团 专访内容\ 283

iH5 专访内容\ 286

甲本 专访内容\ 290

致谢/ 293