在线客服

咨询热线

超媒体交互设计课程成果《寻梦辽宁》H5作品设计与制作

作者:未知

  【摘要】超媒体交互设计课程是笔者在沈阳城市学院新闻与传播学院开设的专业必修课,课程主要讲授超媒体交互平台Mugeda的实用方法。在授课的过程中学生表现出非常浓厚的学习兴趣,无论是独立型学习者还是依赖型学习者都能够很好的掌握技术并设计出产品。2018年11月24日,辽宁省第二届新媒体设计大赛中,我们的作品100%中奖出线,创学校历史最好成绩。赛后,作为指导教师,我认真反思作品设计需求和设计过程,力争作品在未来可以更加完善,我们学生可以走向更大的赛场,拥有更高的舞台。本文主要以一等奖作品《寻梦辽宁》为例,详细解析作品设计全过程。
  【关键词】超媒体交互设计  H5  一带一路
  【中图分类号】G434 【文献标识码】A 【文章编号】2095-3089(2019)18-0232-01
  作品内容紧紧围绕着辽宁的一带一路发展,讲述辽宁在一带一路的政策下如何发展,发展现状,和发展成果。技术采用当下热门的H5技术,用会动的文字来带你领略辽宁发展。同时,我们增加了作品的趣味性,在作品里面添加了一些趣味游戏。
  观看作品的方法很简单,只要通过扫描二维码即可观看,也可以点击链接网址http://e.u.h5mgd.com/c/gqwp/8ryu/index.html?vt=2308420180925A直接观看,同样可以将作品源文件放入木疙瘩观看。制作作品的主要技术我们采用的是H5技术,通过木疙瘩平台制作。Mugeda(木疙瘩)平台是专业级HTML5交互动画内容制作云平台,拥有业界最为强大的动画编辑能力和最为自由的创作空间。同时,木疙瘩也是H5制作的最广泛的平台。 在技术层面我们采用了木疙瘩,Ps,Pr等不同的软件。我们用Ps技术获得我们希望的图片,用Pr技术做出我们满意的视频,最后用木疙瘩将我们之前准备的素材整合。
  H5是當下的一款热门技术,最大优点就是涵括的内容可以很多,可以同时将图片,视频,幻灯片之类的文件放进去,而且自身和Flash有一定的交集,做出来的作品就会融图片,视频,动画为一身。最大的特点就是H5技术强调了和用户的交互性。做出来的作品和用户会有交流,可以让用户在屏幕前动起来,而不是直直地看着屏幕中的内容,会给用户留下深刻的印象,也可以让用户更好的了解作者想要表达的意图。以作者期望的形态留在观众的心中。
  我们本次就是采用木疙瘩软件,以H5的形式,来表现辽宁一带一路的发展,介绍辽宁一带一路概况。根据一带一路的内容,设计多款小游戏,用游戏的方式增加交互性和趣味性。用触发动画的设计,宣传辽宁省各城市的发展,特产,美景等。用灵活的动画技术进行辽宁一带一路的讲解。增加了抽签测试,匹配适合“你”的辽宁城市,极大的激发了受众的兴趣,利于增加传播。此作品把交互性放在第一位,在H5的创作中强调与受众互动的重点。用生动有趣的方式进行创作。研究了每一个城市的特点,制作了多款H5游戏,对H5动画的要求难度要求高。并利用Pr技术进行辽宁省14个城市的快闪视频制作。增加了抽签测试,匹配适合“你”的辽宁城市,虽极大增加了创作的难度,却也增加了受众的感兴趣程度,激发二次传播的机会。 我们将作品内容分为三小节,第一小节介绍一带一路和辽宁的关系,第二小节介绍了辽宁在一带一路的政策下发展的政策和方针,详细介绍了在一带一路的发展政策下,辽宁的各方面发展,包括工业,农业。和这些方面在一带一路的政策下,如何飞快的发展,发展成果如何。我们还设计关于辽宁的知识问答游戏,用游戏的方式来加深读者对辽宁的理解,更生动地展示出辽宁在一代一路政策下辽宁的发展迅速。第三小节我们为了加深观众对我们作品的印象,我们结合游戏对观众进行考验,最后也利用一个小游戏来结尾,满足观众的参与心理。
  为了避免枯燥和视觉疲劳,我们将视频,图片,文字,游戏等各种形式穿插制作。为了保持效果,我们将游戏做成不同的形式,每一个游戏都是一种新的体验,给读者产生一种想要读下去的欲望。为了画面美观,我们整体的颜色为绿色,文字量也并不是很大,减少了文章带来的枯燥感,安插的图片也多数为与绿色对比比较强烈的颜色,来让图片显得更加显眼。
  超媒体交互设计在网络与新媒体专业开设以来,学生的学习热情高涨、有越来越多的优秀作品产生,未来我们希望学生可以接触更多的超媒体交互设计技术、多参加大赛提升技能,争取设计出更多更优秀的作品。
  参考文献:
  [1]杨静.基于用户情感体验的交互动画界面设计[J].滨州学院学报. 2017(06)
  作者简介:
  吴欣怡,沈阳城市学院网络与新媒体专业讲师,主要研究方向:H5设计与开发、网站建设、Flash动画设计、微课设计与制作、网络课程与虚拟现实技术。
论文来源:《课程教育研究》 2019年18期
转载注明来源:https://www.xzbu.com/1/view-14825813.htm