【新华书店】H5移动营销广告设计全攻略:软件操作+应用开发+视觉设计+实战案例9787115511560刘松异

H5移动营销广告设计全攻略工具操作+应用开发+视觉设计+实战案例 目 录 软件操作篇 * *章 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 *i*e*a 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 认识移动*5中的*字.....................49 3.2.2 输入移动*5图像*字.....................50 3.2.3 设置移动*5*字属**....................51 3.2.4 设置移动H5段落属**....................52 3.2.5 设置*5*字的沛样式..................53 3.2.6 设置*5的标题*字格式..................55 3.2.7 制作移动H5界面路径文字..............56 3.2.8 制作与编辑变形移动*5*字...........57 应用开发篇 第4章 流程：移动H5的策划与开发 4.1 前期准备：让H5设计事半功倍.........5***.1.1 定目标：H5用来做什么..................5***.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作品的* *页：活动标题...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 * *0章 综合：产品推广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作品的* *页：首页设计........................................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 * *1章 综合：企业招聘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招聘广告的* *页：招聘主题........................................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作品添加背景音效...........21**11.**移动H5作品的发布和分享...........220 11.4.1 发布与上线H5作品..................221 11.4.2 分享H5作品与收集求职者信息.221

图书简介

本书是一本介绍移动H5设计的实例操作型教程，讲解了H5的开发工具、图文内容设计、应用开发制作、移动视觉营销和创意制作，以及H5设计实战案例等方面知识，帮*读者从新手成长为移动H5设计高手。 本书共11章，包括H5营销的优势、工具软件简介、Photoshop制作详解，移动H5的策划与开发、热门开发技术，移动H5的视觉风格、视觉创意设计要点与方法，还有H5移动*页及节日场景、产品推广、企业招聘广告综合设计等内容，读者学后可以融会贯通、举一反三，制作出更多精彩、完美的移动H5页面效果。 本书适合从事移动互联网工作的设计师、**营销人员，以及利用H5进行营销的公司和需要进行移动互联网营销的企业相关人员使用。随书附赠教学*源，包括书中案例的素材文件、效果文件，以及在线操作演示视频，读者可以边学习边练习，提高学习效率。

作者简介

作者：刘松异刘松异，H5移动营销专家，多年的*深移动互联网营销经验。 H5美工广告设计师，擅长H5的视觉设计和创意表达。 从H5的调研到设计、内容到形式、营销到运营、企业到用户、引流到变现等，有着一套标准化、高效化的整套方案和方法。 曾参与多家品牌企业H5的设计和运营，如智联招聘、招商银行、平安保险、中国电信、保利地产、****、三一重工、南方航空等。