H5设计商业实战案例教程（微课版）

本书是以易企秀软件为技术基础，讲解H5设计商业实战案例设计与制作的专业教程。全书共分为7个章节：第1章讲解H5设计概述，包括H5营销的优势、H5的应用方向/渠道、H5的类型等内容；第2章讲解易企秀软件，包括易企秀简介、平台编辑器、作品尺寸与屏幕适配等内容；第3章~第6章讲解创建静态、动态H5的方法，H5制作的高级功能应用，H5爆款页面设计，H5创意互动设计等知识与实战；第7章用4个综合商业案例帮助读者了解H5完整的设计流程并应用所学知识。 本书可作为数字媒体技术、数字媒体艺术和新媒体艺术等相关专业教材，也适合从事H5相关的各类设计师学习。

张婷，易企秀H5资深设计师，入行7年，创造模板数量高达2万+！ 对H5从喜欢到热爱，从热爱到执着，这7年作者只干了两件事：做模板、做定制客户。 做定制方面：对H5设计有自己独到的见解，从不懂到精通。风格选取及设计排版获得过无数客户的称赞。 做模板方面：从细腻文案到颜色搭配，从内容架构到客户实用，都精确到模板中，客户修改少，满意度高。 服务过的客户覆盖全国各地，为四川电视台、饿了么平台、美姿舞蹈、新疆中天众城、四川财经职业学院、奔驰、平安人寿、津滨物业等多个知名企业合作过。

第 1 章 H5 设计概述 001 1.1　H5概述 .................................002 1.1.1　H5 的概念..........................................002 1.1.2　H5 与 App 的区别.............................002 1.2　H5营销的优势........................002 1.3　H5的应用方向和渠道 .............　003 1.4　H5的常见类型 ......................　003 1.4.1　静态普通类........................................003 1.4.2　基础动画类........................................004 1.4.3　炫酷交互类........................................004 1.4.4　数据图表类........................................005 1.4.5　随机事件类........................................005 1.4.6　长页展示类........................................006 1.4.7　综合类................................................006 第　2 章 认识易企秀008 2.1　易企秀简介 ...........................　009 2.1.1　什么是易企秀....................................009 2.1.2　账号注册和登录方式........................009 2.1.3　账号类型和产品矩阵........................010 2.1.4　认识易企秀导航栏及商城产品........010 2.1.5　易企秀 PC 端和移动端的区别.........011 2.2　认识易企秀H5编辑器 .............012 2.2.1　作品创建功能....................................012 2.2.2　左侧导航栏功能................................013 2.2.3　各项组件功能....................................014 2.2.4　作品分享设置及分享样式................　017 2.2.5　保存与发布........................................018 2.2.6　页面设置、图层管理、页面管理.....019 2.3　作品尺寸与屏幕适配................020 2.3.1　作品尺寸............................................020 2.3.2　文件大小和文件模式........................020 2.3.3　识别文件中的文字............................020 2.3.4　常规页面及长页面............................020 2.4　课后习题：制作浪漫粉紫色 贺卡等　..................................021 第　3 章 创建 H5 作品　024 3.1　创建静态H5作品....................025 3.1.1　准备工作............................................025 3.1.2　制作过程............................................025 3.1.3　保存并发布........................................028 3.2　创建动态H5 .........................　028 3.2.1　元素组件设置....................................029 3.2.2　元素样式设置....................................030 3.2.3　元素的动画设置................................031 3.2.4　进入动画、强调动画、退出动画.....　033 3.2.5　元素动画的设置................................034 3.2.6　添加音乐............................................035 3.2.7　作品分享设置和加载页设置............036 3.2.8　尾页设置及广告去除........................　037 3.3　实战案例：制作小清新粉色羽毛 邀请函　.................................　038 3.4　课后习题：制作水墨中国风 邀请函　.................................　045 第　4 章 H5 制作的高级功能应用　047 4.1　认识高级组件 ........................　048 4.1.1　拼图、轮播图....................................048 4.1.2　数据图表、随机事件........................049 4.1.3　一镜到底、快闪、画中画、立体魔方............................................052 4.1.4　地图、拨打电话、跳转链接............059 4.1.5　实时日期、实时位置、天气、画板....................................................062 4.1.6　动态数字、音效、目录....................064 4.1.7　底部菜单、点击截图、计时............　067 4.2　认识表单组件........................　068 4.2.1　输入框................................................069 4.2.2　单选和多选........................................069 4.2.3　下拉列表............................................070 4.2.4　评分....................................................　071 4.2.5　手机号验证........................................　072 4.2.6　提交按钮............................................　072 4.3　认识互动组件.........................073 4.3.1　微信头像、微信语音........................　073 4.3.2　上传照片、头像墙............................　075 4.3.3　投票、点赞、浏览次数....................　076 4.3.4　留言板、弹幕....................................　077 4.4　智能组件 ..............................　079 4.4.1　自说字画、年龄改变........................　079 4.4.2　人脸识别、人脸融合........................081 4.4.3　红包、抽奖、打赏............................082 4.4.4　在线收款、实时对话........................086 4.5　特效 ....................................　087 4.5.1　涂抹....................................................088 4.5.2　指纹....................................................088 4.5.3　飘落物................................................088 4.5.4　渐变....................................................089 4.5.5　重力感应............................................090 4.5.6　砸玻璃................................................090 4.5.7　模拟对话............................................090 4.6　实战案例：制作复杂H5...........091 4.7　课后习题：制作小清新唯美紫色H5 ...............................　098 第　5 章 爆款 H5 页面设计　101 5.1　风格百变：常见的H5页面风格....　102 5.2　色彩搭配：H5页面色彩设计.....106 5.2.1　H5 页面设计中常用的配色方案......　106 5.2.2　H5 页面色彩设计策略......................　109 5.2.3　常用的 H5 配色工具.........................　109 5.3　图文设计：用高颜值图文提升 画面质感　...............................　112 5.3.1　H5 页面的排版设计..........................　113 5.3.2　H5 页面的层级和元素设计..............　114 5.3.3　H5 页面信息的可视化设计..............　116 5.3.4　H5 页面留白设计..............................　116 5.3.5　H5 页面视觉平衡设计......................　117 5.3.6　H5 页面视觉心理设计......................　118 5.3.7　H5 页面图片设计..............................　120 5.3.8　H5 页面文本设计..............................　122 5.4　实战案例：制作爆款高级 质感H5　................................　124 5.5　课后习题：制作招聘宣传H5.....　131 第　6 章 H5 创意互动设计　134 6.1　影音设计：增强H5画面的张力......................................　135 6.1.1　加入外接视频....................................　135 6.1.2　加入外链视频....................................　135 6.1.3　常用的 H5 动画和视频制作工具.....　136 6.1.4　H5 背景音乐和音效设计..................　138 6.1.5　音乐素材的搜集与编辑....................　139 6.1.6　搜集音效素材的渠道........................140 6.2　动效设计：打造H5页面交互体验感 ..................................　142 6.2.1　优化 H5 页面动画.............................　142 6.2.2　翻页动画............................................　142 6.2.3　页面元素动画....................................　143 6.2.4　运用 GIF 动画特效打造视觉效果......　144 6.2.5　实战案例：使用易企秀制作 H5动效页面............................................　144 6.3　高级互动组件：打造炫酷H5.....146 6.3.1　运用一镜到底、快闪功能................　146 6.3.2　怎样运用一镜到底............................　148 6.3.3　设置动画时间....................................　150 6.3.4　运用智能组件....................................　151 6.3.5　添加特效............................................　152 6.3.6　运用弹幕............................................　153 6.3.7　运用触发功能....................................　154 6.3.8　运用轮播图........................................　162 6.4　实战案例：制作高端创意互动H5 ................................　163 6.5　课后习题：制作清新淡绿色婚礼邀请函 ..................................　167 第　7 章 H5 实战案例　170 7.1　实战案例：企业宣传翻页型H5的制作......................................　171 7.2　实战案例：长页版H5制作 .......　175 7.3　实战案例：炫酷动画型H5制作 .....................................178 7.4　实战案例：触发答题互动型H5制作 .....................................　181