页面设计与制作（全彩慕课版）（第2版）课件 第6、7章 滑动翻页页面的制作、长页滑动页面的制作

滑动翻页H5制作滑动翻页H5是最常见的一类H5，是最被广大用户接受的互动方式。本章从实战角度对滑动翻页H5的项目策划、交互设计、视觉设计以及制作开发进行系统讲解与演练。通过对本章的学习，读者可以对滑动翻页H5有一个基本的认识，并快速掌握设计制作常用滑动翻页H5的方法。了解文化传媒行业企业招聘H5的项目策划掌握文化传媒行业企业招聘H5的交互设计学习目标项目策划交互设计视觉设计制作发布6.1课堂案例——文化传媒行业企业招聘H5制作ArtDesign是一家成立了近20年的专业型广告设计公司，此次想通过H5进行企业人才招聘。在内容上，我们的内容分为了首页、关于我们、工作环境、福利待遇、招聘岗位、招聘流程以及岗位需求。在视觉上，运用图文结合以及高级灰体现公司的沉稳大气。在制作上，摒弃复杂的表现效果，采用简单翻页让用户的注意力集中在招聘内容上。6.1.1项目策划通过前期基本的项目策划，对这支H5的原型进行了梳理，并运用Axure进行了绘制。6.1.2交互设计使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作文化传媒行业企业招聘H5，使用Photoshop软件制作首页、关于我们、工作环境、福利待遇、招聘岗位、招聘流程和岗位申请等页面的视觉效果，使用凡科微传单动画功能制作H5页面动画。6.1.3视觉设计6.1.4制作发布效果图

使用谷歌浏览器登录iH5官网，使用Photoshop软件制作页面的视觉设计，使用iH5的动效和翻页功能制作最终效果。6.2课堂练习——汽车工业行业活动邀请H5制作效果图

使用谷歌浏览器登录凡科官网，使用凡科互动微传单制作教育咨询行业培训招生H5，使用Photoshop软件制作首各个页面的视觉设计，使用凡科微传单的翻页和趣味中的快闪功能制作最终效果。6.3课后习题——教育咨询行业培训招生H5制作效果图

长页滑动H5制作长页滑动H5的本质是一镜到底展示信息内容，其免去了用户翻页跳转的操作，可以更好地提高用户浏览体验。本章从实战角度对长页滑动H5的项目策划、交互设计、视觉设计以及制作开发进行系统讲解与演练。通过对本章的学习，读者可以对长页滑动H5有一个基本的认识，并快速掌握设计制作常用长页滑动H5的方法。了解食品餐饮行业产品介绍H5的项目策划掌握食品餐饮行业产品介绍H5的交互设计学习目标项目策划交互设计视觉设计制作发布7.1课堂案例——食品餐饮行业产品介绍H5制作TreeCake是一家致力提供新鲜美味的线上蛋糕品牌，本次想借助H5推广店内热销蛋糕，达到用户关注品牌进行购买的目的。在策划上，针对内容分为了品牌介绍以及产品介绍。针对视觉，以蛋糕图片为主，采用金色和白色，凸显蛋糕的品质与新鲜。针对制作，主要运用长页的表现形式提高用户浏览体验。7.1.1项目策划通过前期基本的项目策划，对这支H5的原型进行了梳理，并运用Axure进行了绘制。7.1.2交互设计使用谷歌浏览器登录iH5官网，使用iH5制作食品餐饮行业产品介绍H5，使用Photoshop软件制作页面的视觉设计。使用iH5的页面>剪切>使用滚动条功能制作最终效果。7.1.3视觉设计7.1.4制作发布效果图

使用谷歌浏览器登录iH5官网，使用iH5制作文化传媒行业活动邀请H5，使用Photoshop软件制作页面的视觉设计，使用iH5的页面>剪切>使用滚动条功能、事件功能制作最终效果。7.2课堂练习——文化传媒行业活动邀请H5制作效果图

使用谷歌浏览器登录iH5官网，使用iH5制作服装饰品行业产品营销H5，使用Photoshop软件