JP2014134921A - User interface design device and user interface device - Google Patents

Abstract

PROBLEM TO BE SOLVED: To obtain a user interface design device and a user interface device capable of efficiently setting an animation by surely associating user interface components before and after change by the animation.SOLUTION: A UI component similarity calculation part 106 integrates a plurality of attribute values of user interface components and calculates similarity between the interface components. An association registration part 107 associates user interface components having high similarity with each other. An animation setting part 108 sets an animation between the user interface components associated by the association registration part 107.

Description

  The present invention relates to a user interface design device that designs a user interface of an embedded device and a user interface device that executes a user interface designed by the user interface design device.

  In recent years, in information equipment, when operating or switching the display screen, using animation that continuously displays changes in position, size, color, shape, etc., it is possible to grasp the part of interest and intuitive operation User interfaces that make it easier are increasing. When performing such an animation, only the display content is changed rather than switching the screen itself, that is, the user interface parts before and after the change by the animation are all arranged in one screen. A general method is to perform animation by changing the position and display / non-display of individual user interface components during screen transition.

  However, in such a method, it may be difficult to set an animation at the time of screen transition. In user interface design, a display method may be used in which screens are created separately and the screens themselves are switched during screen transitions. This method can be expected to reduce the development man-hours due to the division of labor of a plurality of screen designers and to reduce the amount of memory such as RAM by suppressing user interface components arranged on one screen. Of course, if it is determined that the animation should be set at the time of screen transition from the beginning of development, it is easy to set the animation by arranging all the user interface parts before and after the change. However, there may be a request for setting an animation at the time of transition between screens that have been created separately due to a specification change from a customer. In the screen created separately in this way, it is unclear which user interface component on the screen before switching is the user interface component on the screen after switching, so the start and end points of the animation are not clear, and at the time of screen transition It is difficult to set animation.

  One method for solving this is to integrate user interface components arranged on separately created screens on one screen and animate them on the screen in the same manner as described above. is there. However, when it is desired to express the switching of several screens by animation, the user interface components of all the screens must be integrated on one screen, which increases the development man-hours. In addition, since the number of user interface parts on one screen increases, there is a problem that it becomes difficult to edit a screen configuration change at the time of designing, and a memory usage such as RAM increases at the time of execution. Occur.

  As another method, there is a method of performing an animation from the arrangement of the user interface component on the screen before the transition to the arrangement of the user interface component on the screen after the transition immediately before or after switching the screen. For example, when animation is performed on the screen before transition, the animation is set to each user interface component so that it is exactly the same as the position and size of the screen after transition. However, if the screen configuration of one screen changes, the animation settings must also be changed, increasing the development man-hours.

  As described above, as a method of flexibly responding to changes without integrating separately created screens, a method of associating user interface parts of screens before and after transition, and performing animation between the associated parts at the time of screen transition There is. As a specific method, it is conceivable to manually assign IDs to user interface parts before and after the change by animation, and to regard the user interface parts as the same ID. However, when the number of user interface parts on the screen is large, or when the screen configuration is changed and ID replacement is required, the development man-hours increase. Therefore, a method of automatically associating user interface parts before and after the change by animation has been desired.

  For example, by applying the configuration described in Patent Document 1 to a user interface design device, a user interface design device capable of automatically associating user interface components before and after a change by animation can be realized. . That is, in this apparatus, a feature amount is extracted from the shape of the user interface component, and the user interface component before and after the change by animation is automatically associated with the feature amount.

JP 2006-53929 A

  However, user interface parts often change their shapes by animation, and many parts with the same shape may be arranged on one screen. Therefore, when user interface parts are compared by shape, the association is not successful. There was a problem that there was a case.

  The present invention has been made in order to solve the above-described problems, and is a user interface design device capable of setting an animation efficiently by reliably associating user interface parts before and after a change by animation. And a user interface device.

  A user interface design apparatus according to the present invention includes a UI part editing unit that creates user interface parts and sets attributes of the user interface parts, an attribute value acquisition part that acquires a plurality of attribute values from the user interface parts, and an attribute A UI component similarity calculation unit that calculates a similarity between interface components by integrating a plurality of attribute values acquired in the value acquisition unit, and a screen before and after transition based on a result calculated by the UI component similarity calculation unit An association registration unit that associates user interface components having a high degree of similarity among the arranged user interface components, and an animation setting unit that sets an animation between the user interface components associated in the association registration unit is there.

  Since the user interface design apparatus of the present invention integrates a plurality of attribute values of user interface parts to calculate the similarity between the interface parts and associates the user interface parts with a high degree of similarity. The user interface parts before and after the change can be reliably associated, and the animation can be set efficiently.

It is a block diagram which shows the user interface design apparatus by Embodiment 1 of this invention. It is explanatory drawing which shows the image of the screen selection part of the user interface design apparatus by Embodiment 1 of this invention. It is a flowchart which shows the processing content of the attribute value acquisition part of the user interface design apparatus by Embodiment 1 of this invention. It is explanatory drawing which shows the image of the format output from the attribute value acquisition part of the user interface design apparatus by Embodiment 1 of this invention. It is a flowchart which shows the processing content of the attribute value acquisition process of the user interface design apparatus by Embodiment 1 of this invention. It is a flowchart which shows the processing content of the UI component similarity calculation part of the user interface design apparatus by Embodiment 1 of this invention. It is explanatory drawing which shows the image of the format output from the UI component similarity calculation part of the user interface design apparatus by Embodiment 1 of this invention. It is a flowchart which shows the processing content of the similarity calculation process of the user interface design apparatus by Embodiment 1 of this invention. It is a flowchart which shows the processing content of the attribute value acquisition process of the user interface design apparatus by Embodiment 2 of this invention. It is explanatory drawing which shows the image of hierarchical user interface component creation. It is a flowchart which shows the processing content of the attribute value acquisition process of the user interface design apparatus by Embodiment 3 of this invention. It is a block diagram which shows the user interface design apparatus by Embodiment 4 of this invention. It is a flowchart which shows the processing content of the attribute value acquisition process of the user interface design apparatus by Embodiment 4 of this invention. It is a block diagram which shows the user interface design apparatus of the user interface design apparatus by Embodiment 5 of this invention. It is explanatory drawing which shows the image of the correlation edit part of the user interface design apparatus by Embodiment 5 of this invention. It is a block diagram which shows the user interface apparatus by Embodiment 6 of this invention. It is a block diagram which shows the user interface apparatus by Embodiment 7 of this invention. It is a block diagram which shows the user interface apparatus by Embodiment 8 of this invention.

Embodiment 1 FIG.
FIG. 1 is a block diagram showing a user interface (UI) design apparatus according to Embodiment 1 of the present invention.
1 includes an input device 101, a UI component editing unit 102, a UI component storage unit 103, a screen selection unit 104, an attribute value acquisition unit 105, a UI component similarity calculation unit 106, an association registration unit 107, An animation setting unit 108 and an animation information storage unit 109 are provided.

  The input device 101 is an input device such as a pointing device or a keyboard for the user to input in the UI component editing unit 102, the screen selection unit 104, or the animation setting unit 108. The UI part editing unit 102 creates a UI part by inputting attribute values such as the position and size of a user interface part (hereinafter referred to as UI part), and stores the UI part in the UI part storage unit 103. The UI component storage unit 103 stores UI components created by the UI component editing unit 102. Each UI component has an attribute that determines display of the UI component. The attributes include, for example, the name, type, arrangement coordinates, size, color, transparency, frame width, frame color, rounded corners, enlargement / reduction method, presence / absence of up / down / left / right inversion, and event delivery by touch. Presence / absence, draggability, text, text font size, text font, text decoration (bold, italic, underline, strikethrough, shadow, frame, emboss, etc.), text font color, text alignment position, A method for omitting text, a space between text characters, a line space between texts, an image scaling method, whether or not to repeat an image, a data source path, and the like may be used. Further, the attributes may include operation attributes related to operations at the time of execution of the UI component, such as the name of the event handler, the type of the event handler, the guard condition of the event handler, and the action of the event handler. The UI component storage unit 103 may store in advance UI components provided by the user interface design apparatus as basic components or UI components created by the UI component editing unit 102 by others.

The screen selection unit 104 selects two screens to which an animation effect is to be added at the time of screen transition. The two screens are a pre-transition screen that is the start point of the animation and a post-transition screen that is the end point of the animation.
The attribute value acquisition unit 105 acquires UI components arranged on the two screens selected by the screen selection unit 104 among the UI components stored in the UI component storage unit 103, and acquires the acquired UI components. Get the attribute value of the attribute of.
The UI component similarity calculation unit 106 calculates the similarity using the attribute value acquired by the attribute value acquisition unit 105. The calculation is performed for all combinations of UI parts on the screen before transition and UI parts on the screen after transition. The attribute similarity for each attribute is calculated for each combination, and the attribute similarity is integrated to obtain the similarity of the combination.
The association registration unit 107 actually associates UI components based on the calculation result of the UI component similarity calculation unit 106.
The animation setting unit 108 sets an animation between the parts associated by the association registration unit 107. The set animation information is stored in the animation information storage unit 109.

Next, the UI design flow in such a configuration will be described below.
A developer who is a user of the design apparatus first creates a UI component in the UI component editing unit 102. The UI component editing unit 102 edits attributes such as the position and size of the UI component while displaying the appearance of the UI component on the editing window, and creates a UI component. The created UI component is stored in the UI component storage unit 103.

  Next, the screen selection unit 104 selects two screens for setting animation at the time of screen transition. The screen selected here is hereinafter treated as a pre-transition screen and a post-transition screen. In order to select two screens, for example, there is a method using a dialog as shown in FIG. Here, the flow when selecting a screen by a method using a dialog will be described. Here, it is assumed that each created screen has a screen name, and the screen can be uniquely specified by the screen name. Enter the name of the screen you want to select as the pre-transition screen and post-transition screen in the text field of the dialog. Alternatively, when a reference button on the right side of the text field is pressed, a list of screen names is displayed, and selection from there may be entered into the text field. The selection of the screen is completed by inputting in the two text fields and pressing the selection button. The screen selection method may be other methods. For example, prepare an editor that can edit two screens side by side, and select the left screen as the pre-transition screen and the right screen as the post-transition screen. You may select by other methods, such as selecting by attaching.

Next, the attribute value acquisition unit 105 acquires the attribute value of the attribute of the UI component existing on the pre-transition screen and the post-transition screen. FIG. 3 is a flowchart showing a flow of processing for acquiring an attribute value in the attribute value acquisition unit 105.
Steps ST301 to ST305 are a loop for acquiring attribute values of attributes of UI parts arranged on the pre-transition screen selected by the screen selection unit 104. Step ST301 and step ST305 indicate the start and end of the loop, respectively. This loop is repeated until processing is performed for all UI components arranged on the pre-transition screen. In step ST302, one UI component is acquired from the pre-transition screen. In step ST303, the attribute value of the attribute of the acquired UI component is acquired. The acquired attribute value is output for each UI component in step ST304 as attribute value data, for example, in the format shown in FIG.

  Steps ST306 to ST310 are a loop for acquiring attribute values of attributes of UI components arranged on the post-transition screen selected by the screen selection unit 104. Step ST306 and step ST310 indicate the start and end of the loop, respectively. This loop is repeated until processing is performed for all UI components arranged on the screen after transition. In step ST307, one UI component is acquired from the post-transition screen. In step ST308, the attribute value of the attribute of the acquired UI component is acquired. The acquired attribute value is output for each UI component in step ST309 as attribute value data, for example, in the format shown in FIG. FIG. 5 is a flowchart showing the attribute value acquisition processing in steps ST303 and ST308 in FIG. Step ST501 and step ST504 indicate the start and end of the loop, respectively. This loop is repeated until the attribute values of all the attributes of the UI component are acquired. In step ST502, an attribute for acquiring an attribute value is selected. In step ST503, an attribute value is acquired from the selected attribute.

  Next, the UI component similarity calculation unit 106 calculates the similarity of the attribute value acquired by the attribute value acquisition unit 105. FIG. 6 is a flowchart showing a flow of processing for calculating the similarity of attribute values in the UI component similarity calculation unit 106. Steps ST601 to ST607 are a loop for acquiring attribute value data of attributes possessed by UI components arranged on the pre-transition screen. Step ST601 and step ST607 indicate the start and end of the loop, respectively. This loop is repeated until processing is performed for all UI components arranged on the pre-transition screen. In step ST602, the attribute value data of the attribute of the UI part on the pre-transition screen is acquired. Steps ST603 to ST606 are a loop for acquiring attribute value data of attributes of UI components arranged on the post-transition screen. In step ST604, the attribute value data of the attribute of the UI component on the post-transition screen is acquired. In step ST605, the similarity is calculated using the attribute value data acquired in steps ST602 and ST604. In step ST608, the similarity of the results calculated in step ST605 for all combinations of the UI parts on the pre-transition screen and the UI parts on the post-transition screen is output, for example, in the form shown in FIG.

  FIG. 8 is a flowchart showing the similarity calculation processing in step ST605 in FIG. Step ST801 to step ST807 are individual attributes for each attribute of the attribute value data of the attribute of the UI part of the pre-transition screen acquired in step ST602 and the attribute value data of the attribute of the UI part of the post-transition screen acquired in step ST604. It is a loop for calculating similarity. Step ST801 and step ST807 indicate the start and end of the loop, respectively. This loop is repeated until all attributes have been processed. In step ST802, an attribute whose attribute similarity is calculated is selected. In step ST803, an attribute value is acquired from the pre-transition screen component for the selected attribute. In step ST804, an attribute value is acquired from the post-transition screen component for the selected attribute. In step ST805, it is determined whether the UI component attribute values on the screens before and after the transition have been acquired. If either one has not acquired the attribute value (ST805: NO), the similarity calculation is not performed. In step ST806, the attribute similarity between the acquired attribute values is calculated.

  Here, for example, the similarity is calculated by a method of 1 when the attribute values are completely matched and 0 when they are slightly different. Note that the similarity may be calculated by other methods. For example, if the attribute value is a numerical value, the difference is calculated, if the attribute value is a character string, the edit distance is calculated, and the sum of those values can be used as a similarity or other known similarity calculation methods can be used. I do not care.

  In step ST808, all the calculated attribute similarities are integrated, and the similarity between the UI parts on the pre-transition screen and the UI parts on the post-transition screen is calculated. As an integration method, for example, there is a method of taking an average of all attribute similarities. Note that the method of integrating attribute similarity may be performed by other methods. For example, other methods such as a method of adding all the attribute similarities or a method of taking a weighted average capable of changing the weight for a specific attribute similarity may be used.

  Next, the association registration unit 107 associates the UI component on the pre-transition screen and the UI component on the post-transition screen based on the similarity calculated by the UI component similarity calculation unit 106. The association is performed by the following method, for example. For one UI component on the pre-transition screen, the combination having the highest or lowest similarity is selected from the similarities of all combinations calculated by the UI component similarity calculation unit 106, and association is performed. At this time, it is necessary to pay attention to whether the similarity is high or low according to the similarity calculation method. Here, for convenience, it is assumed that two UI parts are similar when the degree of similarity is high. If there are a plurality of combinations having the highest similarity among the similarities of all combinations, the association is performed with the combination that appears first. This is repeated until all the UI components are associated on either the pre-transition screen or the post-transition screen. Note that other methods of association may be used. For example, a method of providing a threshold and associating all combinations having a similarity equal to or greater than the threshold, or a method of providing a threshold and not relating to the UI component when the maximum similarity of all combinations is equal to or less than the threshold. Other methods may be used.

Next, the animation setting unit 108 sets an animation between the UI parts associated in the association registration unit 107. The animation is set by the following method, for example.
The screens before and after the transition are displayed side by side on the setting screen, and the associated parts are connected by a broken line. When this broken line is selected, an animation setting dialog is displayed, and various settings relating to animation can be changed. The animation setting method may be other methods. For example, a method may be used in which tabulated combinations of UI parts are displayed in the first column, and animation settings for the UI part combinations are entered in the second and subsequent columns. The set animation information is stored in the animation information storage unit 109.

  As described above, in the first embodiment, the similarity calculation is performed on all the attributes of the UI component, and the results are integrated to absorb the influence of the change caused by the animation, and the UI of the screen before and after the transition can be absorbed. It becomes possible to automatically associate parts. In other words, it is not considered that the UI component for which animation is to be set changes all attribute values due to the animation, and is considered to hold the same or similar attribute values before and after the animation. Therefore, by comparing the attribute values of all the attributes of the UI component and integrating the results, the influence of the change due to the animation is absorbed.

  As described above, according to the user interface design apparatus of the first embodiment, a user interface component is created and a UI component editing unit that sets the attributes of the user interface component, and a plurality of attribute values from the user interface component. An attribute value acquisition unit to be acquired, a UI component similarity calculation unit that calculates a similarity between interface components by integrating a plurality of attribute values acquired by the attribute value acquisition unit, and a UI component similarity calculation unit Based on the result, an animation is set between an association registration unit that associates user interface components with high similarity among user interface components arranged on the screen before and after the transition, and user interface components associated with the association registration unit. And an animation setting section for Also efficiently it is possible to set the animation in a case where change or if screen configuration number of parts is large occurs that, it is possible to suppress the development man-hours.

Embodiment 2. FIG.
Since the second embodiment is the same as the first embodiment except for the configuration of the attribute value acquisition unit 105, the description of the configuration other than the attribute value acquisition unit 105 is omitted. Further, the configuration on the drawing is the same as that in FIG. 1 and will be described with reference to FIG.

  The second embodiment is characterized in that the attribute value acquisition unit 105 acquires only attribute values of attributes that are not related to the animation supported by the user interface design apparatus, among the attributes of the UI component. For example, in the case of a moving animation, the attribute not related to the animation refers to an attribute other than the UI component arrangement coordinate in the case of a moving animation, and in the case of a color change animation, the color of the UI part or text changes. It refers to attributes other than UI parts and text color. In addition to moving animations and color change animations, for example, scaling animations that change the size and height of UI parts, display / non-display animations that change the display state of UI parts, and the transparency of UI parts change There is a transparency change animation. An animation other than this may be used. Furthermore, when the user interface design apparatus supports a plurality of animations, attributes that are not related to all the supported animations are acquired.

  FIG. 9 is a flowchart showing the processing contents of the attribute value acquisition process of the attribute value acquisition unit 105 according to the second embodiment. In FIG. 9, the processes denoted by the same reference numerals as those in FIG. 5 have the same or corresponding functions, and thus description thereof is omitted. In step ST901, it is determined whether the attribute selected in step ST502 is an attribute not related to animation. If the selected attribute is an attribute related to animation (ST901: NO), the process returns to attribute selection again without acquiring the attribute value. The attribute values not acquired are not used for similarity calculation in the UI component similarity calculation unit 106.

  If the selected attribute is an attribute not related to the animation, the attribute value is acquired as in the first embodiment. For example, it is assumed that the user interface design apparatus supports moving animation, color change animation, and scaling animation. At this time, the attributes that are not related to the animation are the UI part name, type, arrangement coordinates, transparency, frame width, frame color, rounded corners, scaling method, presence / absence of up / down / left / right inversion, presence / absence of event delivery by touch Dragging, text, text font, text decoration (bold, italic, underline, strikethrough, shadow, frame, embossing, etc.), text alignment, text omission, text spacing, text The line spacing, image scaling method, presence / absence of image repetition, data source path, event handler name, event handler type, event handler guard condition, event handler action, and the like may be used.

  As described above, according to the user interface design apparatus of the second embodiment, the attribute value acquisition unit acquires attribute values of attributes not related to animation among a plurality of attribute values. The UI parts that are the same have a high degree of similarity and are easily calculated, and the accuracy of association can be improved.

Embodiment 3 FIG.
In the third embodiment, the configuration on the drawing is the same as that of the first embodiment shown in FIG. 1, but the configurations of the UI component editing unit 102 and the attribute value acquisition unit 105 are different. Therefore, only the UI component editing unit 102 and the attribute value acquisition unit 105 will be described. That is, when creating a UI part in the UI part editing unit 102, when the UI part is a user interface design apparatus that can create UI parts hierarchically by arranging another UI part inside the UI part, the attribute value acquisition unit 105 The hierarchical structure of UI parts is also acquired as an attribute value acquired in step (b).

  In the user interface design apparatus according to the third embodiment, the UI component editing unit 102 arranges another UI component on the UI component editing window, thereby creating a UI component that hierarchically includes other UI components. be able to. An image of hierarchical UI component creation is shown in FIG. The created hierarchical UI component is stored in the UI component storage unit 103 in the same manner as other UI components.

  Since animation is often used to visually express that the UI parts before and after the change are the same, a UI part having a hierarchical structure is changed to a UI part having a completely different hierarchical structure by animation. There is little to do. Therefore, the hierarchical structure of hierarchical UI parts and the attribute values of the attributes of UI parts arranged inside serve as an effective index for measuring the similarity of UI parts.

  FIG. 11 is a flowchart showing the processing contents of the attribute value acquisition process of the attribute value acquisition unit 105 according to the third embodiment. In FIG. 11, the processes denoted by the same reference numerals as those in FIG. 5 have the same or corresponding functions, and thus description thereof is omitted. After obtaining the attribute value of the UI component in the processing from step ST501 to step ST504, it is determined in step ST1101 whether the UI component has a hierarchical structure. It is determined that the UI component has a hierarchical structure when another UI component is included therein. If the UI component does not have a hierarchical structure (step ST1101: NO), the process ends. If it is determined that the UI component has a hierarchical structure, the hierarchical structure of the UI component is acquired in step ST1102. Steps ST1103 to ST1106 are a loop for acquiring a UI component arranged inside a UI component and acquiring attribute values of attributes of the UI component. Step ST1103 and step ST1106 indicate the start and end of the loop, respectively. This loop is repeated until processing is performed for all UI parts arranged inside the UI part. In step ST1104, a UI component arranged inside the UI component is acquired. In step ST1105, an attribute value acquisition process is performed. This attribute value acquisition process is the process shown in FIG. 11 currently described, and the process is recursively repeated until the UI part arranged inside the UI part is a UI part having no hierarchical structure. The attribute values of the hierarchical structure and UI components arranged hierarchically acquired in this process are used for similarity calculation in the attribute value similarity calculation process.

  As described above, according to the user interface design apparatus of the third embodiment, the UI interface editing unit that hierarchically creates user interface components by arranging another user interface component on the user interface component, The attribute value acquisition unit acquires the user interface component hierarchy and each attribute of the user interface component for each hierarchical structure as attribute values. By obtaining the attribute values of the attributes of the UI parts retroactively and using them in the similarity calculation, UI parts having the same hierarchical structure have a high similarity and are easily calculated, and the accuracy of association can be improved.

Embodiment 4 FIG.
FIG. 12 is a block diagram showing a user interface design apparatus according to the fourth embodiment. In FIG. 12, the basic configuration of the input device 101 to the animation information storage unit 109 is the same as that of the first embodiment shown in FIG.

  In the fourth embodiment, an acquisition element list storage unit 1201 for storing a list for specifying an attribute to be acquired is provided. When an attribute value is acquired by the attribute value acquisition unit 105, the acquisition element list storage unit 1201 stores the attribute value. The attribute value of the attribute described in the list is acquired.

  Depending on the UI to be designed, some of the attributes as exemplified in the first embodiment may change due to screen transition, or the UI component may have another element that can be used for association. In that case, if the similarity is calculated with the attribute value of the same attribute as in the case of other UI design, there is a possibility that the result is not intended by the user. Therefore, when a list in which attributes for acquiring attribute values are specified in advance is stored externally, and attribute values are acquired by the attribute value acquiring unit 105, the attribute values of the attributes described in the list are referred to this list. To get. The list is created in advance by the user and stored in the acquisition element list storage unit 1201.

FIG. 13 shows a flow of attribute value processing of the attribute value acquisition unit 105 according to the fourth embodiment. In FIG. 13, the processes denoted by the same reference numerals as those in FIG. 5 have the same or corresponding functions, and thus description thereof is omitted.
In step ST1301, the list stored in the acquisition element list storage unit 1201 is acquired. In step ST1302, it is determined whether the attribute selected in step ST502 is described in the list acquired in step ST1301. If the selected attribute is an attribute not listed in the acquired list (step ST1302: NO), the process returns to attribute selection again without acquiring the attribute value. The attribute values not acquired are not used for similarity calculation in the UI component similarity calculation unit 106. If the selected attribute is an attribute described in the acquired list, the attribute value is acquired.

  As described above, according to the user interface design apparatus of the fourth embodiment, the acquisition element list storage unit that stores the list for designating the attribute to be acquired is provided, and the attribute value acquisition unit is the acquisition element list storage unit. Since the attribute value of the attribute described in the list stored in is acquired, the attribute that changes particularly in the UI to be designed by referring to the list given from the outside when acquiring the attribute Can be easily excluded. As a result, it is possible to associate with the UI to be designed, and it can be expected to improve the accuracy of the association.

Embodiment 5 FIG.
FIG. 14 is a configuration diagram illustrating a user interface design apparatus according to the fifth embodiment. In FIG. 14, the basic configuration of the input device 101 to the animation information storage unit 109 is the same as that of the first embodiment shown in FIG.
In the fourth embodiment, an association editing unit 1401 that can edit associations between components arranged on the screens before and after the transition is provided. After the association is performed in the association registration unit 107, the association editing unit 1401 allows the user to An unintended association can be changed manually.

  When the association is automatically performed, the association can be efficiently performed even when the number of UI components arranged on the screen is large or the screen configuration is changed, but the association is not intended by the user. there is a possibility. Therefore, the association editing unit 1401 provides an opportunity for manual editing after the association is automatically performed, and enables correction regarding the association not intended by the user. By doing so, it is possible to eliminate unintended associations while making most of the associations automatically and making the associations efficient.

The editing method in the association editing unit 1401 is performed by the following method, for example.
FIG. 15 is an example of an image by the association editing unit 1401. A pre-transition screen 1502 and a post-transition screen 1503 are displayed side by side on the editing screen 1501, and associated components are connected by broken lines 1504 and 1505. A location where an unintended association is made by the user can be changed to another association by changing the broken line. For example, the broken line 1505 indicates that the UI component 1506 and the UI component 1507 are currently associated, but the user wants to associate the UI component 1506 and the UI component 1508. At this time, the association is corrected by changing the broken line 1505 so as to connect the UI component 1506 and the UI component 1508. This editing method may use another method. For example, a table displaying the UI parts of the pre-transition screen on the vertical axis and the UI parts of the post-transition screen on the horizontal axis is output, and the associated combinations are indicated by a circle at the intersection of the vertical axis and the horizontal axis. The method may be such that a circle is deleted from an intersection of an unintended combination and a circle is written at an intersection of another combination.

  As described above, according to the user interface design device of the fifth embodiment, the user interface design apparatus includes the association editing unit that edits the registration result of the association registration unit, and the animation setting unit includes the user interface components associated by the association registration unit. Since the information between the user interface components edited by the association editing unit is used instead of the information of the association information, it is possible to correct the association not intended by the user. Thereby, it is possible to perform association more reflecting the user's intention.

Embodiment 6 FIG.
FIG. 16 is a configuration diagram illustrating a UI device according to the sixth embodiment. In FIG. 16, blocks denoted by the same reference numerals as those in FIG. 1 have the same or corresponding functions, and thus description thereof is omitted. That is, the sixth embodiment includes an execution unit 1601 and a display device 1602 with respect to the user interface design device in the first embodiment shown in FIG.

In the present embodiment, an execution unit 1601 that executes the content designed by the user interface design device (simulates the designed content or executes it on the device on which the user interface to be designed is constructed), and an execution unit 1601 The display device 1602 for displaying the execution result is provided, and the contents designed by the user interface design device of any one of the first to fifth embodiments can be executed.
The execution unit 1601 reads a UI component from the UI component storage unit 103 and outputs the UI component on the display device 1602. The screen output on the display device 1602 undergoes screen transition according to the design content by an input such as a key input or a touch input from the user or a notification from the system. When executing an animation accompanying screen transition or the like, the execution unit 1601 reads out the animation information set between the associated UI parts from the animation information storage unit 109 and executes it. The animation information stored in the animation information storage unit 109 may be animation information designed by any one of the user interface design apparatuses in the first to fifth embodiments.

  As described above, according to the user interface device of the sixth embodiment, the execution unit that executes the result designed by the user interface design device of any one of the first to fifth embodiments, and the execution And a display device that displays the execution screen of the part, it is possible to carry out UI design while confirming the operation at the time of UI execution, and the development man-hours can be expected to be suppressed.

Embodiment 7 FIG.
FIG. 17 is a block diagram showing a user interface device according to the seventh embodiment.
In the figure, the input device 101, the UI component storage unit 103, the attribute value acquisition unit 105, the UI component similarity calculation unit 106, and the association registration unit 107 are configured according to any one of the first to sixth embodiments. Since it is the same, description here is abbreviate | omitted.
In the present embodiment, a transition screen acquisition unit 1701 for performing screen transition of a screen displayed on the display device 1602 and an animation generation for automatically generating an animation between UI components associated by the association registration unit 107. Unit 1702, an animation execution unit 1703 that executes the animation generated by the animation generation unit 1702, and a drawing processing unit 1704 that performs drawing on the display device 1602 in response to the result of the animation execution unit 1703, when executing the UI The UI parts arranged on the screens before and after the transition are associated with each other, the animation is automatically generated, and the animation is executed.

  A flow of processing in UI execution in such a configuration will be described below. A screen transition occurs due to an input such as a key input or touch input from a user or a notification from the system. As means for instructing execution of screen transition, event-driven or other methods may be used. The transition screen acquisition unit 1701 acquires the current screen that is the pre-transition screen and the screen after the transition. Using these two screens, the attribute value acquisition unit 105 acquires attribute values of attributes of UI components arranged on the screen. Since the processing in the attribute value acquisition unit 105, UI component similarity calculation unit 106, and association registration unit 107 is the same as that in the first embodiment, description thereof is omitted here. The animation generation unit 1702 automatically generates an animation between UI parts associated by the association registration unit 107. At this time, the automatically generated animation may be an animation that linearly interpolates the attribute value of the attribute of the UI part on the screen before transition and the attribute value of the attribute of the UI part on the screen after transition, for example, with the time required for the animation fixed. It can be another animation. For example, the animation may be an animation in which the time required for the animation is changed depending on a difference in attribute values, or is first changed suddenly and gradually changed gradually.

  The animation execution unit 1703 executes the animation automatically generated by the animation generation unit 1702 for all UI parts arranged on the screen. The drawing processing unit 1704 creates an intermediate image in time series in consideration of the animation to be executed, and sequentially performs drawing processing on the display device 1602. The drawing process is repeated until the animation is completed. At this time, interrupt processing may be allowed. For example, an interrupt may be set such that when a specific button is pressed while a UI component is changing due to an animation, the animation is skipped and the screen is displayed after transition. These processes are repeated each time a screen transition occurs.

  As described above, according to the user interface device of the seventh embodiment, a plurality of attribute values are obtained from a screen transition unit that performs transition of a screen having user interface components and a plurality of user interface components each having an attribute. Attribute value acquisition unit, UI component similarity calculation unit that calculates a similarity between interface components by integrating a plurality of attribute values acquired by the attribute value acquisition unit, and a result calculated by the UI component similarity calculation unit The association registration unit that associates user interface components with high similarity among the user interface components placed on the screen before and after transition based on the screen, and the animation that is executed between the user interface components when the screen transitions An animation generation unit that generates between UI parts associated in the registration unit; The user is provided with an animation execution unit that executes the created animation, a drawing processing unit that draws user interface components based on the execution result of the animation execution unit, and a display device that displays the drawing result of the drawing processing unit. It is possible to execute animation without considering the association between UI parts at the time of interface design, and the development man-hours can be suppressed.

Embodiment 8 FIG.
FIG. 18 is a block diagram showing a UI device according to the eighth embodiment. In FIG. 18, blocks denoted by the same reference numerals as those in FIG. 17 have the same or corresponding functions, and thus description thereof is omitted.
In the eighth embodiment, an animation information storage unit 1801 is provided, information related to animation in the screen transition is stored in advance, and stored between the associated UI parts in the same manner as in the seventh embodiment when the UI is executed. An animation is executed based on the animation information.

  When the animation execution unit 1703 executes an animation for a UI component arranged on the screen, the animation information is read from the animation information storage unit 1801 and the animation is executed based on the information. The information stored in the animation information storage unit 1801 may be in any format as long as it describes what kind of animation the UI component will perform during animation execution. For example, UI parts and animation are associated with each other, and when the UI part executes an animation, the associated animation is always performed, and the corresponding animation is described depending on the type of UI part such as text or image. The format that the animation to be executed differs depending on the type of UI component, or the format in which all UI components and combinations of UI components that are transition destinations are comprehensively described, and the animation is described in each combination. .

  As described above, according to the user interface device of the eighth embodiment, a plurality of attribute values are obtained from a screen transition unit that performs transition of a screen having user interface components and a plurality of user interface components each having an attribute. Attribute value acquisition unit, UI component similarity calculation unit that calculates a similarity between interface components by integrating a plurality of attribute values acquired by the attribute value acquisition unit, and a result calculated by the UI component similarity calculation unit Of the user interface components with high similarity among the user interface components arranged on the screen before and after the transition based on the information of the animation executed between the user interface components when the screen transitions Animation information storage unit to store and animation of animation information storage unit Since an animation execution unit that executes animation using information, a drawing processing unit that draws user interface parts based on the execution result of the animation execution unit, and a display device that displays the drawing result of the drawing processing unit, By associating at the time of UI execution and executing a preset animation at the time of screen transition, it is possible to perform the animation desired by the user while suppressing the development man-hours.

  In the present invention, within the scope of the invention, any combination of the embodiments, or any modification of any component in each embodiment, or omission of any component in each embodiment is possible. .

  DESCRIPTION OF SYMBOLS 101 Input device, 102 UI component editing part, 103 UI part storage part, 104 Screen selection part, 105 Attribute value acquisition part, 106 UI part similarity calculation part, 107 Association registration part, 108 Animation setting part, 109 Animation information storage part , 1201 acquisition element list storage unit, 1401 association editing unit, 1601 execution unit, 1602 display device, 1701 transition screen acquisition unit, 1702 animation generation unit, 1703 animation execution unit, 1704 drawing processing unit, 1801 animation information storage unit.

Claims (8)

A UI part editing unit for creating user interface parts and setting attributes of the user interface parts;
An attribute value acquisition unit for acquiring a plurality of attribute values from the user interface component;
A UI component similarity calculation unit that calculates a similarity between the interface components by integrating a plurality of attribute values acquired in the attribute value acquisition unit;
An association registration unit for associating user interface components having high similarity among user interface components arranged on the screens before and after the transition based on the result calculated in the UI component similarity calculating unit;
A user interface design apparatus comprising: an animation setting unit that sets an animation between user interface components associated in the association registration unit.   The user interface design apparatus according to claim 1, wherein the attribute value acquisition unit acquires an attribute value of an attribute not related to the animation among the plurality of attribute values. A UI part editing unit that creates user interface parts hierarchically by arranging another user interface part in the user interface part,
3. The user interface design apparatus according to claim 1, wherein the attribute value acquisition unit acquires a hierarchical structure of the user interface component and each attribute of the user interface component for each hierarchical structure as an attribute value. 4. An acquisition element list storage unit for storing a list for specifying an attribute to be acquired is provided.
4. The user according to claim 1, wherein the attribute value acquisition unit acquires an attribute value of an attribute described in the list stored in the acquisition element list storage unit. 5. Interface design equipment. An association editing unit for editing the registration result of the association registration unit,
5. The animation setting unit uses information between user interface components edited by the association editing unit instead of information between user interface components associated by the association registration unit. The user interface design device according to any one of the above. The user interface design device according to any one of claims 1 to 5,
An execution unit for executing a result designed by the user interface design device;
A user interface device comprising: a display device that displays an execution screen of the execution unit. A screen transition unit for transitioning a screen having user interface parts;
An attribute value acquisition unit for acquiring a plurality of attribute values from a plurality of user interface components each having an attribute;
A UI component similarity calculation unit that calculates a similarity between the interface components by integrating a plurality of attribute values acquired in the attribute value acquisition unit;
An association registration unit for associating user interface components having high similarity among user interface components arranged on the screens before and after the transition based on the result calculated in the UI component similarity calculating unit;
An animation generating unit that generates an animation executed between the user interface components in the case of the screen transition between UI components associated in the association registration unit;
An animation execution unit for executing the generated animation;
A drawing processing unit for drawing the user interface component based on an execution result of the animation executing unit;
A user interface device comprising: a display device that displays a drawing result of the drawing processing unit. A screen transition unit for transitioning a screen having user interface parts;
An attribute value acquisition unit for acquiring a plurality of attribute values from a plurality of user interface components each having an attribute;
A UI component similarity calculation unit that calculates a similarity between the interface components by integrating a plurality of attribute values acquired in the attribute value acquisition unit;
An association registration unit for associating user interface components having high similarity among user interface components arranged on the screens before and after the transition based on the result calculated in the UI component similarity calculating unit;
An animation information storage unit for storing information of animation executed between the user interface components when the screen transitions;
An animation execution unit that executes an animation using the animation information of the animation information storage unit;
A drawing processing unit for drawing the user interface component based on an execution result of the animation executing unit;
A user interface device comprising: a display device that displays a drawing result of the drawing processing unit.

Images