Page design display method and device, electronic equipment and storage medium

CN117472758BActive Publication Date: 2026-10-27CHINA UNITED NETWORK COMM GRP CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202311439803.2
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2023-11-01
Publication Date
2026-10-27
Estimated Expiration
2043-11-01

AI Technical Summary

Technical Problem

[0005]本申请提供一种页面设计显示方法、装置、电子设备及存储介质,用以解决页面设计验证时效率低、效果差等问题

Benefits of technology

[0051]本申请提供的页面设计显示方法、装置、电子设备及存储介质,通过在页面设计系统的显示单元中显示待分析页面、以及待分析页面中的待分析内容截图,其中,待分析内容截图根据待分析页面中的鼠标指针位置确定;对待分析内容截图进行特征提取处理,得到待分析内容截图的特征信息,特征信息包括截图大小信息、截图字体信息、截图字号信息、截图颜色信息中的至少一种信息;根据特征信息的类型,从规则库中确定目标判断规则,其中,当特征信息的类型为截图大小信息时,目标判断规则为大小规则,当特征信息的类型为截图字体信息时,目标判断规则为字体规则,当特征信息的类型为截图字号信息时,目标判断规则为字号规则,当特征信息的类型为截图颜色信息时,目标判断规则为颜色规则;根据目标判断规则,对特征信息进行判断,得到判断结果信息;根据判断结果信息,生成并在显示单元中显示页面设计分析报表的手段,使得在选取到待分析内容截图后提取特征信息,根据特征信息的类型在规则库中得到目标判断规则,再根据目标判断规则对特征信息进行判断,得到判断结果信息,并根据判断结果信息生成页面设计分析报告,实现提高现有页面分析方法的效果。

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN117472758B_ABST
    Figure CN117472758B_ABST
Patent Text Reader

Abstract

The application provides a page design display method and device, electronic equipment and storage medium. The method comprises the following steps: displaying a to-be-analyzed page and a to-be-analyzed content screenshot in the display unit of a page design system, wherein the to-be-analyzed content screenshot is determined according to the position of a mouse pointer in the to-be-analyzed page; performing feature extraction processing on the to-be-analyzed content screenshot to obtain feature information of the to-be-analyzed content screenshot, wherein the feature information comprises at least one of screenshot size information, screenshot font information, screenshot font size information and screenshot color information; determining a target judgment rule from a rule library according to the type of the feature information; judging the feature information according to the target judgment rule to obtain judgment result information; and generating and displaying a page design analysis report in the display unit according to the judgment result information. The method improves the efficiency of verifying page design.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a page design and display method, apparatus, electronic device and storage medium. Background Technology

[0002] In order to meet the requirements of neat and beautiful page display and unified style, enterprises will issue page design specifications for their own products, which will be verified and checked by the R&D department.

[0003] Currently, existing technologies primarily employ two verification methods: manual verification and automated detection. Manual verification requires significant human resources and suffers from incomplete verification and low efficiency. Automated detection judges the compliance and rationality of the page design based on the consistency between the delivered page and the design page. If non-compliance or unreasonable situations exist during the page design stage, it is difficult to verify using automated detection methods.

[0004] However, existing page design display methods suffer from poor page design validation. Summary of the Invention

[0005] This application provides a page design display method, device, electronic device, and storage medium to solve the problems of low efficiency and poor effect during page design verification.

[0006] Firstly, this application provides a page design and display method, including:

[0007] The page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed are displayed in the display unit of the page design system. The screenshot of the content to be analyzed is determined according to the position of the mouse pointer on the page to be analyzed.

[0008] Feature extraction processing is performed on the screenshot of the content to be analyzed to obtain the feature information of the screenshot. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information.

[0009] Based on the type of feature information, target judgment rules are determined from the rule base. Specifically, when the type of feature information is screenshot size information, the target judgment rule is the size rule; when the type of feature information is screenshot font information, the target judgment rule is the font rule; when the type of feature information is screenshot font size information, the target judgment rule is the font size rule; and when the type of feature information is screenshot color information, the target judgment rule is the color rule.

[0010] Based on the target judgment rules, the feature information is judged to obtain the judgment result information;

[0011] Based on the judgment results, a page design analysis report is generated and displayed in the display unit.

[0012] In this embodiment of the application, the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed are displayed in the display unit of the page design system, including:

[0013] In response to the user's selection of the page to be analyzed, determine the mouse pointer position and the coordinates of the mouse pointer position;

[0014] Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot;

[0015] According to the preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result;

[0016] Based on the matching results, the screenshot of the page was determined to be the screenshot of the content to be analyzed.

[0017] In this embodiment of the application, the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed are displayed in the display unit of the page design system, including:

[0018] The mouse pointer on the page to be analyzed is scanned at preset time intervals to obtain the scan results;

[0019] Based on the scan results, determine the mouse pointer position and its coordinates;

[0020] Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot;

[0021] According to the preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result;

[0022] Based on the matching results, the screenshot of the page was determined to be the screenshot of the content to be analyzed.

[0023] In this embodiment of the application, the pixel content in the pixel information is matched according to a preset pixel content rule to obtain a matching result, including:

[0024] The similarity of corresponding pixels is determined by matching the pixel information in the pixel content with the corresponding pixel information in the pixel content rules.

[0025] The matching result is obtained based on the similarity of the corresponding pixels.

[0026] In this embodiment of the application, after matching the pixel content in the pixel information according to the preset pixel content rules to obtain the matching result, the method further includes:

[0027] If the matching result does not meet the matching requirements, the pixel information in the pixel content and the corresponding pixel information in the pixel content rule are desaturated based on the RGB values ​​to obtain the pixel information in the desaturated pixel content and the corresponding pixel information in the desaturated pixel content rule.

[0028] The pixel information in the desaturated pixel content is matched with the corresponding pixel information in the desaturated pixel content rules to obtain the desaturation matching result;

[0029] If the desaturation matching result meets the matching requirements, then the screenshot of the page is determined to be a screenshot of the content to be analyzed;

[0030] If the desaturation matching result does not meet the matching requirements, the pixel information in the desaturation pixel content and the corresponding pixel information in the desaturation pixel content rule are desaturated based on RGB values ​​until the target desaturation matching result meets the matching requirements, and the page screenshot is determined to be the screenshot of the content to be analyzed.

[0031] If the target desaturation matching result still does not meet the matching requirements, it is determined that the screenshot of the content to be analyzed failed to be obtained.

[0032] In this embodiment of the application, feature information is judged according to target judgment rules to obtain judgment result information, including:

[0033] Based on the target judgment rules, the feature information is judged to obtain the initial judgment result information;

[0034] If the initial judgment result information represents feature information that satisfies the target judgment rule, then the feature information is scored to obtain the first score information;

[0035] If the initial judgment result information characterization feature information does not meet the target judgment rule, then the second scoring information is obtained;

[0036] Based on the initial judgment result information, the first scoring information, and the second scoring information, the judgment result information is obtained.

[0037] In this embodiment of the application, a page design analysis report is generated and displayed in the display unit based on the judgment result information, including:

[0038] Based on the first scoring information in the judgment result information, the comprehensive scoring information of the screenshot of the content to be analyzed is obtained;

[0039] The comprehensive score information is compared with the preset standard score information to obtain qualified and unqualified comprehensive score information;

[0040] Based on the judgment results, the pass / fail comprehensive score, and the fail / unqualified comprehensive score, a page design analysis report is generated.

[0041] Secondly, this application provides a page design display device, comprising:

[0042] The display module displays the page to be analyzed and screenshots of the content to be analyzed on the page to be analyzed in the display unit of the page design system. The screenshots of the content to be analyzed are determined based on the position of the mouse pointer on the page to be analyzed.

[0043] The extraction module is used to perform feature extraction processing on the screenshot of the content to be analyzed, and obtain the feature information of the screenshot of the content to be analyzed. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information.

[0044] The determination module is used to determine the target judgment rule from the rule base based on the type of feature information. Specifically, when the type of feature information is screenshot size information, the target judgment rule is the size rule; when the type of feature information is screenshot font information, the target judgment rule is the font rule; when the type of feature information is screenshot font size information, the target judgment rule is the font size rule; and when the type of feature information is screenshot color information, the target judgment rule is the color rule.

[0045] The module is used to judge feature information according to target judgment rules and obtain judgment result information;

[0046] The generation module is used to generate and display page design analysis reports in the display unit based on the judgment results.

[0047] Thirdly, this application provides an electronic device, including: a processor, and a memory communicatively connected to the processor;

[0048] The memory stores the instructions that the computer executes;

[0049] The processor executes computer execution instructions stored in the memory to implement the data filling and display method of this application embodiment.

[0050] Fourthly, a computer-readable storage medium stores computer-executable instructions that, when executed by a processor, are used to implement the methods of embodiments of this application.

[0051] The page design display method, apparatus, electronic device, and storage medium provided in this application display a page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system. The screenshot of the content to be analyzed is determined based on the mouse pointer position on the page to be analyzed. Feature extraction processing is performed on the screenshot of the content to be analyzed to obtain feature information of the screenshot. The feature information includes at least one of screenshot size information, screenshot font information, screenshot font size information, and screenshot color information. Based on the type of feature information, a target judgment rule is determined from a rule base. Specifically, when the type of feature information is screenshot size information, the target judgment rule is a size rule; when the type of feature information is screenshot font size information, the target judgment rule is a size rule; and when the type of feature information is screenshot font size information, the target judgment rule is a size rule. When the target judgment rule is font rule, the target judgment rule is font size rule when the type of feature information is screenshot font size information, and the target judgment rule is color rule when the type of feature information is screenshot color information. Based on the target judgment rule, the feature information is judged to obtain the judgment result information. Based on the judgment result information, a page design analysis report is generated and displayed in the display unit. This method improves the effectiveness of existing page analysis methods by extracting feature information after selecting a screenshot of the content to be analyzed, obtaining the target judgment rule from the rule base based on the type of feature information, judging the feature information according to the target judgment rule, obtaining the judgment result information, and generating a page design analysis report based on the judgment result information. Attached Figure Description

[0052] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0053] Figure 1 A schematic diagram illustrating a page design and display method provided in an embodiment of this application;

[0054] Figure 2 A flowchart illustrating the page design and display method provided in this application embodiment;

[0055] Figure 3 A flowchart illustrating another page design and display method provided in an embodiment of this application;

[0056] Figure 4 This is a schematic diagram of the structure of the page design display device provided in the embodiments of this application;

[0057] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0058] The accompanying drawings illustrate specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to particular embodiments. Detailed Implementation

[0059] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0060] In existing technologies, page design inspection is generally carried out using automated inspection devices. For example, after receiving the delivered page, it is directly compared with the design page, and the passability of the page design is judged based on the consistency results. However, this method of comparison can only detect errors that occur during the implementation stage of page design and cannot address them in a timely manner.

[0061] This application embodiment can obtain feature information from a screenshot containing content to be analyzed, filter the rule base according to the type of feature information, and judge the screenshot according to the target judgment rules obtained from the filter, thereby obtaining a page design analysis report, which can quickly and accurately evaluate and detect the current page information.

[0062] This application provides a page design and display method, apparatus, electronic device, and storage medium.

[0063] Figure 1 This is a schematic diagram illustrating a page design and display method provided in an embodiment of this application. Figure 1As shown, the execution entity for this page design and display method can be a server. The server can be a device such as a mobile phone, tablet, or computer. This embodiment does not impose any particular restrictions on the implementation method of the execution subject, as long as the execution subject can display the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system. The screenshot of the content to be analyzed is determined according to the mouse pointer position on the page to be analyzed. Feature extraction processing is performed on the screenshot of the content to be analyzed to obtain feature information of the screenshot of the content to be analyzed. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information. According to the type of feature information, a target judgment rule is determined from the rule base. When the type of feature information is screenshot size information, the target judgment rule is the size rule; when the type of feature information is screenshot font information, the target judgment rule is the font rule; when the type of feature information is screenshot font size information, the target judgment rule is the font size rule; and when the type of feature information is screenshot color information, the target judgment rule is the color rule. According to the target judgment rule, the feature information is judged to obtain judgment result information. According to the judgment result information, a page design analysis report is generated and displayed in the display unit.

[0064] Page design refers to the process of planning website functions based on the information that a company wants to convey to visitors, followed by the design and beautification of the pages.

[0065] Figure 2 This is a flowchart illustrating the page design and display method provided in this embodiment. The executing entity of this method can be a server or other servers; this embodiment does not impose any special limitations here. Figure 2 As shown, this method may include:

[0066] S201. Display the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system. The screenshot of the content to be analyzed is determined according to the position of the mouse pointer on the page to be analyzed.

[0067] The display unit can refer to a monitor, which displays the page to be analyzed. The page to be analyzed can refer to a webpage, website, homepage, etc., that contains the content to be analyzed. The content to be analyzed can include text, images, etc.

[0068] The screenshot of the content to be analyzed can refer to an image that is taken from the page to be analyzed and contains the content to be analyzed.

[0069] The method for determining the screenshot of the content to be analyzed based on the position of the mouse pointer on the page to be analyzed can include the user moving the mouse pointer across the page to select the content to be analyzed, or the user clicking on the page to select the content to be analyzed.

[0070] In this embodiment of the application, the method for displaying the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system may include:

[0071] In response to the user's selection of the page to be analyzed, determine the mouse pointer position and the coordinates of the mouse pointer position;

[0072] Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot;

[0073] According to the preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result;

[0074] Based on the matching results, the screenshot of the page was determined to be the screenshot of the content to be analyzed.

[0075] The selection of the page to be analyzed can refer to the user selecting the page by moving the mouse and clicking on the screen.

[0076] A mouse pointer is a pointer that indicates the position of the mouse in a computer's graphical interface. The mouse pointer position can be the position of the pointer in the current interface. The position coordinates of the mouse pointer can be obtained by using the pixel coordinates of the mouse pointer position or the coordinates relative to the screen.

[0077] The preset coordinate range can refer to the range of capture coordinates set by the user according to different needs. For example, when the position coordinates of the mouse pointer are (3, 3) and the preset coordinate range is 3 pixels in length and 3 pixels in width, the range of the page screenshot is centered on the mouse pointer position, with a length of 3 pixels and a width of 3 pixels. The coordinate range of the page screenshot is (2, 2) to (4, 4). In other embodiments, the position coordinates of the mouse pointer can be any point on the page to be analyzed, such as the lower left corner, the upper right corner, etc. The screenshot coordinate range only needs to include the position coordinates of the mouse pointer.

[0078] The preset pixel content rules can refer to the pixel coordinates and color information of the corresponding pixel points set by the user. By comparing the pixel coordinates and color information of the page screenshot with the pixel coordinates and color information in the pixel content rules, a large number of screenshots containing the content to be analyzed can be filtered out, and then further judged to see if they meet the requirements.

[0079] In this embodiment of the application, the method for displaying the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system may include:

[0080] The mouse pointer on the page to be analyzed is scanned at preset time intervals to obtain the scan results;

[0081] Based on the scan results, determine the mouse pointer position and its coordinates;

[0082] Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot;

[0083] According to the preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result;

[0084] Based on the matching results, the screenshot of the page was determined to be the screenshot of the content to be analyzed.

[0085] Here, scanning can refer to the process of a computer capturing an image, and the scanning result can refer to a digital image composed of pixels. In this embodiment, by scanning the mouse pointer on the page to be analyzed every 5 seconds, the position of the mouse pointer at different times can be obtained, and the position coordinates of the mouse pointer can be obtained. This makes up for the shortcoming of not being able to obtain a large number of page screenshots by responding to the user's selection operation on the page to be analyzed.

[0086] In this embodiment of the application, the method for matching pixel content in pixel information according to preset pixel content rules to obtain matching results may include:

[0087] The similarity of corresponding pixels is determined by matching the pixel information in the pixel content with the corresponding pixel information in the pixel content rules.

[0088] The matching result is obtained based on the similarity of the corresponding pixels.

[0089] Pixel information can refer to the color value information contained in a pixel. The corresponding pixel information can refer to the pixel information in the pixel content rule that has the highest similarity to the pixel information in the pixel content. In this embodiment, the method of obtaining the corresponding pixel information can include comparing the pixel information of the pixel content with the pixel information of the pixel content rule multiple times. During each comparison, the pixel content is moved in units of pixels to obtain the comparison result. The pixel information of the pixel content rule that is most similar to the comparison result is the corresponding pixel information.

[0090] Similarity can refer to the degree of matching between the color value information of a pixel and the color value information of a pixel in the pixel content rule. For example, when the similarity between the color value information of a pixel and the color value information of a pixel in the pixel content rule is 60%, the matching result meets the matching requirements.

[0091] In this embodiment of the application, after matching the pixel content in the pixel information according to a preset pixel content rule to obtain a matching result, the method may further include:

[0092] If the matching result does not meet the matching requirements, the pixel information in the pixel content and the corresponding pixel information in the pixel content rule are desaturated based on the RGB values ​​to obtain the pixel information in the desaturated pixel content and the corresponding pixel information in the desaturated pixel content rule.

[0093] The pixel information in the desaturated pixel content is matched with the corresponding pixel information in the desaturated pixel content rules to obtain the desaturation matching result;

[0094] If the desaturation matching result meets the matching requirements, then the screenshot of the page is determined to be a screenshot of the content to be analyzed;

[0095] If the desaturation matching result does not meet the matching requirements, the pixel information in the desaturation pixel content and the corresponding pixel information in the desaturation pixel content rule are desaturated based on RGB values ​​until the target desaturation matching result meets the matching requirements, and the page screenshot is determined to be the screenshot of the content to be analyzed.

[0096] If the target desaturation matching result still does not meet the matching requirements, it is determined that the screenshot of the content to be analyzed failed to be obtained.

[0097] The matching requirement can refer to the similarity threshold set by the user in advance. For example, when the similarity of the corresponding pixels is 50% and the similarity threshold in the matching requirement is 60%, the matching result does not meet the matching requirement.

[0098] Desaturation processing can be achieved by adjusting the RGB values ​​in pixel information to reduce the saturation of pixel content. For example, the brightness of the lowest and medium brightness components of the RGB value can be increased by a certain amount, or the brightness of the highest and medium brightness components can be decreased by a certain amount, or the brightness of the highest brightness component can be decreased by a certain amount and the brightness of the lowest brightness component can be increased by a certain amount. Through these methods, the three RGB components can be made closer to the same value, thus reducing the saturation. For example, if the three RGB components are 100, 150, and 200, taking the highest brightness component of 200 as the base, increasing the brightness of 100 and 150 by 10 will result in RGB values ​​of 110, 160, and 200. At this time, the saturation of the RGB value is lower than that of the original RGB value.

[0099] S202. Perform feature extraction processing on the screenshot of the content to be analyzed to obtain the feature information of the screenshot of the content to be analyzed. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information.

[0100] Feature extraction processing can refer to the process of using a computer to extract characteristic information from an image. In this embodiment of the application, the method for performing feature extraction processing on the screenshot of the content to be analyzed can include feature extraction using HOG (Histogram of Oriented Gradient) feature algorithms, OCR (Optical Character Recognition) algorithms, etc.

[0101] Feature information can refer to a specific representation on a screenshot, which is a separate measurable attribute. In the embodiments of this application, the feature information of the screenshot of the content to be analyzed may include the size of the screenshot, the type of font in the screenshot, the size of the font in the screenshot, and the range of the color values ​​of the screenshot.

[0102] S203. Based on the type of feature information, determine the target judgment rule from the rule base. When the type of feature information is screenshot size information, the target judgment rule is the size rule; when the type of feature information is screenshot font information, the target judgment rule is the font rule; when the type of feature information is screenshot font size information, the target judgment rule is the font size rule; and when the type of feature information is screenshot color information, the target judgment rule is the color rule.

[0103] The judgment rule can refer to the rule for judging feature information based on the design specifications, and to judge whether the feature information is within the range allowed by the design specifications. In the embodiments of this application, the judgment rule can include size rule, font rule, font size rule and color rule. For example, the size rule can refer to the screenshot being 10×10 pixels, the font rule can refer to the font type being SimSun, the font size rule can refer to the font size being 4, and the color rule can refer to the RGB values ​​of the screenshot being 192,192,192.

[0104] Target judgment rules can refer to judgment rules that match the type of feature information.

[0105] S204. Based on the target judgment rules, the feature information is judged to obtain the judgment result information.

[0106] In this embodiment of the application, the method for judging feature information according to target judgment rules to obtain judgment result information may include:

[0107] Based on the target judgment rules, the feature information is judged to obtain the initial judgment result information;

[0108] If the initial judgment result information represents feature information that satisfies the target judgment rule, then the feature information is scored to obtain the first score information;

[0109] If the initial judgment result information characterization feature information does not meet the target judgment rule, then the second scoring information is obtained;

[0110] Based on the initial judgment result information, the first scoring information, and the second scoring information, the judgment result information is obtained.

[0111] The initial judgment result information can refer to the comparison between information features and target judgment rules.

[0112] The method for assigning scores to feature information may include assigning scores if the target judgment rule is met, and not assigning scores if the target judgment rule is not met. In the embodiments of this application, the first scoring information may refer to assigning scores, and the second scoring information may refer to not assigning scores. For example, when the feature information is that the font type is SimSun, and the target judgment rule is that the font type is SimSun, the initial judgment result information is that the target judgment rule is met, the first scoring information is 1 point, and the judgment result information is that the feature information meets the target judgment rule and is assigned 1 point.

[0113] S205. Based on the judgment result information, generate and display the page design analysis report in the display unit.

[0114] Among them, the page design analysis report refers to the report obtained after analyzing the design of the current page. The page design analysis report displays the analysis results through display units, making it convenient for users to perform related operations.

[0115] In this embodiment of the application, the method for generating and displaying a page design analysis report in the display unit based on the judgment result information may include:

[0116] Based on the first scoring information in the judgment result information, the comprehensive scoring information of the screenshot of the content to be analyzed is obtained;

[0117] The comprehensive score information is compared with the preset standard score information to obtain qualified and unqualified comprehensive score information;

[0118] Based on the judgment results, the pass / fail comprehensive score, and the fail / unqualified comprehensive score, a page design analysis report is generated.

[0119] The comprehensive score information refers to the overall score of the screenshot to be analyzed. It is calculated by taking the first score of all feature information in the screenshot. For example, if there are two feature information in the screenshot, one feature information is assigned a score of 1, and the other feature information does not meet the target judgment rule, so it does not have a first score. Taking all the above into account, the comprehensive score information is calculated to be 0.5. The calculation process is (1+0) / 2=0.5.

[0120] Standard scoring information refers to the scoring criteria that the user has set in advance for the screenshot to be analyzed. It represents the overall standard score of the screenshot to be analyzed. For example, if the standard scoring information is 0.6 and the calculated comprehensive scoring information is 0.5, then the comprehensive scoring information is unqualified.

[0121] In this embodiment of the application, the page design analysis report can be marked and displayed with non-compliant comprehensive score information to highlight the non-compliant content on the page.

[0122] The page design display method provided in this application embodiment can obtain feature information from a screenshot containing content to be analyzed, filter the rule base according to the type of feature information, and judge the screenshot according to the target judgment rules obtained from the filter, thereby obtaining a page design analysis report, which can quickly and accurately evaluate and detect the current page information.

[0123] Figure 3 A flowchart illustrating another page design and display method provided in this application embodiment is shown below. Figure 3 As shown, the method includes:

[0124] S301. Display the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system. Perform feature extraction processing on the screenshot of the content to be analyzed to obtain the feature information of the screenshot of the content to be analyzed.

[0125] The screenshot of the content to be analyzed can refer to an image captured from the page to be analyzed, which contains the content to be analyzed. The content to be analyzed can include text, images, and other content.

[0126] In this embodiment of the application, the feature information may include the size of the screenshot, the type of font in the screenshot, the size of the font in the screenshot, and the range of the color values ​​of the screenshot.

[0127] S302. Based on the type of feature information, determine the target judgment rule from the rule base, judge the feature information, and obtain the judgment result information.

[0128] The judgment result information may include the judgment result of feature information and target judgment rules, as well as the scoring information.

[0129] S303. Based on the judgment result information, generate and display the page design analysis report in the display unit.

[0130] Among them, the page design analysis report can refer to the report obtained after analyzing the design of the current page.

[0131] S304. Responding to the user's operation of the confirmation control for the page design analysis report, obtain the report judgment result information.

[0132] The report judgment result information can refer to whether the user approves of each item on the page design analysis report.

[0133] S305. Based on the report's judgment results, obtain the rule update information.

[0134] Among them, rule update information can refer to the rule information that needs to be changed, which is compiled based on the information that was not recognized in the report judgment results.

[0135] S306. Based on the rule update information, update the judgment rules in the rule base to obtain the updated judgment rules.

[0136] Among them, the updated judgment rule can refer to the judgment rule that has been adjusted based on the actual application effect.

[0137] Another page design display method provided in this application embodiment can obtain feature information from a screenshot containing content to be analyzed, judge the screenshot by a target judgment rule corresponding to the feature information type, thereby obtaining a page design analysis report, and then manually review the page design analysis report, update and modify the judgment rule with poor judgment effect, so that the judgment rule in the rule base is more accurate and enhances the effect of detecting the current page information.

[0138] Figure 4 This is a schematic diagram of the structure of the page design display device provided in an embodiment of this application. Figure 4 As shown, the page design display device 40 includes: a display module 401, an extraction module 402, a determination module 403, an acquisition module 404, and a generation module 405. Wherein:

[0139] Display module 401 is used to display the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system, wherein the screenshot of the content to be analyzed is determined according to the position of the mouse pointer on the page to be analyzed.

[0140] The extraction module 402 is used to perform feature extraction processing on the screenshot of the content to be analyzed, and obtain the feature information of the screenshot of the content to be analyzed. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information.

[0141] The determination module 403 is used to determine the target judgment rule from the rule base according to the type of feature information. When the type of feature information is screenshot size information, the target judgment rule is the size rule; when the type of feature information is screenshot font information, the target judgment rule is the font rule; when the type of feature information is screenshot font size information, the target judgment rule is the font size rule; and when the type of feature information is screenshot color information, the target judgment rule is the color rule.

[0142] Module 404 is used to judge the feature information according to the target judgment rules and obtain the judgment result information;

[0143] The generation module 405 is used to generate and display a page design analysis report in the display unit based on the judgment result information.

[0144] In this embodiment of the application, the display module 401 can also be used for:

[0145] In response to the user's selection of the page to be analyzed, determine the mouse pointer position and the coordinates of the mouse pointer position;

[0146] Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot;

[0147] According to the preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result;

[0148] Based on the matching results, the screenshot of the page was determined to be the screenshot of the content to be analyzed.

[0149] In this embodiment of the application, the display module 401 can also be used for:

[0150] The mouse pointer on the page to be analyzed is scanned at preset time intervals to obtain the scan results;

[0151] Based on the scan results, determine the mouse pointer position and its coordinates;

[0152] Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot;

[0153] According to the preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result;

[0154] Based on the matching results, the screenshot of the page was determined to be the screenshot of the content to be analyzed.

[0155] In this embodiment of the application, the display module 401 can also be used for:

[0156] The similarity of corresponding pixels is determined by matching the pixel information in the pixel content with the corresponding pixel information in the pixel content rules.

[0157] The matching result is obtained based on the similarity of the corresponding pixels.

[0158] In this embodiment of the application, the display module 401 can also be used for:

[0159] If the matching result does not meet the matching requirements, the pixel information in the pixel content and the corresponding pixel information in the pixel content rule are desaturated based on the RGB values ​​to obtain the pixel information in the desaturated pixel content and the corresponding pixel information in the desaturated pixel content rule.

[0160] The pixel information in the desaturated pixel content is matched with the corresponding pixel information in the desaturated pixel content rules to obtain the desaturation matching result;

[0161] If the desaturation matching result meets the matching requirements, then the screenshot of the page is determined to be a screenshot of the content to be analyzed;

[0162] If the desaturation matching result does not meet the matching requirements, the pixel information in the desaturation pixel content and the corresponding pixel information in the desaturation pixel content rule are desaturated based on RGB values ​​until the target desaturation matching result meets the matching requirements, and the page screenshot is determined to be the screenshot of the content to be analyzed.

[0163] If the target desaturation matching result still does not meet the matching requirements, it is determined that the screenshot of the content to be analyzed failed to be obtained.

[0164] In this embodiment of the application, module 404 can also be used for:

[0165] Based on the target judgment rules, the feature information is judged to obtain the initial judgment result information;

[0166] If the initial judgment result information represents feature information that satisfies the target judgment rule, then the feature information is scored to obtain the first score information;

[0167] If the initial judgment result information characterization feature information does not meet the target judgment rule, then the second scoring information is obtained;

[0168] Based on the initial judgment result information, the first scoring information, and the second scoring information, the judgment result information is obtained.

[0169] In this embodiment of the application, the generation module 405 can also be used for:

[0170] Based on the first scoring information in the judgment result information, the comprehensive scoring information of the screenshot of the content to be analyzed is obtained;

[0171] The comprehensive score information is compared with the preset standard score information to obtain qualified and unqualified comprehensive score information;

[0172] Based on the judgment results, the pass / fail comprehensive score, and the fail / unqualified comprehensive score, a page design analysis report is generated.

[0173] As can be seen from the above, the page design display device of this application embodiment comprises a display module 401, used to display the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system, wherein the screenshot of the content to be analyzed is determined according to the position of the mouse pointer on the page to be analyzed; an extraction module 402, used to perform feature extraction processing on the screenshot of the content to be analyzed to obtain feature information of the screenshot of the content to be analyzed, the feature information including at least one of screenshot size information, screenshot font information, screenshot font size information, and screenshot color information; and a determination module 403, used to determine the feature information from the rule base according to the type of feature information. The system determines target judgment rules, whereby the target judgment rule is a size rule when the type of feature information is screenshot size information, a font rule when the type of feature information is screenshot font information, a font size rule when the type of feature information is screenshot font size information, and a color rule when the type of feature information is screenshot color information. A module 404 is used to judge the feature information according to the target judgment rules and obtain judgment result information. A generation module 405 is used to generate and display a page design analysis report in the display unit based on the judgment result information. Therefore, this embodiment of the application can obtain feature information from a screenshot containing content to be analyzed, filter the rule base by the type of feature information, and judge the screenshot according to the selected target judgment rules to obtain a page design analysis report, enabling rapid and accurate evaluation and detection of the current page information.

[0174] Figure 5 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Figure 5 As shown, the electronic device 50 includes:

[0175] The electronic device 50 may include a processor 501 with one or more processing cores, a memory 502 with one or more computer-readable storage media, a communication component 503, and other components. The processor 501, memory 502, and communication component 503 are connected via a bus 504.

[0176] In the specific implementation process, at least one processor 501 executes computer execution instructions stored in memory 502, causing at least one processor 501 to execute the page design display method as described above.

[0177] The specific implementation process of processor 501 can be found in the above method embodiments, and its implementation principle and technical effect are similar. It will not be repeated here.

[0178] In the above Figure 5 In the illustrated embodiments, it should be understood that the processor can be a Central Processing Unit (CPU), or other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), etc. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in this invention can be directly implemented by a hardware processor, or implemented by a combination of hardware and software modules within the processor.

[0179] The memory may include random access memory (RAM) and may also include non-volatile memory (NVM), such as at least one disk storage device.

[0180] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of illustration, the buses shown in the accompanying drawings are not limited to a single bus or a single type of bus.

[0181] In some embodiments, a computer program product is also provided, comprising a computer program or instructions that, when executed by a processor, implement the steps in any of the page design display methods described above.

[0182] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0183] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0184] Therefore, embodiments of this application provide a computer-readable storage medium storing a plurality of instructions that can be loaded by a processor to execute steps in any of the page design and display methods provided in embodiments of this application.

[0185] The storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0186] According to one aspect of this application, a computer program product or computer program is provided, the computer program product or computer program including computer instructions stored in a computer-readable storage medium.

[0187] Since the instructions stored in the storage medium can execute the steps in any of the page design and display methods provided in the embodiments of this application, the beneficial effects that any of the page design and display methods provided in the embodiments of this application can achieve can be realized. For details, please refer to the previous embodiments, which will not be repeated here.

[0188] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this application are indicated by the following claims.

[0189] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A page design and display method, characterized in that, Applied to a page design system, the method includes: The page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed are displayed in the display unit of the page design system, wherein the screenshot of the content to be analyzed is determined according to the position of the mouse pointer on the page to be analyzed; The screenshot of the content to be analyzed is subjected to feature extraction processing to obtain the feature information of the screenshot of the content to be analyzed. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information. Based on the type of the feature information, a target judgment rule is determined from the rule base. Specifically, when the type of the feature information is the screenshot size information, the target judgment rule is a size rule; when the type of the feature information is the screenshot font information, the target judgment rule is a font rule; when the type of the feature information is the screenshot font size information, the target judgment rule is a font size rule; and when the type of the feature information is the screenshot color information, the target judgment rule is a color rule. According to the target judgment rule, the feature information is judged to obtain the judgment result information; Based on the judgment result information, a page design analysis report is generated and displayed in the display unit; The process of displaying the page to be analyzed and screenshots of the content to be analyzed on the page to be analyzed in the display unit of the page design system includes: The mouse pointer on the page to be analyzed is scanned at preset time intervals to obtain the scan results; Based on the scan results, determine the mouse pointer position and the coordinates of the mouse pointer position; Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot; According to preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result; Based on the matching results, the screenshot of the page was determined to be a screenshot of the content to be analyzed; The step of matching the pixel content in the pixel information according to preset pixel content rules to obtain a matching result includes: The pixel information in the pixel content is matched with the corresponding pixel information in the pixel content rules to determine the similarity of the corresponding pixels; The matching result is obtained based on the similarity of the corresponding pixels; After matching the pixel content in the pixel information according to the preset pixel content rules to obtain the matching result, the method further includes: If the matching result does not meet the matching requirements, the pixel information in the pixel content and the corresponding pixel information in the pixel content rule are desaturated based on RGB values ​​to obtain the pixel information in the desaturated pixel content and the corresponding pixel information in the desaturated pixel content rule. The pixel information in the desaturated pixel content is matched with the corresponding pixel information in the desaturated pixel content rules to obtain the desaturation matching result; If the desaturation matching result meets the matching requirements, then the page screenshot is determined to be the screenshot of the content to be analyzed; If the desaturation matching result does not meet the matching requirements, then the pixel information in the desaturation pixel content and the corresponding pixel information in the desaturation pixel content rule are desaturated based on the RGB values ​​until the target desaturation matching result meets the matching requirements, and the page screenshot is determined to be the screenshot of the content to be analyzed. If the target desaturation matching result still does not meet the matching requirements, then it is determined that the screenshot of the content to be analyzed has failed to be obtained.

2. The method according to claim 1, characterized in that, The process of displaying the page to be analyzed and screenshots of the content to be analyzed on the page to be analyzed in the display unit of the page design system includes: In response to the user's selection of the page to be analyzed, the mouse pointer position and the coordinates of the mouse pointer position are determined; Based on the location coordinates and the preset coordinate range, determine the page screenshot and the pixel information of the page screenshot; According to preset pixel content rules, the pixel content in the pixel information is matched to obtain the matching result; Based on the matching results, the screenshot of the page was determined to be a screenshot of the content to be analyzed.

3. The method according to claim 1, characterized in that, The step of judging the feature information according to the target judgment rule to obtain judgment result information includes: According to the target judgment rule, the feature information is judged to obtain the initial judgment result information; If the initial judgment result information indicates that the feature information satisfies the target judgment rule, then the feature information is scored to obtain the first scoring information; If the initial judgment result information indicates that the feature information does not meet the target judgment rule, then the second scoring information is obtained; The judgment result information is obtained based on the initial judgment result information, the first scoring information, and the second scoring information.

4. The method according to claim 1, characterized in that, The step of generating and displaying a page design analysis report in the display unit based on the judgment result information includes: Based on the first scoring information in the judgment result information, the comprehensive scoring information of the screenshot of the content to be analyzed is obtained; The comprehensive scoring information is compared with the preset standard scoring information to obtain qualified comprehensive scoring information and unqualified comprehensive scoring information; Based on the judgment result information, the qualified comprehensive score information, and the unqualified comprehensive score information, the page design analysis report is obtained.

5. A page design display device, characterized in that, include: The display module displays the page to be analyzed and a screenshot of the content to be analyzed on the page to be analyzed in the display unit of the page design system. The screenshot of the content to be analyzed is determined according to the position of the mouse pointer on the page to be analyzed. The extraction module is used to perform feature extraction processing on the screenshot of the content to be analyzed to obtain the feature information of the screenshot of the content to be analyzed. The feature information includes at least one of the following: screenshot size information, screenshot font information, screenshot font size information, and screenshot color information. The first determining module is used to determine a target judgment rule from a rule base based on the type of the feature information. Specifically, when the type of the feature information is the screenshot size information, the target judgment rule is a size rule; when the type of the feature information is the screenshot font information, the target judgment rule is a font rule; when the type of the feature information is the screenshot font size information, the target judgment rule is a font size rule; and when the type of the feature information is the screenshot color information, the target judgment rule is a color rule. The module is used to judge the feature information according to the target judgment rule and obtain judgment result information; The generation module is used to generate and display a page design analysis report in the display unit based on the judgment result information; The scanning module is used to scan the mouse pointer on the page to be analyzed according to a preset time interval to obtain the scanning results; The second determining module is used to determine the mouse pointer position and the position coordinates of the mouse pointer position based on the scanning results. The third determining module is used to determine the page screenshot and the pixel information of the page screenshot based on the location coordinates and the preset coordinate range. The first matching module is used to match the pixel content in the pixel information according to the preset pixel content rules to obtain the matching result; The fourth determining module is used to determine, based on the matching results, that the page screenshot is a screenshot of the content to be analyzed; The fifth determining module is used to match the pixel information in the pixel content with the corresponding pixel information in the pixel content rules to determine the similarity of the corresponding pixels. The sixth determining module is used to obtain the matching result based on the similarity of corresponding pixels; The desaturation module is used to perform desaturation processing on the pixel information in the pixel content and the corresponding pixel information in the pixel content rule based on RGB values ​​if the matching result does not meet the matching requirements, so as to obtain the pixel information in the desaturated pixel content and the corresponding pixel information in the desaturated pixel content rule. The second matching module is used to match the pixel information in the desaturated pixel content with the corresponding pixel information in the desaturated pixel content rules to obtain the desaturation matching result. The first judgment module is used to determine that the page screenshot is the screenshot of the content to be analyzed if the desaturation matching result meets the matching requirements. The second judgment module, if the desaturation matching result does not meet the matching requirements, performs desaturation processing on the pixel information in the desaturation pixel content and the corresponding pixel information in the desaturation pixel content rules based on the RGB values ​​until the target desaturation matching result meets the matching requirements, and determines the page screenshot as the screenshot of the content to be analyzed; The third judgment module determines that the acquisition of the screenshot of the content to be analyzed has failed if the target desaturation matching result still does not meet the matching requirements.

6. An electronic device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the method as described in any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the page design and display method as described in any one of claims 1 to 4.

Citation Information

Patent Citations

  • Intelligent identification method for front-end codes in page design, and related equipment

    CN110147516A

  • Verification method and device of applet, equipment and storage medium

    CN111597114A