JP2019139298A - User interface design device - Google Patents

Abstract

To provide a user interface design device which can graphically design a user interface which changes screens displayed by changing display areas in one screen layout.SOLUTION: In a user interface design device, a screen layout is edited, and the created screen layout is stored. Moreover, a state transition diagram is edited, and the created state transition diagram is stored. The state transition diagram includes a plurality of objects indicating a plurality of states respectively, and a transition line indicating screen transition from a transition source state to a transition destination state. A plurality of display frames which designates the display area displayed in the plurality of states respectively are set in a superimposed screen layout. The state transition diagram is displayed in a superimposing manner with the superimposed screen layout. And in such case, superimposed display is performed in the state where the plurality of objects are disposed at the positions of the plurality of display frames, respectively.SELECTED DRAWING: Figure 6

Description

  The present invention relates to a user interface design apparatus used for designing a user interface (UI).

  The UI design apparatus is used to design a plurality of screens displayed on a device that is a UI design target.

  When multiple screens displayed on the device are designed using the UI design device, screen transitions on the multiple screens displayed on the device are designed using a state transition diagram representing the contents of switching of the displayed screens. Often done. The state transition diagram is also called a screen transition diagram.

  When a screen transition is designed using a state transition diagram, it is desirable that each state represented in the state transition diagram can be intuitively associated with the screen displayed in each state. For this reason, when a screen transition is designed using a state transition diagram, it is desirable to graphically associate each state represented in the state transition diagram with a screen layout representing the contents of the screen displayed in each state. It is. The technique described in Patent Document 1 is an example.

  In the state transition creation device described in Patent Document 1, a transition state diagram display area and a node editing area are provided on the main screen, and all nodes are reduced and displayed in the transition state diagram display area together with transition relations, and specified by the user. The node thus displayed is displayed in the node editing area (paragraphs 0033 and 0034). The node is each screen used for GUI (paragraph 0023).

JP 2007-133815 A

  In the above technique, since each state and one screen layout are associated with each other, a UI that cannot be represented by associating each state with one screen layout cannot be designed graphically. For example, a UI that switches screens displayed by switching display areas in one screen layout cannot be designed graphically.

  The present invention is made to solve this problem. The problem to be solved by the present invention is to provide a UI design apparatus that can graphically design a UI for switching displayed screens by switching display areas in one screen layout.

  The present invention is directed to a user interface (UI) design device.

  In the UI design apparatus, the layout editing unit edits the screen layout. The screen layout created by the layout editing unit editing is stored in the layout storage unit. The state transition diagram editing unit edits the state transition diagram. The state transition diagram created by editing by the state transition diagram editing unit is stored in the state transition diagram storage unit.

  The state transition diagram includes a plurality of objects each representing a plurality of states, and a transition line representing a screen transition from the transition source state to the transition destination state.

  In the state transition diagram editing unit, the state arranging unit arranges a plurality of objects. In addition, the state transition connection unit connects an object representing the transition source state and an object representing the transition destination state with a transition line. The superimposition layout designation unit designates a superimposition screen layout from the screen layouts stored in the layout storage unit. Further, the display frame setting unit sets a plurality of display frames that respectively specify display areas to be displayed in a plurality of states in the superimposed screen layout. The layout superimposing unit displays the state transition diagram superimposed on the superimposed screen layout. At that time, the superimposed display is performed in a state where the plurality of objects are arranged at the positions of the plurality of display frames, respectively.

  According to the present invention, a display region in which a state transition diagram including a plurality of objects each representing a plurality of states and a transition line representing a screen transition from a transition source state to a transition destination state is created and displayed in the plurality of states A plurality of display frames for designating each is set in the screen layout. Further, the state transition diagram is displayed so as to be superimposed on the screen layout in a state where the plurality of objects are respectively arranged at the positions of the plurality of display frames. For this reason, it is possible to graphically design a UI for switching the displayed screen by switching the display area in the screen layout.

  The objects, features, aspects and advantages of the present invention will become more apparent from the following detailed description and the accompanying drawings.

3 is a schematic diagram illustrating an example of a screen layout created using the user interface (UI) design apparatus of Embodiment 1. FIG. 3 is a schematic diagram illustrating examples of an Audio menu screen, a Radio menu screen, and a Setting menu screen included in a UI designed using the UI design apparatus according to Embodiment 1. FIG. 3 is a block diagram illustrating a hardware configuration of the UI design apparatus according to Embodiment 1. FIG. 1 is a block diagram illustrating a UI design apparatus according to a first embodiment. 6 is a schematic diagram illustrating an example of an edit screen for a screen layout displayed on the UI design apparatus according to Embodiment 1. FIG. 6 is a schematic diagram illustrating an example of an editing screen for a state transition diagram displayed on the UI design apparatus according to Embodiment 1. FIG. 6 is a schematic diagram illustrating an example of an editing screen for a state transition diagram displayed on the UI design apparatus according to Embodiment 1. FIG. FIG. 6 is a block diagram illustrating a UI design apparatus according to a second embodiment. FIG. 10 is a block diagram illustrating a UI design apparatus according to a third embodiment. FIG. 10 is a schematic diagram illustrating an example of an editing screen for a state transition diagram displayed on the UI design apparatus according to the third embodiment. FIG. 10 is a block diagram illustrating a UI design apparatus according to a fourth embodiment. FIG. 20 is a schematic diagram illustrating an example of a state transition diagram editing screen displayed on the UI design apparatus according to the fourth embodiment. FIG. 10 is a schematic diagram illustrating an example of an Audio menu screen and a Radio menu screen included in a UI designed using the UI design apparatus according to the fourth embodiment.

1 Embodiment 1
1.1 Designed user interface (UI)
FIG. 1 is a schematic diagram illustrating an example of a screen layout created using the UI design apparatus according to the first embodiment. FIG. 2 is a schematic diagram illustrating an example of an Audio menu screen, a Radio menu screen, and a Setting menu screen included in a UI designed using the UI design apparatus according to the first embodiment.

  A screen layout 1000 illustrated in FIG. 1 represents a display concept inherent in a designed UI, and includes a background image 1020, an Audio menu 1021, a Radio menu 1022, and a Setting menu 1023. The background image 1020 is a landscape image including the sea and the sky. Each menu of the Audio menu 1021, Radio menu 1022, and Setting menu 1023 includes a plurality of menu items.

  The background image 1020 extends over the entire screen layout 1000. The Audio menu 1021 is arranged so as to overlap the sky included in the background image 1020, and is arranged around the clouds included in the sky. The Radio menu 1022 is arranged so as to overlap the sky included in the background image 1020, and is arranged around the sun included in the sky. The Setting menu 1023 is arranged so as to overlap the sea included in the background image 1020. The Audio menu 1021, Radio menu 1022, and Setting menu 1023 are arranged in a distributed manner.

  An audio menu screen 1100 illustrated in FIG. 2A includes a characteristic portion 1120 including a cloud and an audio menu 1021. The Audio menu screen 1100 is obtained by cutting them out from the screen layout 1000. The radio menu screen 1101 illustrated in FIG. 2B includes a characteristic portion 1121 including the sun and a radio menu 1022. The radio menu screen 1101 is obtained by cutting them out from the screen layout 1000. A setting menu screen 1102 illustrated in FIG. 2C includes a characteristic portion 1122 including the sea and a setting menu 1023. The Setting menu screen 1102 is obtained by cutting them out from the screen layout 1000.

  The UI designed using the UI design apparatus according to the first embodiment includes an audio menu screen 1100, a radio menu screen 1101, and a setting menu screen 1102. The UI includes screen transition from one screen included in the screen group including the Audio menu screen 1100, Radio menu screen 1101, and Setting menu screen 1102 to another screen included in the screen group. The entire screen layout 1000 is larger than each screen of the Audio menu screen 1100, Radio menu screen 1101, and Setting menu screen 1102. Each screen is a part of the screen layout 1000, not the entire screen layout 1000. For this reason, screen transition from one screen to another screen is performed by switching the position of the display area in the screen layout 1000.

  The background image 1020 may be replaced with another background image. The menu group consisting of the Audio menu 1021, Radio menu 1022 and Setting menu 1023 may be replaced with another menu group, and the menu screen group consisting of the Audio menu screen 1100, Radio menu screen 1101 and Setting menu screen 1102 is another menu. It may be replaced with a screen group. The characteristic parts 1120, 1121 and 1122 may be replaced with other characteristic parts.

1.2 Hardware Configuration of UI Design Device FIG. 3 is a block diagram illustrating a hardware configuration of the UI design device according to the first embodiment.

  The UI design apparatus 1200 is a personal computer (PC), and includes a PC main body 1220, a monitor 1221, a pointing device 1222, and a keyboard 1223, as shown in FIG. The PC main body 1220 includes a processing device 1240 and a storage device 1241. The pointing device 1222 includes a mouse or the like. The processing device 1240 includes a central processing unit (CPU), a graphic processing unit (GPU), and the like. The storage device 1241 includes a random access memory (RAM), a hard disk drive, and the like. The UI design apparatus 1200 may include components other than these components.

  The processing device 1240 executes the program stored in the storage device 1241. Accordingly, the PC operates as the UI design apparatus 1200.

  The UI design apparatus 1200 performs a process corresponding to an operation performed on the pointing device 1222 and the keyboard 1223, and performs a process of displaying a screen on the monitor 1221.

  The input device including the pointing device 1222 and the keyboard 1223 may be replaced with another input device. The display device including the monitor 1221 may be replaced with another display device.

1.3 Outline of UI Design Device FIG. 4 is a block diagram illustrating the UI design device according to the first embodiment.

  The UI design apparatus 1200 includes a layout editing unit 1300, a layout storage unit 1301, a state transition diagram editing unit 1302, and a state transition diagram storage unit 1303, as shown in FIG. The UI design apparatus 1200 may include components other than these components.

  The layout editing unit 1300 and the state transition diagram editing unit 1302 are realized by the processing device 1240 executing the program stored in the storage device 1241. Part or all of the layout editing unit 1300 and the state transition diagram editing unit 1302 may be realized by hardware that does not execute a program. The layout storage unit 1301 and the state transition diagram storage unit 1303 are realized by the storage device 1241.

  The layout editing unit 1300 displays a screen layout editing screen on the monitor 1221 and edits the screen layout according to the editing operation performed on the pointing device 1222 and the keyboard 1223. The screen layout being edited is displayed on the screen layout editing screen. Therefore, the operator of the UI design apparatus 1200 can edit the screen layout by performing an editing operation on the pointing device 1222 and the keyboard 1223 while viewing the screen layout editing screen displayed on the monitor 1221. The screen layout created by the editing by the layout editing unit 1300 is stored in the layout storage unit 1301.

  The state transition diagram editing unit 1302 displays a state transition diagram editing screen on the monitor 1221, and edits the state transition diagram according to the editing operation performed on the pointing device 1222 and the keyboard 1223. The state transition diagram is also referred to as a screen transition diagram, and illustrates the contents of screen switching displayed on the device. The state transition diagram being edited is displayed on the state transition diagram editing screen. Therefore, the operator of the UI design apparatus 1200 can edit the state transition diagram by performing an editing operation on the pointing device 1222 and the keyboard 1223 while viewing the editing screen of the state transition diagram displayed on the monitor 1221. it can. The state transition diagram created by editing by the state transition diagram editing unit 1302 is stored in the state transition diagram storage unit 1303.

  On the state transition diagram editing screen, the state transition diagram being edited is displayed superimposed on the screen layout. Thereby, the screen layout and the state transition diagram being edited are graphically related, and the operator of the UI design apparatus 1200 can simultaneously refer to the screen layout and the state transition diagram being edited. In a state where the state transition diagram being edited is displayed superimposed on the screen layout, the state transition diagram being edited can be viewed.

1.4 Details of Editing Screen Layout The layout editing unit 1300 includes a component placement unit 1320 as shown in FIG.

  The component placement unit 1320 is realized by the processing device 1240 executing the program stored in the storage device 1241.

  The component placement unit 1320 places UI components in the screen layout in accordance with the placement operation performed on the pointing device 1222 and the keyboard 1223. Therefore, when editing the screen layout, the operator of the UI design apparatus 1200 performs an arrangement operation on the pointing device 1222 and the keyboard 1223 while looking at the screen layout editing screen displayed on the monitor 1221. UI components can be placed in the layout.

1.5 Screen Layout Editing Screen FIG. 5 is a schematic diagram illustrating an example of a screen layout editing screen displayed on the UI design apparatus according to the first embodiment.

  The screen layout editing screen 1400 illustrated in FIG. 5 includes regions 1420 and 1421.

  An area 1420 is displayed on the right side of the editing screen 1400 and serves as an editing window. In area 1420, screen layout 1440 being edited is displayed. The screen layout 1440 being edited includes UI components 1460, 1461, and 1462 that are already arranged.

  An area 1421 is displayed on the left side of the editing screen 1400. In the area 1421, UI parts 1480, 1481, 1482, and 1483 are displayed. The UI parts 1480, 1481, 1482, and 1483 are displayed in the area 1421 by the part placement unit 1320.

  The component arrangement unit 1320 selects the UI component 1500, and is selected when an arrangement operation for arranging the selected UI component 1500 at an in-region position in the region 1420 is performed on the pointing device 1222 and the keyboard 1223. The UI component 1500 is arranged at the position in the area. In the placement operation, a UI component 1500 is selected from the UI components 1480, 1481, 1482, and 1483 displayed in the area 1421, and the selected UI part 1500 is dragged and dropped from the area 1421 to an in-area position in the area 1420. This is a placement operation. The arrangement operation may be replaced with another arrangement operation. For example, the arrangement operation may be replaced with an arrangement operation in which the UI component 1500 is selected from the UI components 1480, 1481, 1482, and 1483 displayed in the area 1421 and the position in the area 1420 is clicked. The placement operation may be replaced by right-clicking the position in the region 1420 and selecting the UI component 1500. When the latter arrangement operation is adopted, the area 1421 is not necessary.

1.6 Details of Editing State Transition Diagram The state transition diagram editing unit 1302 includes a state arranging unit 1340, a state transition connecting unit 1341, a state editing unit 1342, and a layout superimposing unit 1343, as shown in FIG. The state editing unit 1342 includes a display frame setting unit 1360. The layout superimposing unit 1343 includes an overlay layout specifying unit 1380.

  The state arrangement unit 1340, the state transition connection unit 1341, the state editing unit 1342, the layout superimposing unit 1343, the display frame setting unit 1360, and the superimposing layout specifying unit 1380 are executed by the processing device 1240 executing the program stored in the storage device 1241. It is realized by.

  The state transition diagram edited by the state transition diagram editing unit 1302 includes a plurality of objects and transition lines. Each of the plurality of objects represents a plurality of states. The transition line represents a screen transition from the transition source state to the transition destination state. The transition source state and the transition destination state are included in a plurality of states. Specific examples thereof will be described below.

  The state arrangement unit 1340 arranges a plurality of objects in accordance with the arrangement operation performed on the pointing device 1222 and the keyboard 1223.

  The state transition connection unit 1341 connects an object representing a transition source state and an object representing a transition destination state by a transition line according to a connection operation performed on the pointing device 1222 and the keyboard 1223.

  The state editing unit 1342 edits a plurality of objects and edits a plurality of state attributes according to an editing operation performed on the pointing device 1222 and the keyboard 1223.

  The display frame setting unit 1360 sets a plurality of display frames that respectively specify display areas to be displayed in a plurality of states in the superimposed screen layout described below according to the setting operation performed on the pointing device 1222 and the keyboard 1223. The position of the display frame indicates a position where the display area is cut out from the superimposed screen layout. The sizes of the plurality of display frames are fixed to the same size as the screen size displayed on the device. The set positions of the plurality of display frames are stored in the state transition diagram storage unit 1303. Therefore, the state transition diagram storage unit 1303 stores data indicating the positions of the set plurality of display frames.

  The superimposition layout designation unit 1380 designates a superimposition screen layout from the screen layouts stored in the layout storage unit 1301 in accordance with the designation operation performed on the pointing device 1222 and the keyboard 1223.

  The layout superimposing unit 1343 displays the state transition diagram being edited by superimposing it on the designated superimposition screen layout. At this time, the superimposed display is performed in a state where the plurality of objects are arranged at the positions of the plurality of display frames, respectively.

1.7 State Transition Diagram Editing Screen FIGS. 6 and 7 are schematic diagrams illustrating examples of state transition diagram editing screens displayed on the UI design apparatus according to the first embodiment. FIG. 7 is an enlarged view of the vicinity of the second object in FIG.

  The state transition diagram editing screen 1600 illustrated in FIGS. 6 and 7 includes regions 1620 and 1621.

  The area 1620 is arranged on the right side of the state transition diagram editing screen 1600 and serves as an editing window. In the area 1620, a state transition diagram 1640 being edited and a superimposed screen layout 1641 are displayed. The state transition diagram 1640 being edited is displayed superimposed on the superimposed screen layout 1641. The superimposed screen layout 1641 is displayed on the background. The state transition diagram 1640 being edited is displayed in front of it.

  The state transition diagram 1640 includes a first object 1660, a second object 1661 and a transition line 1662. A first object 1660 and a second object 1661 represent state 1 and state 2, respectively. A transition line 1662 represents a screen transition from the state 1 to the state 2 and connects the first object 1660 and the second object 1661.

  The first object 1660 and the second object 1661 include a first display frame 1680 and a second display frame 1681, respectively, and are arranged at the positions of the first display frame 1680 and the second display frame 1681, respectively. .

  In the area 1621, an object 1700 is displayed. The state placement unit 1340 displays the object 1700 in the area 1621.

  The superimposed layout designating unit 1380 displays the superimposed screen layout 1641 when a designation operation for designating the superimposed screen layout 1641 from the screen layouts stored in the layout storage unit 1301 is performed on the pointing device 1222 and the keyboard 1223. Is specified. The layout superimposing unit 1343 sets the designated superimposed screen layout 1641 as the background of the area 1620.

  The state arrangement unit 1340 selects the object 1720, and when an arrangement operation for arranging the selected object 1720 at the position in the area 1620 is performed on the pointing device 1222 and the keyboard 1223, the selected object 1720 is displayed. Arrange at the position in the area. This arrangement operation is an arrangement operation in which an object 1720 is selected from the objects 1700 displayed in the area 1621 and the selected object 1720 is dragged and dropped from the area 1621 to the position in the area 1620. In the same manner as the arrangement operation of the UI component 1500 described above may be replaced with another arrangement operation, the arrangement operation of the object 1720 may be replaced with another arrangement operation.

  The state transition connection unit 1341 displays the first object 1660 and the second object 1661 when an operation for connecting the first object 1660 and the second object 1661 is performed on the pointing device 1222 and the keyboard 1223. Are connected by a transition line 1662. The connection operation selects the first object 1660, sets the UI design apparatus 1200 to the transition line connection mode, and sets the first object 1660 to the first while the UI design apparatus 1200 is set to the transition line connection mode. This is a connection operation of dragging and dropping onto the second object 1661. In order to set the UI design apparatus 1200 to the transition line connection mode, a specific key provided on the keyboard 1223 is pressed. The connection operation may be replaced with another connection operation. For example, the connection operation is replaced with a connection operation in which a symbol representing the transition line 1662 displayed around the first object 1660 is selected, and the selected symbol is dragged and dropped onto the second object 1661. May be. The UI design apparatus 1200 is not set to the transition line connection mode when a specific key provided on the keyboard 1223 is pressed, but is selected when the menu item “connect by transition line” is selected. 1200 may be set to the transition line connection mode.

  The display frame setting unit 1360 displays the first display frame 1680 and the second display frame 1680 when an operation for setting the first display frame 1680 and the second display frame 1681 is performed on the pointing device 1222 and the keyboard 1223, respectively. The display frame 1681 is set, and the first display frame 1680 and the second display frame 1681 are displayed in the area 1620, respectively. The first display frame 1680 and the second display frame 1681 have a rectangular shape, and are disposed inside the first object 1660 and the second object 1661, respectively. The first display frame 1680 and the second display frame 1681 surround the display area 1740 displayed in the state 1 and the display area 1741 displayed in the state 2, respectively, and clearly show the display areas 1740 and 1741, respectively. The positions of the first display frame 1680 and the second display frame 1681 are stored in the state transition diagram storage unit 1303.

1.8 Separation of Screen Layout Editing and State Transition Diagram Editing In the UI design apparatus 1200, the created screen layout is stored in the layout storage unit 1301, and the created state transition diagram is the state transition diagram storage unit 1303. Stored in Therefore, the screen layout and the state transition diagram are stored independently of each other and can be edited independently of each other.

  In the UI design apparatus 1200, the superimposed layout designation unit 1380 only designates a superimposed screen layout from the screen layouts stored in the layout storage unit 1301, and the screen stored in the layout storage unit 1301. A copy of the layout is not captured and stored in the state transition diagram storage unit 1303 as a superimposed screen layout.

  Accordingly, the screen layout and the screen transition can be developed in parallel, and the work period required for UI design can be shortened. For example, by adopting the following development flow, the work period required for UI design can be shortened.

  First, the screen layout development designer performs the arrangement of objects in the screen.

  Subsequently, the screen layout development designer and the screen transition development staff perform screen layout development and screen transition development in parallel using the arrangement of objects in the screen, respectively. That is, the screen layout development designer performs enhancement of display contents and display logic design in the screen, and the screen transition development person performs screen transition logic design in parallel.

  Thereby, it is possible to separate the screen layout development designer and the screen transition development person from each other and perform parallel development.

  On the other hand, in the technique described in Patent Document 1, the description of the screen transition using the state transition diagram and the description of the screen layout corresponding to the state are edited on the same editor. Also, in the stored data, elements related to screen transition and elements related to screen layout are integrated. For this reason, the screen layout development person and the screen transition development person cannot be separated from each other to perform parallel development.

1.9 Advantages of UI design apparatus according to Embodiment 1 According to a technique represented by the technique described in Patent Document 1, each state of a plurality of states is associated with one screen layout. On the other hand, only the screen layout showing the entire screen can be set. For this reason, it is not possible to design a UI for switching a screen to be displayed by switching a display area in a screen layout having a size larger than the size of the screen to be displayed using a state transition diagram.

  On the other hand, according to the UI design apparatus 1200, a state transition diagram including a plurality of objects each representing a plurality of states and a transition line representing a screen transition from the transition source state to the transition destination state is created. A plurality of display frames that respectively specify display areas to be displayed in the state are set for screen layout. Further, the state transition diagram is displayed so as to be superimposed on the screen layout in a state where the plurality of objects are respectively arranged at the positions of the plurality of display frames. For this reason, a UI for switching the displayed screen by switching the display area in the screen layout having a size larger than the size of the displayed screen can be designed graphically using the state transition diagram.

  Further, according to the UI design apparatus 1200, an object that is a design element included in the state transition diagram can be used not only for a concept but also for display control when screen transition is executed. For this reason, UI can be designed efficiently.

2 Embodiment 2
FIG. 8 is a block diagram illustrating the UI design apparatus according to the second embodiment.

  The UI design apparatus 2200 according to the second embodiment illustrated in FIG. 8 is similar to the UI design apparatus 1200 according to the first embodiment illustrated in FIG. 4, the layout editing unit 1300, the layout storage unit 1301, and the state transition diagram editing unit. 1302, a state transition diagram storage unit 1303, a component placement unit 1320, a state placement unit 1340, a state transition connection unit 1341, a state editing unit 1342, a layout superimposition unit 1343, a display frame setting unit 1360, and a superposition layout designation unit 1380. Each of these constituent elements provided in the UI design apparatus 2200 can operate in the same manner as the constituent elements of the same name provided in the UI design apparatus 1200.

  However, in the UI design apparatus 2200, unlike the UI design apparatus 1200, the state transition diagram editing unit 1302 further includes a transition operation conversion unit 2344.

  The transition operation conversion unit 2344 displays the transition line when the object representing the transition source state and the object representing the transition destination state are connected by the transition line representing the screen transition from the transition source state to the transition destination state. It converts into the 1st information which prescribes | regulates the operation | movement when a transition is performed. The first information obtained by the conversion is stored in the state transition diagram storage unit 1303. Therefore, the state transition diagram storage unit 1303 stores data indicating the first information.

  The first information includes transition source coordinates indicating the position of the display area displayed in the transition source state, and transition destination coordinates indicating the position of the display area displayed in the transition destination state. The transition source coordinates and the transition destination coordinates are coordinates in the screen layout and reflect the positions of the start point and end point of the transition line, respectively. The transition source coordinates and the transition destination coordinates are displayed in the display area from the position indicated by the transition source coordinates to the position indicated by the transition destination coordinates when screen transition is executed in the UI designed using the UI design apparatus 2200. Can be used to implement moving animations.

  As the transition source coordinates and the transition destination coordinates, the coordinates at the upper left of the display frame surrounding the display area displayed in the transition source state and the transition destination state are used. The upper left coordinate of the display frame may be replaced with another coordinate. For example, the upper left coordinate of the display frame may be replaced with the coordinate of the center of the display frame.

  The UI design apparatus 2200 has the same advantages as the UI design apparatus 1200.

  In addition, according to the UI design apparatus 2200, a transition line, which is a design element included in the state transition diagram, can be used not only for a concept but also for display control of an animation when screen transition is executed. For this reason, UI can be designed efficiently.

3 Embodiment 3
FIG. 9 is a block diagram illustrating a UI design apparatus according to the third embodiment.

  The UI design apparatus 3200 according to the third embodiment illustrated in FIG. 9 is the same as the UI design apparatus 1200 according to the first embodiment illustrated in FIG. 4, the layout editing unit 1300, the layout storage unit 1301, and the state transition diagram editing unit. 1302, a state transition diagram storage unit 1303, a component placement unit 1320, a state placement unit 1340, a state editing unit 1342, a layout superimposing unit 1343, a display frame setting unit 1360, and a superposed layout specifying unit 1380. Each of these components provided in the UI design apparatus 3200 can operate in the same manner as the components of the same name provided in the UI design apparatus 1200.

  Further, the UI design apparatus 3200 includes a transition operation conversion unit 2344 as in the UI design apparatus 2200 of the second embodiment illustrated in FIG. The transition operation conversion unit 2344 provided in the UI design apparatus 3200 can operate in the same manner as the transition operation conversion unit 2344 provided in the UI design apparatus 2200.

  However, unlike the UI design apparatuses 1200 and 2200, the UI design apparatus 3200 includes an extended state transition connection unit 3341 instead of the state transition connection unit 1341. Also, in the UI design apparatus 3200, unlike the UI design apparatuses 1200 and 2200, the state transition diagram editing unit 1302 further includes a transition locus setting unit 3345.

  The extended state transition connection unit 3341 provided in the UI design device 3200 is a state transition connection unit that extends the function of the state transition connection unit 1341 provided in the UI design device 1200, and operates in the same manner as the state transition connection unit 1341. In addition, the shape of the transition line can be variably set. The shape of the transition line to be set is arbitrary, and may not be linear, but may be broken line or curved.

  The transition trajectory setting unit 3345 changes the shape of the transition line when the object representing the transition source state and the object representing the transition destination state are connected by the transition line representing the screen transition from the transition source state to the transition destination state. , It is converted into second information that defines the operation when the screen transition is executed. The second information obtained by the conversion is stored in the state transition diagram storage unit 1303. Therefore, the state transition diagram storage unit 1303 stores data indicating the second information.

  The transition line indicates the locus of the position of the display area when the screen transition is executed. The second information includes coordinates in the transient state indicating the position of the display area displayed in the transition state between the transition source state and the transition destination state. The coordinates in the transient state reflect the positions of intermediate points other than the start point and end point of the transition line. The transition state coordinates are used to realize an animation in which the display area moves via the position indicated by the transition state coordinates when screen transition is executed in the UI designed using the UI design apparatus 3200. Can do. The second information represented by the coordinates in the transient state may be replaced with the second information represented by other than the coordinates in the transient state. For example, the second information represented by the coordinates in the transient state may be replaced with a mathematical formula for calculating the coordinates in the transient state. The mathematical formula indicates the shape of the transition line.

  As the coordinates in the transient state, the upper left coordinates of the display frame surrounding the display area displayed in the transient state are used. The upper left coordinate of the display frame may be replaced with another coordinate. For example, the upper left coordinate of the display frame may be replaced with the coordinate of the center of the display frame.

  Next, an example of the second information is described for each set transition line shape.

  In the case where the shape of the set transition line is a polygonal line, the second information includes coordinates in the transient state that reflect the position of each vertex of the transition line. This realizes an animation in which the display area moves from a position that reflects the position of the start point of the transition line to a position that reflects the position of the end point of the transition line sequentially through the position that reflects the position of the vertex of the transition line. Can do.

  When the set shape of the transition line is a curve, the second information includes a mathematical expression representing the shape of the transition line. As a result, the coordinates in the transient state corresponding to the elapsed time from the start of the animation are calculated from the mathematical formula, and the transition from the position reflecting the position of the starting point of the transition line to the intermediate point on the transition line is sequentially performed. An animation in which the display area moves to a position that reflects the position of the end point of the line can be realized.

  FIG. 10 is a schematic diagram illustrating an example of a state transition diagram editing screen displayed on the UI design apparatus according to the third embodiment.

  A state transition diagram 3640 including a first object 3660, a second object 3661, and a transition line 3661 is displayed in an area 3620 of the state transition diagram editing screen 3600 illustrated in FIG.

  The extended state transition connection unit 3341 causes the pointing device 1222 and the keyboard 1223 to perform a connection operation for connecting the first object 3660 and the second object 3661 via the position in the area 3620. In addition, the first object 3660 and the second object 3661 are connected by a transition line 3662 passing through the in-region position. In the connection operation, the first object 3660 is selected, the UI design apparatus 3200 is set to the transition line connection mode, and the in-area position in the area 3620 is set while the UI design apparatus 3200 is set to the transition line connection mode. Is a connection operation of clicking and double-clicking the second object 3661. In order to set the UI design apparatus 3200 to the transition line connection mode, a specific key provided on the keyboard 1223 is pressed. The creation of the transition line 3662 is advanced each time the position in the region is clicked. Similar to the UI design apparatus 1200, the connection operation may be replaced with another connection operation. For example, the UI design apparatus 3200 may be set to the transition line connection mode when the menu item “connect by transition line” is selected.

  When the first object 3660 and the second object 3661 are connected by the transition line 3661, when the screen transition is executed, from the vicinity of the clouds included in the sky, the sea and the birds included in the sky Screens can be switched by displaying an animation in which the display area moves to the periphery of the sun contained in the sky sequentially through the periphery.

  The UI design device 3200 has the same advantages as the UI design device 1200.

  In addition, according to the UI design apparatus 3200, a transition line, which is a design element constituting the state transition diagram, can be used not only for the concept but also for display control of animation when screen transition is executed. For this reason, UI can be designed efficiently.

4 Embodiment 4
FIG. 11 is a block diagram illustrating a UI design apparatus according to the fourth embodiment.

  The UI design apparatus 4200 according to the fourth embodiment illustrated in FIG. 11 is similar to the UI design apparatus 1200 according to the first embodiment illustrated in FIG. 4, the layout editing unit 1300, the layout storage unit 1301, and the state transition diagram editing unit. 1302, a state transition diagram storage unit 1303, a component placement unit 1320, a state placement unit 1340, a state transition connection unit 1341, a state editing unit 1342, a layout superimposing unit 1343, and a superposed layout specifying unit 1380. Each of these components provided in the UI design device 4200 can operate in the same manner as the components of the same name provided in the UI design device 1200.

  However, in the UI design apparatus 4200, unlike the UI design apparatus 1200, the state transition diagram editing unit 1302 includes an extended display frame setting unit 4360 instead of the display frame setting unit 1360.

  The extended display frame setting unit 4360 provided in the UI design device 4200 is a display frame setting unit obtained by extending the function of the display frame setting unit 1360 provided in the UI design device 1200, and operates in the same manner as the display frame setting unit 1360. In addition, the size of the plurality of display frames can be variably set. The set positions and sizes of the plurality of display frames are stored in the state transition diagram storage unit 1303. Therefore, the state transition diagram storage unit 1303 stores data indicating the positions and sizes of the set display frames.

  In the UI design apparatus 1200, since the size of the display frame is fixed, only the position of the display frame is stored in the state transition diagram editing unit 1302. In the UI design apparatus 4200, the size of the display frame is fixed. Therefore, the position and size of the display frame are stored in the state transition diagram editing unit 1302.

  The size of each display frame can be set independently from the size of the screen displayed on the device. For this reason, the size of each display frame is set so that the range to be displayed is surrounded by the display frame. On the other hand, the size of the screen displayed on the device is constant. Therefore, the size of each display frame that has been set may be larger than the size of the screen displayed on the device, may be the same as the size of the screen displayed on the device, or the screen displayed on the device. It may be smaller than the size. When the size of the display frame is larger than the size of the screen displayed on the device, the display area surrounded by the display frame is reduced before being displayed on the device. When the size of the display frame is the same as the size of the screen displayed on the device, the display area surrounded by the display frame is displayed on the device without being enlarged or reduced. When the size of the display frame is smaller than the size displayed on the device, the display area surrounded by the display frame is enlarged before being displayed on the device.

  FIG. 12 is a schematic diagram illustrating an example of a state transition diagram editing screen displayed on the UI design apparatus according to the fourth embodiment. FIG. 13 is a schematic diagram illustrating an example of an Audio menu screen and a Radio menu screen included in a UI designed using the UI design apparatus according to the fourth embodiment.

  A state transition diagram 4640 including a first object 4660, a second object 4661, and a transition line 4661 is displayed in an area 4620 of the state transition diagram editing screen 4600 illustrated in FIG.

  The size of the first display frame 4680 included in the first object 4660 is the same as the size of the screen displayed on the device. The size of the second display frame 4681 included in the second object 4661 is larger than the size of the screen displayed on the device. The setting of the size of the second display frame 4681 reflects the operator's intention to display a wide range in the state 2.

  On the Audio menu screen 4400 shown in FIG. 13A, a display area 4740 surrounded by the first display frame 4680 is displayed without being enlarged or reduced.

  On the Radio menu screen 4401 shown in FIG. 13B, the display area 4741 surrounded by the second display frame 4681 is displayed after being reduced.

  The size of the Audio menu 4021 displayed on the state transition diagram editing screen 4600 shown in FIG. 12 is displayed on the state transition diagram editing screen 4600 shown in FIG. The size of the Audio menu 4021 is the same as that of the Radio menu 4022, but the size of the Audio menu 4021 displayed on the Audio menu screen 4400 shown in FIG. 13A is the same as that of the Radio menu screen 4401 shown in FIG. It is larger than the size of the displayed radio menu 4022.

  The UI design device 4200 has the same advantages as the UI design device 1200.

  In addition, according to the UI design apparatus 4200, a UI for switching a screen to be displayed by switching the position and size of the display area in the screen layout can be designed using the state transition diagram.

  Further, according to the UI design apparatus 4200, a display frame that is a design element constituting the state transition diagram can be used not only for the concept but also for display control when screen transition is executed. For this reason, UI can be designed efficiently.

  It should be noted that the present invention can be freely combined with each other within the scope of the invention, and each embodiment can be appropriately modified or omitted.

  Although the present invention has been described in detail, the above description is illustrative in all aspects, and the present invention is not limited thereto. It is understood that countless variations that are not illustrated can be envisaged without departing from the scope of the present invention.

  1000 screen layout, 1100, 4400 Audio menu screen, 1101, 4401 Radio menu screen, 1102 Setting menu screen, 1200, 2200, 3200, 4200 User interface (UI) design device, 1300 Layout editing unit, 1301 Layout storage unit, 1302 Status Transition diagram editing unit, 1303 state transition diagram storage unit, 1320 component placement unit, 1340 state placement unit, 1341 state transition connection unit, 1342 state editing unit, 1343 layout superposition unit, 1360 display frame setting unit, 1380 superposition layout designation unit, 1400 Screen layout editing screen, 1600, 3600, 4600 State transition diagram editing screen, 1640, 3640 State transition diagram, 1641 Superimposition screen layout, 1660, 3660 First object 1661, 3661 Second object, 1662, 3661 Transition line, 1680, 4680 First display frame, 1681, 4681 Second display frame, 2344 Transition operation conversion unit, 3341 Extended state transition connection unit, 4360 Extended display Frame setting part.

Claims (7)

A layout editing section for editing the screen layout;
A layout storage unit for storing a screen layout created by editing the layout editing unit;
A state transition diagram editing unit for editing a state transition diagram including a plurality of objects each representing a plurality of states, and a transition line representing a screen transition from a transition source state to a transition destination state;
A state transition diagram storage unit for storing a state transition diagram created by the state transition diagram editing unit editing;
With
The state transition diagram editor
A state placement unit for placing the plurality of objects;
A state transition connection unit that connects the object representing the transition source state and the object representing the transition destination state by the transition line;
A superimposed layout designating unit for designating a superimposed screen layout from the screen layouts stored in the layout storage unit;
A display frame setting unit that sets a plurality of display frames that respectively specify display areas to be displayed in the plurality of states in the superimposed screen layout;
A layout superimposing unit that superimposes and displays the state transition diagram on the superimposed screen layout in a state where the plurality of objects are arranged at positions of the plurality of display frames, respectively.
A user interface design device comprising: The state transition diagram editing unit further includes a transition operation conversion unit that converts the transition line into first information that defines an operation when the screen transition is executed,
The user interface design apparatus according to claim 1, wherein the state transition diagram storage unit further stores the first information. The user according to claim 2, wherein the first information includes transition source coordinates indicating a position of a display area displayed in the transition source state and transition destination coordinates indicating a position of the display area displayed in the transition destination state. Interface design device. The state transition connection unit is an extended state transition connection unit capable of variably setting the shape of the transition line,
The state transition diagram editing unit further includes a transition trajectory setting unit that converts the shape into second information that defines an operation when the screen transition is executed,
The user interface design device according to claim 2 or 3, wherein the state transition diagram storage unit further stores the second information. The second information includes a transient state coordinate indicating a position of a display area displayed in a transient state between the transition source state and the transition destination state, or a mathematical formula for calculating the transient state coordinate. Item 4. The user interface design device according to Item 4. 6. The user interface design apparatus according to claim 1, wherein the display frame setting unit is an extended display frame setting unit capable of variably setting the sizes of the plurality of display frames. The user interface design apparatus according to claim 1, wherein the layout editing unit includes a component arrangement unit that arranges a user interface component in a screen layout being edited.

Images