CN114968458A - 一种ui设计的走查方法、装置、设备及设备 - Google Patents
一种ui设计的走查方法、装置、设备及设备 Download PDFInfo
- Publication number
- CN114968458A CN114968458A CN202210569804.8A CN202210569804A CN114968458A CN 114968458 A CN114968458 A CN 114968458A CN 202210569804 A CN202210569804 A CN 202210569804A CN 114968458 A CN114968458 A CN 114968458A
- Authority
- CN
- China
- Prior art keywords
- processed
- effect graph
- module
- actual effect
- modules
- 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
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000013461 design Methods 0.000 title claims abstract description 38
- 230000000694 effects Effects 0.000 claims abstract description 369
- 238000010586 diagram Methods 0.000 claims description 93
- 238000004364 calculation method Methods 0.000 claims description 10
- 238000011156 evaluation Methods 0.000 claims description 6
- 230000011218 segmentation Effects 0.000 claims description 5
- 238000011161 development Methods 0.000 description 15
- 230000018109 developmental process Effects 0.000 description 15
- 238000012827 research and development Methods 0.000 description 15
- 230000008569 process Effects 0.000 description 11
- 238000012360 testing method Methods 0.000 description 8
- 238000004891 communication Methods 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 230000004048 modification Effects 0.000 description 6
- 238000012790 confirmation Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 238000011160 research Methods 0.000 description 3
- 238000013473 artificial intelligence Methods 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 238000012937 correction Methods 0.000 description 2
- 230000003247 decreasing effect Effects 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 238000007726 management method Methods 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 230000004075 alteration Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000001514 detection method Methods 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000000750 progressive effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- 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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本说明书实施例公开了一种UI设计的走查方法、装置、设备及介质，包括：分别确定多个待处理的UI效果图模块相对于待处理的UI效果图原点的多个UI效果图模块绝对坐标；分别确定多个待处理的实际效果图模块相对于待处理的实际效果图原点的多个实际效果图模块绝对坐标；分别确定多个待处理的UI效果图模块与多个待处理的实际效果图模块之间的模块对应关系；根据模块对应关系，分别对比多个UI效果图模块绝对坐标与多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；根据模块绝对坐标误差值，对待处理的实际效果图进行评分，得到评分结果；若评分结果高于预先设定的阈值，待处理的实际效果图通过走查。
Description
技术领域
本说明书涉及计算机技术领域，尤其涉及一种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为本说明书一个或多个实施例提供的UI设计的走查流程图；
图3为本说明书一个或多个实施例提供的一种UI设计的走查装置的结构示意图；
图4为本说明书一个或多个实施例提供的一种UI设计的走查设备的结构示意图。
具体实施方式
本说明书实施例提供一种UI设计的走查方法、装置、设备及介质。
UI设计走查是项目流程中重要的一环，传统的开发模式中，研发工程师开发完成项目后提交UI走查，UI设计师在测试环境下针对不同业务场景对上线产品的测试UI进行人工走查。通常完整的进行一项设计走查，需要设计师机械重复的标注校对输出修改意见文档，并与研发工程师反复沟通确认，增加了沟通成本，降低了工作效率。
传统的模式中，UI走查环节存在以下几个问题：
(1)基础组件不统一，相同类型的问题反复出现，不同业务需要重复标注，效率低。在页面走查中，一是检查视觉上是否与设计稿一致，例如字体、字号、颜色、尺寸间距、按钮、反馈状态、切图等样式是否统一，是否符合视觉设计规范；检查图标、图形的清晰度和阴影的还原度等，保证产品体验的一致性。二是针对不同屏幕分辨率、不同浏览器下检查是否合理适配，保证产品的易读性和易操作性等。
(2)逻辑复杂场景较多，走查花费时间长，梳理问题文档复杂。一是根据任务流程对场景和状态进行排查，是否有缺少的场景和状态，保证产品体验的完整性。二是检查交互动作，确保操作的合理性。包括操作、反馈等交互控件的各种状态，极端、极限和出错的情况，默认值、悬停、点击状态等是否正确，以及新功能提示、热区的控制等，覆盖不同状态下的页面走查，保证产品体验的一致性。
(3)问题反复走查，重复沟通花费时间长，协作效率低。通常走查过程需要多次对接，工程师反复调整，设计师机械重复的标注校对整理问题文档，时间成本高，协作效率低下。
为了更好地提升产品的用户体验，本说明书实施例涉及一种自动进行UI设计的走查方法，该方法为：在研发工程师交付UI走查前，将测试链接上传至UI设计走查***，***将UI链接的效果图和研发测试链接的线上图分别进行图像提取和识别，自动校对并标注两者不一致的地方，不同类型的问题可以用不同的颜色标注进行说明，根据自动检测的结果进行评分，生成走查报告，研发根据自检报告进行再次修改，评分达到一定数值之后，自动通过UI走查或者流程进入UI设计师人工走查环节，进行人工的审核，直到到达一定的评分。此方法可以让UI设计师与研发工程师流程规范化，项目管理更便捷；提升协作效率，节约时间成本，同时避免UI设计师重复标注，重复整理问题文档。
为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本说明书保护的范围。
图1为本说明书一个或多个实施例提供的一种UI设计的走查方法的流程示意图，该流程可以由UI设计走查***执行，该***可以基于待处理的UI效果图，自动对待处理的实际效果图进行检查，无须人工进行繁琐的走查工作，极大提高了工作效率。流程中的某些输入参数或者中间结果允许人工干预调节，以帮助提高准确性。
本说明书实施例的方法流程步骤如下：
S102，获取待处理的UI效果图预先划分的多个待处理的UI效果图模块。
在本说明书实施例中，获取待处理的UI效果图预先划分的多个待处理的UI效果图模块前，可以根据所述待处理的UI效果图中的划分标记，将所述待处理的UI效果图划分成所述多个待处理的UI效果图模块；其中，所述划分标记包括文字标题、分界线、卡片边界中的一种或多种。划分待处理的UI效果图模块时可以通过自动识别的方式，识别后可以通过预先设定的划分规则对待处理的UI效果图进行划分。
S104，根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块。
在本说明书实施例中，待处理的实际效果图进行模块划分时，可以将待处理的UI效果图与待处理的实际效果图进行对比，进而将待处理的实际效果图进行模块划分。得到多个待处理的实际效果图模块与多个待处理的UI效果图模块存在一一对应的关系。
S106，分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标。
S108，分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标。
S110，分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系。
S112，根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值。
S114，根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果。
在本说明书实施例的上述过程中，是通过模块绝对坐标误差值，对待处理的实际效果图进行评分，为了使得评分结果更准确，可以将多个待处理的实际效果图模块与多个待处理的UI效果图模块分别进行细分，得到每个模块中的元素，针对每个模块中的元素，对待处理的实际效果图进行评分，得到评分结果。下面为具体的实施过程：
首先，根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果前，可以先在所述多个待处理的UI效果图模块中分别进行元素切分，得到多个待处理的UI效果图元素，并在所述多个待处理的实际效果图模块中分别进行元素切分，得到多个待处理的实际效果图元素；根据所述多个待处理的UI效果图元素与所述多个待处理的实际效果图元素，得到对应的元素绝对坐标误差值。
然后，在执行根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果时，可以根据所述模块绝对坐标误差值与所述元素绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果。
本说明书实施例的上述过程中，在执行根据所述多个待处理的UI效果图元素与所述多个待处理的实际效果图元素，得到对应的元素绝对坐标误差值时，可以先分别确定所述多个待处理的UI效果图元素相对于所述待处理的UI效果图原点的多个UI效果图元素绝对坐标；再分别确定所述多个待处理的实际效果图元素相对于所述待处理的实际效果图原点的多个实际效果图元素绝对坐标；然后，分别确定所述多个待处理的UI效果图元素与所述多个待处理的实际效果图元素的元素对应关系；最后，根据所述元素对应关系，分别对比所述多个UI效果图元素绝对坐标与所述多个实际效果图元素绝对坐标，得到对应的元素绝对坐标误差值。
为了使得评分结果更准确，可以引入UI效果图模块的尺寸信息与实际效果图模块的尺寸信息，针对每个UI效果图模块与实际效果图模块的尺寸信息，对待处理的实际效果图进行评分，得到评分结果。下面为具体的实施过程：
首先，根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果前，可以先分别确定所述多个待处理的UI效果图模块的尺寸信息；分别确定所述多个待处理的实际效果图模块的尺寸信息；之后，根据所述模块对应关系，分别对比所述多个待处理的UI效果图模块的尺寸信息与所述多个待处理的实际效果图模块的尺寸信息，得到对应的模块尺寸信息误差值。
然后，在执行根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果时，可以根据所述模块绝对坐标误差值与所述模块尺寸信息误差值，对所述待处理的实际效果图进行评分，得到评分结果。
为了使得评分结果更准确，可以引入UI效果图元素的尺寸信息与实际效果图元素的尺寸信息，针对每个UI效果图元素与实际效果图元素的尺寸信息，对待处理的实际效果图进行评分，得到评分结果。下面为具体的实施过程：
首先，根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果前，可以先分别确定所述多个待处理的UI效果图元素的尺寸信息；分别确定所述多个待处理的实际效果图元素的尺寸信息；之后，根据所述元素对应关系，分别对比所述多个待处理的UI效果图元素的尺寸信息与所述多个待处理的实际效果图元素的尺寸信息，得到对应的元素尺寸信息误差值；
然后，在执行根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果时，可以根据所述模块绝对坐标误差值、所述元素绝对坐标误差值、所述模块尺寸信息误差值与所述元素尺寸信息误差值，对所述待处理的实际效果图进行评分，得到评分结果。
在本说明书实施例中，在根据所述模块绝对坐标误差值、所述元素绝对坐标误差值、所述模块尺寸信息误差值与所述元素尺寸信息误差值，对所述待处理的实际效果图进行评分时，可以先根据所述模块绝对坐标误差值与所述元素绝对坐标误差值确定所述待处理的实际效果图与UI效果图之间的位置偏差；再根据所述模块尺寸信息误差值与所述元素尺寸信息误差值确定所述待处理的实际效果图与UI效果图之间的尺寸偏差；最后，可以将所述待处理的实际效果图与UI效果图之间的位置偏差，以及所述待处理的实际效果图与UI效果图之间的尺寸偏差输入预先设定的自动打分***，以对所述待处理的实际效果图进行评分。
S116，若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
在本说明书实施例中，可以解决Web界面开发还原度低、设计走查低效的问题，基于图像识别技术，实现UI设计自动走查，减少设计师在走查中机械重复的标注校对整理工作，减少漏标以及与工程师反复沟通确认的时间成本，帮助工程师高效又精准的还原设计稿，提高协作效率，实现高质量的项目还原效果，保障更极致的用户体验。
需要说明的是，本说明书实施例重在制定一种快速自动走查UI界面的方法，其核心功能是将UI效果图和研发交付的实际效果图进行图片划模块切图对比，通过模块的计算得分情况，得出走查结果，智能指导研发进行自行纠错修改，达到高效率的走查结果，具体可以参见图2示出的UI设计的走查流程图，具体步骤可以参见下面的内容：
一、UI效果图与实际研发效果图对比
UI将设计完成的稿件通过导出标注规范，上传至服务器，生成标注链接，研发根据UI的标注进行开发，开发完成后，***分别获取UI(UI效果图)和产品交付制品(实际研发效果图)，并通过图像识别技术分别进行切分：
***将UI效果图与研发实际效果图分别进行模块化划分并做区域识别切分，划分可以依据文字标题、分界线、卡片边界；
模块内元素识别：剔除各模块内元素周边的无内容区域，将模块元素单独切分；
定义各模块相对于画板原点的绝对坐标(UI效果图模块时相对于UI效果图中预设原点，实际研发效果图模块时相对于实际研发效果图中预设原点)，UI效果图可以用A(XA,YA)表示，实际研发效果图可以用A(xA,yA)表示；模块内各元素相对于画板原点的绝对坐标(UI效果图元素时相对于UI效果图中预设原点，实际研发效果图元素时相对于实际研发效果图中预设原点)，UI效果图可以用Ai(XAi,YAi)表示，实际研发效果图可以用Ai(xAi,yAi)表示；
对比各模块和各模块内元素的宽(UI效果图W，研发实际图w)、高(UI效果图H，研发实际图h)尺寸；
将切分好后的各元素两两一组分别对比，对比方向重点在于模块和元素的尺寸、绝对坐标误差值、相对坐标误差值。文字走查方面还涉及文字字体、文字颜色、文字字号的对比。
二、AI自动打分***
计算UI效果图与实际效果图中各模块的绝对位置误差值，以X轴正方向、Y轴负方向为增向，UI效果图坐标值减研发实际图坐标值，计算公式为：
ΔXA＝XA-xA，ΔYA＝YA-yA；
模块大小与模块内各元素尺寸差值计算公式为：
ΔWA＝WA-wA
ΔHA＝HA-hA
模块内各元素的绝对坐标差值计算方法同上；
UI走查总分为各模块得分的平均分，根据图片划分的模块总数对每个模块进行评分，每个模块的初始分数Si＝100，根据减分规则向下减，最终走查得分：
模块减分规则中可以设定M为扣分数，计算公式为：
在上述扣分数的计算公式中，分别从长度偏差、宽度偏差与位置偏差计算扣分数，位置偏差中的分母8是根据栅格***中的8像素原则。
需要说明的是，上述的扣分数公式并未涉及各模块的元素，同理，可以将扣分数的计算公式加入各模块的元素相关的部分。
模块减分规则除了上述规定以外，针对不同元素还有下述扣分原则R：
文字：字体不对，扣3分；字号不对，扣2分
颜色：色值不对，扣2分；
分界线：当h>H时，R＝h/H-1；当h<H时，R＝(h/H)-1-1；当h＝H时，R＝0；
模块综合得分：
本说明书实施例在确定模块综合得分后，输出走查报告，具体为：
(1)可以在实际研发效果图的左侧扩展开一列得分详情，页面左上角位置标注整体页面评分
(2)可以在每个模块的左上方显示该模块的得分值；
(3)可以将各模块对比的ΔX、ΔY值和模块内元素的坐标标注于右侧研发图上，即该模块研发需要修改的横纵坐标差值，正值即应向右/下偏移，负值则应向左/上偏移；
(4)字体、颜色等细节可以单独标注。
本说明书实施例可以根据上述的评分判断走查结果，具体为:
当页面总分95分以上且单个模块得分均在80分以上，可以直接通过UI走查；
当页面总分95分以上但有单个模块得分在70-80之间的、总分80-94分且单个模块得分均在70分以上的，则可以进入人工走查环节；
当页面总分80分以下存在单个模块得分在70以下的，则需要研发根据输出的走查报告进行调整，再次走一遍自动走查流程，直至得分超过80后开启下一环节。
本说明书实施例的实施人工走查环节时，具体为：
UI设计师人工对比测试链接里UI效果图与实际效果图，对智能***存在的不合理问题进行纠正，结合项目的轻重缓急，对开发的效果图进行整体评分。当整体评分达到95分以上时，直接通过UI走查；当整体评分小于90分时，则需要给出UI调整意见，研发根据输出的人工意见进行调整，再次自动走查，直至评分达到95分以上通过UI走查。
本说明书实施例通过上述方案，可以使得流程规范化，项目管理更便捷：UI计师和研发工程师往往手里有多条项目同步进行，将UI走查进行自动流程规范化后，将减少了多个项目并行带来的冗乱，提高了人的工作效率。同时，可以自动输出走查报告，避免重复标注，重复整理问题文档：工程师开发完成后，可以将测试走查链接与UI标注链接进行图片模块切图对比，通过模块的计算得分情况，得出走查结果，智能知道研发自行进行纠错修改，避免人工反复走查重复标注，帮助工程师高效又精准的还原设计稿。
本说明书实施例可以提升协作效率，节约时间成本。UI设计的走查方法，可以减少设计师在走查中机械重复的标注校对整理工作，减少漏标以及与工程师反复沟通确认的时间成本，帮助工程师高效又精准的还原设计稿(UI效果图)，提高协作效率，实现高质量的项目还原效果。
与上述实施例相对应的是，图3为本说明书一个或多个实施例提供的一种UI设计的走查装置的结构示意图，包括：获取单元302、模块划分单元304、第一坐标确定单元306、第二坐标确定单元308、对应关系确定单元310、误差值计算单元312、结果单元314与走查评判单元316。
获取单元302，获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
模块划分单元304，根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
第一坐标确定单元306，分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
第二坐标确定单元308，分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
对应关系确定单元310，分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
误差值计算单元312，根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
结果单元314，根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
走查评判单元316，若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
与上述实施例相对应的是，图4为本说明书一个或多个实施例提供的一种UI设计的走查设备的结构示意图，包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
本说明书一个或多个实施例提供的一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：
获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
以上所述仅为本说明书的一个或多个实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书的一个或多个实施例可以有各种更改和变化。凡在本说明书的一个或多个实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。
Claims (10)
1.一种UI设计的走查方法，其特征在于，包括：
获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
2.根据权利要求1所述的方法，其特征在于，所述根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果前，所述方法还包括：
在所述多个待处理的UI效果图模块中分别进行元素切分，得到多个待处理的UI效果图元素，并在所述多个待处理的实际效果图模块中分别进行元素切分，得到多个待处理的实际效果图元素；
根据所述多个待处理的UI效果图元素与所述多个待处理的实际效果图元素，得到对应的元素绝对坐标误差值；
所述根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果，具体包括：
根据所述模块绝对坐标误差值与所述元素绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果。
3.根据权利要求2所述的方法，其特征在于，所述根据所述多个待处理的UI效果图元素与所述多个待处理的实际效果图元素，得到对应的元素绝对坐标误差值，具体包括：
分别确定所述多个待处理的UI效果图元素相对于所述待处理的UI效果图原点的多个UI效果图元素绝对坐标；
分别确定所述多个待处理的实际效果图元素相对于所述待处理的实际效果图原点的多个实际效果图元素绝对坐标；
分别确定所述多个待处理的UI效果图元素与所述多个待处理的实际效果图元素的元素对应关系；
根据所述元素对应关系，分别对比所述多个UI效果图元素绝对坐标与所述多个实际效果图元素绝对坐标，得到对应的元素绝对坐标误差值。
4.根据权利要求3所述的方法，其特征在于，所述根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果前，所述方法还包括：
分别确定所述多个待处理的UI效果图模块的尺寸信息；
分别确定所述多个待处理的实际效果图模块的尺寸信息；
根据所述模块对应关系，分别对比所述多个待处理的UI效果图模块的尺寸信息与所述多个待处理的实际效果图模块的尺寸信息，得到对应的模块尺寸信息误差值；
所述根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果，具体包括：
根据所述模块绝对坐标误差值与所述模块尺寸信息误差值，对所述待处理的实际效果图进行评分，得到评分结果。
5.根据权利要求4所述的方法，其特征在于，所述根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果前，所述方法还包括：
分别确定所述多个待处理的UI效果图元素的尺寸信息；
分别确定所述多个待处理的实际效果图元素的尺寸信息；
根据所述元素对应关系，分别对比所述多个待处理的UI效果图元素的尺寸信息与所述多个待处理的实际效果图元素的尺寸信息，得到对应的元素尺寸信息误差值；
所述根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果，具体包括：
根据所述模块绝对坐标误差值、所述元素绝对坐标误差值、所述模块尺寸信息误差值与所述元素尺寸信息误差值，对所述待处理的实际效果图进行评分，得到评分结果。
6.根据权利要求5所述的方法，其特征在于，所述根据所述模块绝对坐标误差值、所述元素绝对坐标误差值、所述模块尺寸信息误差值与所述元素尺寸信息误差值，对所述待处理的实际效果图进行评分，具体包括：
根据所述模块绝对坐标误差值与所述元素绝对坐标误差值确定所述待处理的实际效果图与UI效果图之间的位置偏差；
根据所述模块尺寸信息误差值与所述元素尺寸信息误差值确定所述待处理的实际效果图与UI效果图之间的尺寸偏差；
将所述待处理的实际效果图与UI效果图之间的位置偏差，以及所述待处理的实际效果图与UI效果图之间的尺寸偏差输入预先设定的自动打分***，以对所述待处理的实际效果图进行评分。
7.根据权利要求1所述的方法，其特征在于，所述获取待处理的UI效果图预先划分的多个待处理的UI效果图模块前，所述方法还包括：
根据所述待处理的UI效果图中的划分标记，将所述待处理的UI效果图划分成所述多个待处理的UI效果图模块；其中，所述划分标记包括文字标题、分界线、卡片边界中的一种或多种。
8.一种UI设计的走查装置，其特征在于，包括：
获取单元，获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
模块划分单元，根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
第一坐标确定单元，分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
第二坐标确定单元，分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
对应关系确定单元，分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
误差值计算单元，根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
结果单元，根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
走查评判单元，若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
9.一种UI设计的走查设备，其特征在于，包括：
至少一个处理器；以及，
与所述至少一个处理器通信连接的存储器；其中，
所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
10.一种非易失性计算机存储介质，其特征在于，存储有计算机可执行指令，所述计算机可执行指令设置为：
获取待处理的UI效果图预先划分的多个待处理的UI效果图模块；
根据所述多个待处理的UI效果图模块将待处理的实际效果图进行模块划分，得到多个待处理的实际效果图模块；
分别确定所述多个待处理的UI效果图模块相对于所述待处理的UI效果图原点的多个UI效果图模块绝对坐标；
分别确定所述多个待处理的实际效果图模块相对于所述待处理的实际效果图原点的多个实际效果图模块绝对坐标；
分别确定所述多个待处理的UI效果图模块与所述多个待处理的实际效果图模块之间的模块对应关系；
根据所述模块对应关系，分别对比所述多个UI效果图模块绝对坐标与所述多个实际效果图模块绝对坐标，得到对应的模块绝对坐标误差值；
根据所述模块绝对坐标误差值，对所述待处理的实际效果图进行评分，得到评分结果；
若所述评分结果高于预先设定的阈值，所述待处理的实际效果图通过走查。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210569804.8A CN114968458A (zh) | 2022-05-24 | 2022-05-24 | 一种ui设计的走查方法、装置、设备及设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210569804.8A CN114968458A (zh) | 2022-05-24 | 2022-05-24 | 一种ui设计的走查方法、装置、设备及设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114968458A true CN114968458A (zh) | 2022-08-30 |
Family
ID=82955942
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210569804.8A Pending CN114968458A (zh) | 2022-05-24 | 2022-05-24 | 一种ui设计的走查方法、装置、设备及设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114968458A (zh) |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150370688A1 (en) * | 2014-06-20 | 2015-12-24 | Vmware, Inc. | Automatic updating of graphical user interface element locators based on dimension comparison |
| CN109815156A (zh) * | 2019-02-28 | 2019-05-28 | 北京百度网讯科技有限公司 | 页面中视觉元素的展示测试方法、装置、设备和存储介质 |
| CN111045924A (zh) * | 2019-10-31 | 2020-04-21 | 口碑(上海)信息技术有限公司 | 用户界面视觉验收的处理方法、装置及设备 |
| CN113485707A (zh) * | 2021-07-26 | 2021-10-08 | 亿览在线网络技术（北京）有限公司 | 一种ui界面自动校对的方法 |
| CN114185544A (zh) * | 2021-12-06 | 2022-03-15 | 北京达佳互联信息技术有限公司 | 页面数据处理方法、装置、电子设备及存储介质 |
-
2022
- 2022-05-24 CN CN202210569804.8A patent/CN114968458A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150370688A1 (en) * | 2014-06-20 | 2015-12-24 | Vmware, Inc. | Automatic updating of graphical user interface element locators based on dimension comparison |
| CN109815156A (zh) * | 2019-02-28 | 2019-05-28 | 北京百度网讯科技有限公司 | 页面中视觉元素的展示测试方法、装置、设备和存储介质 |
| CN111045924A (zh) * | 2019-10-31 | 2020-04-21 | 口碑(上海)信息技术有限公司 | 用户界面视觉验收的处理方法、装置及设备 |
| CN113485707A (zh) * | 2021-07-26 | 2021-10-08 | 亿览在线网络技术（北京）有限公司 | 一种ui界面自动校对的方法 |
| CN114185544A (zh) * | 2021-12-06 | 2022-03-15 | 北京达佳互联信息技术有限公司 | 页面数据处理方法、装置、电子设备及存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| PENGFEI JI ETC.: "Design of an Automatic Testing System for Camera UI Test", 2020 39TH CHINESE CONTROL CONFERENCE (CCC), 9 September 2020 (2020-09-09) * |
| 陈宇 等: "LKJ人机界面单元显示字符识别的方法", 铁路计算机应用, vol. 28, no. 8, 25 August 2019 (2019-08-25) * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8693790B2 (en) | Form template definition method and form template definition apparatus | |
| US8000529B2 (en) | System and method for creating an editable template from a document image | |
| CN112528863A (zh) | 表格结构的识别方法、装置、电子设备及存储介质 | |
| CN114266773B (zh) | 显示面板缺陷定位方法、装置、设备及存储介质 | |
| CN113343740B (zh) | 表格检测方法、装置、设备和存储介质 | |
| CN112115774A (zh) | 结合rpa和ai的文字识别方法、装置、电子设备和存储介质 | |
| US20210406615A1 (en) | Learning device, classification device, learning method, classification method, learning program, and classification program | |
| US20220415008A1 (en) | Image box filtering for optical character recognition | |
| CN112883926B (zh) | 表格类医疗影像的识别方法及装置 | |
| CN113537184A (zh) | Ocr模型训练方法、装置、计算机设备、存储介质 | |
| CN112446262A (zh) | 文本分析方法、装置、终端和计算机可读存储介质 | |
| CN110738092A (zh) | 一种***文本检测方法 | |
| CN114463767A (zh) | 信用证识别方法、装置、计算机设备和存储介质 | |
| US11906441B2 (en) | Inspection apparatus, control method, and program | |
| JP5538812B2 (ja) | 画像処理装置、画像処理方法及びプログラム | |
| CN114782974A (zh) | 表格识别方法、***、智能终端及计算机可读存储介质 | |
| CN112464626B (zh) | Pdf文档的图表提取方法、电子设备和存储介质 | |
| CN113591433A (zh) | 一种文本排版方法、装置、存储介质及计算机设备 | |
| CN114968458A (zh) | 一种ui设计的走查方法、装置、设备及设备 | |
| CN112084103B (zh) | 界面测试方法、装置、设备和介质 | |
| CN111160144A (zh) | 电气图纸图文结合的元器件识别方法、***及存储介质 | |
| CN115620329A (zh) | 一种基于人工智能的图章跑偏智能识别方法 | |
| CN113158632B (zh) | Cad图纸的表格重建方法和计算机可读存储介质 | |
| Möri et al. | Automatic interpretation and execution of manual corrections on text documents | |
| CN110135425A (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 |