现如今,互联网行业的飞速发展,各种新的媒体形式深入到社会的各个角落,与人们的生活息息相关。手机作为移动新媒体,从通讯工具转变为一个可以互联互通的多媒体终端。H5凭借其较低的开发成本,对视频和音频的兼容性以及强大的互动能力和传播能力,并借助移动终端这一载体,快速形成了新的广告传播的发展趋势。所以本课题以《解忧杂货店》原著内容为依托,以手绘的方式进行故事场景的设计创作,制作成简约的线上绘本,并以H5的形式进行传播。论文研究的基本内容包括:第一章阐述了本课题的选题原因与应用价值,进而通过对H5的概念简析、发展历程和案例的分析综述了研究领域的背景。第二章通过对原著内容的提炼,从策划创意、交互程度、阅读体验、视觉设计、技术能力五个维度进行了《解忧杂货店》H5作品的前期的策划。通过对分镜头脚本的制作,为后期的设计提供了依据和工作蓝本。第三章重点通过交互流程和交互文档的设计,梳理了整个H5的逻辑流程;通过角色设计、场景设计、动效设计和音效设计等方面进行了视觉设计的阐述。笔者最后着眼于手机端H5中互动插画的设计形式和互动形式两个方面,总结了设计方法和设计原则。