CN108089782B

CN108089782B - Method and apparatus for suggesting changes to related user interface objects

Info

Publication number: CN108089782B
Application number: CN201611021930.0A
Authority: CN
Inventors: 路光明; 李燃
Original assignee: Canon Inc
Current assignee: Canon Inc
Priority date: 2016-11-21
Filing date: 2016-11-21
Publication date: 2021-02-26
Anticipated expiration: 2036-11-21
Also published as: CN108089782A

Abstract

The invention relates to a method and apparatus for suggesting changes to related user interface objects. According to the method of the present invention, which uses a calculation method of the similarity between the related UI objects, a similarity list can be established. When a UI object is changed, a suggestion is generated based on the similarity list. According to the method of the present invention, it is possible to greatly reduce the workload for changing various UI objects by automatically suggesting changes of the relevant UI objects. Consistency between multiple UI objects may also be improved.

Description

Method and apparatus for suggesting changes to related user interface objects

Technical Field

The present invention relates generally to UI (user interface) design, and more particularly to suggesting changes to related UI objects.

Background

As known to those skilled in the art, each UI object has various properties (properties), and there are various relationships among the properties of the UI object. During UI design, changes to the properties of UI objects often occur. Also, generally, the attribute is manually changed one by one.

As shown in fig. 1A, 1B, and 1C, there are three different screens containing several UI objects, and fig. 1A, 1B, and 1C have some UI objects with the same title (e.g., buttons "OK" 102 and 105, "cancel" 103, "reset to default values" 104, 107, and 109, "set 1" 101, "set 2" 106, and "set 3" 108, as follows). More specifically, it can be seen that the button "OK" 102 in fig. 1A has the same height as the button "OK" 105 in fig. 1B, and that the button "reset to default" 104 in fig. 1A has the same width as the button "reset to default" 107 in fig. 1B and the button "reset to default" 109 in fig. 1C.

If a designer wants to modify multiple UI objects located in different screens, he has to manually modify the properties of these UI objects one by one. Taking this as an example, if the designer wants to increase the width of three "reset to default" buttons, please perform the following steps as follows:

turn on "screen 1" and select the "reset to default" button 104.

Increase the width of the "reset to default" button 104 in "screen 1".

Turn on "screen 2" and select the "reset to default" button 107.

Increase the width of the "reset to default" button 107 in "screen 2".

Turn on "screen 3" and select the "reset to default" button 109.

Increase the width of the "reset to default" button 109 in "screen 3".

Based on the above steps, it can be seen that many steps need to be performed manually by a designer according to this method. It is not efficient. Furthermore, it is prone to error due to human factors.

In U.S. patent No. 6686937B1, a method for providing cross-pane visual display associations between widgets located on different visual display panels within a graphical user interface development environment is disclosed, and manually specifying relationships between UI objects. Generally, the method of this patent comprises the following main steps:

first, the designer chooses to influence the widget.

The designer selects the widget that is affected.

The designer selects the display properties to influence.

After the above steps, a visual display relationship between the influencing widget and the influenced widget is established. When the designer modifies a selected display attribute of an affected widget, the display attribute of the affected widget changes accordingly.

In the method described in this us patent, it is a disadvantage that the designer must manually create and update the visual display relationship between widgets; the designer needs to pay extra effort.

Accordingly, there is a need to automatically create and update visual display relationships between UI objects. It should also be appreciated that when one of the UI objects changes, the associated UI object automatically changes accordingly.

Disclosure of Invention

According to the method of the present invention, which uses a calculation method of the similarity between the related UI objects, a similarity list can be established. When a UI object is changed, a suggestion is generated based on the similarity list.

The present invention has been made in view of at least one of the above problems.

An aspect of the present invention provides a method for suggesting changes to a related User Interface (UI) object, the method comprising:

calculating the similarity between related UI objects, wherein the related UI objects are UI objects of the same type;

generating different value attribute lists in the related UI objects based on the similarity;

receiving a change in any attribute of one of the UI objects;

based on the similarity between the changed UI object and the related UI object and the different value attribute list, a change suggestion for the related UI object is generated.

According to the method of the present invention, it is possible to greatly reduce the workload for changing various UI objects by automatically suggesting changes of the relevant UI objects. Consistency among multiple UI objects may also be improved.

Further features of the invention will become apparent from the following description of exemplary embodiments with reference to the attached drawings.

Drawings

The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments of the invention and together with the description, serve to explain the principles of the invention.

Fig. 1A, 1B, and 1C show schematic UI block diagrams of the related art 1.

Fig. 2 is a block diagram schematically illustrating a hardware structure in which the technology according to the embodiment of the present invention can be implemented.

FIG. 3 is a general flowchart of suggesting changes to related UI objects, according to an exemplary embodiment of the invention.

FIG. 4 is a block diagram of suggesting changes to a relevant UI object, according to an exemplary embodiment of the invention.

FIG. 5 is a detailed flowchart of suggesting changes to related UI objects according to an exemplary embodiment of the present invention.

Fig. 6 is a general schematic diagram of the original UI of the first and second exemplary embodiments of the flowchart of fig. 3 according to the present invention.

Fig. 7 is a diagram illustrating a result of calculating the similarity between tags according to the first exemplary embodiment of fig. 5.

Fig. 8 is a schematic diagram of attributes of a modified label according to the first exemplary embodiment of fig. 5.

Fig. 9 is a schematic diagram of a confirmation dialog according to the first exemplary embodiment of fig. 5.

Fig. 10 is a schematic diagram of a modified result according to the first exemplary embodiment of fig. 5.

Fig. 11 is a schematic diagram of attributes of a modified label according to the second exemplary embodiment of fig. 5.

Fig. 12 is a schematic diagram of a confirmation dialog according to the second exemplary embodiment of fig. 5.

Fig. 13 is a diagram illustrating a result of change according to the second exemplary embodiment of fig. 5.

Fig. 14A, 14B and 14C are schematic diagrams of an original UI according to a third exemplary embodiment of the flowchart of fig. 3 of the present invention.

Fig. 15 is a diagram illustrating the result of calculating the similarity between buttons according to the third exemplary embodiment of fig. 14A, 14B, and 14C.

Fig. 16A and 16B are schematic diagrams of a confirmation dialog according to the third exemplary embodiment of fig. 14A, 14B, and 14C.

Fig. 17A and 17B are schematic diagrams of a change result according to the third exemplary embodiment of fig. 14A, 14B, and 14C.

Fig. 18 is a schematic diagram of an original UI according to a fourth exemplary embodiment of the flowchart of fig. 3 of the present invention.

Fig. 19 is a diagram illustrating a result of calculating the similarity between tags according to the fourth exemplary embodiment of fig. 18.

Fig. 20 is a diagram illustrating a result of change according to the fourth exemplary embodiment of fig. 18.

Fig. 21 is a diagram illustrating a result of change according to the fourth exemplary embodiment of fig. 18.

Detailed Description

Various exemplary embodiments of the present invention will now be described in detail with reference to the accompanying drawings. It should be noted that the relative arrangement of the components and steps, the numerical expressions, and numerical values set forth in these embodiments do not limit the scope of the present invention unless it is specifically stated otherwise.

The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the invention, its application, or uses.

Techniques, methods, and apparatus well known to those of ordinary skill in the relevant art may not be discussed in detail but are intended to be part of the specification where appropriate.

Any particular value, in all examples shown and discussed herein, should be construed as merely illustrative, and not restrictive. Thus, other examples of the exemplary embodiments may have different values.

Note that like reference numerals and letters refer to like items in the following figures, and thus, once an item is defined in a figure, it may not need to be further discussed in the following figures.

A hardware structure that can implement the technology described hereinafter will be described first with reference to fig. 2. Fig. 2 is a block diagram that schematically illustrates a hardware architecture 20 in which techniques, in accordance with embodiments of the present invention, may be implemented. Wherein in some embodiments of the present invention, the hardware structure 20 may be a camera (e.g., digital still camera, video camera, and web cam), a printer, and the like. In some embodiments of the present invention, the apparatus 41 for suggesting a change of the relevant UI according to the present invention (hereinafter referred to as the apparatus 41) is constructed of hardware or firmware, and functions as a module or component of a camera or a printer. In some embodiments of the present invention, the apparatus 41 according to the present invention is constructed by software stored in the storage device 230 shown in FIG. 2 and executed by the Central Processing Unit (CPU)210 shown in FIG. 2. For example, the device 41 will be described in detail below with reference to fig. 4.

With regard to the above implementation, for example, the hardware architecture 200 includes a CPU 210, a Random Access Memory (RAM)220, a storage device 230, an input device 240, an output device 250, a network interface 270, a system bus 260, and the apparatus 41.

The CPU 210 is any suitable programmable control device (e.g., a processor) and performs various functions to be described hereinafter by executing various application programs stored in a storage device 230 (e.g., a Read Only Memory (ROM) and/or a hard disk). The RAM 220 is used to temporarily store programs or data loaded from the storage device 230, and also serves as a space in which the CPU 210 executes various programs, for example, to carry out the disclosed technique, which will be described in detail below with reference to fig. 4, and other available functions. The storage device 230 stores various information such as an Operating System (OS), various applications, control programs, and data pre-stored or pre-generated by a manufacturer.

Input device 240 allows a designer to interact with hardware architecture 20. For example, the designer may trigger a corresponding change in the relevant UI of the invention via input device 240. Also, the input device 240 may take various forms, such as a keyboard or a touch screen. Further, the output device 250 is an output interface, for example, a display, a monitor, or the like.

Means 41 are used to automatically create and update the visual display relationship between UI objects. Also, when one of the UI objects is changed, the related UI object is automatically changed accordingly. The working principle of the device 41 will be described in detail below with reference to fig. 3.

Network interface 270 provides an interface for connecting hardware architecture 20 to a network. For example, the hardware configuration 20 performs data communication with other electronic devices connected via a network via the network interface 270. Alternatively, the hardware configuration 20 may be provided with a wireless interface for wireless data communication. The system bus 260 provides a data transmission path for transmitting data among the CPU 210, the RAM 220, the storage device 230, the input device 240, the output device 250, the network interface 270, the apparatus 41, and the like, each other. Although referred to as a bus, the system bus 260 is not limited to any particular data transfer technique.

The hardware architecture 20 described above is merely illustrative and is in no way intended to limit the present invention, its applications, or uses. Also, for simplicity, only one hardware structure is shown in fig. 2. However, a plurality of hardware configurations may be used as necessary.

Next, exemplary embodiments of methods and apparatuses for suggesting changes to related user interface objects are explained in detail.

FIG. 3 is a flowchart of suggesting changes to a relevant UI object, according to an exemplary embodiment of the invention. FIG. 4 is a block diagram of suggesting changes to a relevant UI object, according to an exemplary embodiment of the invention. Next, the operating principle of the device 41 will be described in detail below with reference to fig. 3 and 4.

As shown in fig. 4, the apparatus 41 generally includes five modules, namely a similarity calculation module 401, an attribute list management module 402, a suggestion determination module 403, and a suggestion module 404. Each module performs a corresponding function.

The detailed workflow of the device 41 is shown in fig. 3 as follows:

in step S301, the similarity calculation module 401 calculates the similarity between the related UI objects, which are UI objects of the same type and of which the similarity belongs, based on a formula. According to Jaccard similarity:

in some exemplary embodiments of the invention, the similarity is calculated based on the following formula:

the attributes of the UI object comprise position, size, text, color, font information and the like; also, Σ total _ properties represents the total number of attributes of a UI object, and Σ number _ of _ properties _ with _ same _ value represents the number of attributes of UI objects having the same value.

In this formula, the sum may also be a weighted sum. Each attribute has its own weight.

In step S302, the attribute list management module 402 generates a different-value attribute list among the relevant UI objects based on the similarity.

In step S303, the suggestion determination module 403 receives a change of an arbitrary attribute of one of the UI objects. Among the attributes of the UI object may be location (e.g., X, Y coordinates), size (e.g., font size, width, height), text, color (e.g., text color, background color), font information, and the like. The change reception may be a change request from a designer or a change instruction from a server.

Upon receiving a change of any attribute of one of the UI objects, suggestion determination module 403 determines whether a suggestion should be made for the relevant UI object. The determination is based on the outputs from the similarity calculation module 401 and the attribute list management module 402.

In step S304, the suggestion module 404 generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the different-value attribute list. The suggestion module 404 presents the change suggestions generated by the suggestion determination module 403 as output. In this step, the similarity between the changed UI object and the relevant UI object is compared to a predefined threshold.

Fig. 5 depicts a detailed flow chart.

Next, an overall flowchart for suggesting changes to relevant UI objects according to fig. 3 is explained in detail.

In some exemplary embodiments of the present invention, the type of the UI object may be a button, a tag, an input field, or the like. In the first and second exemplary embodiments, the UI object is a tab, such as the common user interface of tabs shown in fig. 6; fig. 6 is a general schematic diagram of the UI according to the first and second exemplary embodiments of the flowchart of fig. 3.

Generally, the UI is widely used for a tag application of user registration by a mobile device. As shown in fig. 6, there are four labels 601-604. For each label there are eight attributes of the same type, X, Y, width, height, text, font size, text color, background color. As described previously, X and Y represent position information, i.e., horizontal direction and vertical direction position information, respectively; the width and height represent size information. Regarding the four tags 601-604, only the Y attribute and the text attribute are different.

According to the flowchart of fig. 3, the steps of the first exemplary embodiment are explained in detail as follows:

as described previously, in step S301, the similarity calculation module 401 calculates the similarity between the relevant UI objects based on the formula. In this step of the first exemplary embodiment, the similarity is calculated between the relevant tags using formula 1. For the four tabs 601-604 in the above-mentioned frame, Y and text are different attributes between any two of them. Therefore, the number of attributes having the same value between any two of them is always 6. The total number of attributes is 8. As a result, the similarity between any two tags in the screen is 0.75, and as shown in fig. 7, the similarity between any two tags of the "name" tag, the "age" tag, and the "company" tag is 0.75, that is, equal to 6 divided by 8.

In step S302, the attribute list management module 402 generates a different-value attribute list between the relevant UI objects based on the similarity. In this step of the first exemplary embodiment, as described earlier, Y and text are two attributes having different values between themselves and other tags for each tag in this screen. Thus, the list of different attributes includes Y and text. The following is a table of different value attributes in the tag.

Table 1 list of different value attributes

In step S303, the suggestion determination module 403 receives a change of an arbitrary attribute of one of the UI objects. In this step of the first exemplary embodiment of the present invention, the width of the "job" label 804 is expanded, as shown in fig. 8. Suggestion determination module 403 then receives the expanded change in the width of the "job" tag and determines whether a related tag should be suggested based on the similarity of FIG. 7 and the list of different value attributes of Table 1.

In step S304, the suggestion module 404 generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the different-value attribute list. In this step of the first exemplary embodiment, the similarity between the label 804 and the associated

label

601 and 603 is compared to a predefined threshold. Specifically, the detailed steps are as follows:

(a) the changed attribute of the changed tag is compared to a list of different value attributes. This step corresponds to step S504 of the flowchart of fig. 5.

(b) The similarity between the modified tag and the associated tag is compared to a predefined threshold. This step corresponds to step S505 of the flowchart of fig. 5.

(c) The change suggestion is generated when the similarity is greater than a predefined threshold and the changed attribute in the changed label is outside the list of different value attributes, i.e., the changed attribute in the changed label is not identical to the attribute in the (not equivalent to) list of different value attributes. This step corresponds to step S506 of the flowchart of fig. 5.

In the first exemplary embodiment of the present invention, the predefined threshold is set to 0.6.

Further, it is checked whether the changed attribute is in a different value attribute list between the changed tag and the related tag, as shown in table 2.

TABLE 2 Generation of Change suggestions

In a first exemplary embodiment, it follows from table 2 that a change recommendation will be generated only if the two criteria of similarity to the changed tag being greater than a predefined threshold and the changed attribute ("width") not being in the list of different value attributes are met.

In a first exemplary embodiment, the generated change suggestions are listed as follows:

change the "width" attribute of the "name" tag to be the same as the "title" tag.

Change the "width" attribute of the "age" label to be the same as the "title" label.

Change the "width" attribute of the "company" label to be the same as the "title" label.

In the first exemplary embodiment, a confirmation dialog box pops up to show the change suggestion, as shown by check box 901 of FIG. 9.

In the dialog box of fig. 9, the designer can decide whether to accept any change suggestions by toggling the check box. Further, the decision may be made automatically. If all three change suggestions are accepted, the attributes of the relevant tags are changed based on the change suggestions. After all proposed changes are processed; and updating the similarity between the related labels and the attribute list of different values between the related labels. In the first exemplary embodiment, the modified screen should look like in fig. 10.

Tags

1001 and 1004 are all expanded and have an equal size relationship.

If the designer uses a method of manually changing attributes one by one, he needs to select and resize the tag multiple times. Furthermore, he must make multiple selections before resizing. If these elements are not in one screen, it is not easy to make multiple selections. The change recommendation in this embodiment is intelligent. It reduces manual operations in the UI design and also avoids errors due to manual changes.

The second exemplary embodiment of the flow chart of fig. 3 of the present invention is employed, which still uses the original UI in fig. 6.

According to the flowchart of fig. 3, the steps of the second exemplary embodiment are explained in detail as follows:

as described previously, in step S301, the similarity calculation module 401 calculates the similarity between the relevant UI objects based on the formula. In this step of the second exemplary embodiment, it is the same as that of the first exemplary embodiment, and it is not repeated.

In step S302, the attribute list management module 402 generates a different-value attribute list among the relevant UI objects based on the similarity. In this step of the second exemplary embodiment, which is also the same as the first exemplary embodiment, the following is a list of different value attributes among tags.

Table 3 list of different value attributes

In step S303, the suggestion determination module 403 receives a change of an arbitrary attribute of one of the UI objects. In this step of the second exemplary embodiment of the present invention, the "name" tag 1101 is moved rightward as shown in fig. 11. Suggestion determination module 403 then receives the change in the rightward movement of the "name" tag and determines whether a related tag should be suggested based on the similarity of fig. 7 and the different value attribute list of table 3.

In step S304, the suggestion module 404 generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the different-value attribute list. In this step of the second exemplary embodiment, the check list is shown in table 4 using the same method as previously described. In a second exemplary embodiment of the present invention, the predefined threshold is set to 0.6.

Table 4 checklist

In a second exemplary embodiment, the generated change suggestions are listed as follows:

change the "X" attribute of the "age" tag to be the same as the "name" tag.

Change the "X" attribute of the "company" tag to be the same as the "name" tag.

Change the "X" attribute of the "job title" tag to be the same as the "name" tag.

In the second exemplary embodiment of the present invention, a confirmation dialog box pops up to show a change suggestion, as shown by check box 1201 in fig. 12. If the designer accepts all three suggestions, the picture should look like FIG. 13. The

tabs

1301 and 1304 all move to the right and have an aligned relationship.

If the designer uses a method of manually changing attributes one by one, he needs to select and move the tag multiple times. Furthermore, he must make multiple selections before moving. If these elements are not in one screen, it is not easy to make multiple selections.

The change recommendation in this embodiment is intelligent. It reduces manual operations in the UI design and also avoids errors due to manual changes.

A third exemplary embodiment of the flow chart of fig. 3 of the present invention is employed. In the present embodiment, the UI object is a button, and the original UI has three screens, as shown in fig. 14A, 14B, and 14C.

As can be seen, in "screen 1" of fig. 14A, there are three buttons, respectively, an "OK" button 1402, a "cancel" button 1403, and a "reset" button 1404; in "screen 2" of fig. 14B, there are an "OK" button 1405 and a "reset" button 1407; in "frame 3" of fig. 14C, there is a "reset" button 1409. For each button there are eight attributes, X, Y, width, height, text, font size and text color, and background color.

Similarly, according to the flowchart of fig. 3, the steps of the third exemplary embodiment are explained in detail as follows:

as described previously, in step S301, the similarity calculation module 401 calculates the similarity between the relevant UI objects based on the formula. In this step of the third exemplary embodiment, the similarity is calculated among the relevant buttons using formula 1. Using equation 1, the similarity between buttons can be calculated. The calculation result of the similarity is shown in fig. 15, in which "OK" in screen 1 and "reset" in screen 1 "

The similarity between them is 0.25; the similarity between "cancel" in screen 2 and "reset" in screen 1 is 0.25; the similarity between "reset" in picture 1 and "reset" in picture 2 is 0.875; the similarity between "OK" in screen 2 and "reset" in screen 1 is 0.25; the similarity between "reset" in picture 1 and "reset" in picture 3 is 0.75.

Note that the calculated similarity is not limited to one screen. The scope of which is the project or workspace in this embodiment. Therefore, the similarity between buttons located in different screens is also calculated.

In step S302, the attribute list management module 402 generates a different-value attribute list among the relevant UI objects based on the similarity. In this step of the third exemplary embodiment, which is also the same as the first exemplary embodiment and the second exemplary embodiment, the following is a part of the different value attribute list among the buttons.

TABLE 5 different value Attribute List

In step S303, the suggestion determination module 403 receives a change of an arbitrary attribute of one of the UI objects. In this step of the third exemplary embodiment, the text attribute of the "reset" button 1404 in screen 1 is changed to "reset to default". Then, the suggestion determination module 403 receives the change of the text attribute of the "reset" button, and determines whether the relevant button should be suggested based on the similarity of fig. 14 and the different-value attribute list of table 5.

In step S304, the suggestion module 404 generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the different-value attribute list. In this step of the third exemplary embodiment, the check list is shown in table 6 using the same method as previously described. In a third exemplary embodiment, the predefined threshold is set to 0.75.

Table 6 checklist

In a third exemplary embodiment of the present invention, the generated change suggestions are listed as follows:

change the text attribute of the "reset" button 1407 in screen 2 to "reset to default value".

Change the text attribute of the "reset" button 1409 in the screen 3 to "reset to default value".

In the third exemplary embodiment,

confirmation dialog boxes

1601 and 1602 pop up to show change suggestions, as shown in fig. 16A and 16B. If it is accepted, screen 2 and screen 3 will look as shown in FIG. 17A and FIG. 17B.

A fourth exemplary embodiment of the flow chart of fig. 3 of the present invention is employed. In this embodiment of the present application, the UI object is a tag.

As can be seen, in fig. 18, there are three tabs, respectively, a "P" tab 1801, a "ONE SHOT" (ONE SHOT) tab 1801, and an "exposure compensation/AEB setting" tab (hereinafter referred to as "exposure" tab) 1803;

for each label there are eight attributes, X, Y, width, height, text, font size and text color, and background color.

Similarly, according to the flowchart of fig. 3, the steps of the fourth exemplary embodiment are explained in detail as follows:

as described previously, in step S301, the similarity calculation module 401 calculates the similarity between the relevant UI objects based on the formula. In this step of the fourth exemplary embodiment, the similarity is calculated between the relevant tags using formula 1. Using equation 1, the similarity between tags can be calculated. The calculation result of the similarity is shown in fig. 19, in which the similarity between the "P" tag and the "single shot" tag is 0.375; the similarity between the "single shot" tab and the "exposed" tab is 0.375; and the similarity between the "P" label and the "exposed" label is 0.25.

In step S302, the attribute list management module 402 generates a different-value attribute list among the relevant UI objects based on the similarity. In this step of the fourth exemplary embodiment, which is also the same as the first exemplary embodiment, the second exemplary embodiment, and the third exemplary embodiment, the following is a part of the different value attribute list among the tags.

TABLE 7 different value Attribute List

In step S303, the suggestion determination module 403 receives a change of an arbitrary attribute of one of the UI objects. In this step of the fourth exemplary embodiment, the X attribute of the "P" tag is increased by 10 pixels. Then, suggestion determination module 403 receives the change of the X attribute of the "P" tag and determines whether a related tag should be suggested based on the similarity of fig. 19 and the different-value attribute list of table 7.

In step S304, the suggestion module 404 generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the different-value attribute list. In this step of the fourth exemplary embodiment, the check list is shown in table 8 using the same method as previously described. In a fourth exemplary embodiment, the predefined threshold for the X attribute is set to 0.2. This predefined threshold is relatively low because left justification is a commonly used horizontal justification method in UI layouts. A lower threshold makes it easier to maintain.

Table 8 checklist

In a fourth exemplary embodiment of the present invention, the generated change suggestions are listed as follows:

increment the X attribute of the "single shot" tag 1802 by 10 pixels.

Increase the X attribute of "expose" tag 1803 by 10 pixels.

In a fourth exemplary embodiment of the present application, a confirmation dialog box pops up to display a change suggestion.

If both of these suggestions are accepted, the adapted screen should look like in FIG. 20, and the threshold for the X attribute is further lowered to better meet the designer's expectations.

In step S303, the suggestion determination module 403 receives a change of an arbitrary attribute of one of the UI objects. In this step of the fourth exemplary embodiment, another change is made by the designer. The text color attribute of the "single shot" tag changes from white to yellow. Then, the suggestion determination module 403 receives the change of the text color attribute of the "single shot" tag, and determines whether a related tag should be suggested based on the similarity of fig. 19 and the different value attribute list of table 7.

In step S304, the suggestion module 404 generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the different-value attribute list. In this step of the fourth exemplary embodiment, the check list is shown in table 9 using the same method as previously described. In a fourth exemplary embodiment of the present invention, a predefined threshold for a text color attribute is set to 0.35. This predefined threshold is high.

Table 9 checklist

change the text color attribute of the "P" tag 1801 from white to yellow.

In the fourth exemplary embodiment, a confirmation dialog box pops up to display a change suggestion.

If this suggestion is accepted, a changed screen is shown in FIG. 21, where the text color attribute of the "P" label is changed (the color is not shown in the figure). The threshold for text color attributes will be appropriately reduced because the proposed changes meet the designer's expectations. This process corresponds to step S510 of the flowchart of fig. 5.

If this suggestion is rejected, the threshold for the text color attribute will be increased to better meet the designer's expectations. This process corresponds to step S511 of the flowchart of fig. 5. In some embodiments of the present application, the threshold may be increased from 0.35 to 0.4. As a result, next time, if the color attribute of the text of "single shot" changes, no change will be suggested according to table 10.

Table 10 checklist

The threshold value for changing the advice in the present embodiment varies based on the changed attribute. In addition, the threshold may be automatically adjusted according to the designer's actions on the confirmation dialog. When more suggestions are accepted, the threshold is decreased. On the other hand, when fewer suggestions are accepted, the threshold is increased. It is more intelligent and better meets the designer's expectations.

Compared with the prior art, the technical scheme of the invention has the following technical effects:

automatically identify relationships between UI objects.

Automatically provide change suggestions.

Technical solutions help reduce the workload during UI design. As a result, the productivity of the present invention is improved.

The method and system of the present invention can be implemented in a number of ways. For example, the methods and systems of the present invention may be implemented in software, hardware, firmware, or any combination thereof. The above-described order of the steps of the method is intended to be illustrative only, and the steps of the method of the present invention are not limited to the order specifically described above unless specifically indicated otherwise. Furthermore, in some embodiments, the present invention may also be embodied as a program recorded in a recording medium, which includes machine-readable instructions for implementing a method according to the present invention.

In the above embodiment, the changed attributes are the position and the text. The changed attribute may be, among others, size, background color, foreground color, font information, etc.

While some specific embodiments of the present invention have been shown in detail by way of example, it should be understood by those skilled in the art that the foregoing examples are intended to be illustrative only and are not limiting upon the scope of the invention. It will be appreciated by those skilled in the art that the above-described embodiments may be modified without departing from the scope and spirit of the invention. The scope of the invention is defined by the appended claims.

Claims

1. A method for suggesting changes to related UI objects, the method comprising:

(1) calculating the similarity between related UI objects, wherein the related UI objects are UI objects of the same type;

(2) generating different value attribute lists among related UI objects based on the similarity;

(3) receiving a change in any attribute of one of the UI objects;

(4) generating a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the list of different value attributes, wherein the generating of the change suggestion for the relevant UI object comprises:

(a) comparing the changed attribute of the changed UI object with the attributes in the different-value attribute list;

(b) comparing the similarity between the changed UI object and the related UI object with a predefined threshold;

(c) generating a change suggestion where the similarity is greater than the predefined threshold and the changed attribute of the changed UI object is not equal to the attribute in the different-value attribute list.

2. The method of claim 1, wherein the UI object is a button, a label, or an input field.

3. The method of claim 1, wherein the property of the UI object is at least one of location, size, text, color, font information.

4. The method of claim 1, wherein the similarity is calculated by dividing the number of attributes of the UI object having the same value by the total number of attributes of the UI object.

5. The method of claim 1, wherein the predefined threshold varies based on the property being changed.

6. The method of claim 1, wherein the predefined threshold is increased when a recommendation is rejected.

7. The method of claim 1, wherein the predefined threshold is decreased when a recommendation is accepted.

8. The method of claim 1, further comprising presenting a change suggestion by popping up a confirmation dialog.

9. The method of claim 1, further comprising automatically accepting a change recommendation.

10. The method of claim 1, further comprising:

(i) when a presented change suggestion is accepted, changing a property of the relevant UI object based on the change suggestion;

(ii) after all proposed changes are processed, the similarity between UI objects, and the list of different value attributes between UI objects, are updated.

11. An apparatus for suggesting changes to related UI objects, the apparatus comprising:

a similarity calculation module that calculates a similarity between related UI objects, wherein the related UI objects are UI objects of the same type;

the attribute list management module generates attribute lists with different values among related UI objects based on the similarity;

a suggestion determination module that receives a change in any attribute of one of the UI objects;

a suggestion module that generates a change suggestion for the relevant UI object based on the similarity between the changed UI object and the relevant UI object and the list of different value attributes, wherein the suggestion module further comprises:

12. The apparatus of claim 11, wherein the UI object is a button, a label, or an input field.

13. The apparatus of claim 11, wherein the property of the UI object is at least one of a location, a size, text, a color, font information.

14. The apparatus of claim 11, wherein the similarity is calculated by dividing the number of attributes of the UI object having the same value by the total number of attributes of the UI object.

15. The apparatus of claim 11, further comprising presenting a change suggestion by popping up a confirmation dialog.

16. The apparatus of claim 11, further comprising automatically accepting the change recommendation.

17. The apparatus of claim 11, wherein the suggestion module further comprises:

(i) when a presented change suggestion is received, changing a property of the relevant UI object based on the change suggestion;

(ii) after all proposed changes are processed, the similarity between UI objects is updated, as well as the list of different value attributes between UI objects.