基于HTML5的数字内容产品逐渐在移动端的主流媒体中成为重要不可缺少的浪潮之一, 引领新闻媒体的时尚标杆, 提升了用户体验感。作为无锡科技职业学院物联网与软件技术学院移动系的学子, 有幸在专业课课堂学习H5微网页制作。在指导老师的带领下学以致用, 设计制作了以无锡科技职业学院和物联网与软件技术学院为主题的H5微网页, 该项目成功立项江苏省大学生创新创业训练项目。此论文是在完成基于H5融媒体平台的微网页设计与实现的基础上完成撰写。
目前主流的H5设计软件分为两大类, 一种是以易企秀为代表的简易模板类, 操作方便快捷但功能有限;另一种是以意派360等为代表的专业工具类, 不仅有动画及交互, 还有逻辑功能。综合几款专业H5工具, 此次设计采用的H5融媒体平台为意派Epub360。Epub360是面向交互设计师的H5交互内容设计网站, 是上海意派信息科技有限公司旗下的主流产品。可通过浏览器在线使用, 专业的响应式网站的H5交互设计发布工具, 无需编程即可设计、制作、并发布H5内容的编辑环境。网站功能主要是动画控制、交互设定、社交应用及数据应用。
项目启动初期拟定作品主题之初, 开会讨论不少立意。考虑到实用和贴近校园, 决定以无锡科技职业学院作为出发点, 对物联网与软件技术学院专业展开介绍。
微网页作品分为三大板块, 分别是无锡科技职业学院总概况、物联网与软件技术学院四大专业概况和结束语, 四大专业从专业简介、就业方向、专业课程、技能大赛、升学途径和优秀毕业生六大角度具体阐述, 背景音乐为校歌《科技之光》, 使学校精神薪火相传, 让学子牢记校训:“弘毅守正, 盈科匠心”。
学校介绍是一个学校形象的体现, 其中也包含着整个学校的办学理念和方向;技巧方面并不需要过于花哨, 选定一种颜色以后尽量围绕着一个色调进行设计。很多时候学校的朝气蓬勃、欣欣向荣也需要在页面上得到体现。本次的作品是关于学校的介绍, 包含了学校的首页和四个专业的介绍。因此, 针对5个主题色对应不同的页面, 防止造成视觉疲劳, 充分展示了科院一天的精彩生活。
作品重点放在画面执行上, 画面有丰富的动效, 做到非常强力视觉冲击力。视觉方向的H5拥有着炫酷的画面、华丽的动效以及特点鲜明的图片, 让人印象深刻, 过目不忘。
作品选择科幻炫彩的画风, 融入校歌《科技之光》, 与物联网与软件技术学院的四大专业相照应, 突出主题。首页校训采用不断放大的动画效果, 突出重点, 细小粉色花瓣飞舞, 突出画面色彩, 底下宇宙的深入动画, 使背景有了更深的层次感, 增加了灵动性。内容上有目录, 版块分布, 分专业介绍, 增加返回功能, 不易混淆, 条理清楚。文字和图片动画多采用渐现或飞入, 搭配放大或缩小简单, 使画面感不突兀, 对于重点可一目了然。与单纯的文字和图片相比较, 可以吸引用户主动分享, 帮助学校扩大自己的宣传力度, 给人留意深刻印象。形式更加新颖, 可互动, 增加参与感, 增加学校的曝光度。可动态化的视觉效果, 吸引用户眼球, 将音乐与动画结合, 营造轻松愉快的氛围, 增加趣味性。但动画效果整体呈现时, 出现个别动画延迟情况, 通过调整整体动画出现的时间, 达到预期的效果。
随着移动端设备的不断完善, 移动互联网也在不断飞速发展, H5微网页的出现为人们的需求指引了方向, 将网页用一种全新的方式向用户展现, 操作便捷, 特色鲜明。由于团队的能力、版本等因素, 导致作品展示并不是很完美, 可能或多或少存在一些问题, 但是我们仍会对作品进行改进, 将作品更精致, 后续将运用于学校招生宣传中。
摘要：H5的数字内容产品现已成为移动端主流媒体中的重要一员。本次项目制作的是无锡科技职业学院物联网与软件技术学院的H5微网页, 用于展示学院的整体情况。论文主要叙述了此次微网页制作作品的理念、主题、功能与需求等, 将创作中的亮点与难点作了简要说明。
关键词：融媒体平台,意派Epub360,微网页制作
[1] 李戈, 钟樾.主流媒体H5产品及其设计趋势[J], 智媒时代, 2018 (12) :39.
[2] 鄢霞.H5页面设计的新媒体创新发展应用[J].青年记者, 2017 (20) :91-92.
[3] 张余.移动互联网时代H5页面的设计与营销[J].东南传播, 2015 (9) :87-89.
推荐阅读：
基于hadoop分析实现05-25
浅谈基于.NET的高校教材管理系统的分析与设计论文09-23
基于微信平台的软件开发可行性分析报告07-11
中学语文多媒体课件设计与开发论文09-09
多媒体教学软件设计与开发实验报告06-02
