CN108874392A - 用户指引界面生成方法及装置 - Google Patents

Abstract

本申请提供一种用户指引界面生成方法及装置，方法包括：获取应用软件在第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。本方案能够自动制图排版，从而快速方便地生成用户指引界面，省去沟通环节，提高了制作效率，节省了时间成本和人力成本。

Description

用户指引界面生成方法及装置

技术领域

本申请涉及人机交互领域，尤其涉及一种用户指引界面生成方法及装置。

背景技术

目前应用软件迭代开发频繁，每个版本间更改的功能内容也比较多，为了使用户了解新版本下应用软件的优化和改动，方便用户接下来的操作使用，需要提供用户指引界面。

常规的用户指引界面制作方法是，由界面设计师人工完成。然而由于产品更新迭代的内容一般由产品经理、开发人员熟知，这就会使得在制作用户指引界面期间，界面设计师要花费大量的时间去和产品经理和开发人员沟通，并且逐页进行手动制作和排版。此种制作方法操作复杂，不但耗费人力成本，而且在频繁迭代开发新版本的情况下，效率比较低。

发明内容

本申请提供一种用户指引界面生成方法及装置，用于方便快捷地生成用户指引界面。

本申请的第一个方面是提供一种用户指引界面生成方法，包括：获取应用软件在第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。

本申请的第二个方面是提供一种用户指引界面生成装置，包括：获取模块，用于获取第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；比对模块，用于针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；处理模块，用于根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。

本申请提供的用户指引界面生成方法及装置，基于图像识别技术对不同版本下的交互界面进行比对，获得不同版本之间发生变化的界面元素及对应的功能变化信息，进而自动生成用户指引界面。本方案通过图像识别，能够自动获取不同版本之间的变化，并且能够自动制图排版，从而快速方便地生成用户指引界面，省去沟通环节，提高了制作效率，节省了时间成本和人力成本。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。

图1-图3为本申请实施例一提供的用户指引界面生成方法的流程示意图；

图4为本申请实施例二提供的一种用户指引界面生成装置的结构示意图；

图5为本申请实施例三提供的用户指引界面生成装置的结构示意图。

通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。本申请中的各实施方式既可以单独实施，也可以在不冲突的前提下结合实施。

图1为本申请实施例一提供的一种用户指引界面生成方法的流程示意图，参照图1所示，本实施例提供一种用户指引界面生成方法用于方便快捷地生成用户指引界面，具体的，本实施例以该用户指引界面生成方法应用于用户指引界面生成装置来举例说明，该方法包括：

101、获取应用软件在第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；

102、针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；

103、根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。

实际应用中，本实施例的执行主体可以为用户指引界面生成装置，该用户指引界面生成装置可以为驱动程序、应用软件，也可以为存储有相关计算机程序的介质，例如，U盘等；或者，该用户指引界面生成装置还可以为集成或安装有相关计算机程序的实体装置，例如，芯片、智能终端、电脑等。

结合实际场景举例来说：用户界面(User Interface，简称UI)是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可接受形式之间的转换。用户界面是介于用户与硬件之间，为彼此之间交互而设计的，以使用户能够方便有效地去操作硬件以达成双向之交互，完成所希望的工作。具体的，对某应用软件来说，其用户界面通常包括一系列交互界面，这些交互界面之间可能是连续的，可触发的，即基于某交互界面中的界面元素，触发该界面元素即可切换至关联的交互界面，从而实现人机交互。因此，应用软件的用户界面不仅包括各个交互界面，还包括能够反映各交互界面交互流程结构的交互流程结构信息，其中交互流程结构用于定义各交互界面之间的层级和触发关联。实际应用中，这些交互界面和交互流程结构数据可以置入在应用软件中，当应用软件运行时，通过显示这些交互界面，用于基于交互界面输入触发操作，进一步的，根据用户的触发操作进行反馈，从而实现人机交互。

具体的，本方案中获取应用软件在第一版本和第二版本下的交互界面数据，这里的“第一”“第二”用于区分不同的版本，例如，假设第二版本为新版本，第一版本为旧版本。交互界面数据包括置入应用软件的各交互界面的页面信息，例如页面截图，以及交互流程结构信息。之后逐个针对相同交互流程结构信息在不同版本下的交互界面进行比对，例如，可以通过图像识别技术进行识别比对，获得不同版本间发生变化的界面元素及其对应的功能变化，进而生成用户指引界面。

其中，界面元素指交互界面中的元素，这些元素通常对应不同的内容或功能。可选的，存在用于表示内容的界面元素，例如，用于表征当前显示内容为何内容的界面元素；再可选的，还存在用于触发切换至其它交互界面的界面元素，例如，用于返回上一交互界面的“返回”。本方案对相同交互流程结构信息在不同版本下的交互界面进行比对，可以理解，不同版本下交互流程结构信息相同的交互界面，即版本更新前的某交互界面和版本更新后的该交互界面，因此能够反映不同版本间交互界面的变化。

具体的，表征交互流程结构信息的方式有多种。作为一种示例，如图2所示，在实施例一的基础上，101具体可以包括：

1011、截取应用软件在第一版本和第二版本下各交互界面的页面，并按照交互流程结构为所述各交互界面的页面命名，以获得第一版本和第二版本下的交互界面数据；

相应的，102具体可以包括：

1021、针对相同命名的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息。

具体的，本实施方式利用页面的命名来表征交互流程结构信息，在不同版本中命名相同的交互界面，即为相同交互流程结构信息在不同版本下的交互界面。通过本实施方式，能够简便地表征交互流程结构信息，从而简化处理流程。

具体的，本方案中发生变化的界面元素是基于第一版本和第二版本下的交互界面确定的。举例来说，发生变化的界面元素可包括添加的界面元素、删除的界面元素和保留的界面元素。进一步举例，添加的界面元素指不存在于第一版本下的所有交互界面且存在于第二版本下的某交互界面的界面元素，即为该交互界面下添加的界面元素，相应的，对应有添加的功能；再例如，删除的界面元素只指存在在第一版本下的某交互界面但不存在于第二版本下的任一交互界面的界面元素，相应的，对应有被删除的功能；又例如，保留的界面元素指即存在与第一版本下某交互界面中且存在于第二版本下的某交互界面中的界面元素，不同版本下该界面元素所在的交互界面可以相同也可以不同，界面元素在交互界面中的位置也可以相同或不同，相应的，对应有功能的位置变化。

基于上述内容，为了获得不同版本间的界面元素及功能变化，在实施例一的基础上，102具体可以包括：

针对相同交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术识别出发生变化的界面元素，所述发生变化的界面元素包括添加的界面元素、删除的界面元素和保留的界面元素；

根据所述发生变化的界面元素在所述第一版本和所述第二版本下对应的功能，确定所述第一版本和所述第二版本下所述交互界面的功能变化信息。

通过本实施方式，能够准确获得不同版本间界面元素和功能的变化情况。

进一步的，基于不同版本间界面元素和功能的变化情况，可自动生成用户指引界面。具体的，该用户指引界面用于反映新版本相对于旧版本的变化，并提示用户发现这些变化，以便于用户在新版本下的人机交互。

可选的，如图3所示，在实施例一的基础上，103具体可以包括：

1031、对第二版本下各交互界面中发生变化的界面元素进行标记；

1032、根据所述功能变化信息，按照预设的排版方案，为标记的界面元素添加功能变化说明，以获得所述用户指引界面。

具体的，本实施方式中为了突出新版本相对旧版本的变化，在新版本交互界面中标记出变化的界面元素。可选的，可以在发生变化的界面元素周围绘制线框，为了实现突出效果，线框的颜色可设定为非背景色。之后，再标记的界面元素附近标注该界面元素伴随的功能变化，以进行说明。

基于用户指引界面，用户可以快速明确地知晓不同版本间交互界面的变化，从而便于实现人机交互。实际应用中，可以将生成的用户指引界面置入应用软件，以提示用户。可选的，在实施例一的基础上，所述方法还包括：

将所述用户指引界面置入第二版本下的应用软件，以当第二版本下的应用软件启动时，显示所述用户指引界面。

本申请提供的用户指引界面生成方法，基于图像识别技术对不同版本下的交互界面进行比对，获得不同版本之间发生变化的界面元素及对应的功能变化信息，进而自动生成用户指引界面。本方案通过图像识别，能够自动获取不同版本之间的变化，并且能够自动制图排版，从而快速方便地生成用户指引界面，省去沟通环节，提高了制作效率，节省了时间成本和人力成本。

图4为本申请实施例二提供的一种用户指引界面生成装置的结构示意图，参照图4所示，本实施例提供一种用户指引界面生成装置用于方便快捷地生成用户指引界面，具体的，该装置包括：

获取模块41，用于获取第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；

比对模块42，用于针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；

处理模块43，用于根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。

实际应用中，该用户指引界面生成装置可以为驱动程序、应用软件，也可以为存储有相关计算机程序的介质，例如，U盘等；或者，该用户指引界面生成装置还可以为集成或安装有相关计算机程序的实体装置，例如，芯片、智能终端、电脑等。

结合实际场景举例来说：本方案中获取模块41获取应用软件在第一版本和第二版本下的交互界面数据，这里的“第一”“第二”用于区分不同的版本，例如，假设第二版本为新版本，第一版本为旧版本。交互界面数据包括置入应用软件的各交互界面的页面信息，例如页面截图，以及交互流程结构信息。之后逐个针对相同交互流程结构信息在不同版本下的交互界面进行比对，例如，可以通过图像识别技术进行识别比对，获得不同版本间发生变化的界面元素及其对应的功能变化，进而生成用户指引界面。

具体的，表征交互流程结构信息的方式有多种。作为一种示例，如图5所示，在实施例二的基础上，获取模块41，具体用于截取第一版本和第二版本下各交互界面的页面，并按照交互流程结构为所述各交互界面的页面命名，以获得第一版本和第二版本下的交互界面数据；

相应的，比对模块42，具体用于针对相同命名的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息。

具体的，本实施方式利用页面的命名来表征交互流程结构信息，在不同版本中命名相同的交互界面，即为相同交互流程结构信息在不同版本下的交互界面。通过本实施方式，能够简便地表征交互流程结构信息，从而简化处理流程。

具体的，本方案中发生变化的界面元素是基于第一版本和第二版本下的交互界面确定的。举例来说，发生变化的界面元素可包括添加的界面元素、删除的界面元素和保留的界面元素。进一步举例，添加的界面元素指不存在于第一版本下的所有交互界面且存在于第二版本下的某交互界面的界面元素，即为该交互界面下添加的界面元素，相应的，对应有添加的功能；再例如，删除的界面元素只指存在在第一版本下的某交互界面但不存在于第二版本下的任一交互界面的界面元素，相应的，对应有被删除的功能；又例如，保留的界面元素指即存在与第一版本下某交互界面中且存在于第二版本下的某交互界面中的界面元素，不同版本下该界面元素所在的交互界面可以相同也可以不同，界面元素在交互界面中的位置也可以相同或不同，相应的，对应有功能的位置变化。

基于上述内容，为了获得不同版本间的界面元素及功能变化，在实施例二的基础上，比对模块42包括：

图像处理单元，用于针对相同交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术识别出发生变化的界面元素，所述发生变化的界面元素包括添加的界面元素、删除的界面元素和保留的界面元素；

功能处理单元，用于根据所述发生变化的界面元素在所述第一版本和所述第二版本下对应的功能，确定所述第一版本和所述第二版本下所述交互界面的功能变化信息。

通过本实施方式，能够准确获得不同版本间界面元素和功能的变化情况。

进一步的，基于不同版本间界面元素和功能的变化情况，可自动生成用户指引界面。具体的，该用户指引界面用于反映新版本相对于旧版本的变化，并提示用户发现这些变化，以便于用户在新版本下的人机交互。

可选的，在实施例二的基础上，处理模块43包括：

标记单元，用于对第二版本下各交互界面中发生变化的界面元素进行标记；

说明单元，用于根据所述功能变化信息，按照预设的排版方案，为标记的界面元素添加功能变化说明，以获得所述用户指引界面。

具体的，本实施方式中为了突出新版本相对旧版本的变化，在新版本交互界面中标记出变化的界面元素。可选的，可以在发生变化的界面元素周围绘制线框，为了实现突出效果，线框的颜色可设定为非背景色。之后，再标记的界面元素附近标注该界面元素伴随的功能变化，以进行说明。

基于用户指引界面，用户可以快速明确地知晓不同版本间交互界面的变化，从而便于实现人机交互。实际应用中，可以将生成的用户指引界面置入应用软件，以提示用户。可选的，在实施例二的基础上，所述装置还包括：

置入模块，用于将所述用户指引界面置入第二版本下的应用软件，以当第二版本下的应用软件启动时，显示所述用户指引界面。

本申请提供的用户指引界面生成装置，基于图像识别技术对不同版本下的交互界面进行比对，获得不同版本之间发生变化的界面元素及对应的功能变化信息，进而自动生成用户指引界面。本方案通过图像识别，能够自动获取不同版本之间的变化，并且能够自动制图排版，从而快速方便地生成用户指引界面，省去沟通环节，提高了制作效率，节省了时间成本和人力成本。

为了更好地理解本方案，以举例的方式对具体的处理流程进行示例说明：

1、自动截取新版本所有页面屏幕(即交互界面)并按交互流程结构命名，如a1、b1…。

2、自动截取旧版本所有页面屏幕并按交互流程结构命名，如a2、b2…。

3、分别输入图片a1和图片a2。

4、通过图像识别技术分别识别文件名相同的两张页面a1和a2中的文字、图片进行识别，对界面元素覆盖区域的像素进行比对，看a1和a2中界面元素是否显示相同，不同的界面元素即为发生变化的功能，如界面元素1在a1中存在，在a2、b2…所有旧版本界面中都不存在，那么此界面元素1为新添加的功能；如果界面元素1在a1中存在，在a2中不存在，而在b2中存在，那么此界面元素1位置发生了改变；如果界面元素1在a1、b1…等新版本界面不存在，在a2旧版本界面中存在，那么界面元素1对应的功能被删除。

5、通过步骤4对比模块比照a1和a2中的不同，得出新版本a1界面对比旧版本a2界面里的功能内容发生了哪些修改变化，输出文字文档TXT1，TXT1即为新版本a1界面的变化记录(即功能变化信息)。如：对原有某功能模块的删减、更换位置或增添新功能。

6、通过步骤5输出的结果知道新版本界面中哪些元素发生了变化。此时在新版本发生变化的元素周围绘制线框，线框大小为超出元素周围2px，线框颜色为非背景色即可，以此类推，把所有变化部分元素标记出来后，导出图片image1。

7、新建一块画布，分辨率为APP当前适配最大分辨率，导入步骤6得出的图片image1，并等比例缩小60％，再导入步骤5输出的文本TXT1，image1是新版界面被标注发生功能变化的图，而TXT1为文字说明，画面排版中image1图在上，文字说明TXT1排版在下，匹配组合，导出生成用户指引屏图片guide1，以此类推，生成多个用户指引图片，即用户指引界面。

8、将生成的用户指引界面置入到新版本应用软件，以在应用软件启动后第一屏进行显示。

需要说明的是，前述各实施方式可以单独实施，也可以在不冲突的前提下结合实施。可选的，前述各模块既可以分离设置也可以集成设置，例如，执行相同或相似功能的模块可以通过同一模块实现，前述各实施例的模块划分仅是一种示例。

图5为本申请实施例三提供的用户指引界面生成装置的结构示意图，该用户指引界面生成装置包括：存储器和至少一个处理器。

存储器，用于存储计算机程序。存储器可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。所述至少一个处理器执行所述存储器存储的计算机程序，以实现上述实施例中的方法。

其中，处理器可能是一个中央处理器(Central Processing Unit，简称为CPU)，或者是特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者是被配置成实施本申请实施例的一个或多个集成电路。

可选的，在具体实现上，如果通信接口、存储器和处理器独立实现，则通信接口、存储器和处理器可以通过总线相互连接并完成相互间的通信。所述总线可以是工业标准体系结构(Industry Standard Architecture，简称为ISA)总线、外部设备互连(PeripheralComponent，简称为PCI)总线或扩展工业标准体系结构(Extended Industry StandardArchitecture，简称为EISA)总线等。所述总线可以分为地址总线、数据总线、控制总线等，但并不表示仅有一根总线或一种类型的总线。

可选的，在具体实现上，如果通信接口、存储器和处理器集成在一块芯片上实现，则通信接口、存储器和处理器可以通过内部接口完成相同间的通信。

本申请实施例四还提供一种计算机可读存储介质，该计算机可读存储介质可以包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，RandomAccess Memory)、磁盘或者光盘等各种可以存储计算机程序的介质，具体的，该计算机可读存储介质中存储有计算机程序，计算机程序用于上述实施例中的方法。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法实施例中的对应过程。

本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。

最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (10)

1.一种用户指引界面生成方法，其特征在于，包括：

获取应用软件在第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；

针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；

根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。

2.根据权利要求1所述的方法，其特征在于，所述获取应用软件在第一版本和第二版本下的交互界面数据，包括：

截取应用软件在第一版本和第二版本下各交互界面的页面，并按照交互流程结构为所述各交互界面的页面命名，以获得第一版本和第二版本下的交互界面数据；

所述针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息，包括：

针对相同命名的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息。

3.根据权利要求1所述的方法，其特征在于，所述针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息，包括：

针对相同交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术识别出发生变化的界面元素，所述发生变化的界面元素包括添加的界面元素、删除的界面元素和保留的界面元素；

根据所述发生变化的界面元素在所述第一版本和所述第二版本下对应的功能，确定所述第一版本和所述第二版本下所述交互界面的功能变化信息。

4.根据权利要求1所述的方法，其特征在于，所述根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面，包括：

对第二版本下各交互界面中发生变化的界面元素进行标记；

根据所述功能变化信息，按照预设的排版方案，为标记的界面元素添加功能变化说明，以获得所述用户指引界面。

5.根据权利要求1-4中任一项所述的方法，其特征在于，所述方法还包括：

将所述用户指引界面置入第二版本下的应用软件，以当第二版本下的应用软件启动时，显示所述用户指引界面。

6.一种用户指引界面生成装置，其特征在于，包括：

获取模块，用于获取第一版本和第二版本下的交互界面数据，所述交互界面数据包括各交互界面的页面信息和交互流程结构信息；

比对模块，用于针对相同的交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息；

处理模块，用于根据发生变化的界面元素及对应的功能变化信息，生成用户指引界面。

7.根据权利要求6所述的装置，其特征在于，

所述获取模块，具体用于截取第一版本和第二版本下各交互界面的页面，并按照交互流程结构为所述各交互界面的页面命名，以获得第一版本和第二版本下的交互界面数据；

所述比对模块，具体用于针对相同命名的交互界面，通过图像识别技术进行比对，获得发生变化的界面元素及对应的功能变化信息。

8.根据权利要求6所述的装置，其特征在于，所述比对模块包括：

图像处理单元，用于针对相同交互流程结构信息在所述第一版本和所述第二版本下的交互界面，通过图像识别技术识别出发生变化的界面元素，所述发生变化的界面元素包括添加的界面元素、删除的界面元素和保留的界面元素；

功能处理单元，用于根据所述发生变化的界面元素在所述第一版本和所述第二版本下对应的功能，确定所述第一版本和所述第二版本下所述交互界面的功能变化信息。

9.根据权利要求6所述的装置，其特征在于，所述处理模块包括：

标记单元，用于对第二版本下各交互界面中发生变化的界面元素进行标记；

说明单元，用于根据所述功能变化信息，按照预设的排版方案，为标记的界面元素添加功能变化说明，以获得所述用户指引界面。

10.根据权利要求6-9中任一项所述的装置，其特征在于，所述装置还包括：

置入模块，用于将所述用户指引界面置入第二版本下的应用软件，以当第二版本下的应用软件启动时，显示所述用户指引界面。