JP2008242964A - User interface design program and user interface design method - Google Patents

Abstract

<P>PROBLEM TO BE SOLVED: To provide a user interface design program and user interface design method capable of designing a user interface excellent in operability by easily performing design change of a transition relation of an operation screen of a development target system. <P>SOLUTION: The user interface design program makes a computer function as a transition relation data storing part for storing transition relation data about a transition relation between respective screens, a screen transition pattern storing part for storing a screen transition pattern, a screen transition diagram displaying part for making a displaying means display a screen transition diagram, a conversion target transition selecting part for selecting a conversion target transition, a screen transition pattern discriminating part for discriminating a screen transition pattern of the selected conversion target transition, a screen transition pattern selecting part for selecting a converted screen transition pattern, and a screen transition pattern converting part for converting the screen transition pattern discriminated by the screen transition pattern discriminating part into the screen transition pattern selected by the screen transition pattern selecting part. <P>COPYRIGHT: (C)2009,JPO&INPIT

Description

  The present invention relates to a user interface design technique in a mobile phone, a digital camera, a computer system, or the like, and in particular, a user interface design program and a user interface design method suitable for designing a transition relationship (transition state) between screens. It is about.

  2. Description of the Related Art Conventionally, when designing a user interface, a display content design (screen design) on each screen and a transition relationship design (screen transition design) between the screens are roughly divided. For the screen design, general-purpose drawing software is used, and the layout of each screen, the shape of the operation component, and the like are designed. As for screen transition design, a so-called screen transition diagram is often created separately by software included in a program development environment or the like.

  As a technique for creating the screen transition diagram as described above, for example, Japanese Patent Application Laid-Open No. 2002-244784 discloses a state transition storage step for storing a user interface state transition, a state transition display step for displaying a state transition, Edit the displayed state transition, and store the state transition editing step that stores the state transition edited as necessary, the state image storage step that stores the state image, and the stored state image to obtain the state transition A user interface design method including a state image acquisition step supplied to a display step is disclosed (Patent Document 1).

Japanese Patent Laid-Open No. 2002-244787

  However, in the conventional user interface design technique including the invention described in Patent Document 1, there is a problem that the transition relation between the screens cannot be easily changed. Specifically, as a screen transition relationship, as shown in FIG. 14A, a menu tree format in which a plurality of child screens are branched in parallel with respect to one parent screen, or FIG. As shown in FIG. 5, there are a variety of formats such as a wizard format in which a plurality of screens are arranged in series with order.

  On the other hand, the transition relationship that the user feels has good operability differs depending on the device or system in which the user interface is incorporated, or the menu that is actually operated. It is determined through trial and error along with the creation. In other words, in order to design a user interface with better operability, it is indispensable to repeat various trials and errors by applying various transition relationships together with the screen configuration and confirm the operability.

  However, in the past, when changing the transition relation of a part to a different transition relation in a screen transition diagram that has been designed once, the setting of the transition is corrected / changed screen by screen by the design method described in Patent Document 1 above. There must be. For this reason, there is no problem as long as the number of screens can be processed in the human head, but in modern devices with advanced functions, the number of screens may be hundreds or thousands. As the number increases, mistakes occur, which is a very time-consuming and time-consuming task.

  In general, user interfaces are considered to improve usability by applying consistent and unified rules for the display contents and transition relationships of each screen. However, such an excellent design is not easy to make. It is a transitional relationship that is suitable for specific types of users, such as beginners, intermediates, and advanced users. Such a design is difficult even for a skilled designer. If technology that requires accumulated experience and trial and error is generalized and reused by many designers, it will lead to higher efficiency in design work, but there is no such method or system. is the current situation.

  The present invention has been made in order to solve such problems, and can easily change the design of the transition relationship of the operation screen of the development target system and design a user interface with excellent operability. It is an object to provide a user interface design program and a user interface design method.

  A feature of the user interface design program according to the present invention is that an ID is set for each screen constituting the user interface, and transition relation data in which a transition source screen ID and a transition destination screen ID are associated with each other for a transition relation between the screens. A transition relation data storage unit for storing, a screen transition pattern storage unit for storing a typical transition relation between each screen as a screen transition pattern, and reading out the transition relation data from the transition relation data storage unit, and based on this, between each screen As a conversion target transition, a screen transition diagram display unit to be displayed on the display means as a screen transition diagram indicating the transition relationship of the screen, and a range to be converted into another transition relationship among the transition relationships between the screens displayed as the screen transition diagram The conversion target transition selection unit to be selected, and the screen transition pattern of the selected conversion target transition are stored in the screen transition pattern storage A screen transition pattern discriminating unit that discriminates the screen transition pattern, a screen transition pattern selecting unit that selects a screen transition pattern after conversion from the screen transition patterns stored in the screen transition pattern storage unit, and the screen transition pattern The point is that the computer functions as a screen transition pattern conversion unit that converts the transition relation data of the screen transition pattern determined by the determination unit into the transition relation data of the screen transition pattern selected by the screen transition pattern selection unit.

  Further, in the present invention, a conversion candidate transition pattern extraction unit that extracts a convertible screen transition pattern candidate from the screen transition pattern storage unit based on the screen transition pattern determined by the screen transition pattern determination unit is extracted. It is preferable that the computer function as a conversion candidate transition diagram display unit that displays the conversion candidate transition pattern as a conversion candidate transition diagram on the display means.

  Furthermore, in the present invention, a design element library storage unit that stores a design element library having various design elements constituting each screen, and a standard that is stored in advance as standard style data of a screen by combining the design elements in a unified manner A style data storage unit, a default display unit that reads out the standard style data and displays default design elements on the display means, and a design element corresponding to each design stage of the screen from the design element library storage unit. Design data for each screen is created based on a design element candidate display section that is read and displayed as a selection candidate, and a design element determined according to a default display or a design element that is selectively determined according to a design element candidate display section. It is preferable to cause the computer to function as the screen design data creation unit.

  In addition, the user interface design method according to the present invention is characterized by a transition relationship in which an ID is set for each screen constituting the user interface, and a transition source screen ID and a transition destination screen ID are associated with each other for the transition relationship between the screens. Using a user interface design system having a transition relationship data storage unit for storing data and a screen transition pattern storage unit for storing a typical transition relationship between each screen as a screen transition pattern, the screen transition diagram display unit is configured as described above. The transition relation data is read from the transition relation data storage section, and based on this, the screen transition diagram display step for displaying the transition relation between the screens on the display means as the screen transition diagram indicating the transition relation between the screens, and the transition relation between the already set screens are displayed. If you want to change the conversion target transition selection unit, other transitions among the transition relation displayed as the screen transition diagram A transition selection step for selecting a range to be converted into a transition as a conversion target transition, and a transition in which the screen transition pattern determination unit compares the screen transition pattern of the selected conversion target transition with the screen transition pattern storage unit to determine A pattern determination step, a screen transition pattern selection unit that selects a converted screen transition pattern from the screen transition patterns stored in the screen transition pattern storage unit, and a screen transition pattern conversion unit The transition pattern conversion step of converting the transition relation data of the screen transition pattern determined in the transition pattern determination step into the transition relation data of the screen transition pattern selected in the transition pattern selection step is performed.

  In the present invention, the conversion candidate transition pattern extraction unit extracts a convertible screen transition pattern candidate from the screen transition pattern storage unit based on the screen transition pattern determined in the transition pattern determination step. It is preferable that the transition pattern extraction step and the conversion candidate transition diagram display unit execute a conversion candidate transition diagram display step for displaying the extracted conversion candidate transition pattern on the display unit as a conversion candidate transition diagram.

  Furthermore, in the present invention, a design element library storage unit that stores a design element library having various design elements constituting each screen, and a standard that is stored in advance as standard style data of a screen by combining the design elements in a unified manner When creating a screen configuration using a user interface design system having a style data storage unit, the default display unit reads standard style data from the standard style data storage unit and displays default design elements as defaults. A default display step for displaying on the means; a design element candidate display unit for reading design elements corresponding to each design stage of the screen from the design element library storage unit and displaying them as selection candidates; and screen design Design determined by data creation unit according to default display Based on the design elements that are determined separately selectively according arsenide or design elements candidate display, it is preferable to perform the screen design data creating step of creating design data of each screen.

  According to the present invention, the transition relation of the operation screen of the development target system can be easily designed, and can be easily corrected and changed during the design, so that the development is shortened and the user inherently User interface with excellent operability can be designed.

  Embodiments of a user interface design program and a user interface design method according to the present invention will be described below with reference to the drawings.

  FIG. 1 is a block diagram showing the overall configuration of a user interface design system 1 equipped with a user interface design program 1a of the present invention. As shown in FIG. 1, a user interface design system 1 according to the present embodiment mainly includes a display unit 2 including a liquid crystal display, an input unit 3 including a keyboard and a mouse, a user interface design program according to the present embodiment, The storage unit 4 stores various data and the like, and the arithmetic processing unit 5 controls each of these constituent units and acquires various types of data to execute arithmetic processing.

  The storage means 4 is composed of a hard disk, RAM (Random Access Memory), etc. As shown in FIG. 1, a program storage unit 41, a design element library storage unit 42, a standard style data storage unit 43, a screen A design data storage unit 44, a transition relation data storage unit 45, and a screen transition pattern storage unit 46 are included.

  Hereinafter, each component of the storage unit 4 will be described in more detail. The user interface design program 1a of this embodiment is installed in the program storage unit 41. Then, by being executed by the arithmetic processing means 5, the user interface design method of the present embodiment is realized.

  The design element library storage unit 42 stores a design element library including various design elements that constitute each screen in the user interface. In the present embodiment, as shown in FIG. 2, the design element library includes a “visual expression” for setting the screen layout and the colors, shapes, dimensions, arrangement, etc. of the buttons, the names of the screens and buttons, various names Library for "Terminology / Language" to set the display status of messages, etc., "Operation Method" to set input method and operation procedure, and "Structure / Concept" to set menu structure and hierarchical structure etc. on each screen A wide variety of design elements are stored. In addition, a newly designed design element can be separately registered with a design element ID.

  The standard style data storage unit 43 stores in advance standard style data of a screen in which design elements are combined in a unified manner. In this embodiment, various screen styles are prepared in advance according to various themes, and a combination of design elements such that the user interface maintains consistency is stored as standard style data in association with these screen styles. Yes. For example, if the “beginner target style” is suitable for designing a user interface for beginners, a simple system design is assumed. Design elements such as messages with few terms are registered in combination. On the other hand, if the system style is an “expert style”, a large-scale system design is assumed, so messages that use unified operation elements and technical terms are combined and registered between screens. Has been. In addition, original screen styles uniquely set by the designer, such as in-house standard styles, can be separately registered.

  The screen design data storage unit 44 stores screen design data related to each screen designed by various design elements. In the present embodiment, display contents of each screen are set in each screen design data based on various design elements selected from the design element library. For example, each screen design data is given a screen ID for identifying the screen, and each design element is also given a design element ID. The display contents of each screen are determined by the screen ID and the design element ID. Are to be managed.

  In the present embodiment, various design elements constituting each screen are centrally managed in a design element library. Therefore, if a design element in the design element library is changed or modified, the change or modification is reflected in all screen design data created using the design element.

  The transition relation data storage unit 45 stores transition relation data for setting a transition relation between the screens. In the present embodiment, the transition relation data includes the transition source screen ID of the screen that is the transition source, the transition destination screen ID of the screen that is the transition destination, using the screen ID set for each screen constituting the user interface. Are associated. For example, when the screens having screen IDs S1 to S7 are set to the transition relationship shown in FIG. 3A, the transition relationship data is configured as shown in FIG. Further, in the present embodiment, the transition relation data defines an operation as a trigger when the transition is made from the transition source screen to the transition destination screen. This trigger information is configured by pressing a predetermined button, elapse of a predetermined time, or the like.

  The screen transition pattern storage unit 46 stores a fixed or specific transition relationship between screens as a screen transition pattern. In this embodiment, as shown in the screen transition pattern palette of FIG. 9, a menu tree format in which a plurality of child screens are branched in parallel with respect to one parent screen, and a plurality of screens are serially arranged in order. Various screen transition patterns, such as a wizard format, are registered for each pattern ID. Also, the original screen transition pattern uniquely set by the designer can be separately registered.

  Next, the arithmetic processing means 5 is composed of a CPU (Central Processing Unit) or the like, and by executing the user interface design program 1a installed in the program storage unit 41, as shown in FIG. Unit 51, design element candidate display unit 52, screen design data creation unit 53, transition relation data creation unit 54, screen transition diagram display unit 55, conversion target transition selection unit 56, and screen transition pattern determination unit 57 The conversion candidate transition pattern extraction unit 58, the conversion candidate transition diagram display unit 59, the screen transition pattern selection unit 60, and the screen transition pattern conversion unit 61 function as a computer system.

  Hereinafter, each component of the arithmetic processing means 5 will be described in more detail.

  The default display unit 51 causes the display unit 2 to display the design elements defined in the standard style data as defaults. In this embodiment, the designer can select a default screen style when creating screen design data. When a predetermined screen style is selected, the default display unit 51 reads out standard style data corresponding to the screen style from the standard style data storage unit 43, and various design elements set in the standard style data. Is displayed with default selected. For example, if a beginner target style is selected, data associated with each screen ID and design element ID is read from the standard style data storage unit 43 based on the screen style ID, and set and displayed in each screen. To do.

  The design element candidate display unit 52 reads design elements corresponding to each design stage of the screen from the design element library storage unit 42 and displays them as selection candidates. In this embodiment, the design element candidate display unit 52 functions together with the default display unit 51, reads design elements other than the design elements set in the standard style data from the design element library storage unit 42, and displays them as selection candidates. .

  The screen design data creation unit 53 creates screen design data for setting display contents of each screen. In the present embodiment, the screen design data creation unit 53 creates one screen design data by attaching a screen ID to each screen. A design element determined according to the default display or a design element determined separately according to the design element candidate display is set in each screen design data, and managed as a design element ID in association with the screen ID. In the present embodiment, the screen design data is created using the design elements stored in the design element library, but image data directly drawn by predetermined drawing software or the like may be used. In this case, the directly drawn image data or the like may be stored in the screen design data storage unit 44 as screen design data.

  The transition relationship data creation unit 54 creates transition relationship data for setting transition relationships between screens. In the present embodiment, the transition relation data creation unit 54 acquires the transition source screen ID of the screen that is the transition source from the screen design data stored in the screen design data storage unit 44, and associates it with the screen ID. Then, the transition source screen ID of the screen to be the transition destination is registered as table data. In addition, the transition relation data creation unit 54 separately sets trigger information for transition from the transition source screen to the transition destination screen.

  The screen transition diagram display unit 55 displays the transition relationship between the screens on the display means 2 as a screen transition diagram. Specifically, the screen transition diagram display unit 55 acquires transition relationship data from the transition relationship data storage unit 45, and draws a screen transition diagram based on the transition relationship data. Then, this screen transition diagram is stored in a display memory (not shown) and displayed on the display means 2. In the present embodiment, the screen transition diagram display unit 55 acquires the screen design data of each screen from the screen design data storage unit 44 and displays the thumbnail image of each screen in the screen transition diagram. .

  The conversion target transition selection unit 56 selects, as a conversion target transition, a range to be converted into another transition relationship among the transition relationships between the screens. Specifically, the conversion target transition selection unit 56 obtains the screen ID and the transition relation data of the screen included in the conversion target transition designated by the designer using the input unit 3 in the screen transition diagram displayed on the display unit 2. To get. Note that when designating the conversion target transition, a range that can be designated in advance may be displayed on the screen using a dotted frame or the like, or a desired range may be designated using a mouse, a keyboard, or the like.

  The screen transition pattern determination unit 57 determines whether or not there is a transition relationship corresponding to the screen transition pattern in the conversion target transition. Specifically, the screen transition pattern determination unit 57 collates the transition relation data in the conversion target transition selected by the conversion target transition selection unit 56 with the screen transition pattern stored in the screen transition pattern storage unit 46. The corresponding screen transition pattern is discriminated. As a result of the determination, if there is a matching screen transition pattern, the pattern ID is acquired, and if there is no matching screen transition pattern, a message that the user is allowed to select a conversion target transition is displayed again.

  The conversion candidate transition pattern extraction unit 58 extracts a convertible screen transition pattern candidate for a predetermined screen transition pattern. Specifically, the pattern ID of the screen transition pattern determined by the screen transition pattern determination unit 57 is acquired. For the screen transition pattern corresponding to the pattern ID, the pattern ID of the convertible screen transition pattern is automatically extracted from the screen transition pattern storage unit 46. In this embodiment, the conversion candidate transition pattern extraction unit 58 automatically extracts candidates that can be converted. However, the present invention is not limited to this, and the designer can select a desired screen from the screen transition pattern storage unit 46. You may make it select a transition pattern manually.

  The conversion candidate transition diagram display unit 59 causes the display means 2 to display screen transition pattern candidates that can be converted when there is a screen transition to be changed. In the present embodiment, the conversion candidate transition diagram display unit 59 acquires the pattern ID of the screen transition pattern extracted by the conversion candidate transition pattern extraction unit 58, and converts the conversion candidate transition pattern corresponding to the pattern ID into the conversion candidate transition diagram. Draw as The conversion candidate transition diagram is stored in a display memory (not shown) and displayed on the display means 2.

  The screen transition pattern selection unit 60 selects a screen transition pattern to be converted. In the present embodiment, the screen transition pattern selection unit 60 selects the screen transition pattern selected by the designer using the input unit 3 from the convertible screen transition patterns displayed as the conversion candidate transition diagram by the conversion candidate transition diagram display unit 59. Get the pattern ID.

  The screen transition pattern conversion unit 61 converts a predetermined screen transition pattern into another screen transition pattern. Specifically, the screen transition pattern conversion unit 61 includes the pattern ID of the screen transition pattern (pre-conversion pattern) determined by the screen transition pattern determination unit 57 and the screen transition pattern selected by the screen transition pattern selection unit 60 ( (Pattern after conversion) is acquired. And based on the conversion rule regarding these patterns, the transition relation data of the pattern before conversion are converted into the transition relation data corresponding to the pattern after conversion.

  In the present embodiment, the screen transition pattern conversion unit 61 is programmed with a conversion rule for converting each screen transition pattern stored in the screen transition pattern storage unit 46 into another screen transition pattern. In addition, a plurality of transition destination screens having a common transition source screen and screens that transition in series with order are considered to have an equivalent relationship. For this reason, if conversion rules are defined for screens in an equivalent relationship, any number of screens can be handled.

  Next, regarding the operation of the user interface design system 1 executed by the user interface design program of this embodiment and the user interface design method, (1) when creating screen design data, (2) when creating transition relationship data , And (3) The case where the screen transition pattern is converted will be described separately.

(1) When Screen Design Data is Created FIG. 4 is a flowchart for creating screen design data. As shown in FIG. 4, when the designer creates screen design data, first, a command for creating new screen design data is input from the menu screen of the user interface design program (step S1). In response to this input, a unique screen ID is set in association with the screen design data (step S2).

  Subsequently, since a list of screen styles registered in the standard style data storage unit 43 is displayed on the display means 2, the designer selects a desired screen style (step S3). In the present embodiment, a list of “novice target styles” targeting beginners, “expert target styles” targeting experts, or “user setting styles” uniquely set by the designer, etc. Is displayed.

  When a predetermined screen style is selected, the default display unit 51 reads standard style data corresponding to the screen style from the standard style data storage unit 43. Based on the standard style data, design elements suitable for the screen style are displayed as default values for various design elements. Further, the design element candidate display unit 52 reads design elements other than the default from the design element library storage unit 42 and displays them as selection candidates (step S4). As a result, even a inexperienced designer can design a consistent user interface semi-automatically just by selecting default values for each design element.

  FIG. 5 is a diagram illustrating a setting screen when a button shape is set as an example of a design element. As shown in FIG. 5, according to the present embodiment, a button suitable for the selected screen style is selected by default from among the buttons registered in the button library. If there is no favorite shape, it is possible to register a new button shape with the “Create New” button or to correct the registered button shape with the “Partial correction” button.

  Next, the designer selects the default design element displayed in step S4 or another design element registered in the design element library (step S5). An experienced designer may select all design elements from the design element library. In this case, it is not necessary to provide the default display unit 51.

  Subsequently, in step S6, it is determined whether or not the setting has been completed for all the design elements. If the setting has been completed (step S6: YES), the screen design data is stored in the screen design data storage unit 44. (Step S7). On the other hand, when there is an unset design element (step S6: NO), the process proceeds to the next design element setting screen (step S8), and the processing from step S4 is repeated.

(2) When creating transition relation data FIG. 6 is a flowchart for creating transition relation data. As shown in FIG. 6, when the designer creates transition relation data, first, a command for creating transition relation data is input from the menu screen of the user interface design program (step S11).

  Subsequently, the designer uses the input unit 3 to select a screen as a transition source from the screen design data stored in the screen design data storage unit 44 (step S12). In addition, a screen that is a transition destination is selected for the transition source screen (step S13). At this time, in the present embodiment, as shown in FIG. 7, the setting screen is displayed and the design is performed while visually confirming the transition relationship between the screens. Therefore, the transition relationship between the screens is easily defined. Then, for each transition relationship, by setting trigger information that triggers the transition (step S14), transition relationship data as shown in FIG. 3 is created.

  Then, it is determined whether or not the transition relationship setting is completed for each screen in a predetermined range constituting the user interface (step S15). If completed (step S15: YES), the transition relationship data changes. It is stored in the relationship data storage unit 45 (step S16). On the other hand, if there is an unset transition relationship (step S15: NO), the process returns to step S12 and the above-described processing is repeated. Note that the transition relationship may be set using a virtual screen prior to the creation of the screen design data. Thereafter, a procedure for creating screen design data while confirming the correspondence before and after the transition may be taken.

(3) Case of Converting Screen Transition Pattern FIG. 8 is a flowchart for converting a predetermined screen transition pattern included in the transition relation data once created to another screen transition pattern. As shown in FIG. 8, when the designer intends to convert the screen transition pattern, first, a command for converting the screen transition pattern is input from the menu screen of the user interface design program (step S21).

  Subsequently, when the designer selects the transition relation data to be corrected using the input means 3 from the transition relation data storage section 45, the display means 2 displays the transition relation data in FIG. A screen transition diagram as shown in FIG. 6 is displayed (step S22). In the present embodiment, since the screen transition diagram display unit 55 displays the thumbnail images of each screen, the designer can easily grasp the transition relationship of each screen.

  Next, the designer selects a conversion target transition using the input unit 3 while referring to the screen transition diagram (step S23). Thereby, the conversion target transition selection unit 56 acquires the screen ID and the transition relation data of the screen included in the conversion target transition. Then, the screen transition pattern determination unit 57 compares the transition relationship set in the transition relationship data with various screen transition patterns, and determines which screen transition pattern matches (step S24). ).

  If there is no transition relationship that matches any screen transition pattern as a result of the determination (step S24: NO), the conversion process cannot be performed. In this case, the process returns to step S23, and a display prompting the designer to reselect the conversion target transition is performed. On the other hand, when the transition relationship in the conversion target transition matches any screen transition pattern (step S24: YES), the screen transition pattern determination unit 57 acquires the pattern ID of the screen transition pattern.

  When the screen transition pattern determination unit 57 acquires the pattern ID, a screen transition pattern that can be converted from the screen transition pattern corresponding to the pattern ID is automatically extracted by the conversion candidate transition pattern extraction unit 58 (step S25). Thereby, the extracted screen transition pattern is displayed on the display means 2 as a screen transition pattern palette as shown in FIG. 9 by the conversion candidate transition diagram display unit 59 as a conversion candidate (step S26). Therefore, the designer can quickly and reliably perform the design work without selecting a screen transition pattern that cannot be converted.

  Next, when the designer selects a screen transition pattern to be converted from the conversion candidates (step S27), the screen transition pattern selection unit 60 acquires the pattern ID of the screen transition pattern. Thereby, the screen transition pattern conversion unit 61 refers to the conversion rule between the two patterns based on the pattern ID acquired by the screen transition pattern determination unit 57 and the pattern ID acquired by the screen transition pattern selection unit 60. Based on the conversion rule, the transition relation data in the conversion target transition is arranged and converted into the transition relation data of the corresponding screen transition pattern after conversion (step S28).

  As a result, even if a screen transition pattern is composed of a large number of screens, it can be converted to other screen transition patterns all at once by a simple operation. Relationships can be easily modified. Further, since it is not necessary to reset the transition relationship for each screen, setting omissions and setting mistakes are prevented.

  The transition relation data for which the conversion process has been completed is stored in the transition relation data storage unit 45 (step S29), and then read out by the screen transition diagram display unit 55, and the converted screen transition diagram is displayed on the display means 2. It is displayed (step S30).

According to this embodiment as described above,
1. The transition relationship between the screens can be batch-converted in units of screen transition patterns, and design change work can be performed quickly and reliably. As a result, even if the transition relationship of the screen is not determined at the beginning of the design, the design work can proceed, and a flexible design system that can be modified, added, and changed as necessary can be constructed.
2. Screen design work and screen transition design work can be completed in the same system, and operability and work efficiency can be improved.
3. Even an inexperienced designer can easily design a consistent and unified user interface.

  Next, specific examples of the user interface design program and the user interface design method according to the present invention will be described with reference to FIGS. In this embodiment, among the operations for designing the user interface of the digital camera, the operation for converting the screen transition pattern was performed.

  The digital camera used in the present embodiment includes, for example, a display as the display means 2, a power switch as the input means 3, a shutter, a mode slider for switching between the shooting mode and the playback mode, menu buttons for displaying a menu screen, various types Operation devices such as a cross key for selecting a menu and the like, an OK button for confirming the selection, and a cancel button for canceling the selection are provided.

  In the above, it is assumed that the user interface of the digital camera is designed to have a screen transition relationship as shown in FIG. Specifically, S3-2 (shooting menu) is used as a main screen, S3-2-1 (exposure adjustment screen), S3-2-2 (white balance setting screen), and S3-2-n1 to S3-2. It is set in a menu tree format with -n3 as a child screen. In the above and the following description, the screen ID will be described with “S” attached.

  In this transition relationship, when the transition relationship between the screens of S3-2-n1 to S3-2-n3 is converted, the screens of S3-2-n1 to S3-2-n3 are to be converted in the screen transition diagram. Choose as. When the menu tree format is selected as the screen transition pattern after conversion, the screen is converted into a transition relationship as shown in FIG. That is, S3-2-new (preset submenu screen) is newly created, and S3-2-n1 to S3-2-n3 are registered as child screens using the screen as a parent screen.

  When the wizard format is selected as the screen transition pattern after conversion, it is converted into a transition relationship as shown in FIG. That is, S3-2-n2 and S3-2-n3 are released from the transition destination screen for S3-2, and S3-2-n2 is set as the transition destination screen of S3-2-n1, and this S3-2- S3-2-n3 is set as the transition destination screen of n2.

  FIG. 13A shows transition relation data before conversion in the above conversion processing. Further, FIG. 13B and FIG. 13C respectively show the transition relation data after conversion to the menu tree format and the transition relation data after conversion to the wizard format. As shown in FIG. 13, the transition relation data indicates that the transition relation is collectively converted according to a predetermined conversion rule.

  As in this embodiment, in the user interface of the digital camera, various items are provided in the shooting menu. For this reason, if all items are included in one screen, the shooting menu becomes long, which may hinder the shooting action. Therefore, for example, the designer tries to improve usability by repeatedly examining the preset items such as the number of pixels and the film sensitivity by lowering the transition layer one step and reducing the items of the upper layer. In such a case, according to the present invention, the transition relationship between the respective screens can be easily and instantaneously converted, so that the study can be further deepened.

  The user interface design program and the user interface design method according to the present invention are not limited to the above-described embodiment, and can be changed as appropriate.

  For example, in the above-described embodiment, the word “screen” is used by taking a static screen that does not change among the screens displayed on the display unit 2 as an example. However, when an animation, an analog clock, or the like is displayed on a part of the screen, the screen dynamically changes. However, it is preferable to handle such a change as one “screen”. This is because it is meaningless in terms of design to handle the above-mentioned changes by disassembling the screen one frame at a time.

  In addition, when considering the function and role of the screen, it may be easier to understand if a plurality of continuous screens are handled as one unit in the screen transition diagram. Also, in the design process, what was originally designed as one screen may be physically divided into a plurality of screens as the amount of information increases. Therefore, when creating a screen transition diagram, a plurality of screens may be set as one screen group, and this screen group may be handled in the same manner as one screen.

It is a block diagram which shows the user interface design system of this embodiment. It is a figure which shows an example of the design element library of this embodiment. In this embodiment, it is a figure which shows an example of (a) screen transition relationship, and (b) an example of transition relationship data. It is a flowchart figure in the case of producing screen design data in this embodiment. It is a figure which shows the setting screen in the case of setting a button shape in this embodiment. In this embodiment, it is a flowchart figure in the case of creating transition relation data. In this embodiment, it is a figure which shows the setting screen in the case of setting the transition relationship of each screen. In this embodiment, it is a flowchart figure in the case of converting a screen transition pattern. In this embodiment, it is a figure which shows an example of the display screen as which the screen transition diagram was displayed. It is a figure which shows the screen transition relationship before conversion in a present Example. It is a figure which shows the screen transition relationship after converting into a menu tree format in a present Example. It is a figure which shows the screen transition relationship after converting into a wizard format in a present Example. In this embodiment, (a) before conversion, (b) after conversion to the menu tree format, and (c) transition relation data after conversion to the wizard format. It is a figure which shows the example of (a) menu tree format and (b) wizard format among the transition relations of the screen in a user interface.

Explanation of symbols

DESCRIPTION OF SYMBOLS 1 User interface design system 1a User interface design program 2 Display means 3 Input means 4 Storage means 5 Arithmetic processing means 41 Program storage part 42 Design element library storage part 43 Standard style data storage part 44 Screen design data storage part 45 Transition relation data storage Unit 46 Screen transition pattern storage unit 51 Default display unit 52 Design element candidate display unit 53 Screen design data creation unit 54 Transition relation data creation unit 55 Screen transition diagram display unit 56 Conversion target transition selection unit 57 Screen transition pattern determination unit 58 Conversion candidate Transition pattern extraction unit 59 Conversion candidate transition diagram display unit 60 Screen transition pattern selection unit 61 Screen transition pattern conversion unit

Claims (6)

A transition relation data storage unit that stores transition relation data in which an ID is set for each screen constituting the user interface and the transition source screen ID and the transition destination screen ID are associated with each other for the transition relation between the screens;
A screen transition pattern storage unit that stores a typical transition relationship between each screen as a screen transition pattern;
A screen transition diagram display unit that reads transition relationship data from the transition relationship data storage unit and displays it on a display unit as a screen transition diagram indicating a transition relationship between the screens based on the data,
A conversion target transition selection unit that selects a range to be converted into another transition relationship among the transition relationships between the screens displayed as the screen transition diagram, and a conversion target transition;
A screen transition pattern discriminating unit that discriminates the screen transition pattern of the selected conversion target transition by collating with the screen transition pattern storage unit;
A screen transition pattern selection unit for selecting a screen transition pattern after conversion from the screen transition patterns stored in the screen transition pattern storage unit;
The computer functions as a screen transition pattern conversion unit that converts the transition relation data of the screen transition pattern determined by the screen transition pattern determination unit into the transition relation data of the screen transition pattern selected by the screen transition pattern selection unit. A user interface design program characterized by In claim 1,
Based on the screen transition pattern determined by the screen transition pattern determination unit, a conversion candidate transition pattern extraction unit that extracts a convertible screen transition pattern candidate from the screen transition pattern storage unit;
A user interface design program for causing a computer to function as a conversion candidate transition diagram display unit for displaying an extracted conversion candidate transition pattern on a display means as a conversion candidate transition diagram. In claim 1,
A design element library storage unit for storing a design element library having various design elements constituting each screen;
A standard style data storage unit that preliminarily stores the design elements as standard style data of the screen in a unified combination;
A default display unit that reads out the standard style data and displays a default design element on the display means as a default;
A design element candidate display unit that reads design elements corresponding to each design stage of the screen from the design element library storage unit and displays them as selection candidates;
The computer functions as a screen design data creation unit that creates design data for each screen based on design elements determined according to the default display or design elements determined separately according to the design element candidate display. User interface design program. A transition relation data storage unit for storing transition relation data in which an ID is set for each screen constituting the user interface and a transition source screen ID and a transition destination screen ID are associated with each other for the transition relation between the screens. Using a user interface design system having a screen transition pattern storage unit for storing a typical transition relationship in FIG.
A screen transition diagram display unit reads transition relationship data from the transition relationship data storage unit, and displays a screen transition diagram display step as a screen transition diagram indicating a transition relationship between the screens based on the data.
If you want to change the transition relationship between screens that have already been set, the conversion target transition selection unit selects the range to be converted to another transition relationship among the transition relationships displayed as the screen transition diagram as the conversion target transition A transition selection step;
A transition pattern determination step in which the screen transition pattern determination unit determines the screen transition pattern of the selected conversion target transition by comparing it with the screen transition pattern storage unit;
A transition pattern selection step in which the screen transition pattern selection unit selects a screen transition pattern after conversion from the screen transition patterns stored in the screen transition pattern storage unit;
A transition pattern conversion step in which a screen transition pattern conversion unit converts the transition relation data of the screen transition pattern determined in the transition pattern determination step into transition relation data of the screen transition pattern selected in the transition pattern selection step; A user interface design method characterized by executing. In claim 4,
A conversion candidate transition pattern extraction unit that extracts a screen transition pattern candidate that can be converted from the screen transition pattern storage unit based on the screen transition pattern determined in the transition pattern determination step;
A conversion candidate transition diagram display unit executes a conversion candidate transition diagram display step of displaying the extracted conversion candidate transition pattern on the display means as a conversion candidate transition diagram as a conversion candidate transition diagram. In claim 4,
A design element library storage unit for storing a design element library having various design elements constituting each screen; and a standard style data storage unit for storing the design elements in a unified manner and storing them in advance as standard style data for the screen. When creating a screen configuration using the user interface design system
A default display unit that reads standard style data from the standard style data storage unit and displays a default design element on the display means as a default; and
A design element candidate display unit reads a design element corresponding to each design stage of the screen from the design element library storage unit and displays it as a selection candidate.
The screen design data creation unit executes a screen design data creation step for creating design data for each screen based on design elements determined according to the default display or design elements determined separately according to the design element candidate display. A user interface design method characterized by: