H5页面设计与制作标准教程(全彩微课版)

第1章 初识H5 1.1 H5是什么 2 1.1.1 概念 2 1.1.2 类型 3 1.1.3 优势 6 1.2 常见的H5页面风格 7 1.2.1 简约风格 7 1.2.2 科技风格 8 1.2.3 水墨风格 8 1.2.4 插画风格 9 1.2.5 手绘风格 10 1.2.6 扁平风格 10 1.3 常见的H5页面制作工具 11 1.3.1 H5页面快速制作平台 11 1.3.2 H5页面专业设计平台 14 1.3.3 H5页面辅助设计工具 17 1.4 H5页面的制作流程及注意事项 20 1.4.1 页面的设计规范 20 1.4.2 页面制作的基本流程 20 1.4.3 页面制作需注意的细节 22 新手答疑 23 第2章 H5视觉交互设计技巧 2.1 页面版式设计技巧 25 2.1.1 合理的视觉动线 25 2.1.2 突出页面的主体 27 2.1.3 厘清页面的层次 28 2.2 H5页面的色彩设计 29 2.2.1 色彩的基本常识 29 2.2.2 H5页面设计常用的配色技巧 38 2.2.3 实用的配色网站 41 2.3 H5页面的交互设计 44 2.3.1 页面交互类型 44 2.3.2 H5页面的交互设计原则 46 案例实战：在宣传页面加入弹幕效果 47 新手答疑 48 第3章 H5页面元素的设计与制作 3.1 设置H5页面的尺寸 50 3.1.1 iOS设备的屏幕分辨率及尺寸 50 3.1.2 Android设备的屏幕尺寸 50 3.2 H5页面的文字设置 51 3.2.1 字体 51 3.2.2 字号 53 3.2.3 字间距与行间距 54 动手练 为产品图片添加文字标识55 3.3 H5页面的图片设置 57 3.3.1 图片选择的三个原则 57 3.3.2 图片的获取途径 58 3.3.3 图片的处理 59 动手练 改变产品固有颜色60 3.4 H5页面的音频设置 61 3.4.1 H5页面中常见的音频类型 61 3.4.2 音频文件的获取方法 63 动手练 从视频中提取背景乐65 3.4.3 对音频进行简单处理 66 动手练 将背景乐与独白音频进行混合68 案例实战：制作新品预售宣传H5封面页 72 新手答疑 77 第4章 H5页面动效与活动设计 4.1 设置H5页面动效 79 4.1.1 页面动效的作用 79 4.1.2 页面动效的类型 79 4.1.3 页面动效的常规设置 81 4.2 设置页面创意动效 84 4.2.1 VR全景动效 84 4.2.2 一镜到底动效 85 动手练 制作新春祝福动态页面86 4.2.3 手指跟随动效 89 4.3 营销活动页面设计 90 4.3.1 投票评选类活动设计 90 4.3.2 红包抽奖类活动设计 91 4.3.3 微信场景模拟设计 92 动手练 模拟微信朋友圈场景92 4.3.4 趣味游戏页面设计 95 案例实战：制作店庆活动的H5页面 95 新手答疑 103 第5章 用易企秀平台制作H5页面 5.1 认识易企秀 105 5.1.1 易企秀的应用领域 105 5.1.2 易企秀的使用优势 105 5.1.3 易企秀的主要功能 107 5.2 易企秀的基本操作 107 5.2.1 页面背景的设置 107 5.2.2 文字的添加与编辑 109 5.2.3 图片的添加与编辑 110 动手练 完善公司简介的H5页面113 5.2.4 动画及特效的设置 115 动手练 为公司简介页面添加动画117 5.2.5 音频与视频的设置 118 5.2.6 页面的创建与管理 119 5.3 常用的易企秀组件 121 5.3.1 视觉组件 121 5.3.2 功能组件 123 5.3.3 表单组件 124 动手练 制作意见反馈表单125 5.3.4 微信组件 128 5.3.5 活动组件 129 5.4 AIGC在H5页面中的应用 129 5.4.1 应用易企秀AIGC工具 130 5.4.2 应用外部AIGC工具 131 案例实战：制作民宿宣传的H5页面 134 新手答疑 138 第6章 企业宣传页面的设计与制作 6.1 制作开业宣传页面 140 6.1.1 制作宣传封面页面 140 6.1.2 制作宣传内容页面 143 6.1.3 制作宣传结尾页面 148 6.2 制作课程宣传页面 151 6.2.1 制作快闪动画效果 151 6.2.2 制作课程宣传封面页 153 6.2.3 制作课程宣传内容页 156 6.2.4 制作课程宣传结尾页 159 6.2.5 发布与分享课程宣传H5页面 160 新手答疑 163 第7章 营销活动页面的设计与制作 7.1 制作企业培训问卷调查页面 165 7.1.1 制作问卷调查类H5页面的背景 165 7.1.2 设置问卷调查组件 167 7.1.3 发布并收集调查问卷信息 171 7.2 制作手抄报网络投票活动 173 7.2.1 制作投票活动封面页 173 7.2.2 制作活动内容页 176 7.2.3 分享投票活动 181 7.3 制作中秋有奖答题活动的H5页面 182 7.3.1 制作答题背景页 182 7.3.2 制作有奖答题页面 184 7.3.3 发布有奖答题活动 186 新手答疑 187 附 录 H5页面营销模式与引流方法 附录A 常见营销思维模式 189 附录B 常见引流方式 193 附录C 常见推广渠道 198