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

页面,设计
分享 推荐 0 收藏 27 阅读 669
邓嘉琳 (编著)

关于本书的内容有任何问题,请联系 王亚娜

本书为了使读者掌握H5编辑工具的使用方法和H5页面的设计方法,采用知识讲解+案例设计+项目实训+思考与练习的讲解结构,在知识讲解中穿插大量的案例设计,这些案例来自于实际设计工作和典型行业应用,具有较强的参考性和指导性,可以帮助读者更好地梳理知识并掌握设计方法。讲解中提供有“高手点拨”等小栏目,可以提升读者的知识面和应用技巧,项目实训以理论和实践结合的方式开展教学,最后辅以思考与练习中的练习题,帮助读者课后提升对知识的实操掌握程度。本书教学内容新颖,深浅适度,内容全面。在形式上完全按照现代教学需要进行编写,较为适合实际教学。

内容摘要

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

前言

随着移动互联网技术的不断发展,以及移动设备的不断普及,基于移动互联网技术和移动设备的H5开始被广泛应用于广告营销。H5是基于HTML5来实现的,而HTML5是第五代HTML的标准。通俗地讲,H5就是一个网页,它是可以放置文本、图片、音频和视频等多种媒体元素的文件。由于H5具有很强的传播性,许多企业都会使用H5对营销内容进行展示与传播,如企业文化宣传、广告宣传、活动通知、产品促销等。因此,无论是从事设计,还是营销工作,掌握H5页面设计与制作的方法都是非常有必要的。
本书内容全面,深浅适度。在第1章~第2章主要对H5的基础知识进行讲解,第3章~第6章主要对H5页面的设计基础、素材设计、动效设计、创意设计等进行讲解,第7章~第9章则通过3个综合案例讲解不同类型H5页面的设计与制作方法。本书在按照现代教学需要进行编写的基础上,突出了实用性和可操作性。本书不但对H5基础知识和常见设计规范及方法进行了介绍,还通过实例的形式,对不同的H5编辑工具进行了介绍。同时,为了帮助读者快速了解H5,掌握不同类型的H5页面的设计方法,本书在理论讲解环节结合典型案例进行分析。这些案例均来自于实际设计工作和典型行业应用,具有较强的参考性和指导性,可以帮助读者更好地梳理知识,掌握设计方法。
从体例结构上来看,本书采用“知识讲解+项目实训+实战演练”的讲解结构。“知识讲解”中穿插了大量的案例设计,让读者边学边做,快速上手。同时,每章都提供“高手点拨”等小栏目,可以拓宽读者的知识面,提高其应用技巧。“项目实训”板块中的每个项目中都给出了明确的项目目的、制作思路等,部分章节还给出了具体的操作步骤,以理论与实践结合的方式开展教学。每章最后“实战演练”中的练习题,帮助读者提高实操能力。本书在需要扩展讲解的内容处配有二维码,使用手机扫码即可查看学习。
此外,本书赠送丰富的配套资源和教学资源,需要的读者可以访问人邮教育社区网站(https://www.ryjiaoyu.com/),通过搜索本书书名进行下载。具体的资源如下。
(1)素材和效果文件:本书知识讲解、项目实训及实战演练中所有案例的相关素材和效果文件。
(2)MP4教学视频:书中实例操作步骤对应的视频文件。
(3)PPT等教学资源:与教材内容相对应的精美PPT、教学教案、教学大纲和教学题库软件等配套资源。
(4)大量设计资源:H5页面、动画、音效等设计素材,以及大量的拓展设计案例视频。
由于编者水平有限,书中难免存在不足之处,欢迎广大读者、专家给予批评指正。



目录

第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

读者评论

赶紧抢沙发哦!

我要评论

作者介绍

邓嘉琳,副教授,硕士,毕业于大连工业大学艺术设计学院,现任教于长沙民政职业技术学院,主要从事视觉传达设计领域的教学与研究工作;湖南省青年骨干教师,全国说课比赛“金教鞭”奖获得者,国家级视觉传播设计与制作专业资源库团队负责人及子课程“包装设计”、“传统纹样美学”主持人,省级精品在线开放课程“包装创意设计”主持人,指导学生获得国内外多项设计赛事奖项,在核心期刊发表专业及教学改革论文多篇。

相关图书

联系客服
联系客服
人邮微信
人邮微信
微信二维码
返回顶部
返回顶部