本书会从广告行业背景说起, 让读者了解H5广告的来龙去脉, 并且学会快速的运用工具制作H5广告, 包括一些必要的设计方式和规范, 同时引导受众不要盲目跟风, 客观和理性的使用H5广告。
小呆的公众号,已是H5业界内容的风向标。鉴于H5突出的互动特性,我们意识到平媒根本无法满足其对创意、技术、动效、声效的解读,于是我们设计了图书网站,并在书中植入大量二维码作为连接;使得公众号、图书网站、纸质书三者形成互补关系,满足了内容演示、更新、互动的多重功能,这在国内是难得的创新!;H5本身还带有技术、设计、艺术、广告、营销等多重属性,所以,对于在职读者来说,需要了解大量信息和业界动态,才能在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