欢迎访问CN论文网,主要提供代写硕士论文服务,以及了解代写硕士论文多少钱。网站地图

硕博执笔写作,后期辅助答辩

与国内800多家优秀期刊社合作

论文写作发表咨询热线18930620780
您当前的位置:CN论文网 > 艺术硕士论文艺术硕士论文

《解忧杂货店》H5绘本作品的设计与创作

发布时间:2019-04-20
  摘要
  
  现如今,互联网行业的飞速发展,各种新的媒体形式深入到社会的各个角落,与人们的生活息息相关。手机作为移动新媒体,从通讯工具转变为一个可以互联互通的多媒体终端。H5 凭借其较低的开发成本,对视频和音频的兼容性以及强大的互动能力和传播能力,并借助移动终端这一载体,快速形成了新的广告传播的发展趋势。所以本课题以《解忧杂货店》原着内容为依托,以手绘的方式进行故事场景的设计创作,制作成简约的线上绘本,并以 H5 的形式进行传播。

《解忧杂货店》H5绘本作品的设计与创作
  
  论文研究的基本内容包括:第一章阐述了本课题的选题原因与应用价值,进而通过对 H5 的概念简析、发展历程和案例的分析综述了研究领域的背景。第二章通过对原着内容的提炼,从策划创意、交互程度、阅读体验、视觉设计、技术能力五个维度进行了《解忧杂货店》H5 作品的前期的策划。通过对分镜头脚本的制作,为后期的设计提供了依据和工作蓝本。第三章重点通过交互流程和交互文档的设计,梳理了整个 H5 的逻辑流程;通过角色设计、场景设计、动效设计和音效设计等方面进行了视觉设计的阐述。笔者最后着眼于手机端 H5 中互动插画的设计形式和互动形式两个方面,总结了设计方法和设计原则。
  
  关键词: H5;前期策划;角色设计;场景设计;动效设计。
  
  ABSTRACT
  
  Nowadays, with the rapid development of the Internet industry, various new media forms have penetrated into all corners of society and are closely related to people's life.As a new mobile media, mobile phone has been transformed from a communication tool into a multimedia terminal that can be interconnected. H5, with its low development cost, compatibility to video and audio, strong interaction and communication capability,and with the help of mobile terminal as a carrier, has quickly formed a newdevelopment trend of advertising communication. Therefore, based on the original content of "xiu wang grocery store", this project will create stories and scenes by hand drawing, make a simple online picture book and spread it in the form of H5.
  
  The basic contents of this paper include: chapter 1 elaborates the reasons for the topic selection and application value of this subject, and then summarizes the background of the research field through the brief analysis of the concept, development process and case of H5. The second chapter, through the refinement of the original content, conducted the preliminary planning of the H5 work from the five dimensions of planning creativity, interaction degree, reading experience, visual design and technical ability. Through the shooting script, it provides the basis and working blueprint for the later design. The third chapter focuses on the design of the interactive process and the interactive document to sort out the logical process of the whole H5. Through the roledesign, scene design, dynamic design and sound design, etc. Finally, the author focuses on the design form and interaction form of interactive illustration in mobile terminal H5 and summarizes the design methods and principles.
  
  KEYWORDS:  H5;preliminary planning;character design;scene design;dynamic design。
  
  1 引言。
  
  1.1 选题原因。
  

  本课题来源于日本作家东野圭吾的奇幻温情小说《解忧杂货店》。第一次读到《解忧杂货店》这本书时,给本人留下了深刻的印象。在寂静的街道上有一家杂货店,只要写下烦恼咨询信投入杂货店卷帘门的投信口,第二天咨询人就会在店后的牛奶箱中得到烦恼的解答。为了音乐梦想在外漂泊,却在现实中却举步维艰的鱼店音乐人;为了挣钱报答养育之恩,挣扎在未来的迷茫之中的陪酒女……他们将烦恼写成信投进到杂货店的卷帘门的投信口中,随即神奇的事情竟不断发生。
  
  读完《解忧杂货店》,本人被书中一些细腻的感情所触动。 作者东野圭吾明晰现实与人心,并坚持用善意来回应这个世界,他想让大众知道,在这个瞬息万变的世界里,仍然有人发自内心地去填补人心的破洞,温暖别人。而这也是书中最可贵的人性的彰显。比如,书中描写的人物彼此信任,心中有爱,努力在生活中去体现自我价值。
  
  本人想把《解忧杂货店》H5 作品依托原着故事情节,以手绘的方式进行故事场景的创作,然后制作成简约版的线上绘本,并以 H5 的形式进行传播。之所以用H5 为载体进行传播,是因为随着互联网的发展,在移动设计媒体爆棚的时代,H5已然是品牌、产品的传播的重要手段之一。在最早的传统的纸质媒体时代,用户的角色只是单独的读者,信息的传播知识单向的,用户只能被动地接受信息;到了 PC 时代,用户可以通过贴吧留言、评论等形式与媒体进行简单的互动;进入移动时代,微博、微信等社交媒体的大热,让用户从单纯的读者变成传播者,甚至是内容的产生者,用户可以上传转发自己上传的信息内容。这时移动终端的便携性和移动网络的普及也彻底解放了 PC 终端的桌面束缚,媒体传播形态也由单向输出变成了社交性传播。H5 将图片、文字、视频、动效、音效等多种媒介形态完美的结合在一起。与 APP 相比,基于 web 的产品形态决定了 H5 社交传播的可能性,具有强互动性、可监测、跨平台、易传播等优势,所以 H5 在 2015 年到 2017 年两年时间内迅速得到了互联网用户的广泛认可。
  
  1.2 应用价值。
  

  在全球 3.0 时代,人是社会的主角,随着网络、信息等新媒体技术高速发展,使得人获取信息的方式呈多样化。《解忧杂货店》H5 作品通过剧本的编创、绘制、以及 H5 技术表现,研究艺术作品在互动媒体上的互动表现手法。该作品的应用价值表现在以下两点:
  
  1.文化教育价值。
  
  《解忧杂货店》这本书引起很多读者的共鸣。因为作者很明晰现实与人心,始终愿意用善意来回应这个世界,让人知道,在这个瞬息万变的世界里,仍然有人发自内心地去填补人心的破洞,温暖人心。而这也是书中最可贵的人性的彰显。
  
  比如书中的人物彼此信任,心中有爱,努力的在生活中去体现自我价值。
  
  2.设计研究价值。
  
  《解忧杂货店》是一个叙事类的 H5 作品,作品的创作涉及到视觉、动效、交互、声效等要素是制作成功一个 H5 作品的关键。在 H5 的设计流程、创意表现上的研究,为以后人的创作提供了参考。
  
  1.3 背景研究。
  
  1.3.1 H5 的概念简析。

  
  H5 是用 HTML5 语言之作的数字产品,运行在移动端的动态交互页面。一般集文字、动效、音频、视频、图片、图表和互动调查等各种媒体表现方式为一体。H5最显着的优势在于跨平台性,它兼容 PC 端与移动端、安卓系统与 IOS 系统。在不同的开放平台、应用平台上都可以打开 H5,H5 打破各个平台各自为政的局面,也提升了设计师的工作效率,同时 H5 强大的兼容性可以显着地降低开发与运营的成本。此外,基于 H5 开发的轻应用比 app 拥有更短的启动时间和更快的联网速度,并且不需要占用存储空间,特别适用移动媒体进行传播与推广。
  
  HTML5 作为 web 的最新技术标准,发展的十分迅速,各大互联网公司也都对其表现出坚定地信心。基于 HTML5 目前的技术发展现状,其发展方向主要在网页的应用、网页游戏的开发和创意营销。开发网页应用事 HTML5 研发中的最初目的,比如微信中常用的手机充值、预定车票、打车、订外卖、购物等功能,就是基于 HTML5所研发的,借助微信等主流软件庞大的用户群体,这些网页应用能够快速的发展。
  
  还有利用 HTML5 技术开发的网页游戏有着易传播,操作方便,占用空间小等优势特点。网页一直以来都是创意营销的一大手段,其通过网络的优势能够更快、更广泛的传播信息,对于营销来说效果十分的明显。而基于 HTML5 开发的创意营销型网页也就是 H5,能够带来更加丰富的效果和功能,对创意的表现和用户引导有着很积极的意义。对于创意营销来说,最终的两个因素是创意和内容,HTML5 的特性赋予了创意工作者更大的施展空间,开辟了全新的战场。目前创意营销 H5 已将成为 HTML5 发展的一重大方向。与传统营销相比,H5 的展现形式丰富、制作周期短,并且利用门户网站、自媒体平台、朋友圈等很快就能把内容传播出去。
  
  【由于本篇文章为硕士论文,如需全文请点击底部下载全文链接】
 
  
  1.3.2 H5 的发展历程与案例分析
  
  2 《解忧杂货店》的前期策划

  
  2.1 《解忧杂货店》的前期调研
  2.2 创意策划
  2.3 分镜头脚本的编写
  
  3 《解忧杂货店》H5 作品的设计与创作
  
  3.1 流程图和交互文档

  3.1.1 流程图
  3.1.2 交互文档
  
  3.2 交互手段

  3.3 角色设计
  

  3.4 场景设计
  3.4.1 主题内涵的表现
  3.4.2 场景色彩风格选择
  
  3.5 动效和音效设计
  3.5.1 动效设计
  3.5.2 音效设计

  4 结论

  目前《解忧杂货店》H5 作品已经完成并且上线。从最开始前期的策划、《解忧杂货店》H5 分镜头脚本的制作、交互流程的梳理、视觉设计,到最后并根据画面的需要进行动效设计还有音效设计,让我对 H5 有了更深一步的探究,掌握了H5 制作的流程规范。但是综合考虑的不足,所以在制作的过程中有一些心得与体会:

  (1)前期策划对于整个 H5 来说占的比重相当的大,只有设计和技术的 H5 只是一时能够吸引到浏览者的目光。所以以后 H5 的制作在前期的策划上一定要多次推敲。

  (2)在交互原则上,尽量做到简化层级,结构扁平化。任务层级越浅的产品,反而越能引导用户看到更多的内容。

  (3)H5 制作时要注意分享属性,H5 是为了更好的传播而生,所以必须考虑好H5 的分享和回流,促进分享的 H5 一般带有社交属性,用户将 H5 分享出去邀请好友来一起完成任务,这时最佳的分享机制。好的 H5 能够让用户产生心理共鸣,也会促进用户的分享。

  每一个优秀的 H5 都不是偶然的,都具有着巧妙的创意,惊艳的视觉、走心的文案,还有多变的交互,这些都提升了浏览者的阅读体验,并自愿参与把内容分享出去。本次课题在 H5 的设计流程、创意表现上的研究,希望为以后人的创作提供具有价值的参考。

  参考文献

点击下载全文