CN108804090A - 基于h5技术的app虚拟原型制作平台、制作方法及模拟方法 - Google Patents

Abstract

本发明涉及一种基于H5技术实现模拟APP的运行，具体涉及一种基于H5技术的APP虚拟原型制作平台、制作方法及模拟方法，利用H5页面在线模拟APP运行，提出一种基于H5技术的“伪APP”概念，并搭建“伪APP”平台，与传统H5模板平台不同，该平台能实现用H5页面模拟APP，通过点击先前预设置的按钮标识实现H5页面的跳转，模拟APP的使用场景。在APP的开发流程体系中引入“制作虚拟原型”这一关键步骤，克服APP开发面临着潜在需求者数量庞大与开发成本高昂之间的矛盾，主要针对需要在融资路演、双创赛事、众筹展示、广告宣传、市值评估、市场调研中提供新型概念展示的创业团队以及需要开发APP的集体。

Description

基于H5技术的APP虚拟原型制作平台、制作方法及模拟方法

技术领域

本发明涉及一种基于H5技术实现模拟APP的运行，具体涉及一种基于H5技术搭建的APP虚拟原型制作平台、制作方法及模拟方法。

背景技术

随着智能手机的普及，2018年中国移动互联网市场规模将突破8万亿元。在庞大用户群体的需求刺激下，移动互联网应用开发市场规模呈现持续增长态势。

当前，移动应用APP的开发主要有两种方式：完全外包给技术团队与利用在线平台自行制作。

其中外包团队主要靠软件编程的方式实现，完全外包制作APP价格最低15万元，且上架后维护费用高，多数创业团队难以承受外包制作高成本。整体存在制作周期长、风险大、成本高昂等弊端，阻碍初创团队融资路演、众筹展示、市场调查、广告宣传的发展进程。

利用在线平台自行制作主要依靠代码库的源代码进行拼凑，在线平台制作成本低，但功能单一，无法完成用户与界面的互动公司，难以通过在线平台达成预期效果，仅适宜初创团队的前期试用，无法满足更高的使用需求。而定制类在线制作成本仍旧高昂，一般价位在15000-60000元。

以上两种方式的APP开发流程体系主要包括从“理论原型”直接到“成熟产品”的过程，即当完全外包给技术团队时，技术外包团队从开发需求方获取APP理论原型，然后根据理论原型直接完成成熟产品；当利用在线平台自行制作时，也是从理论原型直接开发成熟产品；开发技术风险高，在开发过程中不可避免的出现开发的产品与理论原型不符的问题，需要返回调整，造成APP开发过程的空档期较长，错失时机，且增加成本，同时也会带来开发需求方与技术外包团队之间的沟通成本较高等问题。

发明内容

为了解决采用传统APP开发流程体系造成的APP开发周期长、成本高等问题，本发明提供一种基于H5技术搭建的APP虚拟原型制作平台及制作方法，在APP的开发流程体系中引入“制作虚拟原型”这一关键步骤，克服APP开发面临着潜在需求者数量庞大与开发成本高昂之间的矛盾，主要针对需要在融资路演、双创赛事、众筹展示、广告宣传、市值评估、市场调研中提供新型概念展示的创业团队以及需要开发APP的集体。

html5(以下简称H5)作为万维网的核心语言、标准通用标记语言的下一个应用超文本标记语言，存在着巨大的潜力与开发价值。但是目前所涉及的领域却仅仅停留在电子邀请函，海报，宣传册等为了提高宣传效果的领域；且目前H5的相关在线平台，都只将H5作为一种提高宣传力、产品交互性的工具。

而本发明利用H5页面在线模拟APP运行，提出一种基于H5技术的“伪APP”概念，并搭建“伪APP”平台，与传统H5模板平台不同，该平台能实现用H5页面模拟APP，通过点击先前预设置的按钮标识实现H5页面的跳转，模拟APP的使用场景。

具体的，本发明的技术解决方案是提供一种基于H5技术搭建的APP虚拟原型制作平台，其特殊之处在于，包括计算机可读存储介质，其上存储有计算机程序，计算机程序包括H5页面基本框架创建程序、按钮标识嵌入程序、页面要素填充程序与指令程序；页面要素包括文本和图片；上述指令程序包括页面切换程序；

用HTML5+CSS编写H5页面基本框架创建程序；

通过HTML5、CSS、javascript语言编写页面要素填充程序；

通过javascript、jquery语言编写按钮标识嵌入程序；

通过javascript、jquery、PHP语言编写页面切换程序；

该计算机程序被处理器执行时，进行平台搭建，通过以下步骤实现：

步骤一、调用H5页面基本框架创建程序，创建H5页面基本框架；

步骤二、调用页面要素填充程序，将页面要素植入H5页面基本框架上；

步骤三、调用按钮标识嵌入程序，创建按钮标识，所述按钮标识包括与文本、图片及页面切换程序相对应的按钮。

优选地，上述指令程序还包括通过javascript、jquery语言编写的动态加载程序、通过java语言编写的保存程序、通过java语言编写的预览程序、通过php语言编写的发布程序、通过javascript语言编写的表单程序、通过HTML5语言编写的元素程序、通过Java语言编写的页面选择程序、模板选择程序，通过javascript、jquery语言编写的拖拽嵌入程序和/或通过CSS、javascript语言编写的页面编辑程序；

上述按钮标识包括与动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序、页面编辑程序相对应的按钮。

优选地，页面要素还包括音频和视频，上述按钮标识包括与音频和视频相对应的按钮。

优选地，该平台还包括设置在H5页面基本框架上的组件按钮标识，与音频、视频、文本、图片相对应的按钮标识、页面切换按钮标识、动态加载按钮标识、保存按钮标识、预览按钮标识、发布按钮标识、表单按钮标识与元素按钮标识均创建在组件按钮标识内部。

本发明还提供一种基于H5技术搭建的APP虚拟原型制作平台的制作方法，包括以下步骤：

步骤一、用HTML5+CSS编写H5页面的基本框架；

步骤二、通过HTML5、CSS、javascript语言将页面要素植入H5页面的基本框架上；所述页面要素包括文本和图片；

将指令程序植入H5页面基本框架上；所述指令程序包括页面切换程序，其通过javascript、jquery、PHP语言植入；

步骤三、通过javascript、jquery语言在H5页面的基本框架上，创建按钮标识，所述按钮标识包括与文本、图片及页面切换程序相对应的按钮。

优选地，步骤二中：

上述指令程序还包括动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序、拖拽嵌入程序和/或页面编辑程序；

动态加载程序通过javascript、jquery语言植入；保存程序与预览程序均通过java语言植入；发布程序通过php语言植入；表单程序通过javascript语言植入；元素程序通过HTML5语言植入；页面选择程序通过Java语言植入；模板选择程序通过Java语言植入；拖拽嵌入程序通过javascript、jquery语言植入；页面编辑程序通过CSS、javascript语言植入；

步骤三中：

上述按钮标识还包括与动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序相对应的按钮。

优选地，上述页面要素还包括音频和视频，上述按钮标识包括与音频和视频相对应的按钮。

本发明还提供一种基于H5技术的APP模拟方法，包括以下步骤：

步骤一、用HTML5+CSS编写H5页面的基本框架；

步骤二、通过HTML5、CSS、javascript语言将页面要素植入H5页面的基本框架上；所述页面要素包括文本和图片；

将指令程序植入H5页面基本框架上；所述指令程序包括页面切换程序，其通过javascript、jquery、PHP语言植入；

步骤三、通过javascript、jquery语言在H5页面的基本框架上，创建按钮标识，所述按钮标识包括与文本、图片及页面切换指令相对应的按钮。

步骤四、点击相应按钮，调用目标文本、图片或实时停止当前加载进程，切换页面，进行APP模拟。

优选地，步骤二中：

上述指令程序还包括动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序、拖拽嵌入程序和/或页面编辑程序；

动态加载程序通过javascript、jquery语言植入；保存程序与预览程序均通过java语言植入；发布程序通过php语言植入；表单程序通过javascript语言植入；元素程序通过HTML5语言植入；页面选择程序通过Java语言植入；模板选择程序通过Java语言植入；拖拽嵌入程序通过javascript、jquery语言植入；页面编辑程序通过CSS、javascript语言植入；

步骤三中：

上述按钮标识还包括与动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序相对应的按钮；

步骤四中：点击与动态加载程序相对应的按钮，实现实时选择加载当前页面a及位于当前页面a之前或之后的n个页面，n大于等于1；

点击与保存程序相对应的按钮，将制作好的虚拟APP文件数据保存；

点击与预览程序相对应的按钮，展示当前制作好的虚拟APP的效果；

点击与发布程序相对应的按钮，同时保存制作好的虚拟APP文件数据并且制作出文件的网页链接和二维码显示给用户；

点击与表单程序相对应的按钮，创建登录界面，用户可创建或登录自己的账户；

点击与元素程序相对应的按钮，调整当前选中素材的格式；

点击与页面选择程序相对应的按钮，进行页面选择；

点击与模板选择程序相对应的按钮，进行模板选择。

优选地，上述页面要素还包括音频和视频。

本发明的有益效果是：

1、本发明无需依赖第三方浏览器插件，可创建高级图形、版式、动画、过渡效果，实现在线制作H5页面并设置按钮，通过点击按钮跳转不同的H5页面来模拟APP运作；完善了现有的APP开发流程体系，界面简易，操作简化，上手简单，能够大大降低技术难度，缩短制作周期；

2、本发明通过在H5页面引入页面切换指令及动态加载指令，实时切换页面及加载页面，提高运行速度，满足用户需求。

3、本发明可以应用在概念展示、创业比赛、融资路演、众筹展示、企业展示、广告宣传等场合，作为APP的有效展示工具，更直观明确的展示理论产品；

4、本发明提供“低成本，低耗时，技术要求低，有想法就能创作”的伪APP在线制作平台来实体化用户的创业理念，更好的去展示自己的想法。

具体实施方式

本实施例基于H5技术搭建的APP虚拟原型制作平台，包括计算机可读存储介质，其上存储有计算机程序，计算机程序包括H5页面基本框架创建程序、按钮标识嵌入程序与音频、视频、文本、图片填充程序、页面切换程序、动态加载程序、拖拽嵌入程序、页面编辑程序、保存程序、预览程序、发布程序、表单程序、元素标识程序等；还可以包括其他常用页面处理程序；

通过以下方法搭建该平台：

步骤一：用CSS+HTML5构建H5页面基本框架，可构建多种不同模板形式的基本框架；

步骤二：用HTML5、CSS、javascript语言将音频、视频、文本、图片等页面素材植入H5页面的基本框架上，实现媒体库的构建；

通过javascript、jquery、PHP语言将页面切换程序植入H5页面基本框架上；

通过javascript、jquery语言将动态加载程序植入H5页面基本框架上；

通过java语言将保存程序植入H5页面基本框架上；

通过java语言将预览程序植入H5页面基本框架上；

通过PHP语言将发布程序植入H5页面基本框架上；

通过Java语言将页面选择程序植入H5页面基本框架上；

通过Java语言将模板选择程序植入H5页面基本框架上；

通过javascript语言将表单程序植入H5页面基本框架上；

通过javascript语言将元素指令植入H5页面基本框架上；

通过javascript、jquery语言将拖拽嵌入程序植入H5基本框架上；

通过CSS、javascript语言将页面编辑程序植入H5基本框架上。

步骤三：用javascript、jquery语言在H5页面的基本框架上，创建与多种程序相对应的按钮标识，包括与音频、视频、文本、图片相对应的按钮标识、页面切换指令按钮标识、动态加载按钮标识、保存按钮标识、预览按钮标识、发布按钮标识、表单按钮标识、元素按钮标识等。

当点击与音频、视频、文本、图片指令相对应的按钮标识时，可以实现调用目标音频、视频、文本、图片的过程；

当点击页面切换按钮标识时，实时停止当前加载进程，切换页面，实现每个页面的滑动与跳转，而不需要全部完成加载才能实现跳转；

当点击动态加载按钮标识时，实时选择加载当前页面a及位于当前页面a之前或之后的n个页面，n大于等于1，比如，为了提高运行速度，可只加载与当前页面相邻的页面；

当点击保存按钮标识，将制作好的虚拟APP文件数据保存；

当点击预览按钮标识，展示当前制作好的虚拟APP的效果；

当点击发布按钮标识，同时保存制作好的虚拟APP文件数据并且制作出文件的网页链接和二维码显示给用户；

当点击页面选择按钮标识时，进行页面选择；

当点击模板选择按钮标识，进行模板选择。

当点击表单按钮标识，创建登录界面，用户可创建或登录自己的账户；

当点击元素标识按钮，调整当前选中素材的格式；

调用页面编辑程序，进行页面编辑。

平台搭建完成后，利用平台所提供的模板或者用户自定义的图片，利用简易的编辑工具，用户即可按照自己的创意想法，制作出能够实现用户与界面交互的H5页面，来模拟APP运行，即APP产品的虚拟原型。

本实施例具体的运行流程如下：

1、点击“页面”按钮可出现页面选择模块，用户可以点击“二级页”等按钮打开主页面内部的子页面进行制作，也可以创建新页面(第二页)。

2、点击“模板”按钮可出现页面背景&页面素材的模块，用户可以根据系统提供的页面素材或者页面背景图自行选择。

3、点击“收藏”按钮可出现用户收藏的素材模块，用户可在其中使用自己想要的页面素材进行制作，选中图片点击后即可拖拽到页面中并且改变大小。

4、点击“文本”按钮可出现可拖拽伸缩的文本框，用于制作动态文字等。

5、点击“图片”“音乐”按钮可上传用户喜欢的图片、音频至“收藏”中。

6、点击“表单”按钮可出现登录界面，用户可创建或登录自己的账户。

7、点击“组件”按钮即可出现APP的按钮目录，用户可选择自己需要的按钮格式和按钮功能进行创建和放置。

8、点击右“保存”按钮即可将制作好的模拟APP文件数据保存至用户的个人账户中。

9、点击“预览”按钮即可出现新的网页窗口，展示用户当前制作好的作品的效果。

10、点击“发布”按钮即可同时保存文件并且制作出文件的网页链接和二维码显示给用户。

11、点击“页面”按钮即可出现控制页面样式的模板，用户可调整页面的大小，背景颜色。

12、点击右方“元素”按钮即可出现控制页面素材样式的模板，用户可调整当前选中素材的格式。

13、点击右方“特效”按钮即可出现各种特效模板供用户选择加载在素材中，例如图片文字的旋转加载、浮动等。

本发明平台拥有广阔的应用前景。前期利用“伪APP”工具，在外观、功能上高度模仿真实APP的H5页面，为创业团队在融资路演、双创赛事、众筹展示、广告宣传、市值评估、市场调研中提供新型概念展示工具，展示效果更直观、应用场景更丰富。

平台中期，可发展为新型项目托管平台，目前该类平台都是个人博客形式，由于本平台可视性强，成型的伪APP作品在平台上展示，能够更加直观体现作者的APP概念与构想，以及其模拟运作过程，使得托管方与被托管方的沟通成本大大降低。

平台后期，后期从简单的工具性平台升级为具有社交功能的平台后，将逐步发展为一个网络社交平台，分享资料、项目托管、寻找加盟、租赁广告位等。平台为用户提供简便快捷的沟通渠道，方便详细阐述合作意向以及项目的自身发展状况，促进其达成实质性的合作。

也可发展为该行业的专业中介，利用本设计平台，为积累起来的大量用户与相关专业人士(包括商业顾问，以及技术外包团队等)的沟通搭建桥梁。用户通过在本平台雇佣的模式，与平台旗下签约的专业开发团队进行合作。合作完成后，可利用淘宝客户评价机制让用户对各个团队进行售后评级，形成该行业专业中介平台。

Claims (10)

1.一种基于H5技术的APP虚拟原型制作平台，其特征在于：包括计算机可读存储介质，其上存储有计算机程序，计算机程序包括H5页面基本框架创建程序、按钮标识嵌入程序、页面要素填充程序与指令程序；页面要素包括文本和图片；所述指令程序包括页面切换程序；

用HTML5+CSS编写H5页面基本框架创建程序；

通过javascript、jquery语言编写按钮标识嵌入程序；

通过HTML5、CSS、javascript语言编写页面要素填充程序；

通过javascript、jquery、PHP语言编写页面切换程序；

该计算机程序被处理器执行时，进行平台搭建，通过以下步骤实现：

步骤一、调用H5页面基本框架创建程序，创建H5页面基本框架；

步骤二、调用页面要素填充程序，将页面要素植入H5页面基本框架上；

步骤三、调用按钮标识嵌入程序，创建按钮标识，所述按钮标识包括与文本、图片及页面切换程序相对应的按钮。

2.根据权利要求1所述的基于H5技术的APP虚拟原型制作平台，其特征在于：所述指令程序还包括通过javascript、jquery语言编写的动态加载程序、通过java语言编写的保存程序、通过java语言编写的预览程序、通过php语言编写的发布程序、通过javascript语言编写的表单程序、通过HTML5语言编写的元素程序、通过Java语言编写的页面选择程序、模板选择程序，通过javascript、jquery语言编写的拖拽嵌入程序和/或通过CSS、javascript语言编写的页面编辑程序；

所述按钮标识包括与动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序、页面编辑程序相对应的按钮。

3.根据权利要求2所述的基于H5技术的APP虚拟原型制作平台，其特征在于：页面要素还包括音频和视频，所述按钮标识包括与音频和视频相对应的按钮。

4.根据权利要求3所述的基于H5技术的APP虚拟原型制作平台，其特征在于：还包括设置在H5页面基本框架上的组件按钮标识，与音频、视频、文本、图片相对应的按钮标识、页面切换按钮标识、动态加载按钮标识、保存按钮标识、预览按钮标识、发布按钮标识、表单按钮标识与元素按钮标识均创建在组件按钮标识内部。

5.一种基于H5技术的APP虚拟原型制作平台的制作方法，其特征在于，包括以下步骤：

步骤一、用HTML5+CSS编写H5页面的基本框架；

步骤二、通过HTML5、CSS、javascript语言将页面要素植入H5页面的基本框架上；所述页面要素包括文本和图片；

将指令程序植入H5页面基本框架上；所述指令程序包括页面切换程序，其通过javascript、jquery、PHP语言植入；

步骤三、通过javascript、jquery语言在H5页面的基本框架上，创建按钮标识，所述按钮标识包括与文本、图片及页面切换程序相对应的按钮。

6.根据权利要求5所述的基于H5技术的APP虚拟原型制作平台的制作方法，其特征在于，步骤二中：

所述指令程序还包括动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序、拖拽嵌入程序和/或页面编辑程序；

动态加载程序通过javascript、jquery语言植入；保存程序与预览程序均通过java语言植入；发布程序通过php语言植入；表单程序通过javascript语言植入；元素程序通过HTML5语言植入；页面选择程序通过Java语言植入；模板选择程序通过Java语言植入；拖拽嵌入程序通过javascript、jquery语言植入；页面编辑程序通过CSS、javascript语言植入；

步骤三中：

所述按钮标识还包括与动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序相对应的按钮。

7.根据权利要求6所述的基于H5技术的APP虚拟原型制作平台的制作方法，其特征在于：所述页面要素还包括音频和视频，所述按钮标识包括与音频和视频相对应的按钮。

8.一种基于H5技术的APP模拟方法，其特征在于，包括以下步骤：

步骤一、用HTML5+CSS编写H5页面的基本框架；

步骤二、通过HTML5、CSS、javascript语言将页面要素植入H5页面的基本框架上；所述页面要素包括文本和图片；

将指令程序植入H5页面基本框架上；所述指令程序包括页面切换程序，其通过javascript、jquery、PHP语言植入；

步骤三、通过javascript、jquery语言在H5页面的基本框架上，创建按钮标识，所述按钮标识包括与文本、图片及页面切换指令相对应的按钮；

步骤四、点击相应按钮，调用目标文本、图片或实时停止当前加载进程，切换页面，进行APP模拟。

9.根据权利要求8所述的基于H5技术的APP模拟方法，其特征在于，步骤二中：

所述指令程序还包括动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序、拖拽嵌入程序和/或页面编辑程序；

动态加载程序通过javascript、jquery语言植入；保存程序与预览程序均通过java语言植入；发布程序通过php语言植入；表单程序通过javascript语言植入；元素程序通过HTML5语言植入；页面选择程序通过Java语言植入；模板选择程序通过Java语言植入；拖拽嵌入程序通过javascript、jquery语言植入；页面编辑程序通过CSS、javascript语言植入；

步骤三中：

所述按钮标识还包括与动态加载程序、保存程序、预览程序、发布程序、表单程序、元素程序、页面选择程序、模板选择程序相对应的按钮；

步骤四中：

点击与动态加载程序相对应的按钮，实现实时选择加载当前页面a及位于当前页面a之前或之后的n个页面，n大于等于1；

点击与保存程序相对应的按钮，将制作好的虚拟APP文件数据保存；

点击与预览程序相对应的按钮，展示当前制作好的虚拟APP的效果；

点击与发布程序相对应的按钮，同时保存制作好的虚拟APP文件数据并且制作出文件的网页链接和二维码显示给用户；

点击与表单程序相对应的按钮，创建登录界面，用户可创建或登录自己的账户；

点击与元素程序相对应的按钮，调整当前选中素材的格式；

点击与页面选择程序相对应的按钮，进行页面选择；

点击与模板选择程序相对应的按钮，进行模板选择。

10.根据权利要求8所述的基于H5技术的APP模拟方法，其特征在于：所述页面要素还包括音频和视频。