首页> 中国专利> 界面原型设计方法、界面原型操作方法及存储介质

界面原型设计方法、界面原型操作方法及存储介质

摘要

本发明公开了一种界面原型设计方法、界面原型操作方法及存储介质,界面原型设计方法包括:获取界面原型的配置信息以及创建模板;根据所述配置信息和所述创建模板生成与所述配置信息对应的界面原型HTML;预览与所述界面原型HTML对应的操作页面。本发明由于界面原型HTML由配置信息根据创建模板生成,则生成的界面原型HTML与预览的界面原型一致,实现用户视觉的“所见即所得”,以提高用户的体验感。

著录项

说明书

技术领域

本发明涉及界面设计的技术领域,尤其是涉及一种界面原型设计方法、界面原型操作方法及存储介质。

背景技术

界面原型是在需求阶段与客户进行需求确认的重要交付物,也是开发阶段指导开发人员进行界面开发的重要参考标准,所以界面原型的质量会直接影响需求确认的效率以及后续开发界面的效率与质量。

传统的界面原型设计虽然从功能层面能完成界面原型的绘制与生成,但也普遍存在一个关键的问题,且关键的问题是未提供界面原型设计工具中控件的运行时版本,导致最终实现的业务系统界面和原型中控件不一致,因此最后呈现的业务系统界面和原型界面的控制样式风格不一致,无法保证用户再界面原型上看到的和最终交付的系统界面保持了高度一致,无法实现用户的“所见即所得”。

发明内容

本发明旨在至少解决现有技术中存在的技术问题之一。为此,本发明提出一种界面原型设计方法,能够实现用户的“所见即所得”,提高用体验感。

本发明还提出一种界面原型操作方法。

本发明还提出一种计算机可读存储介质。

第一方面,本发明的一个实施例提供了界面原型设计方法,包括:

获取界面原型的配置信息以及创建模板;

根据所述配置信息和所述创建模板生成与所述配置信息对应的界面原型HTML;

预览与所述界面原型HTML对应的操作页面。

本发明实施例的界面原型设计方法至少具有如下有益效果:由于界面原型HTML由配置信息根据创建模板生成,则生成的界面原型HTML与预览的界面原型一致,实现用户视觉的“所见即所得”,以提高用户的体验感。

根据本发明的另一些实施例的界面原型设计方法,所述根据所述配置信息和所述创建模板生成与所述配置信息对应的界面原型HTML,包括:

将所述配置信息转换为界面原型元数据;

根据所述界面原型元数据和所述创建模板构建所述配置信息对应的界面原型HTML。

根据本发明的另一些实施例的界面原型设计方法,所述配置信息包括:原型基本信息、原型控件布局、数据模块、交互行为。

根据本发明的另一些实施例的界面原型设计方法,所述根据所述界面原型元数据和所述创建模板构建所述配置信息对应的界面原型HTML,包括:

根据所述界面原型元数据的数据信息和所述创建模板确定原型模板、控件库、首选项配置以及行为设置;

原型设计器根据原型模板构建所述界面原型HTML的界面类型;

所述原型设计器根据控件库完成所述界面原型HTML的布局和控件展示;

所述原型设计器根据首选项配置完成所述界面原型HTML的默认配置;

所述原型设计器根据行为设置完成所述界面原型HTML中与用户交互的操作。

根据本发明的另一些实施例的界面原型设计方法,所述数据信息包括:原型模板信息、控件信息、首选项配置信息以及行为设置信息。

根据本发明的另一些实施例的界面原型设计方法,所述原型模板信息包括:页面模板分类,所述控件信息包括:控件定义、控件分类、控件属性定义、控制事件定义、控件属性编辑器定义,所述首选项配置信息包括:引入文件配置信息,所述行为设置信息包括:行为定义、行为分类。

根据本发明的另一些实施例的界面原型设计方法,还包括:

接收调整指令;

根据所述调整指令调整所述界面原型HTML。

第二方面,本发明的一个实施例提供了界面原型操作方法,操作于如第一方面所述界面原型HTML,包括:

接收编辑指令,根据所述编辑指令显示或隐藏标注页面;

根据用户在所述标注页面填写的内容以获取业务需求。

本发明实施例的界面原型操作方法至少具有如下有益效果:根据用户点击操作页面上的编辑按钮以形成编辑指令,根据编辑指令显示标注页面或者隐藏标注页面,便于用户根据需求自动显示标注页面或者隐藏标注页面,提升开发者和用户沟通业务需求的效率。

根据本发明的另一些实施例的界面原型操作方法,还包括:

接收导出指令,根据所述导出指令生成所述导出指令对应的业务需求的需求文档,并将所述需求文档导出。

第三方面,本发明的一个实施例提供了计算机可读存储介质:所述计算机可读存储介质存储有计算机可执行指令,所述计算机可执行指令用于使计算机执行如第一方面所述的界面原型设计方法或第二方面所述的界面原型操作方法。

本申请的其它特征和优点将在随后的说明书中阐述,并且,部分地从说明书中变得显而易见,或者通过实施本申请而了解。本申请的目的和其他优点可通过在说明书以及附图中所特别指出的结构来实现和获得。

附图说明

图1是本发明实施例中界面原型设计方法的一具体实施例流程示意图;

图2是本发明实施例中界面原型设计方法的另一具体实施例流程示意图;

图3是本发明实施例中界面原型设计方法的另一具体实施例流程示意图;

图4是本发明实施例中界面原型设计方法的另一具体实施例流程示意图;

图5是本发明实施例中界面原型操作方法的一具体实施例流程示意图;

图6是本发明实施例中界面原型操作方法的另一具体实施例流程示意图。

具体实施方式

以下将结合实施例对本发明的构思及产生的技术效果进行清楚、完整地描述,以充分地理解本发明的目的、特征和效果。显然,所描述的实施例只是本发明的一部分实施例,而不是全部实施例,基于本发明的实施例,本领域的技术人员在不付出创造性劳动的前提下所获得的其他实施例,均属于本发明保护的范围。

在本发明实施例的描述中,如果涉及到“若干”,其含义是一个以上,如果涉及到“多个”,其含义是两个以上,如果涉及到“大于”、“小于”、“超过”,均应理解为不包括本数,如果涉及到“以上”、“以下”、“以内”,均应理解为包括本数。如果涉及到“第一”、“第二”,应当理解为用于区分技术特征,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量或者隐含指明所指示的技术特征的先后关系。

目前业界的界面原型设计工具,虽然从功能层面能完成界面原型的绘制与生成,但也普遍存在问题:未提供界面原型设计工具中控件的运行时版本,导致最终实现的业务系统界面和原型中控件不一致,未能让用户“所见即所得”。

基于此,本申请实现业务系统界面和原型界面一致,以提高用户的体验感。

第一方面,参照图1,本发明实施例公开,一种界面原型设计方法,包括:

S100、获取界面原型的配置信息以及创建模板;

S200、根据配置信息和创建模板生成与配置信息对应的界面原型HTML;

S300、预览与界面原型HTML对应的操作页面。

通过根据配置信息和创建模板,以通过创建模板代入配置信息以生成与配置信息对应的界面原型HTML,然后将界面原型HTML对应的操作页面进行预览。由于界面原型HTML由配置信息根据创建模板生成,则生成的界面原型HTML与预览的界面原型一致,实现用户视觉的“所见即所得”,以提高用户的体验感。

其中,配置信息分为设计时版本和运行时版本,设计时版本用于界面原型设计时使用,生成界面原型HTML时,生成在HTML上的配置信息是运行时版本,且运行时版本的配置信息提供给业务系统正式界面开发使用,以保证设计时版本和运行时版本在配置信息上是一致的。因此,预览的操作页面和运行的界面原型HTML的页面是一致,以便于用户实现“所见即所得”,从而提高用户的满意度。

在一些实施例中,配置信息包括原型基本信息、原型控件布局、数据模型和交互行为。通过根据原型基本信息、原型控件布局、数据模型和交互行为代入创建模板以准确生成与配置信息对应的界面原型HTML。

配置信息可以通过用户填写以获取或者自动获取。创建模板和配置信息通过原型生成器的代码生成能够以生成界面原型HTML,且实现在浏览器的预览。

其中,原型基本信息包括:界面标题、是否为菜单、界面名称、分辨率等等。原型控件布局包括:输入框、单选框、多选框、日历控件、表格等等,原型控件布局主要用来呈现给用户看的,为展现层。数据模型包括:业务对象模型、业务表单模型等,用于将模型数据显示在各界面控件中,为模型层。交互行为包括:新增、删除、保存、上报、审批等等,主要用于和用户做交互,响应用户相关操作,为交互层。

通过创建模板根据配置信息可以快速构建相关的界面原型,且创建模板包括典型原型模板,且典型原型模板包括典型的编辑列表模板、树形模板、流程模板等等。其中,根据典型原型模板创建基础框架界面原型,且基础框架界面原型默认提供,为业务原型使用提供全过程操作的支撑。

参照图2,在一些实施例中,步骤S200包括:

S210、将配置信息转换为界面原型元数据;

S220、根据界面原型元数据和创建模板构建配置信息对应的界面原型HTML。

通过配置信息转换为界面原型元数据,然后将界面原型元数据代入倒创建模板以构建与配置信息对应的界面原型HTML,使得界面原型HTML生成快速且简易,且生成的界面原型HTML和预览的操作页面一致。

具体地,配置信息为引入文件配置,通过将引入文件配置引入后,引入文件配置通过代码模板技术转换为界面原型元数据。其中创建模板通过多次优化以得到标准化原型模板,且原型设计器根据界面原型元数据且结合标准化原型模板生生成最终界面原型HTML,以得到界面原型HTML快速且准确。

参照图3,在一些实施例中,步骤S220包括:

S221、根据界面原型元数据的数据信息和创建模板确定原型模板、控件库、首选项配置以及行为设置;

S222、原型设计器根据原型模板构建界面原型HTML的界面类型;

S223、原型设计器根据控件库完成界面原型HTML的布局和控件展示;

S224、原型设计器根据首选项配置完成界面原型HTML的默认配置;

S225、原型设计器根据行为设置完成界面原型HTML中与用户交互的操作。

由于生成界面原型HTML需要确定页面基本信息、原型设计器以及行为,且原型设计器负责根据页面基本信息确定界面布局、表单控件、业务扩展空格键、业务数据模型,然后再通过控件进行对应的操作,且根据页面基本信息确定界面原型HTML的配置等。原型设计器根据行为确定控件行为、表单初始化、页面跳转等等的行为,控件行为包括:点击、改变、数据源设置、激活等,表单初始化包括:数据加载、控件状态设置等,页面跳转包括:超链接、模态框、常规window.open等。

其中,通过界面原型元数据的数据信息和创建模板确定了原型模板、控件库、首选项配置以及行为设置,确定了原型模板后,原型设计器根据原型模板确定对应的界面类型进而搭建与原型模板对应的界面。原型设计器使用控件库来完成界面原型的布局与控件展示,并通过首选项配置定义界面原型的引入文件等的默认配置,以减少开发时的配置操作。原型设计器根据行为设置完成界面原型中与用户交互的操作。因此,通过原型设计器根据原型模板、控件库、首选项配置以及行为设置以构建出与数据信息对应的界面原型HTML。而且设计时和运行时采用相同的控件进行布局,所以根据界面原型HTML进行预览和根据界面原型HTML进行运行的界面一致、运行流程机制一致,都是按照资源载入、控件渲染生成、数据绑定、控件状态控制这样的前后顺序机制执行。

在一些实施例中,数据信息包括:原型模板信息、控件信息、首选项配置信息以及行为设置信息。

根据界面原型元数据的原型模板信息和创建模板确定原型模板,根据界面原型元数据的控件信息和创建模板确定控件库,根据界面原型元数据的首选项配置信息和创建模板确定首选项配置,根据界面原型元数据的行为设置信息和创建模板确定行为设置。因此确定每个界面原型的原型模板、控件库、首选项配置以及行为设置准确,且与配置信息相对应。

原型模板信息包括:页面模板分类,控件信息包括:控件定义、控件分类、控件属性定义、控制事件定义、控件属性编辑器定义,首选项配置信息包括:引入文件配置信息,行为设置信息包括:行为定义、行为分类。

通过分析界面原型元数据中页面模板分类以确定原型模板,确定了原型模板也确定了界面原型的界面类型。然后通过界面原型元数据中控件定义、控件分类、控件属性定义、控件事件定义和控件属性编辑器定义以确定需要进行界面布局、行为交互、界面默认配置的多个控件,通过多个控件构建控件库。控件库确定了后也即确定了界面布局、行为交互和界面默认配置。由于首选项配置主要包括引入文件模型,因此根据界面原型元数据的引入文件配置确定首选项配置信息,且首选项配置信息中包括:模型名称、文件类型、模型ID、模型路径和模型类型,以便于原型设计器根据引入文件的模型名称、引入文件类型、模型ID、模型路径和模型类型进行界面原型HTML的默认配置。进行默认配置是需要默认配置对应的控件来配置的。然后根据界面原型元数据的行为定义、行为分类确定行为设置,在原型设计器根据行为设置准确地完成于用户交互的操作。

具体地,根据界面原型元数据中的原型模板信息确定了对应的原型模板后,原型设计器根据原型模板构建界面原型HTML的界面类型以得到一个基础的界面原型,然后根据界面原型元数据中控件信息、首选项配置信息以及行为设置信息以确定控件库、首选项配置以及行为设置,且控件库包括布局型控件和表单控件等,且布局控件和表单控件等显示在基础的界面原型上,且布局控件用于负责界面整体布局,而表单控件用于负责界面内文本、文本框等的调节。通过确定了原型模板、控件库、首选项配置以及行为设置,也即确定整个界面原型HTML的界面类型、界面布局、控件展示、默认配置以及用户交互的操作,由于提供设计时版本和运行时版本的控件,两个版本控件在样式和使用上保持高度一致,以保证界面原型和最终交付的业务系统界面风格一致。所以生成的界面原型HTML的无论是在运行时还是预览时都是一致的,以提高用户体验感。

参照图4,在一实施例中,界面原型设计方法还包括:

S400、接收调整指令;

S500、根据调整指令调整界面原型HTML。

当根据预览与界面原型HTML对应的操作页面,若预览的界面原型不满足业务要求,则接收调整指令,并根据调整指令调整界面原型HTML,以根据界面原型HTML预览的界面原型满足业务要求,以完成整个开发过程。

下面参考图1至图4以一个具体的实施例详细描述根据本发明实施例的界面原型设计方法。值得理解的是,下述描述仅是示例性说明,而不是对发明的具体限制。

通过用户填写以获取或者自动获取原型基本信息、原型控件布局、数据模型和交互行为,将原型基本信息、原型控件布局、数据模型和交互行为转换为原型元数据,通过分析界面原型元数据中页面模板分类以确定原型模板。通过界面原型元数据中控件定义、控件分类、控件属性定义、控件事件定义和控件属性编辑器定义以确定需要进行界面布局、行为交互、界面默认配置的多个控件,通过多个控件构建控件库。根据界面原型元数据的引入文件配置确定首选项配置;根据界面原型元数据的行为定义、行为分类确定行为设置。根据界面原型元数据中的原型模板信息确定了对应的原型模板后,原型设计器根据原型模板构建界面原型HTML的界面类型以得到一个基础的界面原型。原型设计器使用控件库来完成界面原型的布局与控件展示,并通过首选项配置定义界面原型的引入文件等的默认配置,以减少开发时的配置操作。原型设计器根据行为设置完成界面原型中与用户交互的操作。由于生成的界面原型HTML和预览的操作页面的控制是一致,因此生成的界面原型与最终交互的系统界面原型保持一致的风格,实现用户的“所见即所得”,以提高用户的体验感。

第二方面,参照图5,本发明实施例还公开了一种界面原型操作方法,操作于如第一方面的界面原型HTML,包括:

S600、接收编辑指令,根据编辑指令显示或隐藏标注页面;

S700、根据用户在标注页面填写的内容以获取业务需求。

预览界面原型HTML对应的操作页面时,且操作页面上显示标注页面,且根据用户点击操作页面上的编辑按钮以形成编辑指令,根据编辑指令显示标注页面或者隐藏标注页面。若标注页面处于未显示状态时,接收编辑指令则显示标注页面,若标注页面处于显示状态,接收编辑指令隐藏标注页面,以便于用户根据需求自动显示标注页面或者隐藏标注页面。显示页面时,根据用户在标注页面填写的内容获取业务需求,通过用户填写的业务需求,以便于开发者在后续继续开发时可以根据用户填写的业务需求进行界面原型调整或者与用户沟通,以提升开发者和用户沟通业务需求的效率。

参照图6,在一些实施例中,界面原型操作方法还包括:

S800、接收导出指令,根据导出指令生成导出指令对应的业务需求的需求文档,并将需求文档导出。

当开发者需要将用户填写的业务需求导出时,接收到导出指令并根据导出指令生成业务需求对应的需求文档,且需求文档内包括业务需求以及业务需求对应的业务项,以便于开发者将需求文档导出后可以作为后续开发的凭证,以提高界面原型HTML开发的准确性。

第三方面,本发明实施例公开了一种计算机可读存储介质,计算机可读存储介质存储有计算机可执行指令,计算机可执行指令用于使计算机执行如第一方面述的界面原型设计方法或第二方面的界面原型操作方法。

以上所描述的装置实施例仅仅是示意性的,其中作为分离部件说明的单元可以是或者也可以不是物理上分开的,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

本领域普通技术人员可以理解,上文中所公开方法中的全部或某些步骤、系统可以被实施为软件、固件、硬件及其适当的组合。某些物理组件或所有物理组件可以被实施为由处理器,如中央处理器、数字信号处理器或微处理器执行的软件,或者被实施为硬件,或者被实施为集成电路,如专用集成电路。这样的软件可以分布在计算机可读介质上,计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的,术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外,本领域普通技术人员公知的是,通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据,并且可包括任何信息递送介质。

上面结合附图对本发明实施例作了详细说明,但是本发明不限于上述实施例,在所属技术领域普通技术人员所具备的知识范围内,还可以在不脱离本发明宗旨的前提下作出各种变化。此外,在不冲突的情况下,本发明的实施例及实施例中的特征可以相互组合。

去获取专利,查看全文>

相似文献

  • 专利
  • 中文文献
  • 外文文献
获取专利

客服邮箱:kefu@zhangqiaokeyan.com

京公网安备:11010802029741号 ICP备案号:京ICP备15016152号-6 六维联合信息科技 (北京) 有限公司©版权所有
  • 客服微信

  • 服务号