A method for identifying component information of software interface design drawing

Abstract

The present invention relates to a method for identifying component information of a software interface design drawing, comprising: obtaining auxiliary information in a design draft; the auxiliary information includes key information of a basic component and position information of an elastic component, and the key information of the basic component includes type, position and size; based on the auxiliary information, automatically identifying component information in the design draft. The present invention only needs to add a very small amount of auxiliary information to the design draft to extract enough information from the design draft to generate data that can be recognized by a downstream R&D system. The downstream R&D system can directly generate interface code based on these data, thereby reducing the communication cost between the Ux team and the R&D team, and the connection between the Ux team and the R&D team no longer generates additional time and human resource costs.

Description

Technical Field

[0001] The invention belongs to the field of interface design, and in particular relates to a method for identifying component information of a software interface design diagram. Background Art

[0002] The software development industry pays more and more attention to Ux (abbreviation of User experience), whose main responsibility is to design a software interface with good experience and consistent style according to the input requirements. The work results of the Ux team are called design drafts, which fully describe the software interface, including the components, the location and size of each component, sample data and other information.

[0003] The design draft designed by the Ux team is used as the input of the downstream R&D link. The person in charge of the R&D link needs to develop the software based on the design draft. However, in the actual operation process, there are many problems in the cooperation between the Ux team and the R&D team. For example, in the actual operation process, the skills of the personnel in the R&D team are uneven. Similar design drafts may be reported by the R&D team as unrealizable, which causes the Ux designer to compromise on his design and adopt a non-optimal design to take care of the team with poor skills. Secondly, the design draft contains a huge amount of details. Under the influence of various factors such as progress pressure and sense of responsibility, the R&D team cannot completely replicate all the details in the design draft, resulting in distortion of the design draft. Finally, the R&D team needs to consume a lot of time and human resources to replicate the design draft. In the fiercely competitive market, the software misses the opportunity to go online, and the value of the software is greatly reduced or even loses its meaning.

[0004] Therefore, it is necessary to provide a method for identifying component information of software interface design drawings, automatically converting design drafts into data that can be recognized by downstream R&D systems, and solving various problems in the connection between the Ux team and the R&D team. Summary of the invention

[0005] The purpose of the present invention is to overcome the defects of the prior art and provide a method for identifying component information of a software interface design drawing, thereby realizing the automatic conversion of a design draft into data recognizable by a downstream R&D system.

[0006] To achieve the above purpose, the technical solution adopted by the present invention is as follows:

[0007] A method for identifying component information of a software interface design drawing, comprising:

[0008] Acquire auxiliary information in the design draft; the auxiliary information includes key information of the basic component and position information of the elastic component, and the key information of the basic component includes type, position and size;

[0009] Based on the auxiliary information, component information in the design draft is automatically identified.

[0010] Furthermore, based on the auxiliary information, automatically identifying component information in the design draft includes:

[0011] S21, extract the auxiliary information, recorded as set E;

[0012] S22, traverse the set E, find all components whose element types meet the preset rules, and record them as set C;

[0013] S23. Traverse all components in set C, select a corresponding processing method according to the component type, and extract component information in the design draft.

[0014] Furthermore, when the component type in set C is a container component, the processing method for extracting component information in the design draft is:

[0015] S231, using a correlation identification method to identify the correlation of all elements in the container component, and finding all related element sets in the container component;

[0016] S232, extract the attribute value of the container component by using the component attribute identification method, and take all related element sets in the container component as an independent element set, i.e., set E, and loop through S22 to S23 to identify and extract the attribute values ​​of all lower-level sub-components of the container component. When the lower-level sub-component is a container component, loop through S231 to S232 until the attribute value of the last-level component is extracted;

[0017] When the component type is a common component, the processing method for extracting the component information in the design draft is: using a component attribute recognition method to recognize and extract the attribute value of the common component;

[0018] When the component type is an elastic component, all components in the area covered by the elastic component need to be processed as a whole according to the interface elasticity inference method, so that the view in the area covered by the elastic component has elastic characteristics at runtime.

[0019] Furthermore, the correlation identification method specifically includes:

[0020] Traverse all elements of the design draft / component and find the set of all elements that overlap with the design draft / component position, that is, the set R.

[0021] Furthermore, the method of finding the set of all elements that overlap with the design / component position includes:

[0022] Calculate the boundary coordinates of the design draft / component using the position coordinates and size data of the design draft / component obtained from the design draft auxiliary information;

[0023] Using the position coordinates and size data of each element obtained from the auxiliary information of the design draft, calculate the boundary coordinates of all elements;

[0024] Traverse all elements in the design draft / component and find all elements that fall within the boundary coordinate range of the design draft / component, that is, the set R.

[0025] Furthermore, after obtaining the set R, it is necessary to traverse the set R, remove the elements outside the component specification, and obtain the set R';

[0026] R'=[e1,e2,...,e m ], where m≤n.

[0027] Furthermore, when traversing the set R, if it is found that the expected elements are missing within the boundary of the design draft / component, a warning message is issued.

[0028] Furthermore, the component attribute identification method specifically includes:

[0029] Taking the position coordinates of the component as a reference, the position data of each element in the component are transformed based on an offset method to obtain the position coordinates of each element after the transformation.

[0030] Furthermore, let the set of all elements with correlation be set R', R' = [e1, e2, ..., e m ], transform the position data of all elements in the set R according to the offset method to obtain the transformed set R", R" = [e1', e2', ..., e m '];

[0031] e in the set R" i '(1≤i≤m) is the new element after the position coordinate transformation.

[0032] Furthermore, the interface elasticity inference method includes: adding an elastic component to the auxiliary information, and judging the placeholder information of the blank area in the design draft according to the relative position of the elastic component and the form.

[0033] A device for identifying component information of a software interface design drawing, comprising an acquisition module and an identification module;

[0034] Wherein, the acquisition module is used to acquire auxiliary information in the design draft;

[0035] The identification module is used to automatically identify component information in the design draft based on the auxiliary information.

[0036] Furthermore, the identification module further includes:

[0037] A control module, used to control the recognition process;

[0038] The correlation identification module is used to find all related element sets in the container component;

[0039] The component attribute identification module is used to extract the attribute value of the component.

[0040] The elastic inference module is used to determine the placeholder information of the blank area in the design draft based on the relative position of the elastic component and the form.

[0041] Compared with the prior art, the present invention has the following beneficial effects:

[0042] The present invention only needs to add a very small amount of auxiliary information to the design draft to extract enough information from the design draft to generate data that can be recognized by the downstream R&D system. The downstream R&D system can directly generate interface code based on these data, thereby reducing the communication cost between the Ux team and the R&D team. The connection between the Ux team and the R&D team no longer generates additional time and human resource costs; Ux designers no longer need to compromise on design results, and the effect that can be achieved by successful design can be achieved; thereby, the design results of Ux designers are no longer distorted when they are implemented, and commonly used interface design combinations can be directly provided by the Ux team and used directly by the R&D team. BRIEF DESCRIPTION OF THE DRAWINGS

[0043] Figure 1 is a schematic diagram of a blank dialog box in one embodiment of the present invention;

[0044] Figure 2 is a schematic diagram of auxiliary information in one embodiment of the present invention;

[0045] Figure 3 is a schematic diagram of elements in a form in one embodiment of the present invention;

[0046] Figure 4 is a schematic diagram of a button assembly in one embodiment of the present invention;

[0047] Figure 5 is a schematic diagram of a simplified software interface design draft in one embodiment of the present invention;

[0048] Figure 6 is a schematic diagram of a further simplified software interface design draft in one embodiment of the present invention;

[0049] Figure 7 is a schematic diagram of a form design draft in one embodiment of the present invention;

[0050] Figure 8 is a schematic diagram of a form being loaded into an elastic component in one embodiment of the present invention;

[0051] Fig. 9 This is a schematic diagram of the structure of data obtained by automatic identification method in one embodiment of the present invention.

[0052] Fig.10 is a schematic diagram of an actual dialog design draft in one embodiment of the present invention;

[0053] Fig.11 It is a system structure diagram of an identification device in one embodiment of the present invention. DETAILED DESCRIPTION

[0054] The technical solution of the present invention will be described clearly and completely below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0055] In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicating the orientation or positional relationship, are based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and therefore cannot be understood as limiting the present invention. In addition, the terms "first", "second", and "third" are used for descriptive purposes only, and cannot be understood as indicating or implying relative importance.

[0056] The present invention is described in further detail below.

[0057] Before carrying out this invention, some preparation work needs to be done first, and the Ux team will sort out a set of component specifications;

[0058] The component specification includes the component type, the types of elements contained in each type of component, and the area where each element should appear. After the component specification is sorted out, the following content can be obtained from the component specification: 1) which components there are, 2) which elements each component contains, and 3) in which area each element must appear, which needs to be quantified.

[0059] To facilitate the following explanation, the definitions of the two terms are first given.

[0060] Element: refers to the smallest component in a design, such as a term, an icon, a filled shape (rectangle, circle, etc.). Figure 3The given form is composed of many elements. Each element has position and size information.

[0061] Components: There are too many and too detailed elements in the design. If the recognition method is allowed to directly process the elements, it will make the recognition method very complicated or even impossible to implement. Therefore, it is necessary to make appropriate logical classification of the elements. Figure 4 As shown in the figure, a rectangular fill area, an icon, and an entry are logically grouped together. The division of logical groups can be arbitrary, and not all logical groups are meaningful. You only need to select the meaningful logical groups and call them a component. For example Figure 4 The logical group of is a typical meaningful group, usually we call it a button component. The components can have a containment relationship. A large component can contain multiple small components, such as Figure 1 The dialog component contains the button component; any component has position and size information.

[0062] Which elements are combined into components belongs to the category of component specification and is a prerequisite for implementing the present invention.

[0063] After the preparation work is completed, a method for identifying component information of a software interface design diagram shown in an embodiment of the present invention is described below, including:

[0064] S1. Obtain auxiliary information from the design draft; the auxiliary information includes key information of the basic component and position information of the elastic component. The key information of the basic component includes type, position and size. The auxiliary information also includes optional information, including text, icons, etc. The position and size information are 4 numbers in total, which are the x-coordinate and y-coordinate of the upper left corner, the width and height of the component, such as Figure 2 , Ux designers can easily use common drawing software to obtain these 4 numbers.

[0065] The present invention needs to design a simple and reliable type rule for the component to assist the automatic method in identifying the component. This embodiment adopts such a rule:

[0066] <static flag><component type>[component description] / [state or description][ / state or description]...

[0067] in:

[0068] Static flags are fixed strings of text that are intended to improve the reliability of method identification rules;

[0069] The component type is a key information and is mandatory. It can tell the recognition method which component specification should be used to interpret the various elements of the current component. The component type is finite and enumerable.

[0070] Component description is an optional information, which is used to provide additional description of the current component;

[0071] The state or description is an optional information, which gives the state or description of the component, such as disabled; the state or description supports multiple sections to coexist. The optional information helps the recognition method to extract more information from the design draft, but not all information is given in this way. In fact, most of the information is inferred by the recognition method. The optional information is only needed in a few cases where there is ambiguity and the inference is wrong.

[0072] The type rule has only one mandatory information, which ensures that no additional burden is imposed on Ux designers and is not prone to errors.

[0073] The main value of this part is that it is necessary to design a reliable rule to assist the method in the second part to complete the recognition of the design draft. At the same time, the rule should be kept simple enough for manual operation, and it should also avoid affecting the daily work of the Ux team or introducing too much workload. Auxiliary information includes: 3 key information including the type, position, and size of the basic component and the position information of the elastic component. Other optional information includes text and icons. The more auxiliary information is added, the simpler the automatic recognition method will be, but the operability and time consumption will increase, and vice versa. We need to rely on auxiliary information as little as possible so that this embodiment can maximize its practical effect and value.

[0074] S2. Based on auxiliary information, automatically identify component information in the design draft and obtain input data for downstream R&D systems;

[0075] There are three methods used to automatically identify component information in design drafts, namely, correlation identification method, component attribute identification method and interface elasticity inference method.

[0076] These three methods complement each other. The correlation determination method is used to screen out which parts of the design draft together form a component; for example, even a simple Figure 3 The interfaces shown also contain hundreds of elements. Only by grouping related elements together can the complexity of other methods be reduced. Component properties mainly come from two parts: position and size come from auxiliary information. Some information comes from the visually visible part of the design draft, and other information comes from the component specification. The specification details many basic information of a component. The design draft is static and cannot reflect the local elastic effect. The elasticity inference method can infer whether the component itself should have elasticity based on the context in which the component is located and the elasticity settings of its peer components.

[0077] 1. Correlation Identification Method

[0078] The correlation identification method specifically includes two screening processes;

[0079] 1. First screening: traverse all elements of the design draft / component and find the set of all elements that overlap with the design draft / component position, that is, the set R; the specific method is:

[0080] 1) Calculate the boundary coordinates of the design draft / component using the position coordinates and size data of the design draft / component obtained from the design draft auxiliary information;

[0081] 2) Using the position coordinates and size data of each element obtained from the auxiliary information of the design draft, calculate the boundary coordinates of all elements;

[0082] 3) Traverse all elements in the design draft / component and find all elements that fall within the boundary coordinate range of the design draft / component, i.e., set R;

[0083] For the convenience of description, components and elements are abstracted as rectangles. Figure 5 In the figure, each rectangle is an interface element. If the solid rectangle is regarded as a component and the dotted rectangle is regarded as an element, some dotted rectangles in the figure are covered by the solid rectangle, while some dotted rectangles are not covered by the solid rectangle. Therefore, the dotted rectangles covered by the solid rectangle have a stronger correlation with the solid rectangle, while the dotted rectangles not covered by the solid rectangle have a weaker correlation with the solid rectangle component. This is the basic principle of this screening. Next, further simplify the model and keep only two rectangles, such as Figure 6 The auxiliary information directly provides these data: the position and size of the upper left corner of the design / component, the position and size of each element;

[0084] The above process is explained below with a specific example:

[0085] Assume that the coordinates of the upper left corner of the design / component are (x0, y0) and the size is (w, h), and obtain the coordinates of the lower right corner of the design / component (x1, y1) by calculation;

[0086]

[0087] Assume that the coordinates of the upper left corner of each element in the design draft are (x0', y0') and the size is (w', h'), then the coordinates of the lower right corner of the element are (x1', y1');

[0088]

[0089] In a two-dimensional coordinate system, the condition for a rectangle to be completely covered by another rectangle is that the following four conditions are met at the same time, that is, inequality 1;

[0090] The inequality 1 is as follows:

[0091]

[0092] Traverse all elements in the design draft / component, and record all elements that satisfy inequality 1 into set R for future use;

[0093] R=[e1,e2,...,en]

[0094] 2. Second screening:

[0095] The interface given by the finished design draft is very regular and is designed strictly in accordance with the component specifications. Therefore, generally speaking, the results of the first screening are sufficient. However, considering that Ux designers may make mistakes and mistakenly put some irrelevant elements into an area covered by a component, especially when the unexpected elements are in the lower layer of the component, it is very difficult for humans to find the existence of these unexpected elements because they are covered. Therefore, another refined screening is needed. Since the current component type is known in advance during the first screening, then according to the component specifications, which element(s) should be included in which area of ​​the current component should also be known. Therefore, the second screening is implemented based on this principle.

[0096] The second screening includes two aspects: 1) traverse the set R, remove the elements outside the component specification, and obtain the set R';

[0097] 2) When traversing the set R, if it is found that the expected elements are missing within the boundary range of the design draft / component, a warning message is issued; in actual implementation, when these errors occur, the recognition method may be terminated prematurely and a failure result may be given.

[0098] After the second screening, the set R' is a more reliable set of elements:

[0099] R'=[e1,e2,...,e m ] Where m≤n

[0100] 2. Component Attribute Identification Method

[0101] The component attribute identification method mainly solves the problem of how to identify as many component attributes as possible from the design draft. Since the component type has been determined, it is only necessary to find the corresponding component specification. Since the component specification specifies in detail which elements the component needs to have and where each element should fall in the relative position of the component, the attributes and corresponding values ​​of most components given in the design draft can be extracted based on the information in the component specification.

[0102] The component specification always gives the relative position of each element with the coordinates of the upper left corner of the component as (0,0), which is different from the input position data of this method. Therefore, it is necessary to transform the given position data to transform the relative position of each element to use (0,0) as the reference point.

[0103] The following is a specific method for transforming position data: that is, taking the coordinates of the upper left corner of the component as (0,0), transform the position data of each element in the component based on the offset method; obtain the position coordinates of the upper left corner of each element after the transformation; the following is a detailed introduction to the offset method with a specific example:

[0104] Let the coordinates of the upper left corner of the component obtained from the auxiliary information be (x0, y0), let the coordinates of the upper left corner of each element in the component be (x0', y0'), and let the coordinates of the upper left corner of each element after transformation be (x0", y0"); then

[0105] x0"=x0'-x0

[0106] y0"=y0'-y0

[0107] The component attribute identification method is applied to the set R' obtained by the above correlation identification method, R' = [e1, e2, ..., e m ], transform the position data of all elements in the set R according to the offset method to obtain the transformed set R", that is, R" = [e1', e2', ..., e m '];

[0108] e in the set R" i '(1≤i≤m) is the new element after the position coordinate is transformed, and the rest of the element information remains unchanged.

[0109] After the above transformation, we can directly take out an element from the corresponding area in R" according to the component specification, and read its value as the attribute value represented by this area.

[0110] 3. Interface elasticity inference method

[0111] The design draft is static and cannot intuitively give the elastic properties of the interface, such as Figure 7 , since the design draft does not give elastic properties, there are two reasonable elastic explanations:

[0112] 1) The form content (the middle part) is flexible, but the margins on both sides are not flexible;

[0113] 2) The form content (the middle part) is not flexible, but the margins on both sides are flexible;

[0114] At this point, the inference method needs to choose one of the two elastic interpretation methods to generate data, which brings unnecessary uncertainty to downstream development. To solve this problem, this embodiment proposes an interface elasticity inference method; this problem is solved by adding an elasticity component to the auxiliary information. The elasticity component is a blank placeholder with no content, which is used to tell the processing method how to interpret elasticity.

[0115] The interface elasticity inference method specifically includes: adding an elastic component to the auxiliary information, and judging the placeholder information of the blank area in the design draft according to the corresponding position of the elastic component and the form.

[0116] 1) When the elastic component is arranged on the outside of the form, it means that the form is not elastic, and the blank area outside the form where the elastic component is arranged is elastic;

[0117] For example, taking the horizontal position change as an example, Figure 7 Taking the form shown as an example, when the elastic components are set on the left and right sides of the form, it means that the form content is not elastic, and the blank areas on both sides of the form are elastic;

[0118] when Figure 7 The left, middle and right columns of the middle form are all set with elastic components of equal width. At this time, the form content is inside the elastic component of the middle column, which means that the form and the blank areas on both sides of the form are elastic;

[0119] when Figure 7 When an elastic component is set on the left side of the form, the form is always close to the right side of the area where it is located, and the blank area on the left side of the form is elastic; conversely, when the elastic component is on the right side of the form, the same is true;

[0120] Similarly, the relative position of the elastic component and the form can also play a role in the vertical direction; the same method can be used to arrange the elements on the design draft to the top, middle, and bottom.

[0121] 2) When the form is set inside the elastic component, it means that the form is elastic, and the blank area on the side of the form is not elastic.

[0122] For example, Figure 8 As shown in the figure, the area between the two dotted lines is an elastic placeholder. In actual application, the elastic placeholder is invisible. It is only for the convenience of describing the adjustments made here. The form is placed inside the elastic placeholder, and no form content is placed on the left and right sides. This means that the form is elastic and the distance between the elements in the form can be adjusted according to the actual size; the blank areas on both sides of the form are not elastic.

[0123] After introducing the three key methods used to automatically identify component information in the design draft, the following is a detailed introduction to the specific process of using the automatic identification method to identify component information in the design draft:

[0124] The specific process of automatically identifying component information in the design draft is as follows:

[0125] S21, extracting auxiliary information of all elements from the auxiliary information of the design draft, and recording it as set E;

[0126] S22, traverse the set E, find all components whose element types meet the preset rules, and record them as set C;

[0127] S23, traverse all components in set C, select corresponding processing methods according to component types, extract component information in the design draft, and obtain input data for downstream R&D systems;

[0128] Different component types use different processing methods to extract component information. Before introducing the processing methods, we first divide component types into three categories. The first category is container components. If a component supports installing other components inside it, we call this component a container component; the second category is ordinary components, which refer to non-container components and non-elastic components; among them, non-container components correspond to the definition of container components, such as a button component is an ordinary component; the third category is elastic components, which are blank placeholders.

[0129] 1) When the component type in set C is a container component, the processing method for extracting component information in the design draft is:

[0130] S231, using a correlation identification method to find out all related element sets in the container component;

[0131] S232. Use the component attribute recognition method to extract the attribute values ​​of the container component such as the title and button, and use all related element sets in the container component found in step 232 as an independent element set, namely set E, and loop S22 to S23 to identify and extract the attribute values ​​of all lower-level sub-components of the container component. When the lower-level sub-component is a container component, loop S231 to S232 until the attribute value of the last-level component is extracted.

[0132] 2) When the component type is a common component, that is, it is neither a container type nor an elastic component, the processing method for extracting component information in the design draft is: using a component attribute recognition method to identify and extract the attribute value of the common component.

[0133] 3) When the component type is an elastic component, all components in the area covered by the elastic component need to be processed as a whole according to the interface elasticity inference method, so that the view in the area covered by the elastic component has elastic characteristics during runtime;

[0134] After the above three steps of extraction, we can obtain Fig. 9 The tree-structured data shown in the figure provides the acquired data as input to the downstream R&D system, and the downstream R&D system can implement the method given in Chinese patent application No. 201910955939.6 to directly convert these data into universal codes.

[0135] The following is a brief introduction to the above process with a specific example:

[0136] Embodiment 1:

[0137] like Figure 4 The displayed button component belongs to the category of non-container components. According to the component specification, the text and icon (if any) of the button component must fall into the central area of ​​the component. Therefore, we can expect that a button component may contain one or two elements. If there is an icon element, the icon value of this element is used as the icon attribute value of the button. If there is a text element, the text value of this element is used as the text attribute value of the button.

[0138] Embodiment 2:

[0139] like Figure 1 The displayed dialog component belongs to the category of container components. This example gives a method to obtain the attribute values ​​of the dialog component title and button bar. Assume that the specific area of ​​the dialog component is a rectangular area from (0,0) to (w,h); according to the component specification, the title bar of the dialog needs to fall into a specific area. The corresponding value of the title bar in this example is the rectangular area from (0,0) to (w,32). We can find two elements in this area, a text and an icon. The text given by the text element I extracted is the title of the current dialog component.

[0140] Similarly, the button bar will also fall into another specific area. In this case, the corresponding value is the rectangular area of ​​(0,h-64)~(w,h). We can find two button components in this area (refer to Example 1), so there are two buttons in the button bar of the current dialog box.

[0141] Example 3

[0142] like Fig.10The actual dialog design draft shown in the figure belongs to the category of container components. The processing of container components is more complicated than that of non-container components. After obtaining the attribute values ​​of the title and button according to the method of Example 2, it is also necessary to process the subordinate elements of the container component (the subordinate elements may be non-container components or container components, such as Tab page containers). This requires finding all the subordinate elements of the dialog box according to the correlation method, such as Fig.10 As shown, all elements in the area below the title bar and above the button bar are subordinate elements of the dialog box. These elements are grouped into a new element set, and the above method is used again to recursively analyze this new element set to extract the attribute values ​​of the subordinate elements until the attribute value of the last-level element is extracted. In this way, all elements of the dialog box container can be correctly identified.

[0143] In fact, no matter how many layers of lower-level sub-containers are nested inside the container, the method of this embodiment can be used to perform recursive analysis processing.

[0144] To implement the above method, Fig.11 As shown, the present invention also shows an embodiment of a device for identifying component information of a software interface design diagram, comprising an acquisition module 1 and an identification module 2;

[0145] Wherein, the acquisition module 1 is used to acquire auxiliary information in the design draft;

[0146] The identification module 2 is used to automatically identify component information in the design draft based on the auxiliary information.

[0147] Furthermore, the identification module further includes:

[0148] Control module 3, used to control the identification process;

[0149] A correlation identification module 4 is used to find all related element sets in the container component;

[0150] The component attribute recognition module 5 is used to extract the attribute value of the component.

[0151] The elastic inference module 6 is used to determine the placeholder information of the blank area in the design draft according to the relative position of the elastic component and the form.

[0152] The above-described embodiments are only preferred embodiments of the present invention, and are not exhaustive of the feasible implementations of the present invention. For those skilled in the art, any obvious changes made thereto without departing from the principles and spirit of the present invention should be considered to be included in the scope of protection of the claims of the present invention.

Claims

1. A method for identifying component information of a software interface design drawing, characterized in that: include: Get auxiliary information from the design draft; The auxiliary information includes key information of the basic component and position information of the elastic component, the key information of the basic component includes type, position and size, and the view of the area covered by the elastic component has elastic characteristics during runtime; Based on the auxiliary information, the component information in the design draft is automatically identified, including: using a correlation identification method to find all related element sets in the container component; using a component attribute identification method to extract the attribute value of the component; using an interface elasticity inference method to determine the placeholder information of the blank area in the design draft based on the relative position of the elastic component and the form.

2. A method for identifying component information of a software interface design drawing according to claim 1, characterized in that: Automatically identifying component information in the design draft based on the auxiliary information includes: S21, extract the auxiliary information, recorded as set E; S22, traverse the set E, find all components whose element types meet the preset rules, and record them as set C; S23. Traverse all components in set C, select a corresponding processing method according to the component type, and extract component information in the design draft.

3. A method for identifying component information of a software interface design drawing according to claim 2, characterized in that: When the component type in set C is the container component, the processing method for extracting component information in the design draft is: S231, using the correlation identification method to identify the correlation of all elements in the container component, and finding all related element sets in the container component; S232, extract the attribute value of the container component by using the component attribute identification method, and use all related element sets in the container component as an independent element set, i.e., set E, and loop through S22-S23 to identify and extract the attribute values ​​of all lower-level sub-components of the container component. When the lower-level sub-component is a container component, loop through S231-S232 until the attribute value of the last-level component is extracted; When the component type is a common component, the processing method for extracting the component information in the design draft is: using the component attribute recognition method to recognize and extract the attribute value of the common component; When the component type is an elastic component, all components in the area covered by the elastic component need to be processed as a whole according to the interface elasticity inference method, so that the view in the area covered by the elastic component has elastic characteristics during runtime.

4. A method for identifying component information of a software interface design drawing according to claim 3, characterized in that: The correlation identification method specifically includes: Traverse all elements of the design draft / component and find the set of all elements that overlap with the design draft / component position, that is, the set R.

5. A method for identifying component information of a software interface design drawing according to claim 4, characterized in that: Methods for finding the set of all elements that overlap with the design / component position, including: Calculate the boundary coordinates of the design draft / component using the position coordinates and size data of the design draft / component obtained from the design draft auxiliary information; Using the position coordinates and size data of each element obtained from the auxiliary information of the design draft, calculate the boundary coordinates of all elements; Traverse all elements in the design draft / component and find all elements that fall within the boundary coordinate range of the design draft / component, that is, the set R.

6. A method for identifying component information of a software interface design drawing according to claim 5, characterized in that: After obtaining the set R, you need to traverse the set R, remove the elements outside the component specification, and obtain the set R'; R' = [e1, e2, ... , e m ],in, m ≤ n , e in the set R' i (1≤i≤m) is the element in set R that meets the component specification, and n is the number of all elements in set R 。 7. A method for identifying component information of a software interface design drawing according to claim 6, characterized in that: When traversing the set R, if it is found that the expected elements are missing within the boundary of the design / component, a warning message is issued.

8. A method for identifying component information of a software interface design drawing according to claim 3, characterized in that: The component attribute identification method specifically includes: Taking the position coordinates of the component as a reference, the position data of each element in the component are transformed based on an offset method to obtain the position coordinates of each element after the transformation.

9. A method for identifying component information of a software interface design diagram according to claim 8, characterized in that The set of all elements with correlation is set R', R'=[e1, e2, ... , e m ], transform the position data of all elements in the set R according to the offset method to obtain the transformed set R'', R'' = [e1', e2', ... ,e m ']; e in the set R'' i ' (1≤ i≤m) is the new element after the position coordinate transformation.

10. A method for identifying component information of a software interface design drawing according to claim 3, characterized in that: The interface elasticity inference method includes: adding an elastic component to auxiliary information, and judging the placeholder information of a blank area in a design draft according to the relative position of the elastic component and the form.

11. A device for identifying component information of a software interface design drawing, characterized in that: It includes an acquisition module and an identification module; Wherein, the acquisition module is used to acquire auxiliary information in the design draft; The identification module is used to automatically identify component information in the design draft based on the auxiliary information; The identification module includes: a control module for controlling the identification process; a correlation identification module for finding all related element sets in the container component; a component attribute identification module for extracting the attribute value of the component; and an elastic inference module for determining the placeholder information of the blank area in the design draft based on the relative position of the elastic component and the form, wherein the view of the area covered by the elastic component has elastic characteristics at runtime.

Images