技术教育社区
www.teccses.org

H5页面创意设计(全彩慕课版)

封面

作者:邓嘉琳

页数:210

出版社:人民邮电出版社

出版日期:2021

ISBN:9787115552587

电子书格式:pdf/epub/txt

内容简介

随着移动互联网技术的日益普及和迅猛发展,“H5”这个新兴名词逐渐被更多的人认识和了解。本书从H5页面设计与制作的角度出发,以设计案例和项目实践相结合的方式,介绍了H5页面设计与制作的相关知识与操作技能。全书共9章内容,分别是认识H5、认识H5的设计规范和工具、H5页面的设计基础、H5页面的素材设计、H5页面的动效设计、H5页面的创意设计、活动运营H5页面的设计与制作、产品推广H5页面的设计与制作、企业招聘H5页面的设计与制作。各章都设有“学习引导”“项目实训”“实战演练”等模块,能帮助读者理解和掌握H5页面设计与制作的关键知识,开拓读者的设计思维,提高其实际操作能力。

作者简介

作者多年从事计算机教育工作,有着丰富的教学经验,参与企业项目制作,有着丰富的实践经验,主编过多部教材,得到老师们的认可。作者专注于计算机教材以及教辅资源研发,为学校提供全套完整的教学方案。

本书特色

本书内容深浅适度。在形式上完全按照现代教学需要进行编写,较为适合实际教学,在内容上不但对H5基础知识和常见设计规范及方法进行了介绍,还通过实例的形式,对不同的H5编辑工具进行了介绍,使读者能够掌握不同H5编辑工具的使用方法,从而实现设计与理论的结合,具有较强的实用性。具体特点如下。
1.数媒拳头套系新书
2.全彩慕课版
3.资源非常丰富
4.案例多

目录

第1章 认识H5 / 1

1.1 H5的基础知识 / 2

1.1.1 H5是什么 / 2

1.1.2 H5的类型 / 3

1.1.3 H5的风格 / 7

1.1.4 H5的优势与不足 / 8

1.1.5 H5页面设计的五大

原则 / 9

1.2 如何学好H5设计 / 10

1.2.1 优秀的H5设计作品应

具备的特点 / 10

1.2.2 H5设计人员应具备的

能力 / 13

1.3 H5的设计与制作流程 / 13

1.3.1 明确设计目标 / 14

1.3.2 内容策划 / 14

1.3.3 页面设计 / 15

1.3.4 交互设计 / 16

1.3.5 H5的生成和发布 / 17

1.4 项目实训 / 17

项目一 旅游推广H5页面素材的

搜集与制作 / 17

项目二 邀请函H5页面素材的

搜集与制作 / 18

实战演练 / 19

第2章 认识H5的设计规范和工具 / 20

2.1 H5的设计规范 / 21

2.1.1 浏览器的选择 / 21

2.1.2 H5的常用设计尺寸 / 22

2.1.3 H5页面的安全区 / 22

2.2 H5的元素设计工具 / 23

2.2.1 功能强大的设计

工具——Photoshop / 23

2.2.2 专业的矢量图绘制

工具——Illustrator / 23

2.2.3 酷炫视频特效制作

工具——After Effects / 24

2.2.4 音效设计制作工具——

Audition / 25

2.3 H5的设计生成制作

工具 / 25

2.3.1 定制推广H5制作

工具——MAKA / 25

2.3.2 企业营销H5制作

工具——易企秀 / 26

2.3.3 快速制作H5工具——

兔展 / 26

2.3.4 微场景H5制作工具——

人人秀 / 27

2.3.5 照片故事H5制作工具——

初页 / 27

2.4 H5的创意开发工具 / 28

2.4.1 专业H5工具——意派

Epub360 / 28

2.4.2 在线编辑H5工具——

iH5 / 29

2.5 H5的辅助设计工具 / 30

2.5.1 音视频压缩工具——

格式工厂 / 30

2.5.2 手机预览设计稿——

PS Play / 31

2.5.3 图片压缩工具——

TinyPNG / 31

2.5.4 二维码生成工具——

草料二维码 / 32

2.6 项目实训 / 33

项目一 使用MAKA制作H5活动页面 / 33

项目二 使用格式工厂将JPG格式的图片

转换为PNG格式 / 34

实战演练 / 35

第3章 H5页面的设计基础 / 36

3.1 H5原型图 / 37

3.1.1 H5原型图是什么 / 37

3.1.2 H5原型图应具备的

要素 / 39

3.2 色彩 / 39

3.2.1 / 认识色彩的三大

要素 / 39

3.2.2 色彩决定情感 / 41

3.2.3 色彩决定氛围 / 45

3.2.4 H5页面的配色方法 / 46

3.2.5 案例分析 “跑步App”

H5页面的色彩分析 / 47

3.3 版面 / 48

3.3.1 认识H5版面类型 / 48

3.3.2 创建画面焦点 / 50

3.3.3 单页面视觉层级 / 51

3.3.4 多页面视觉层级 / 51

3.3.5 版面设计的原则 / 52

3.3.6 案例分析 分析“2020

年度店长总结”H5页面

版面布局 / 53

3.4 项目实训 / 54

项目一 音乐H5页面的色彩与版面

鉴赏 / 54

项目二 抽奖H5页面的色彩与版面

鉴赏 / 54

实战演练 / 55

第4章 H5页面的素材设计 / 56

4.1 H5页面的图片设计 / 57

4.1.1 H5页面图片素材的获取

方法 / 57

4.1.2 H5页面图片的设计

原则 / 59

4.1.3 设计案例 裁剪H5页面的

背景图片 / 61

4.1.4 设计案例 调整H5页面的

图片色彩 / 63

4.1.5 设计案例 绘制H5页面的

矢量人物 / 66

4.1.6 设计案例 优化H5页面的

图片效果 / 69

4.2 H5页面的文字设计 / 73

4.2.1 认识H5页面中的文字及

字体 / 73

4.2.2 H5页面标题文字的设计

技巧 / 76

4.2.3 H5页面正文文字的设计

技巧 / 77

4.2.4 设计案例 制作招聘H5

页面文字 / 78

4.2.5 设计案例 制作招聘H5

页面长图文字 / 81

4.3 H5页面的音效设计 / 84

4.3.1 H5页面中音效设计的

重要性 / 84

4.3.2 H5页面音效素材的获取

方法 / 84

4.3.3 H5页面音效的选择与

添加注意事项 / 85

4.3.4 设计案例 使用Audition

制作音效 / 86

4.4 项目实训 / 88

项目一 制作节气H5页面 / 88

项目二 制作抢红包H5页面 / 89

实战演练 / /90

第5章 H5页面的动效设计 / 91

5.1 H5页面动效设计基础 / 92

5.1.1 H5页面动效的作用 / 92

5.1.2 H5页面的主要动效

类型 / 93

5.2 H5页面的内页动效设计 / 98

5.2.1 内页动效的选择 / 98

5.2.2 内页动效的层级 / 98

5.2.3 设计案例 制作微信红包H5

页面的内页动效 / 98

5.3 H5页面的转场动效

设计 / 102

5.3.1 设计转场动效的注意

事项 / 102

5.3.2 设计案例 制作微信

红包H5页面的

转场动效 / 102

5.4 项目实训 / 105

项目一 制作产品推广H5页面动效 / 105

项目二 制作招聘H5页面动效 / 106

实战演练 / /108

第6章 H5页面的创意设计 / 109

6.1 H5页面的交互创意

设计 / 110

6.1.1 使用H5+720度全景技术

查看全景画面 / 110

6.1.2 使用H5+人脸识别技术让

内容更有趣 / 111

6.1.3 使用H5+物理引擎技术

创建虚拟世界 / 112

6.1.4 使用H5+重力感应

技术让用户的互动

体验更强 / 113

6.1.5 使用H5+手指跟随技术让

操作更生动 / 114

6.1.6 设计案例 使用凡科微传

单制作全景H5页面 / 114

6.2 H5页面的动态创意

设计 / 122

6.2.1 使用H5+快闪广告提升

浏览体验 / 122

6.2.2 使用H5+粒子特效提升

视觉体验 / 124

6.2.3 使用H5+视频提升内容的

展现效果 / 124

6.2.4 使用H5+多屏互动提升

营销的娱乐性 / 125

6.2.5 使用H5+GIF动画让画面

更生动 / 126

6.2.6 设计案例 制作快闪广告

H5页面 / 127

6.3 项目实训 制作元旦GIF

动画 / 132

实战演练 / /133

第7章 综合案例 活动运营H5页面的设计与制作 / 135

7.1 制作元宵节活动H5页面的前期准备 / 137

7.1.1 元宵节活动H5页面设计

构思 / 137

7.1.2 绘制元宵节活动H5页面

原型图 / 138

7.1.3 搜集元宵节活动H5页面

素材 / 138

7.2 元宵节活动H5页面的

设计 / 139

7.2.1 设计元宵节活动

标题页 / 139

7.2.2 设计元宵节活动

内容页 / 42

7.2.3 设计元宵节活动

红包页 / 146

7.2.4 设计元宵节活动

介绍页 / 148

7.3 元宵节活动H5页面的动效

制作与发布 / 151

7.3.1 为元宵节活动H5页面

添加动效 / 151

7.3.2 为元宵节活动H5页面

添加音效 / 157

7.3.3 / 发布元宵节活动H5

页面 / 158

7.4 项目实训 / 159

项目一 制作会议邀请函H5页面 / 159

项目二 制作会议邀请函H5页面

动效 / 160

实战演练 / /162

8.1 制作产品推广H5页面的

前期准备 / 165

8.1.1 产品推广H5页面设计

构思 / 165

8.1.2 绘制产品推广H5页面

原型图 / 166

8.1.3 搜集产品推广H5页面

素材 / 167

8.2 产品推广H5页面的

设计 / 168

8.2.1 设计产品推广H5

首页 / 168

8.2.2 设计产品推广H5

内页 / 170

8.2.3 设计产品推广H5

尾页 / 172

8.3 产品推广H5页面的动效

制作与发布 / 174

8.3.1 为产品推广H5页面添加

动效 / 174

8.3.2 为产品推广H5页面添加

音效 / 179

8.3.3 发布产品推广H5

页面 / 180

8.4 项目实训 / 181

项目一 制作红酒推广H5页面 / 182

项目二 制作红酒推广H5页面

动效 / 183

实战演练 / /186

第9章 综合案例 企业招聘H5页面的设计与制作 / 187

9.1 制作企业招聘H5页面的

前期准备 / 189

9.1.1 / 企业招聘H5页面设计

构思 / 189

9.1.2 绘制企业招聘H5页面

原型图 / 190

9.1.3 整理招聘内容并搜集

素材 / 191

9.2 企业招聘H5页面的

设计 / 192

9.2.1 导入企业招聘H5页面

素材 / 192

9.2.2 设计一镜到底企业招聘

H5页面首页 / 193

9.2.3 设计企业招聘H5页面

内页 / 195

9.3 企业招聘H5页面的动效

制作与发布 / 202

9.3.1 为企业招聘H5页面添加

动效 / 202

9.3.2 为企业招聘H5页面添加

音效 / 205

9.3.3 / 发布企业招聘H5

页面 / 206

9.4 项目实训 制作招聘简章

H5页面 / 207

实战演练 / /210

下载地址

立即下载

(解压密码:www.teccses.org)

Article Title:《H5页面创意设计(全彩慕课版)》
Article link:https://www.teccses.org/1294174.html