CN109992518A - Ui界面的检测方法、装置、电子设备及存储介质 - Google Patents
Ui界面的检测方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN109992518A CN109992518A CN201910287192.1A CN201910287192A CN109992518A CN 109992518 A CN109992518 A CN 109992518A CN 201910287192 A CN201910287192 A CN 201910287192A CN 109992518 A CN109992518 A CN 109992518A
- Authority
- CN
- China
- Prior art keywords
- design
- interface
- score
- matched
- application
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000001514 detection method Methods 0.000 title claims abstract description 50
- 238000013461 design Methods 0.000 claims abstract description 279
- 238000000034 method Methods 0.000 claims abstract description 35
- 238000012360 testing method Methods 0.000 claims description 15
- 230000009467 reduction Effects 0.000 claims description 8
- 238000012549 training Methods 0.000 description 14
- 230000008569 process Effects 0.000 description 13
- 238000013528 artificial neural network Methods 0.000 description 7
- 238000005538 encapsulation Methods 0.000 description 6
- 230000015654 memory Effects 0.000 description 6
- 238000010586 diagram Methods 0.000 description 4
- 241000208340 Araliaceae Species 0.000 description 2
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 2
- 235000003140 Panax quinquefolius Nutrition 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 230000005611 electricity Effects 0.000 description 2
- 235000008434 ginseng Nutrition 0.000 description 2
- 239000011159 matrix material Substances 0.000 description 2
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 238000012512 characterization method Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 239000000463 material Substances 0.000 description 1
- 230000001537 neural effect Effects 0.000 description 1
- 238000005192 partition Methods 0.000 description 1
- 230000004044 response Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请实施例提供了一种UI界面的检测方法、装置、电子设备及存储介质,方法包括:根据UI设计界面中的设计元素,确定出UI应用界面中与设计元素匹配的元素和不匹配的元素;为匹配的元素和不匹配的元素确定出各自对应的得分;根据得分,确定出UI应用界面较于UI设计界面的还原程度。由于在确定出UI应用界面有哪些元素与UI设计界面不同后,还可以为匹配的元素和不匹配的元素确定出各自对应的得分,并基于得分来确定出UI应用界面较于UI设计界面的还原程度。由于还原程度能够直观的反应出UI应用界面在整体上还原的是好还是坏,这样用户在获知该还原程度后,用户就可以直观且清楚的知道UI应用界面的整体设计情况的好坏。
Description
技术领域
本申请涉及应用检测技术领域,具体而言,涉及一种UI界面的检测方法、装置、电子设备及存储介质。
背景技术
目前,可以将UI(User Interface,用户界面)设计界面与UI应用界面进行比对例如通过人工肉眼对比,以通过比对来确定出UI应用界面有哪些元素与UI设计界面不同。以便用户获知哪些元素不同,并可以针对这些不同的元素对UI应用界面进行改进。在采用这种方式时,虽然能够让用户清楚的知晓哪些元素不同并需要改进,但却不能够让用户清楚知道UI应用界面的整体设计情况如何,导致用户并不能直观的获知UI应用界面在整体设计上是好是坏。
发明内容
本申请的目的在于提供一种UI界面的检测方法、装置、电子设备及存储介质,以实现让用户直观的知道UI应用界面的整体设计情况是好是坏。
第一方面,本申请实施例提供了一种UI界面的检测方法,所述方法包括:
根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素;为所述匹配的元素和所述不匹配的元素确定出各自对应的得分;根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
在本申请的实现方式中,在确定出UI应用界面有哪些元素与UI设计界面不同后,还可以为匹配的元素和不匹配的元素确定出各自对应的得分,并基于得分来确定出UI应用界面较于UI设计界面的还原程度。由于还原程度能够直观的反应出UI应用界面在整体上还原的是好还是坏,这样用户在获知该还原程度后,用户就可以直观且清楚的知道UI应用界面的整体设计情况的好坏。
结合第一方面,在第一种可能的实现方式中,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分,包括:
根据预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
在本申请的实现方式中,由于元素的得分已经提前预设好了,那么通过直接调用将该预设得分的方式,就可以快速且便捷为匹配的元素和不匹配的元素确定出各自对应的得分。这种方式使得方案的实现难度并不高但准确性又好,便于方案的实际应用。
结合第一方面的第一种可能的实现方式,在第二种可能的实现方式中,根据预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分,包括:
根据所述UI应用界面或所述UI设计界面的版本信息,从预设的多个元素模板中确定出与所述版本信息对应的元素模板,其中,任意两个元素模板包含的元素不同;
根据所述对应的元素模板中预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
在本申请的实现方式中,由于不同应用程序的不同UI界面的元素差异很大,故为每种UI界面都预设了对应的元素模板。在此基础上,通过确定出与UI应用界面对应的元素模板来为UI应用界面中的元素打分,可以使得为匹配的元素和不匹配的元素确定出各自对应的得分准确和符合实际,使得最终得到还原程度也更加准确。
结合第一方面,在第三种可能的实现方式中,在为所述匹配的元素和所述不匹配的元素确定出各自对应的得分之前,所述方法还包括:
通过对生成所述UI设计界面而需要运行的UI设计文件进行检测,确定出所述UI设计界面中的关键元素和非关键元素;或
通过对生成所述UI应用界面而需要运行的应用程序进行检测,确定出所述UI应用界面中的所述关键元素和所述非关键元素;
对应的,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分,包括:
从所述匹配的元素中确定出属于所述关键元素的匹配的元素和属于所述非关键元素的匹配的元素,以及从所述不匹配的元素中确定出属于所述关键元素的不匹配的元素和属于所述非关键元素的不匹配的元素;
根据预设的所述关键元素在匹配时的得分和在不匹配时的得分,以及根据预设的所述非关键元素在匹配时的得分和在不匹配时的得分,为属于所述关键元素的匹配的元素、属于所述关键元素的不匹配的元素、属于所述非关键元素的匹配的元素和属于所述非关键元素的不匹配的元素确定出各自对应的得分;
其中,所述关键元素在匹配时的得分高于所述非关键元素在匹配时的得分,所述关键元素在不匹配时的得分不低于所述非关键元素在不匹配时的得分。
在本申请的实现方式中,由于不同应用程序的不同UI界面中的关键元素和非关键元素的差异很大,那么通过自动识别出哪些元素属于关键元素而哪些元素又属于非关键元素,并为属于关键元素的元素确定对应的得分,以及也为属于非关键元素的元素确定对应的得分,其可以实现无论测试何种应用程序的UI应用界面,都可以准确且符合实际的为UI应用界面确定出该UI应用界面还原程度。
结合第一方面的第三种可能的实现方式,在第四种可能的实现方式中,根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度,包括:
将所述匹配的元素的得分和所述不匹配的元素的得分加总,确定出总得分;
将所述总得分与预设总分相比,确定出所述UI应用界面较于所述UI设计界面的还原程度。
在本申请的实现方式中,由于还原程度是将总得分与预设总分相比而以比值的形式呈现出,故使得用户基于该比值形式的还原程度能够更加直观且清楚的知道UI应用界面的整体设计情况的好坏。
结合第一方面的第四种可能的实现方式,在第五种可能的实现方式中,根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
获取所述UI设计文件中与所述设计元素相关的设计参数,以及获取所述应用程序中与所述UI应用界面中的元素相关的应用参数;
通过检测所述应用参数与所述设计参数是否匹配,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述应用参数与所述设计参数不匹配表示所述UI应用界面中对应的元素与所述设计元素不匹配。
在本申请的实现方式中,由于UI设计文件和应用程序针对同一元素都有相关的参数,故利用将UI设计文件中的参数与应用程序中相应的参数进行匹配就可以准确且便捷的确定元素是否匹配。这种方式使得方案的实现难度并不高但准确性又好,便于方案的实际应用。
结合第一方面的第四种可能的实现方式,在第六种可能的实现方式中,根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
获取所述应用程序中与所述UI应用界面中的元素相关的程序模块,以及获取所述UI设计文件中与所述UI设计元素相关的文件模块;
通过检测所述程序模块和所述文件模块之间是否存在关联,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述程序模块和所述文件模块不关联表示所述UI应用界面中对应的元素与所述设计元素不匹配。
在本申请的实现方式中,若要UI设计界面与UI应用界面中具有同一元素,那么则需要在UI设计文件中添加该元素的文件模块,以及在应用程序中添加与该文件模块关联的程序模块,因此通过判断两个元素的程序模块和文件模块是否存在关联便可以准确且便捷的确定这两个元素是否匹配。这种方式使得方案的实现难度并不高但准确性又好,便于方案的实际应用。
结合第一方面的第四种可能的实现方式,在第七种可能的实现方式中,根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
通过元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中的元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素。
在本申请的实现方式中,由于还可以通过元素识别模型识别UI应用界面的图像和UI设计界面的图像中的元素来确定元素是否匹配,使得方案可以实现以多种方式确定元素是否匹配,这极大了扩展了在实际中的适用性。
结合第一方面的第七种可能的实现方式,在第八种可能的实现方式中,所述元素为至少一种,所述元素识别模型为至少一个,每个所述元素识别模型用于检测对应的一种所述元素是否匹配,通过元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中的元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
根据每个所述元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中对应的一种元素而输出的检测结果,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,每个所述检测结果均用于表示所述UI应用界面中的一种元素与所述UI设计界面中对应一种设计元素是否匹配。
在本申请的实现方式中,由于每个元素识别模型识别针对一种元素是否相同进行识别,故可以具有很高的准确性,这极大的提高了最终确定出的还原程度的准确性。
结合第一方面,在第九种可能的实现方式中,在根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素之后,所述方法还包括:
根据所述不匹配的元素与对应的所述设计元素的差异,生成对所述UI应用界面的修改建议。
在本申请的实现方式中,由于可以生成对UI应用界面的修改建议,使得用户参照建议来可以更高效的对UI应用界面进行修改。
第二方面,本申请实施例提供了一种UI界面的检测装置,所述装置包括:
元素识别模块,用于根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素;
得分确定模块,用于为所述匹配的元素和所述不匹配的元素确定出各自对应的得分;
还原度确定模块,用于根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
结合第二方面,在第一种可能的实现方式中,
所述得分确定模块,还用于根据预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
结合第二方面的第一种可能的实现方式,在第二种可能的实现方式中,
所述得分确定模块,还用于根据所述UI应用界面或所述UI设计界面的版本信息,从预设的多个元素模板中确定出与所述版本信息对应的元素模板,其中,任意两个元素模板包含的元素不同;根据所述对应的元素模板中预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
结合第二方面,在第三种可能的实现方式中,
所述元素识别模块,还用于通过对生成所述UI设计界面而需要运行的UI设计文件进行检测,确定出所述UI设计界面中的关键元素和非关键元素;或通过对生成所述UI应用界面而需要运行的应用程序进行检测,确定出所述UI应用界面中的所述关键元素和所述非关键元素;
对应的,所述得分确定模块,还用于从所述匹配的元素中确定出属于所述关键元素的匹配的元素和属于所述非关键元素的匹配的元素,以及从所述不匹配的元素中确定出属于所述关键元素的不匹配的元素和属于所述非关键元素的不匹配的元素;根据预设的所述关键元素在匹配时的得分和在不匹配时的得分,以及根据预设的所述非关键元素在匹配时的得分和在不匹配时的得分,为属于所述关键元素的匹配的元素、属于所述关键元素的不匹配的元素、属于所述非关键元素的匹配的元素和属于所述非关键元素的不匹配的元素确定出各自对应的得分;
其中,所述关键元素在匹配时的得分高于所述非关键元素在匹配时的得分,所述关键元素在不匹配时的得分不低于所述非关键元素在不匹配时的得分。
结合第二方面的第三种可能的实现方式,在第四种可能的实现方式中,
还原度确定模块,还用于将所述匹配的元素的得分和所述不匹配的元素的得分加总,确定出总得分;将所述总得分与预设总分相比,确定出所述UI应用界面较于所述UI设计界面的还原程度。
结合第二方面的第四种可能的实现方式,在第五种可能的实现方式中,
所述元素识别模块,还用于获取所述UI设计文件中与所述设计元素相关的设计参数,以及获取所述应用程序中与所述UI应用界面中的元素相关的应用参数;通过检测所述应用参数与所述设计参数是否匹配,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述应用参数与所述设计参数不匹配表示所述UI应用界面中对应的元素与所述设计元素不匹配。
结合第二方面的第四种可能的实现方式,在第六种可能的实现方式中,
所述元素识别模块,还用于获取所述应用程序中与所述UI应用界面中的元素相关的程序模块,以及获取所述UI设计文件中与所述UI设计元素相关的文件模块;通过检测所述程序模块和所述文件模块之间是否存在关联,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述程序模块和所述文件模块不关联表示所述UI应用界面中对应的元素与所述设计元素不匹配。
结合第二方面的第四种可能的实现方式,在第七种可能的实现方式中,
所述元素识别模块,还用于通过元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中的元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素。
结合第二方面的第七种可能的实现方式,在第八种可能的实现方式中,所述元素为至少一种,所述元素识别模型为至少一个,每个所述元素识别模型用于检测对应的一种所述元素是否匹配,
所述元素识别模块,还用于根据每个所述元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中对应的一种元素而输出的检测结果,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,每个所述检测结果均用于表示所述UI应用界面中的一种元素与所述UI设计界面中对应一种设计元素是否匹配。
结合第二方面,在第九种可能的实现方式中,所述装置还包括:
建议生成模块,用于根据所述不匹配的元素与对应的所述设计元素的差异,生成对所述UI应用界面的修改建议。
第三方面,本申请实施例提供了一种电子设备,包括:通信接口、存储器、与所述通信接口和所述存储器连接的处理器;
所述存储器,用于存储程序;
所述处理器,用于调用并运行所述程序,以执行如第一方面或第一方面的第一种至第九种中任一种可能的实现方式所述的UI界面的检测方法。
第四方面,本申请实施例提供了一种具有计算机可执行的非易失程序代码的计算机可读储存介质,所述程序代码使所述计算机执行第一方面或第一方面的第一种至第九种中任一种可能的实现方式所述的UI界面的检测方法。
为使本申请的上述目的、特征和优点能更明显易懂,下文特举较佳实施例,并配合所附附图,作详细说明如下。
附图说明
为了更清楚地说明本申请实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本申请的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图。
图1示出了本申请实施例提供的一种UI界面的检测方法的方法流程;
图2示出了图1中步骤S100的第一方法子流程;
图3示出了本申请实施例提供的一种UI界面的检测方法中UI设计界面示意图;
图4示出了本申请实施例提供的一种UI界面的检测方法中UI应用界面示意图;
图5示出了图1中步骤S100的第二方法子流程;
图6示出了本申请实施例提供的一种电子设备的结构框图;
图7示出了本申请实施例提供的一种UI界面的检测装置的结构框图。
具体实施方式
下面将结合本申请实施例中附图,对本申请实施例中的技术方案进行描述。
应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。同时,在本申请的描述中,术语“第一”、“第二”等仅用于区分描述,而不能理解为指示或暗示相对重要性。
请参阅图1,本申请实施例提供了一种UI界面的检测方法,该UI界面的检测方法可以由电子设备来执行,该电子设备可以是终端或者服务器,其中,终端可以是个人电脑(personal computer,PC)、平板电脑、智能手机、个人数字助理(personal digitalassistant,PDA)等;服务器可以为网络服务器、数据库服务器、云服务器或由多个子服务器构成的服务器集成等。
具体的,该UI界面的检测方法可以包括:步骤S100、步骤S200和步骤S300。
步骤S100:根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素。
步骤S200:为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
步骤S300根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
下面将对UI界面的检测方法的流程进行详细地说明。
本实施例中,UI设计界面可以是基于运行UI设计文件所生成的,而UI应用界面则可以是基于运行应用程序而生成。
UI设计文件可以是UI设计师针对UI界面而制作的设计文件,UI设计文件可以由安装在终端上的插件例如Marketch、AEFlowchart、Content Generator Sketch Plugin、Sketch Measure、Sketch Notebook Master和/或Taobao Image Sketch Plugin运行,从而终端上可以展示出该UI设计界面。
而对于应用程序来说,软件工程师可以根据该UI设计文件而编写出相应的应用程序。其中,应用程序需要依赖于操作系统例如安卓系统、IOS系统或者Windos系统运行,那么基于安装有相应操作系统的终端运行该应用程序,终端上就可以展示出通过运行该应用程序而生成的UI应用界面。
为便于软件工程师根据UI设计文件而编写出相应的应用程序,UI设计文件中则需要包含一些可以指示软件工程师的信息,例如在该UI设计文件中有构成UI界面所需的元素的参数。其中,构成UI界面所需的主要元素可以包括但不限于:字框、字符、图框、图片、按钮和背景,那么若将这些主要元素的参数也当做构成UI界面的元素,那么元素还可以进一步包括但不限于:字框的位置、字符样式、字符大小、字重程度、背景颜色、背景透明程度、背景渐变程度、图框的位置、图框的圆角程度、按钮圆角程度、按钮的位置、字框的尺寸、图片的尺寸、图框的尺寸和按钮的尺寸。那么,软件工程师根据UI设计文件该构成UI界面所需的元素的参数,也在应用程序中设置相应的参数,使得UI应用界面能够尽量的接近UI设计界面。
实际中,由于一些人为的原因例如软件工程师编程错误的定义了元素的参数,或者由于一些实际运行环境的原因例如:不同终端的屏幕尺寸不同、不同终端的操作系统也不同,故导致UI应用界面与UI设计界面存在着差异。
进一步的,为了消除UI应用界面与UI设计界面存在的差异,则需要通过对UI应用界面与UI设计界面进行检测而确定出哪些元素存在差异。于本实施例中,本实施例可以通过三种方式来确定出UI应用界面与UI设计界面中存在差异的元素,下面将分别予以说明。
作为第一种可选的方式,电子设备可以基于将元素的参数进行匹配来确定出哪些元素存在差异。基于此方式,如图2所示,步骤S100的子流程可以包括:步骤S110和步骤S120。
步骤S110:获取所述UI设计文件中与所述设计元素相关的设计参数,以及获取所述应用程序中与所述UI应用界面中的元素相关的应用参数。
步骤S120:通过检测所述应用参数与所述设计参数是否匹配,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述应用参数与所述设计参数不匹配表示所述UI应用界面中对应的元素与所述设计元素不匹配。
首先,电子设备中分别存储有UI设计文件和应用程序,这样电子设备基于存储的UI设计文件和应用程序就可以执行步骤S110。
由于电子设备可以对多款应用的UI设计文件与UI应用界面是否相同进行测试,例如电子设备可以对打车软件、导航软件和网购软件的UI设计文件与UI应用界面均进行测试,故为便于电子设备识别出UI设计文件中的设计元素以及识别出应用程序中的元素,电子设备中预先设置该多款应用程序所包含的所有元素的标识,其中,每个标识可以对应一个元素的名称,但并不限定。
进一步的,UI设计文件中也包含了每个设计元素的标识,那么电子设备通过将UI设计文件中设计元素的标识与预设的所有元素的标识进行比对,就可以获知UI设计界面有哪些设计元素。相应的,在获知设计元素的基础上,就可以基于UI设计文件中设计元素的标识与相关的设计参数的关联关系,获取到设计元素的设计参数。
进一步的,由于应用程序中也可以包含UI应用界面中每个元素的标识,那么电子设备也通过将应用程序包含的每个元素的标识与预设的所有元素的标识进行比对,就可以获知UI应用界面有哪些元素。相应的,在获知UI应用界面有哪些元素的基础上,就可以基于应用程序中元素的标识与相关的应用参数的关联关系,获取到UI应用界面中的元素的应用参数。
电子设备获取到设计元素的设计参数和UI应用界面中的元素的应用参数后,电子设备便可以继续执行步骤S120。
若UI应用界面中的元素要与UI设计界面中的设计元素匹配,最基础的是UI应用界面中的元素的应用参数需要与UI设计界面中的设计元素的设计参数匹配。因此,电子设备可以通过检测应用参数与设计参数是否匹配来确定设计元素是否与UI应用界面中的元素匹配。
可选的,电子设备可以通过元素的标识,将标识相同的UI应用界面中的元素与设计元素匹配,或者将标识关联的UI应用界面中的元素与设计元素匹配。那么一旦某个应用参数与对应的该设计参数不匹配,电子设备则确定该应用参数对应的元素与该设计参数对应的设计元素不匹配;或者一旦某个UI应用界面中的元素的标识与任何一个设计元素的标识都不相同或不关联,则也确定UI应用界面中的该元素与设计元素不匹配。
故通过上述的匹配过程,电子设备就可以确定出UI应用界面中与设计元素匹配的元素和不匹配的元素。
当然,若电子设备确定UI应用界面中没有与设计元素匹配的不匹配的元素,则电子设备可以结束本次对该UI界面的检测方法的执行流程。
请参阅图3和图4,下面通过一个示例来说明上述流程。
图3示出了应用A的UI设计界面A1,图4则示出了应用A的UI应用界面A2。在UI设计界面A1中元素的包括:字框A11、字符A12、按钮A13和按钮A14,以及在在UI应用界面A2中元素的则包括:字框A21、字符A22、按钮A23和按钮A24。
基于上述方法,可以获取到UI设计界面A1中元素对应的设计参数包括:字框A11的位置为(50、50)、字框A11的尺寸为(60、30)、字符A12的样式为宋体、字符A12的大小为12码、字符A12的字重程度为正常、按钮A13的位置为(40、20)、按钮A13的尺寸为(10、10)、按钮A14的位置为(60、20)和按钮A14的尺寸为(10、10)。
也基于上述方法,可以获取到UI应用界面A2中元素对应的应用参数包括:字框A21的位置为(50、40)、字框A21的尺寸为(50、20)、字符A22的样式为宋体、字符A22的大小为12码、字符A22的字重程度为正常、按钮A23的位置为(40、20)、按钮A23的尺寸为(10、10)、按钮A24的位置为(60、20)和按钮A24的尺寸为(20、20)。
进一步的,通过将设计参数与应用参数匹配,就可以确定出UI应用界面中不匹配的元素包括:字框A21的位置、字框A21的尺寸和按钮A24的尺寸。
作为第二种可选的方式,在模块化设计的基础上,电子设备可以基于将元素对应的模块进行匹配来确定出哪些元素存在差异。基于此方式,如图5所示,步骤S100的子流程可以包括:步骤S130和步骤S140。
步骤S130:获取所述应用程序中与所述UI应用界面中的元素相关的程序模块,以及获取所述UI设计文件中与所述UI设计元素相关的文件模块。
步骤S140:通过检测所述程序模块和所述文件模块之间是否存在关联,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述程序模块和所述文件模块不关联表示所述UI应用界面中对应的元素与所述设计元素不匹配。
首先,电子设备也基于存储的UI设计文件和应用程序而可以执行步骤S130。
于本实施例中,在设计师创建该UI设计文件的过程中,设计师可以将UI设计文件中的每个设计元素的程序或参数经过封装形成一个文件模块。这样UI设计文件中便可以包含与UI设计界面中的设计元素相关的文件模块。其中,为便于对文件模块进行表征,封装的过程中可以生成该文件模块对应的标识例如可以是该文件模块的名称字段,且不同的元素封装后的文件模块的标识也是不同的,那么通过标识则可以来准确表征该文件模块。
与此对应的是,在软件工程师创建该应用程序的过程中,软件工程师也可以将应用程序中的每个元素的程序或参数经过封装形成一个程序模块。这样应用程序中便也可以包含与UI应用界面中的元素相关的程序模块。其中,为便于对程序模块进行表征,封装的过程中也可以生成该程序模块对应的标识例如可以是该程序模块的名称字段,且不同的元素封装后的程序模块的标识也是不同的,那么通过标识则可以来准确表征该程序模块。
进一步的,为便于电子设备可以通过检测文件模块和程序模块来确定UI应用界面中是否有与设计元素不匹配的元素,电子设备中预设了多款应用包含的每种设计元素的文件模块和与之对应的一个程序模块的关联关系。在此基础上,电子设备基于预设的关联关系,就可以检测UI设计文件中的文件模块和应用程序中的程序模块之间是否存在关联。其中,若根据预设的关联关系,确定应用程序中的某个程序文件不与UI设计文件中的任何一个UI设计文件关联,则确定该程序文件对应的元素是UI应用界面中与设计元素匹配的不匹配的元素。
故通过上述的匹配过程,电子设备就可以确定出UI应用界面中与设计元素匹配的元素和不匹配的元素。
当然,若电子设备确定UI应用界面中没有与设计元素匹配的不匹配的元素,则电子设备可以结束本次对该UI界面的检测方法的执行流程。
也请参阅图3和图4,下面也通过一个示例来说明上述流程。
基于上述方法,可以获取到UI设计界面A1中元素对应的文件模块的标识包括:字框A11的位置对应的标识为101、字框A11的尺寸对应的标识为102、字符A12的样式为宋体对应的标识为103、字符A12的大小为12码对应的标识为104、字符A12的字重程度为正常对应的标识为105、按钮A13的位置对应的标识为106、按钮A13的尺寸对应的标识为107、按钮A14的位置对应的标识为108和按钮A14的尺寸为对应的标识为109。
基于上述方法,可以获取到UI应用界面A2中元素对应的程序模块的标识包括:字框A21的位置对应的标识为201、字框A21的尺寸对应的标识为202、字符A22的样式为宋体对应的标识为103、字符A22的大小为12码对应的标识为104、字符A22的字重程度为正常对应的标识为105、按钮A23的位置对应的标识为106、按钮A23的尺寸对应的标识为107、按钮A24的位置对应的标识为108和按钮A24的尺寸为对应的标识为209。
进一步的,在对应的程序模块与文件模块关联为程序模块的标识与文件模块的标识相同的情况下,通过判断程序模块与文件模块是否关联,就可以确定出UI应用界面中不匹配的元素包括:字框A21的位置、字框A21的尺寸和按钮A24的尺寸。
作为第三种可选的方式,电子设备执行步骤S100可以是利用图像识别来确定出哪些元素存在差异。
为便于对图像进行识别,电子设备中可以预先设置深度神经网络,并通过训练而将该深度神经网络训练成元素识别模型。其中,深度神经网络可以采用FasterRCNN、RFCN、SSD、RefineDet或RetinaNet等网络,对此本实施例并不限定。示例性的,电子设备可以利用训练集对该深度神经网络进行训练,由于训练集的每张UI应用界面的图像中标注了每个元素是否设计元素匹配的结果,那么深度神经网络在训练过程中就可以利用标注的每个元素是否为设计元素匹配的结果去调整自身的网络中各向量的权重,使得深度神经网络识别出的结果越来越接近标注的结果。通过训练,例如采用10万张UI应用界面的图像对深度神经网络训练后,该深度神经网络被训练成元素识别模型,其识别的准确度可以达到98%以上,从而可以投入实际使用。
本实施例中,由于元素识别模型是对图像进行识别,但电子设备中存储的却是应用程序和UI设计文件,故需要电子设备通过运行该应用程序而生成UI应用界面的图像,以及通过运行该UI设计文件而生成UI设计界面的图像。
可选的,电子设备可以安装模拟器来模拟出能够运行应用程序的操作系统运行环境,其中,该模拟器可以对安卓模拟器、IOS模拟器和Windows模拟器进行集成,以便无论应用程序适用何种操作系统,模拟器都可以模拟出其相应的运行环境。这样,通过模拟器对该应用程序进行运行,电子设备则可以获取该应用程序运行而生成的UI应用界面的图像。另外,模拟器通过与用户的交互,还可以响应用户的操作而模拟出用户在UI应用界面的控制操作,以实现对UI应用界面的切换。
也可选的,电子设备也可以安装前述插件来运行该UI设计文件,从而电子设备也可以获取该UI设计文件运行而生成的UI设计界面的图像。需要说明的是,为便图像识别,用户可以通过控制该插件而使得生成的UI设计界面与生成的UI应用界面对应。
作为利用图像识别来确定出哪些元素存在差异的第一种方式,电子设备可以通过一个模型来完成对所有元素是否匹配进行识别。在这种情况下,需要利用多款应用包含的所有元素对该深度神经网络进行充分的训练,这样才能够保证元素识别模型对每种元素的识别准确度都比较高。
在此基础上,电子设备将UI设计界面的图像和UI应用界面的图像都输入到该元素识别模型中,该元素识别模型便可以通过对元素的识别而确定出UI应用界面中与设计元素匹配的元素和不匹配的元素。
作为利用图像识别来确定出哪些元素存在差异的第二种方式,电子设备可以通过多个模型来完成对所有元素是否匹配进行识别。其中,每个元素识别模型可以识别相似且不同的至少一种元素,相似且不同的至少一种元素可以表示这两种元素在类型上相似但元素本身并不同,例如,相似且不同的至少两种元素可以是字框的位置和图框的位置,也可以是字框的尺寸、按钮的尺寸和图框的尺寸。这样,利用针对性训练的元素识别模型A可以对字框的位置是否匹配和图框的位置是否匹配进行识别,以及针对性训练的元素识别模型B则可以对字框的尺寸是否匹配、按钮的尺寸是否匹配和图框的尺寸是否匹配进行识别。
在此基础上,电子设备将UI设计界面的图像和UI应用界面的图像都输入到每个元素识别模型中,每个元素识别模型便可以通过对相似且不同的至少一种元素的识别而输出对应的至少一个检测结果,其中,每个检测结果可以表示UI应用界面中的一种元素与UI设计界面中对应一种设计元素是否匹配。那么电子设备基于所有的检测结果就可以确定出UI应用界面中与设计元素匹配的元素和不匹配的元素。
较于一个模型对所有元素都进行识别的方式,由于每个模型的训练是基于该模型需要检测的相似且不同的至少一种元素进行的训练,故训练的更为有针对性,使得每个模型的识别准确度会更高,但其实现所投入人力和物力成本也会相应的高一些。
作为利用图像识别来确定出哪些元素存在差异的第三种方式,电子设备也可以通过多个模型来完成对所有元素是否匹配进行识别。但不同的是,每个元素识别模型可以用于检测对应的一种元素是否匹配,例如元素识别模型A可以对字框的位置是否匹配进行检测、元素识别模型B可以对图框的位置是否匹配进行检测、元素识别模型C可以对字框的尺寸是否匹配进行检测,依次类推有多少种元素则需要多少个模型来进行识别。
在此基础上,电子设备将UI设计界面的图像和UI应用界面的图像都输入到每个元素识别模型中,每个元素识别模型则通过识别UI应用界面的图像和UI设计界面的图像中对应的一种元素而输出一个检测结果,其中,每个检测结果可以表示UI应用界面中的一种元素与UI设计界面中对应一种设计元素是否匹配。那么电子设备基于所有的检测结果就可以确定出UI应用界面中与设计元素匹配的元素和不匹配的元素。
较于前述的两种识别的方式,由于每个模型的训练是基于该模型需要检测的一种元素进行的训练,故训练有针对性,使得每个模型的识别准确度非常高。
当然,在本实施例中,对元素是否匹配识别也不限于前述的三种方式,例如实际中也可以采用:UI应用界面的图像或UI设计界面的图像的调节透明度,再将调节后的图像重合在未调节的图像上方,将UI应用界面的图像或UI设计界面的图像重合展示。这样测试人员就可以直观的确定UI应用界面中与设计元素匹配的元素和不匹配的元素。
此外,实际应用不仅可以采用前述的三种方式中的任一种方式单独实现对元素的检测,其也可以选择前述的三种方式中至少两种方式来配合实现对元素的检测。
本实施例中,电子设备不仅可以确定出UI应用界面中与设计元素匹配的元素和不匹配的元素,电子设备还可以根据识别过程中UI应用界面中不匹配的元素与对应的设计元素的差异,生成对UI应用界面的修改建议。
请继续参阅图3和图4,下面结合前述举例继续说明,电子设备通过参数匹配的方式确定出字框A11的位置为(50、50),以及确定出字框A21的位置为(50、40),那么电子设备则可以根据位置的差异生成内容为:“字框A21的位置的纵坐标向上调整10”的修改建议。
也例如,通过图像识别的方式,电子设备确定出元素X的字体为宋体,以及确定出设计元素X的字体为黑体,那么电子设备则可以根据字体的差异生成内容为:“将元素X的字体调整为黑体”的修改建议。
本实施例中,电子设备将针对每个差异的元素生成的修改建议打包成文档,那么软件工程师基于阅读该文档则可以获知哪些元素不匹配以及需要如何修改,这样就能够提高软件工程师修改应用程序的效率。
请继续参阅图1,于本实施例中,电子设备在确定出UI应用界面中与设计元素匹配的元素和不匹配的元素后,电子设备可以继续执行步骤S200:为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
本实施例中,作为为匹配的元素和不匹配的元素确定出各自对应的得分的第一种方式。
电子设备中可以预先为所有元素中的每个元素设置其在匹配情况下的得分以及在不匹配情况下的得分。其中,为保证结果的合理性,每个元素在匹配情况下的得分大于其在不匹配情况下的得分。故电子设备根据预设的得分,就可以为匹配的元素确定出对应的得分,以及为不匹配的元素也确定出对应的得分。
请继续请参阅图3和图4,下面结合前述例举继续说明,在预设的各元素的得分中,字框的位置匹配得分20分/不匹配得分0分、字框的尺寸匹配得分5分/不匹配得分0分、字符样式匹配5分/不匹配得分0分、字符大小匹配5分/不匹配得分0分、字符的字重程度匹配5分/不匹配得分0分、按钮的位置匹配得分10分/不匹配得分0分、按钮的尺寸匹配得分5分/不匹配得分0分。
那么针对上述预设的得分,电子设备可以确定出,字框A21的位置的得分为0分、字框A21的尺寸的得分为0分、字符A22的样式为宋体的得分为5分、字符A22的大小为12码的得分为5分、字符A22的字重程度为正常的得分为5分5、按钮A23的位置的得分为10分、按钮A23的尺寸的得分为5分、按钮A24的位置的得分为10分和按钮A24的尺寸的得分为0分。
本实施例中,除了采用第一种方式确定得分之外,还可以采用与第一种方式不同的第二种方式来为匹配的元素和不匹配的元素确定出各自对应的得分,下面将针对第二种方式进行详细说明。
由于电子设备可以对多款应用进行检测,且每款应用中元素的类型与其它应用中元素的类型可能是不同的,且就算两款不同应用中包含了同一种元素,但该元素对两款应用来说其重要程度可能也是不同的。例如,对于文档编辑的应用和视频播放的应用来说,这两款应用中都包含字框的尺寸这一元素。但字框的尺寸这一元素在文档编辑的应用中的重要性是要高于在视频播放的应用中的重要性。
在此基础上,为便于为每款应用确定的UI的还原程度更加合理,电子设备可以针对每款应用包含的所有元素而对应设置一个元素模板,该元素模板中包含了该款应用中每个元素在匹配时的得分和不匹配时的得分,且每个元素的得分是根据其在该款应用中起到的重要性而合理设置的,元素越重要则匹配的得分越高。也例如,文档编辑的应用中字框的尺寸这一元素是比较重要的,则文档编辑的应用对应的元素模板中该字框的尺寸的匹配得分可以为20分;反之,视频播放的应用中字框的尺寸这一元素则没有那么重要,则视频播放的应用对应的元素模板中该字框的尺寸的匹配得分可以为5分。
那么针对多款应用,电子设备中就可以设置多个元素模板。这样,电子设备可以根据UI应用界面或者UI设计界面的版本信息从多个元素模板中确定出与版本信息对应的元素模板,其中,该版本信息可以是UI应用界面或者UI设计界面的版本号,但并不限于此。因此,再根据该对应的元素模板中预设的每个元素在匹配时的得分和在不匹配时的得分,就可以为匹配的元素和不匹配的元素确定出各自对应的得分。
需要说明的是,确定元素得分的第一种方式与第二种方式的不同之处在于,确定元素得分的第一种方式可以是得分通用设置的方式,即就算一种元素在多种应用中被包含,但该种元素的匹配得分和不匹配得分均为一个。反之,确定元素得分的第二种方式就会相对的更加个性化和合理化。实际中,若要低成本的且快速地实现本方案,那么则可以实施确定元素得分的第一种方式;反之,若要准确度比较高,则可以实施确定元素得分的第二种方式。
本实施例中,除了采用第一种方式和第二种方式确定得分之外,还可以采用与第一种方式和第一种方式都不同的第三种方式来为匹配的元素和不匹配的元素确定出各自对应的得分,下面将针对第三种方式进行详细说明。
除了采用设置通用的得分和采用模板化得分的方式之外,由于对于每款应用来说,有些元素是重要的关键元素,而有些元素则是不那么重要的非关键元素,故本实施例还可以采用通过自动检测元素是关键元素还是非关键元素的方式来为元素分配得分。
示例性的,为便于电子设备确定元素是关键元素还是非关键元素,可以预选在应用程序或设计文件中对于元素属于关键元素还是非关键元素进行标识。这样电子设备通过对应用程序或设计文件中标识的检测,就可以确定该应用包含的哪些元素是关键元素,以及哪些元素又是非关键元素。在此基础上,电子设备就可以从匹配的元素中确定出属于关键元素的匹配的元素和属于非关键元素的匹配的元素,以及从不匹配的元素中确定出属于关键元素的不匹配的元素和属于非关键元素的不匹配的元素。
进一步的,电子设备中可以预设关键元素在匹配时的得分以及在不匹配时的得分,并且还可以预设非关键元素在匹配时的得分以及在不匹配时的得分。其中,为保证结果的合理性,关键元素在匹配时的得分高于非关键元素在匹配时的得分,而关键元素在不匹配时的得分不低于非关键元素在不匹配时的得分。那么在此基础上,根据预设的关键元素在匹配时的得分和在不匹配时的得分,以及根据预设的非关键元素在匹配时的得分和在不匹配时的得分,电子设备便可以为属于关键元素的匹配的元素、属于关键元素的不匹配的元素、属于非关键元素的匹配的元素和属于非关键元素的不匹配的元素确定出各自对应的得分。
请继续请参阅图3和图4,下面结合前述例举继续说明。
在各元素中,字框的位置和按钮的位置都可以是关键元素,除此之外,字框的尺寸、字符样式、字符大小、字符的字重程度和按钮的尺寸则都可以是非关键元素。故通过在设计文件中对字框的位置和按钮的位置进行标识,电子设备则可以确定字框的位置和按钮的位置是关键元素,并同时可以确定字框的尺寸、字符样式、字符大小、字符的字重程度和按钮的尺寸则是非关键元素。
根据电子设备预设的关键元素在匹配时的得分为20分/10分,预设的非关键元素在匹配时的得分为5分,以及预设的关键元素和非关键元素在不匹配时的得分为0分,那么电子设备可以确定出字框A21的位置的得分为0分、字框A21的尺寸的得分为0分、字符A22的样式为宋体的得分为5分、字符A22的大小为12码的得分为5分、字符A22的字重程度为正常的得分为5分、按钮A23的位置的得分为10分、按钮A23的尺寸的得分为5分、按钮A24的位置的得分为10分和按钮A24的尺寸的得分为0分。
请继续参阅图1,为每个元素确定出各自对应的得分后,电子设备可以继续步骤S300:根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
本实施例中,为便于用户直观的获知UI应用界面的还原程度,电子设备可以采用比值的方式来呈现还原度。
示例性的,电子设备将匹配的元素的得分和不匹配的元素的得分加总,确定出UI应用界面的总得分。以及,电子设备还可以将预设的每个元素在匹配时的得分加总,从而可以获得UI设计界面的预设总分。这样,电子设备将UI应用界面的总得分与UI设计界面的预设总分相比,就可以确定出UI应用界面较于UI设计界面的还原程度。
请继续请参阅图3和图4,下面结合前述例举继续说明。
由于预设的每个元素在匹配时的得分为:字框A21的位置在匹配时的得分为20分、字框A21的尺寸在匹配时的得分为5分、字符A22的样式在匹配时的得分为5分、字符A22的大小在匹配时的得分为5分、字符A22的字重程度在匹配时的得分为5分、按钮A23的位置在匹配时的得分为10分、按钮A23的尺寸在匹配时的得分为5分、按钮A24的位置在匹配时的得分为10分、按钮A24的尺寸在匹配时的得分为5分,故可以确定出预设总分为90分。
以及再根据实际中字框A21的位置的得分为0分、字框A21的尺寸的得分为0分、字符A22的样式为宋体的得分为5分、字符A22的大小为12码的得分为5分、字符A22的字重程度为正常的得分为5分、按钮A23的位置的得分为10分、按钮A23的尺寸的得分为5分、按钮A24的位置的得分为10分和按钮A24的尺寸的得分为0分,故可以确定出总得分为70分。
这样,UI应用界面A2较于UI设计界面A1的还原程度则可以是77.8%。
在本实施例中,电子设备通过为UI应用界面中与设计元素匹配的元素和不匹配的元素确定各自对应的得分,并最终基于得分而确定出UI应用界面的还原程度,可以使得用户直观且清楚的知道UI应用界面的整体设计情况的好坏。
请参阅图6,基于同一发明构思,本申请实施例提供了一种电子设备10,该电子设备10可以包括连接到网络的通信接口11、用于执行程序指令的一个或多个处理器12、总线13、和不同形式的存储器14,例如,磁盘、ROM、或RAM,或其任意组合。示例性地,计算机平台还可以包括存储在ROM、RAM、或其他类型的非暂时性存储介质、或其任意组合中的程序指令。
存储器14用于存储程序,处理器12用于调用并运行存储器14中的程序以执行前述的UI界面的检测方法。
请参阅图7,本申请实施例提供了一种UI界面的检测装置100,该UI界面的检测装置100应用于电子设备,该UI界面的检测装置100包括:
元素识别模块110,用于根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素。
得分确定模块120,用于为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
还原度确定模块130,用于根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
可选的,所述得分确定模块120,还用于根据预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
可选的,所述得分确定模块120,还用于根据所述UI应用界面或所述UI设计界面的版本信息,从预设的多个元素模板中确定出与所述版本信息对应的元素模板,其中,任意两个元素模板包含的元素不同;根据所述对应的元素模板中预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
可选的,所述元素识别模块110,还用于通过对生成所述UI设计界面而需要运行的UI设计文件进行检测,确定出所述UI设计界面中的关键元素和非关键元素;或通过对生成所述UI应用界面而需要运行的应用程序进行检测,确定出所述UI应用界面中的所述关键元素和所述非关键元素。
对应的,所述得分确定模块120,还用于从所述匹配的元素中确定出属于所述关键元素的匹配的元素和属于所述非关键元素的匹配的元素,以及从所述不匹配的元素中确定出属于所述关键元素的不匹配的元素和属于所述非关键元素的不匹配的元素;根据预设的所述关键元素在匹配时的得分和在不匹配时的得分,以及根据预设的所述非关键元素在匹配时的得分和在不匹配时的得分,为属于所述关键元素的匹配的元素、属于所述关键元素的不匹配的元素、属于所述非关键元素的匹配的元素和属于所述非关键元素的不匹配的元素确定出各自对应的得分。
其中,所述关键元素在匹配时的得分高于所述非关键元素在匹配时的得分,所述关键元素在不匹配时的得分不低于所述非关键元素在不匹配时的得分。
可选的,还原度确定模块130,还用于将所述匹配的元素的得分和所述不匹配的元素的得分加总,确定出总得分;将所述总得分与预设总分相比,确定出所述UI应用界面较于所述UI设计界面的还原程度。
可选的,所述元素识别模块110,还用于获取所述UI设计文件中与所述设计元素相关的设计参数,以及获取所述应用程序中与所述UI应用界面中的元素相关的应用参数;通过检测所述应用参数与所述设计参数是否匹配,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述应用参数与所述设计参数不匹配表示所述UI应用界面中对应的元素与所述设计元素不匹配。
可选的,所述元素识别模块110,还用于获取所述应用程序中与所述UI应用界面中的元素相关的程序模块,以及获取所述UI设计文件中与所述UI设计元素相关的文件模块;通过检测所述程序模块和所述文件模块之间是否存在关联,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述程序模块和所述文件模块不关联表示所述UI应用界面中对应的元素与所述设计元素不匹配。
可选的,所述元素识别模块110,还用于通过元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中的元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素。
可选的,所述元素为至少一种,所述元素识别模型为至少一个,每个所述元素识别模型用于检测对应的一种所述元素是否匹配,所述元素识别模块110,还用于根据每个所述元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中对应的一种元素而输出的检测结果,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,每个所述检测结果均用于表示所述UI应用界面中的一种元素与所述UI设计界面中对应一种设计元素是否匹配。
可选的,UI界面的检测装置100还可以包括:建议生成模块140,用于根据所述不匹配的元素与对应的所述设计元素的差异,生成对所述UI应用界面的修改建议。
需要说明的是,由于所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统、装置和单元的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
本申请一些实施例还提供了一种计算机可执行的非易失的程序代码的计算机可读储存介质,该计算机可读存储介质上存储有程序代码,该程序代码被计算机运行时执行上述任一实施方式的UI界面的检测装置的步骤。
详细地,该存储介质能够为通用的存储介质,如移动磁盘、硬盘等,该存储介质上的程序代码被运行时,能够执行上述施例的UI界面的检测装置的步骤。
本申请实施例所提供的UI界面的检测装置的程序代码产品,包括存储了程序代码的计算机可读存储介质,程序代码包括的指令可用于执行前面方法实施例中的方法,具体实现可参见方法实施例,在此不再赘述。
所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的系统和装置的具体工作过程,可以参考前述方法实施例中的对应过程,在此不再赘述。
综上所述,由于在确定出UI应用界面有哪些元素与UI设计界面不同后,还可以为匹配的元素和不匹配的元素确定出各自对应的得分,并基于得分来确定出UI应用界面较于UI设计界面的还原程度。由于还原程度能够直观的反应出UI应用界面在整体上还原的是好还是坏,这样用户在获知该还原程度后,用户就可以直观且清楚的知道UI应用界面的整体设计情况的好坏。
以上,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本申请揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以权利要求的保护范围为准。
Claims (10)
1.一种UI界面的检测方法,其特征在于,所述方法包括:
根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素;
为所述匹配的元素和所述不匹配的元素确定出各自对应的得分;
根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
2.根据权利要求1所述的UI界面的检测方法,其特征在于,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分,包括:
根据预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
3.根据权利要求2所述的UI界面的检测方法,其特征在于,根据预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分,包括:
根据所述UI应用界面或所述UI设计界面的版本信息,从预设的多个元素模板中确定出与所述版本信息对应的元素模板,其中,任意两个元素模板包含的元素不同;
根据所述对应的元素模板中预设的每个元素在匹配时的得分和在不匹配时的得分,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分。
4.根据权利要求1所述的UI界面的检测方法,其特征在于,在为所述匹配的元素和所述不匹配的元素确定出各自对应的得分之前,所述方法还包括:
通过对生成所述UI设计界面而需要运行的UI设计文件进行检测,确定出所述UI设计界面中的关键元素和非关键元素;或
通过对生成所述UI应用界面而需要运行的应用程序进行检测,确定出所述UI应用界面中的所述关键元素和所述非关键元素;
对应的,为所述匹配的元素和所述不匹配的元素确定出各自对应的得分,包括:
从所述匹配的元素中确定出属于所述关键元素的匹配的元素和属于所述非关键元素的匹配的元素,以及从所述不匹配的元素中确定出属于所述关键元素的不匹配的元素和属于所述非关键元素的不匹配的元素;
根据预设的所述关键元素在匹配时的得分和在不匹配时的得分,以及根据预设的所述非关键元素在匹配时的得分和在不匹配时的得分,为属于所述关键元素的匹配的元素、属于所述关键元素的不匹配的元素、属于所述非关键元素的匹配的元素和属于所述非关键元素的不匹配的元素确定出各自对应的得分;
其中,所述关键元素在匹配时的得分高于所述非关键元素在匹配时的得分,所述关键元素在不匹配时的得分不低于所述非关键元素在不匹配时的得分。
5.根据权利要求4所述的UI界面的检测方法,其特征在于,根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度,包括:
将所述匹配的元素的得分和所述不匹配的元素的得分加总,确定出总得分;
将所述总得分与预设总分相比,确定出所述UI应用界面较于所述UI设计界面的还原程度。
6.根据权利要求5所述的UI界面的检测方法,其特征在于,根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
获取所述UI设计文件中与所述设计元素相关的设计参数,以及获取所述应用程序中与所述UI应用界面中的元素相关的应用参数;
通过检测所述应用参数与所述设计参数是否匹配,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述应用参数与所述设计参数不匹配表示所述UI应用界面中对应的元素与所述设计元素不匹配。
7.根据权利要求5所述的UI界面的检测方法,其特征在于,根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
获取所述应用程序中与所述UI应用界面中的元素相关的程序模块,以及获取所述UI设计文件中与所述UI设计元素相关的文件模块;
通过检测所述程序模块和所述文件模块之间是否存在关联,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,所述程序模块和所述文件模块不关联表示所述UI应用界面中对应的元素与所述设计元素不匹配。
8.根据权利要求5所述的UI界面的检测方法,其特征在于,根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
通过元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中的元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素。
9.根据权利要求8所述的UI界面的检测方法,其特征在于,所述元素为至少一种,所述元素识别模型为至少一个,每个所述元素识别模型用于检测对应的一种所述元素是否匹配,通过元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中的元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,包括:
根据每个所述元素识别模型识别所述UI应用界面的图像和所述UI设计界面的图像中对应的一种元素而输出的检测结果,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素,其中,每个所述检测结果均用于表示所述UI应用界面中的一种元素与所述UI设计界面中对应一种设计元素是否匹配。
10.一种UI界面的检测装置,其特征在于,所述装置包括:
元素识别模块,用于根据UI设计界面中的设计元素,确定出UI应用界面中与所述设计元素匹配的元素和不匹配的元素;
得分确定模块,用于为所述匹配的元素和所述不匹配的元素确定出各自对应的得分;
还原度确定模块,用于根据所述得分,确定出所述UI应用界面较于所述UI设计界面的还原程度。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910287192.1A CN109992518A (zh) | 2019-04-10 | 2019-04-10 | Ui界面的检测方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910287192.1A CN109992518A (zh) | 2019-04-10 | 2019-04-10 | Ui界面的检测方法、装置、电子设备及存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN109992518A true CN109992518A (zh) | 2019-07-09 |
Family
ID=67133164
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910287192.1A Pending CN109992518A (zh) | 2019-04-10 | 2019-04-10 | Ui界面的检测方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN109992518A (zh) |
Cited By (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111045924A (zh) * | 2019-10-31 | 2020-04-21 | 口碑(上海)信息技术有限公司 | 用户界面视觉验收的处理方法、装置及设备 |
CN111124903A (zh) * | 2019-12-16 | 2020-05-08 | 惠州市德赛西威汽车电子股份有限公司 | 一种基于视觉系统的元素坐标自动化测试方法及存储介质 |
CN112035772A (zh) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | 页面评估方法、装置及设备 |
CN113722038A (zh) * | 2021-09-06 | 2021-11-30 | 北京字节跳动网络技术有限公司 | 一种数据匹配方法、装置、计算机设备以及存储介质 |
CN115328855A (zh) * | 2022-10-17 | 2022-11-11 | 北京尽微致广信息技术有限公司 | 文件还原度的评估方法、装置、存储介质和设备 |
Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20090276233A1 (en) * | 2008-05-05 | 2009-11-05 | Brimhall Jeffrey L | Computerized credibility scoring |
CN103425736A (zh) * | 2013-06-24 | 2013-12-04 | 腾讯科技(深圳)有限公司 | 一种网页信息识别方法、装置及系统 |
CN105808416A (zh) * | 2014-12-27 | 2016-07-27 | 南车株洲电力机车研究所有限公司 | 一种人机图形交互界面的自动化测试方法和系统 |
CN106502891A (zh) * | 2016-10-19 | 2017-03-15 | 广州视源电子科技股份有限公司 | 用户界面的自动检测方法和装置 |
CN107315680A (zh) * | 2017-05-26 | 2017-11-03 | 北京航空航天大学 | Hybrid移动应用用户界面的检测方法及系统 |
US20180157386A1 (en) * | 2016-12-05 | 2018-06-07 | Jiawen Su | System and Method for detection, exploration, and interaction of graphic application interface |
CN108984399A (zh) * | 2018-06-29 | 2018-12-11 | 上海连尚网络科技有限公司 | 检测界面差异的方法、电子设备和计算机可读介质 |
CN109086203A (zh) * | 2018-07-20 | 2018-12-25 | 百度在线网络技术(北京)有限公司 | 页面的检测方法和装置 |
-
2019
- 2019-04-10 CN CN201910287192.1A patent/CN109992518A/zh active Pending
Patent Citations (8)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20090276233A1 (en) * | 2008-05-05 | 2009-11-05 | Brimhall Jeffrey L | Computerized credibility scoring |
CN103425736A (zh) * | 2013-06-24 | 2013-12-04 | 腾讯科技(深圳)有限公司 | 一种网页信息识别方法、装置及系统 |
CN105808416A (zh) * | 2014-12-27 | 2016-07-27 | 南车株洲电力机车研究所有限公司 | 一种人机图形交互界面的自动化测试方法和系统 |
CN106502891A (zh) * | 2016-10-19 | 2017-03-15 | 广州视源电子科技股份有限公司 | 用户界面的自动检测方法和装置 |
US20180157386A1 (en) * | 2016-12-05 | 2018-06-07 | Jiawen Su | System and Method for detection, exploration, and interaction of graphic application interface |
CN107315680A (zh) * | 2017-05-26 | 2017-11-03 | 北京航空航天大学 | Hybrid移动应用用户界面的检测方法及系统 |
CN108984399A (zh) * | 2018-06-29 | 2018-12-11 | 上海连尚网络科技有限公司 | 检测界面差异的方法、电子设备和计算机可读介质 |
CN109086203A (zh) * | 2018-07-20 | 2018-12-25 | 百度在线网络技术(北京)有限公司 | 页面的检测方法和装置 |
Cited By (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111045924A (zh) * | 2019-10-31 | 2020-04-21 | 口碑(上海)信息技术有限公司 | 用户界面视觉验收的处理方法、装置及设备 |
CN111124903A (zh) * | 2019-12-16 | 2020-05-08 | 惠州市德赛西威汽车电子股份有限公司 | 一种基于视觉系统的元素坐标自动化测试方法及存储介质 |
CN111124903B (zh) * | 2019-12-16 | 2023-04-28 | 惠州市德赛西威汽车电子股份有限公司 | 一种基于视觉系统的元素坐标自动化测试方法及存储介质 |
CN112035772A (zh) * | 2020-07-27 | 2020-12-04 | 长沙市到家悠享网络科技有限公司 | 页面评估方法、装置及设备 |
CN113722038A (zh) * | 2021-09-06 | 2021-11-30 | 北京字节跳动网络技术有限公司 | 一种数据匹配方法、装置、计算机设备以及存储介质 |
CN115328855A (zh) * | 2022-10-17 | 2022-11-11 | 北京尽微致广信息技术有限公司 | 文件还原度的评估方法、装置、存储介质和设备 |
CN115328855B (zh) * | 2022-10-17 | 2023-01-24 | 北京尽微致广信息技术有限公司 | 文件还原度的评估方法、装置、存储介质和设备 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109992518A (zh) | Ui界面的检测方法、装置、电子设备及存储介质 | |
CN103518393B (zh) | 检测移动通信设备内容的系统和方法 | |
CN109033772B (zh) | 一种验证信息的输入方法及装置 | |
CN104915297B (zh) | 一种android设备的APP耗电量的自动化测试方法 | |
CN110597730B (zh) | 基于场景法的自动化测试用例生成方法及系统 | |
CN105468797B (zh) | 一种信息处理方法及装置 | |
CN105814539A (zh) | 用于代码虚拟化和远程进程调用生成的方法和装置 | |
CN109933521A (zh) | 基于bdd的自动化测试方法、装置、计算机设备及存储介质 | |
CN109325364A (zh) | 一种权限配置方法及电子设备 | |
CN113689574A (zh) | 数字孪生处理方法、装置和机器可读介质 | |
CN111859834A (zh) | 一种基于uvm的验证平台开发方法、系统、终端及存储介质 | |
CN109918338B (zh) | 安全芯片操作系统测试装置 | |
CN109885290A (zh) | 应用程序服务描述信息生成与发布方法、装置和存储介质 | |
CN109815635B (zh) | 一种锅炉mft自动设计系统及方法 | |
CN110362294A (zh) | 开发任务执行方法、装置、电子设备及存储介质 | |
CN109331469A (zh) | 一种基于编程语言录入关卡信息的方法以及电子设备 | |
CN115495188A (zh) | 混合开发app的主题颜色切换方法、装置、设备及介质 | |
CN110988661B (zh) | 一种fpga原型验证开发板时分分析系统、方法、介质及终端 | |
CN106599312A (zh) | 知识库的检验方法、装置及终端 | |
WO2013017054A1 (zh) | 自动生成用例脚本的方法和装置 | |
CN113010129A (zh) | 虚拟演播厅全流程多终端板书提取方法和装置 | |
CN109522210A (zh) | 接口测试参数分析方法、装置、电子装置及存储介质 | |
CN110333870A (zh) | Simulink模型变量分配的处理方法、装置及设备 | |
CN116501452B (zh) | 模型处理方法、仿真平台及电子设备和存储介质 | |
CN108984060A (zh) | 一种图标显示方法及终端设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190709 |
|
RJ01 | Rejection of invention patent application after publication |