描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787115511560
20多种设计开发H5作品的工具和软件,
H5营销策划推广的技巧,包括:裂变增长、顾客留存、品牌营销、打造“爆品”、策划共鸣故事、超级IP营销、丰富流量渠道等,
附赠素材,同步在线教学视频,读者可以边学习边练习,提高学习效率。
本书共11章,包括H5营销的优势、工具软件简介、Photoshop制作详解,移动H5的策划与开发、热门开发技术,移动H5的视觉风格、视觉创意设计要点与方法,还有H5移动单页及节日场景、产品推广、企业招聘广告综合设计等内容,读者学后可以融会贯通、举一反三,制作出更多精彩、完美的移动H5页面效果。
本书适合从事移动互联网工作的设计师、微信营销人员,以及利用H5进行营销的公司和需要进行移动互联网营销的企业相关人员使用。随书附赠教学资源,包括书中案例的素材文件、效果文件,以及在线操作演示视频,读者可以边学习边练习,提高学习效率。
目 录
软件操作篇
第 1章
H5微营销:互动性更强的场景体验
1.1 H5移动营销,更小、更快、更简单…..9
1.1.1 为什么选择做H5营销…………………..9
1.1.2 H5移动营销的功能特色………………..9
1.1.3 细数用户的行为特征…………………..10
1.2 用实力说话,H5移动营销的优势…….11
第 2章
工具:H5常用工具简介
2.1 设计方法:H5移动设计的3种途径….16
2.2 元素设计:H5的图形图像、影音开发工具……………………………………..16
2.2.1 Photoshop——功能强大的设计工具………………………………………..17
2.2.2 Illustrator——专业的矢量图绘制工具………………………………………..17
2.2.3 Sketch——移动UI界面设计工具….18
2.2.4 After Effects——制作炫酷的视频特效………………………………….18
2.2.5 Cinema 4D——专业的三维软件工具………………………………….19
2.2.6 Final cut Pro——专业视频非线性编辑软件………………………………….19
2.2.7 Garage Band——数码音乐创作软件………………………………………..20
2.3 动画设计:H5设计的演示动画制作工具……………………………………..20
2.3.1 Keynote——设计吸引人的PPT…..20
2.3.2 HYPE——做出悦目的动画效果……21
2.4 技术实现:H5的定制化发挥和创作工具……………………………………..21
2.4.1 FWA——H5可以实现什么动态效果………………………………………..21
2.4.2 W 3school——了解H5的基础代码知识………………………………………..22
2.5 快速套用:互联网模板类H5开发平台.23
2.5.1 人人秀——3分钟制作H5微场景平台………………………………………..23
2.5.2 易企秀——一键生成企业营销H5….25
2.5.3 兔展——让H5设计不再单调………..27
2.5.4 MAKA——轻松搞定H5定制推广….29
2.5.5 初页——把你的照片变成故事和书….30
2.6 创意设计:互联网功能类H5开发平台.31
2.6.1 互动大师(iH5)——可视化的H5在线编辑器………………………………….31
2.6.2 意派360——非常懂设计师的专业H5工具……………………………………34
2.7 组合使用:各种H5工具的选择方式…37
2.7.1 开发类H5工具的选择…………………37
2.7.2 网站类H5工具的选择…………………37
2.8 省时省力:H5设计常用的辅助工具…37
2.8.1 格式工厂——声音/视频压缩工具…..37
2.8.2 Ps Play——在手机上预览Photoshop设计稿…………………………………….38
2.8.3 TinyPNG——图片压缩工具………..38
2.8.4 草料——二维码生成工具…………….39
第3章
重点:H5之Photoshop详解
3.1 图像设计:轻松提升H5作品的颜值….41
3.1.1 控制移动H5图像的画布………………41
3.1.2 运用工具裁剪移动H5图像…………..42
3.1.3 移动H5图像的抠图合成………………43
3.1.4 移动H5图像的影调调整………………44
3.1.5 移动H5图像的色彩调整………………45
3.1.6 移动H5图像设计的绘图基础………..46
3.1.7 移动H5图像的路径编辑技巧………..47
3.1.8 移动H5图像的修饰与修复…………..48
3.2 文字设计:做出有质感的好作品…….49
3.2.1 认识移动H5中的文字…………………49
3.2.2 输入移动H5图像文字…………………50
3.2.3 设置移动H5文字属性…………………51
3.2.4 设置移动H5段落属性…………………52
3.2.5 设置H5文字的排版样式………………53
3.2.6 设置H5的标题文字格式………………55
3.2.7 制作移动H5界面路径文字…………..56
3.2.8 制作与编辑变形移动H5文字………..57
应用开发篇
第4章
流程:移动H5的策划与开发
4.1 前期准备:让H5设计事半功倍………59
4.1.1 定目标:H5用来做什么………………59
4.1.2 找热点:H5如何火起来………………60
4.1.3 写策划:H5如何做起来………………61
4.2 程序设计:做H5的基本流程…………62
4.2.1 选择模板:一键生成H5作品………..62
4.2.2 交互设计:让H5更具互动性………..63
4.2.3 视觉设计:给H5锦上添花…………..68
4.3 测试分析:做好H5的总结与沉淀…….73
4.3.1 程序测试:进行修改和完善…………73
4.3.2 活动上线:做好H5的推广…………..74
4.3.3 效果分析:实现数据化营销…………77
第5章
技术:移动H5热门开发技术
5.1 让H5人气值爆棚的“黑科技”………82
5.1.1 运用720度全景技术打造全景画面效果………………………………….82
5.1.2 运用3D旋转技术让H5画面更加动感………………………………………..82
5.1.3 运用人脸识别技术实现H5趣味营销………………………………………..83
5.1.4 运用物理引擎技术创建出虚拟世界………………………………………..84
5.1.5 运用重力感应技术提升用户的互动体验………………………………….85
5.1.6 运用手指跟随产生滑动幻灯片效果….86
5.2 H5 VR/AR/AI:融合高端定制开发….87
5.2.1 运用AR技术结合线下活动和线上互动………………………………………..87
5.2.2 运用VR技术生成一种虚拟的动态情境………………………………….88
5.2.3 运用AI技术让移动H5作品变智能….89
5.3 展现动态炫酷画面的H5技术运用……92
5.3.1 运用快闪影片让H5作品更吸引眼球………………………………………..92
5.3.2 运用粒子特效展现炫酷的动画效果….93
5.3.3 运用视频互动更好地展示品牌内容….94
5.3.4 运用多屏互动打造互动娱乐新模式….95
5.3.5 运用GIF动画让页面变得生动……….96
视觉设计篇
第6章
风格:移动H5视觉风格设计
6.1 设计原则:五大H5设计精髓要点……98
6.1.1 有创意,少抄袭,多原创…………….98
6.1.2 注重H5设计风格的统一………………99
6.1.3 H5原型图的绘制与构思…………….100
6.1.4 营造出合适的视觉氛围……………..100
6.1.5 让用户真实参与和体验……………..101
6.2 设计风格:12种H5设计风格解析….103
6.2.1 扁平、插画视觉风格设计…………..103
6.2.2 手绘、动漫视觉风格设计…………..105
6.2.3 水墨、复古视觉风格设计…………..105
6.2.4 写实、科技视觉风格设计…………..106
6.2.5 极简、拼贴视觉风格设计…………..108
6.2.6 摄影、小清新视觉风格设计……….109
6.3 表现手法:6种H5视觉特效设计…….110
6.3.1 来电视觉特效表现手法……………..110
6.3.2 擦除视觉特效表现手法……………..112
6.3.3 动画视觉特效表现手法……………..113
6.3.4 SVG视觉特效表现手法…………….113
6.3.5 拍立得视觉特效表现手法…………..114
6.3.6 玻璃碎掉视觉特效表现手法……….115
第7章
创意:移动H5视觉创意设计
7.1 版式设计:让你的设计越来越出色….117
7.1.1 视觉动线设计………………………….117
7.1.2 画面焦点设计………………………….117
7.1.3 页面层级设计………………………….118
7.2 活动设计:快速引爆H5页面的热度..119
7.2.1 砍价活动设计………………………….119
7.2.2 抽奖活动设计………………………….121
7.2.3 调查问卷设计………………………….121
7.2.4 投票活动设计………………………….123
7.2.5 微信卡券活动设计……………………127
7.3 动效设计:为H5页面打造视觉动效….127
7.3.1 了解移动H5的动效知识…………….127
7.3.2 H5动效的主要类型与实现方法…..128
7.3.3 在H5作品中运用转场类动效………130
7.3.4 在H5作品中运用内容类动效………131
7.3.5 在H5作品中运用辅助性动效………131
7.3.6 在H5作品中运用功能性动效………131
7.4 音效设计:更好展现H5作品个性与情感…………………………………..132
7.4.1 不能忽略H5作品中的声音…………132
7.4.2 H5背景音效的注意事项…………….133
7.4.3 选择合适的H5背景音效…………….133
7.4.4 H5作品中常见的辅助音效…………134
7.4.5 如何获取更好的音效…………………134
7.5 交互设计:增加互动性吸引更多人气….135
7.5.1 弹幕评论设计………………………….135
7.5.2 点击触发事件设计……………………136
7.5.3 互动游戏设计………………………….138
实战案例篇
第8章
单页:精美H5单页移动设计
8.1 旅行相册H5页面设计……………….142
8.1.1 设计旅行相册颗粒背景效果……..142
8.1.2 设计旅行相册文字信息效果……..143
8.1.3 设计旅行相册照片装饰效果……..145
8.2 促销活动H5页面设计……………….147
8.2.1 设计促销活动背景纹理效果……..147
8.2.2 设计促销活动文字边框效果……..148
8.2.3 设计促销活动产品布局效果……..151
8.3 年会邀请函H5页面设计…………….152
8.3.1 设计年会邀请函边框效果………..152
8.3.2 设计年会邀请函主题效果………..155
8.3.3 设计年会邀请函整体效果………..156
第9章
综合:节日场景H5移动设计
9.1 春节活动H5作品设计的前期准备….159
9.1.1 整体的创意构思……………………….159
9.1.2 素材图像的收集……………………….160
9.2 通过Photoshop制作图像效果……160
9.2.1 制作节日主题文字效果……………..160
9.2.2 抠取新年装饰素材图案……………..163
9.3 通过工具网站生成H5作品………….164
9.3.1 设计H5作品的第 1页:活动标题…164
9.3.2 设计H5作品的第 2页:祝福文案…168
9.3.3 设计H5作品的第3页:红包活动…172
9.3.4 为H5作品添加背景音效…………….175
9.4 移动H5作品的发布和分享………….176
9.4.1 发布与上线H5作品…………………..176
9.4.2 将H5活动页面分享到微信群………178
第 10章
综合:产品推广H5移动设计
10.1 产品推广H5作品设计的前期准备..180
10.1.1 整体的创意构思…………………..180
10.1.2 素材图像的拍摄与收集………….180
10.2 通过Photoshop制作图像效果…..181
10.2.1 主题文字的设计…………………..181
10.2.2 产品图片的调色处理…………….184
10.2.3 产品图片的详情展示…………….185
10.3 通过工具网站生成H5作品………..187
10.3.1 设计H5作品的第 1页:首页设计………………………………….187
10.3.2 设计H5作品的第 2页:推荐产品1………………………………..190
10.3.3 设计H5作品的第3页:推荐产品2 ……………………………….192
10.3.4 设计H5作品的第4页:产品展示………………………………….193
10.3.5 设计H5作品的第5页:产品预订………………………………….194
10.3.6 为H5作品添加背景音效………..196
10.4 移动H5作品的发布和分享………..196
10.4.1 发布与上线H5作品………………196
10.4.2 将H5作品分享到朋友圈………..198
第 11章
综合:企业招聘H5移动设计
11.1 企业H5招聘广告制作的前期准备..200
11.1.1 H5招聘广告的整体创意构思….200
11.1.2 整理相关的招聘内容…………….201
11.2 通过Photoshop制作图像效果….201
11.2.1 使用Photoshop制作招聘主题图片……………………………201
11.2.2 使用Photoshop调整企业相关图片……………………………203
11.3 通过工具网站生成H5页面………..206
11.3.1 设计H5招聘广告的第 1页:招聘主题………………………………….206
11.3.2 设计H5招聘广告的第 2页:公司实力展示……………………………209
11.3.3 设计H5招聘广告的第3页:工作环境展示……………………………210
11.3.4 设计H5招聘广告的第4页:企业福利展示……………………………211
11.3.5 设计H5招聘广告的第5页:招聘岗位展示……………………………213
11.3.6 设计H5招聘广告的第6页:在线报名申请……………………………216
11.3.7 为H5作品添加背景音效………..219
11.4 移动H5作品的发布和分享………..220
11.4.1 发布与上线H5作品………………221
11.4.2 分享H5作品与收集求职者信息.221
评论
还没有评论。