H5面创意设计课件 项目9 综合案例：企业招聘H5面的设计与制作

项目9综合案例：企业招聘H5页面的设计与制作综合案例：企业招聘H5页面的设计与制作幸福加苑地产有限公司是一家综合性房地产企业，业务涵盖房地产开发、物业管理及商业运营三大领域。本例将制作带有炫酷效果的企业招聘H5页面，下图所示企业招聘H5页面完成后的效果。目录Content9.1制作企业招聘H5页面的前期准备9.2企业招聘H5页面设计9.3企业招聘H5页面的动效、音效添加与发布9.4项目实训9.1.1使用AI生成企业招聘H5页面设计构思企业招聘H5页面设计要符合企业需求，在进行页面构思时可直接向AI提出明确的要求，让AI生成相关结果以供参考。其具体操作如下。生成的企业招聘H5页面设计构思生成的企业招聘H5页面设计方案9.1.2使用AI制作企业招聘H5页面原型图根据企业招牌H5页面的设计方案，进行H5原型图的绘制，设计时可直接使用墨刀AI工具来完成。其具体操作如下。企业招聘H5页面原型图9.1.3整理企业招聘内容并搜集素材1.搜集H5页面素材搜集的素材根据设计方案，可先收集背景、剪影等素材图像，这里可直接使用网站下载。除此之外，还需要企业提供相关图片，如办公场景。右图所示为搜集的素材。9.1.3整理企业招聘内容并搜集素材2.使用AI生成H5页面素材输入提示词并生成图片设计人员在设计企业招聘H5页面时，可通过AI生成一些背景素材。其具体操作如下。9.1.3整理企业招聘内容并搜集素材抠取文字

制作投影高斯模糊完成后的效果9.1.3整理企业招聘内容并搜集素材其他文字目录Content9.1制作企业招聘H5页面的前期准备9.2企业招聘H5页面设计9.3企业招聘H5页面的动效、音效添加与发布9.4项目实训9.2.1导入企业招聘H5页面素材导入素材图片导入前，先创建空白H5页面，然后将搜集的企业招聘素材依次添加到页面中，为后期的制作做准备。其具体操作如下。9.2.2制作一镜到底企业招聘H5页面首页添加趣味页面在制作时将先添加一镜到底趣味页面，然后将素材依次添加到场景中，使其形成一镜到底的效果。其具体操作如下。添加模板9.2.2制作一镜到底企业招聘H5页面首页添加背景添加文字图片9.2.2制作一镜到底企业招聘H5页面首页添加“寻找”文字添加“闪亮的”文字9.2.2制作一镜到底企业招聘H5页面首页添加“YOU”文字再次添加背景9.2.3制作企业招聘H5页面内页导入素材图片在制作时先制作企业介绍页面，然后依次制作福利待遇、招聘岗位、招聘流程、登记信息页面。其具体操作如下。输入标题文字输入正文文字9.2.3制作企业招聘H5页面内页添加文本排版样式

修改文字9.2.3制作企业招聘H5页面内页设置文字样式查看完成后的效果设置高级样式

9.2.3制作企业招聘H5页面内页选择拼图样式替换形状颜色9.2.3制作企业招聘H5页面内页在圆中输入文字修改文字添加按钮

修改颜色9.2.3制作企业招聘H5页面内页选择圆

绘制并翻转三角形绘制圆

9.2.3制作企业招聘H5页面内页修改三角形颜色添加标签添加文字9.2.3制作企业招聘H5页面内页调整标签大小添加快捷表单输入文字目录Content9.1制作企业招聘H5页面的前期准备9.2企业招聘H5页面设计9.3企业招聘H5页面的动效、音效添加与发布9.4项目实训9.3.1为企业招聘H5页面添加动效添加按钮在进行企业招聘H5页面的动效设计时，需要先为按钮页面添加弹窗，并编辑弹窗内容、添加翻页动画，使页面间过渡自然。其具体操作如下。设置按钮

设置后的效果设置点击页面9.3.1为企业招聘H5页面添加动效创建弹窗9.3.1为企业招聘H5页面添加动效设置文字样式输入文字9.3.1为企业招聘H5页面添加动效输入文字

输入其他内容修改文字9.3.1为企业招聘H5页面添加动效添加点击和弹窗效果设置第三页自动翻页

设置第二页自动翻页

9.3.2为企业招聘H5页面添加音效单击“选择音乐”按钮为企业招聘H5页面添加动效后，还可根据页面内容为其添加音效。本例将添加音乐库中自带的浪漫音效。其具体操作如下。选择背景音乐9.3.3发布企业招聘H5页面设置和预览作品为企业招聘H5页面添加完音效后，即可发布H5页面。其具体操作如下。目录Content9.1制作企业招聘H5页面的前期准备9.2企业招聘H5页面设计9.3企业招聘H5页面的动效、音效添加与发布9.4项目实训实训

制作招聘简章H5页面实训要求运用本项目所学知识，使用凡科微传单制作招聘简章H5页面。该H5页面主要由6个部分组成，在制作时先制作手机来电动效，然后对招聘简章首页、企业文化、福利待遇、招聘职位等进行介绍，最后制作信息登记页面。完成后的参考效果如右图所示。实训

制作招聘简章H5页面制作思路（1）登录凡科微传单官方网站，进入微信H5传单首页，单击“进入管理”按钮，进入模板商城，单击“从空白创建”按钮，进入图像编辑页面。（2）制作手机来电动效。（3）制作招聘简章首页。（4）单击“文本”按钮，在打开的下拉列表中选择“文本排版”选项，在其中选择“铸就XX品质”文本排版样式，此时可发现图像编辑区中已经显示了选择的样式，更改样式中的文字内容和颜色。实训

制作招聘简章H5页面（5）制作企业文化页面。（6）单击“文本”按钮，在打开的下拉列表中选择“主标题”选项，然后在页面的右下方输入文字，并调整文字的字体、颜色、大小和位置。（7）制作福利待遇页面。（8）单击“控件”按钮，在打开的面板中选择“拼图”选项，打开“拼图”面板，在其中选择需要的拼图样式。（9）单击“文本”按钮，在打开的下拉列表中选择“正文”选项，然后其依次在大圆中输入文字，调整文字的颜色、大小和位置。实训

制作招聘简章H5页面（10）制作招聘职位页面。（11）使用与前面相同的方法，复制按钮并更改按钮的大小、文字样式和颜色，然后分别将按钮名称修改为“人力资源主管”“前端开发师”。（12）选择“人力资源主管”按钮，选择“点击”选项卡，在“点击事件”下拉列表中选择“打开弹窗”选项，在下方选择“固定弹窗”选项卡，单击”创建弹窗“按钮，在打开的列表中单击按钮。（13）选择“页面”选项卡，返回页面，单击“人力资源主管”按钮，选择“点击”选项卡，单击”选择弹窗“按钮，在打开的下拉列表中选择“弹窗1”选项。实训

制作招聘简章H5页面（14）制作信息登记页面。新建页面，使用步骤（5）相同的方法添加素材，并对素材进行裁剪操作，然后制作名称为“联系我们”的按钮。（15）单击“控件”按钮，在打开的面板中选择“快捷表单”选项，此时图像编辑区中将添加快捷表单效果，调整表单位置，并将颜色修改为“#303f9f”