新媒体技术：理论、案例与应用（全彩微课版） 课件第6章 H5设计与制作

应用理论新技术案例第6章H5设计与制作新媒体技术：理论、案例与应用（全彩微课版）6.1H5基础知识6.2设计与制作H56.3综合实训6.1.1H5的类型H5的类型丰富多样，涵盖了图文、动画、游戏等多种形式。H5的内容既可以是简单的画面展示，又可以是富有创意的动画演绎，还可以是互动体验性强的网页游戏。每一种类型都独具特色，能给用户带来不同的体验。展示型场景型测验型技术型游戏型南通日报社发布的“看得见的幸福”H5“中轴历游记”H5“测测你的动物型人格”H56.1.2H5的设计原则H5设计并不仅仅是技术的展示，更是艺术与用户体验的结合。一个出色的H5设计作品，需要遵循以下原则，确保其画面的吸引力和传播的有效性。条理性原则切身性原则简洁性原则一致性原则6.1.3H5的设计风格H5的风格多样，既可以简约、清爽，又可以科幻、酷炫，亦可如水墨丹青，给用户以视觉上和心灵上的享受。简约风格扁平化风格卡通手绘风格科技风格水墨风格“广告人时间当铺”H5“梦想之城|长沙全力建设全球研发中心城市”H5“测测你的动物型人格”H5“科创走廊挺起产业‘脊梁’”H56.1H5基础知识6.2设计与制作H56.3综合实训6.2.1设计与制作H5的流程1．明确设计目标有了明确的目标才有了设计的方向，才能制作出符合主题、出色的H5作品。在明确目标的过程中，需要想清楚以下3个问题，以更好地确定目标。使用H5做什么？通过H5传达什么?用什么来设计与制作H5？即是直接套用模板，还是使用图像工具自行设计。2．内容策划内容交互视觉6.2.1设计与制作H5的流程3．搜集素材完成内容策划后，即可着手搜集需要使用的素材。为方便设计，在搜集素材时应尽量搜集所有可能使用的素材，包括文字信息、图像、视频和音频等。4．页面设计文字信息的搜集01图片、视频和音频的搜02搜集足够的素材之后，就可以正式开启H5页面的设计。常见的设计方法有以下两种。使用模板设计1自主设计26.2.1设计与制作H5的流程5．交互设计使用模板设计的H5大多已经包含交互效果，不用额外添加交互效果，但一般还需要自行设置动画、音频、互动方式等效果。6．生成和发布完成H5的交互设计后，即可预览效果，对效果满意后便可在发布页面中通过二维码或链接的方式，生成与发布H5。6.2.2常用的H5设计工具1．简易H5设计工具若新媒体从业者属于H5初学者，可以使用一些模板化的设计工具高效地完成H5的设计。易企秀兔展凡科微传单MAKA人人秀兔展的首页MAKA的首页6.2.2常用的H5设计工具2．专业H5设计工具若新媒体从业者H5设计经验丰富，则可以使用专业的H5设计工具，以便满足更高的设计需求，如更好的浏览体验、更优越的用户体验、更高质量的页面设计等。iH5编辑页面01iH503木疙瘩05意派Epub360【课堂案例1】制作展示型活动宣传H5某音乐平台推出“听见·无声”活动，需要邀请用户分享分别最能代表自己喜、怒、哀、乐的一首音乐，以号召用户关注自己的内心，从音乐中汲取力量。活动时间为6月15日～7月15日，在活动期间，音乐平台每日会在微博举行抽奖活动，随机抽取5位用户赠送平台年度会员，用户带话题“#听见·无声#”并参与评论，即可参与抽奖。在正式推出前，平台准备利用MAKA制作一个简约风格的展示型H5，提升活动推广效果。案例背景使用MAKA的模板制作展示型H5。知识要点【课堂案例1】制作展示型活动宣传H5具体操作如下：1.选择“翻页H5”选项3.替换背景图的前后对比效果2.选择背景图4.调整第一行文字5.设置倒V形状6.隐藏图层7.替换、隐藏背景图效果对比8.复制粘贴素材【课堂案例1】制作展示型活动宣传H59.“裁剪”命令13.选择形状素材10.“阴影”复选框14.设置颜色15.“图层管理”16.调整文本11.更改文字并设置12.分别更改文字内容16.最终效果图【课堂案例2】制作测试型H5与用户互动为了增强用户互动，拉近与用户的距离，某音乐平台计划推出一款主题为“你是哪种音乐型人格”测试型H5。为了精心打造这款H5，音乐平台特别选用了互动功能更为丰富的易企秀进行设计，预计设置首页、答题页、结果解析页3类页面，以及3道测试题，每个答题页各一道题。案例背景】使用易企秀创建测试型H5。知识要点具体操作如下：1.打开H5编辑页面3.设置“动画”选项卡2.“导入PSD”4.设置动画【课堂案例2】制作测试型H5与用户互动5.绘制轨迹6.设置循环播放7.设置主、副标题8.选择“答题”选项9.插入答题组件10.设置“开始答题”组件11.“图层管理”12.设置文字颜色【课堂案例2】制作测试型H5与用户互动13.单击“添加题目”按钮14.输入题目15.编辑答题16.“根据答题选项设置”17.页面调整18.调整各文本框的位置19.搜索装饰元素20.搜索装饰素材并使用【课堂案例2】制作测试型H5与用户互动21.整装饰元素的大小和位置22.调整各文本框文本颜色23.“分享设置”24.部分最终效果6.1H5基础知识6.2设计与制作H56.3综合实训【综合实训】设计与制作公司招聘H5页面为满足人才需要，卓韵文化传播有限公司拟招2名文创产品设计师和2名广告文案人员。在拟定招聘要求后，卓韵文化传播有限公司计划使用MAKA将其制作成H5，以便推广、传播招聘信息。该H5主要由招聘首页、公司简介、企业文化、福利待遇、招聘岗位、联系我们等6个板块组成，每一板块都需单独的页面。实训背景借助实训增进学生对H5设计工具的熟悉程度，增强学生的实际设计和制作能力。实训目的具体操作如下：1.“创建”超链接2.选择背景素材3.添加文