KR101130104B1 - Mobile User Interface Prototyping Tool and Method of Prototyping Mobile User Interface and Record Media Recorded Program for Realizing the same - Google Patents

Abstract

The terminal authoring apparatus according to the present invention records a GUI editor authoring a scenario of a user interface (UI) implemented in a terminal, a simulator simulating a author authored by a GUI editor, and recording a simulated scenario. It includes a recording unit.

GI, terminal, simulation

Description

Device and device recording method and a recording medium recording a program for implementing the same {Mobile User Interface Prototyping Tool and Method of Prototyping Mobile User Interface and Record Media Recorded Program for Realizing the same}

The present invention relates to a terminal UI authoring apparatus, a terminal UI authoring method, and a recording medium on which a program for implementing the same is recorded. More specifically, the terminal UI authoring apparatus and terminal UI authoring, which can more easily author the terminal UI, are provided. The present invention relates to a recording medium on which a method and a program for implementing the same are recorded.

Today's mobile terminals provide a variety of services, including wireless call service, wireless Internet service, short message service and camera, video call, and multi-mode.

Accordingly, there is a demand for a terminal equipped with more various functions, and as a terminal specialized in a user interface (UI) becomes popular, the user's interest in the UI of the terminal is increasing.

Meanwhile, a developer who develops a UI requires a lot of time and money to develop the UI. At present, there is no basic tool for authoring the UI of the terminal, and in order to emulate or simulate the developed UI, it is necessary to separately manufacture using a flash or the like.

Therefore, there is a need for a method of authoring a terminal UI more efficiently.

An object of the present invention is to provide a terminal UI authoring apparatus.

Another object of the present invention is to provide a terminal UI authoring method.

Another object of the present invention is to provide a recording medium on which a program for implementing a UI authoring method is recorded.

Problems to be solved by the present invention are not limited to the above-mentioned contents, and other problems not mentioned will be clearly understood by those skilled in the art from the following description.

In order to achieve the above object, an aspect of a terminal UI authoring apparatus according to an embodiment of the present invention is a UI editor for authoring a scenario of a UI (User Interface) implemented in a terminal, a UI authored by the UI editor It includes a simulator for simulating and recording unit for recording the simulated UI scenario.

According to another aspect of the present invention, there is provided a method of authoring a terminal UI according to another embodiment of the present invention, including authoring a scenario of a UI implemented in a terminal in a user interface (UI) editor and the authored UI scenario. Recording the simulated UI scenario.

One aspect of a recording medium in which a program for implementing the UI authoring method according to another embodiment of the present invention is recorded to achieve the above object is a recording in which a program for implementing the UI authoring method is recorded in a terminal UI authoring apparatus A medium, comprising: authoring a scenario of a UI implemented in a terminal in a user interface (UI) editor; And recording the simulated UI scenario while simulating the authored UI scenario.

Specific details of other embodiments are included in the detailed description and the drawings.

According to the terminal UI authoring apparatus and terminal UI authoring method of the present invention as described above, and a recording medium on which a program for implementing the same is recorded, the following effects are obtained.

In the terminal UI authoring apparatus and the terminal UI authoring method according to an embodiment of the present invention, the authored UI scenario may be simulated in a simulator. In addition, the UI scenario simulated in the simulator allows recording, playback and file storage. On the other hand, since the scenario list area displays a list of UI scenarios that are simulated or played back, the list of scenarios that are simulated or played back by the scenario list area can be outlined at a glance, and the location of the current simulation or playback can be identified. have. Therefore, the UI of the terminal can be authored and tested more efficiently, and the cost and time required for UI authoring can be greatly saved.

Advantages and features of the present invention and methods for achieving them will be apparent with reference to the embodiments described below in detail with the accompanying drawings. However, the present invention is not limited to the embodiments disclosed below, but can be implemented in various different forms, and only the embodiments make the disclosure of the present invention complete, and the general knowledge in the art to which the present invention belongs. It is provided to fully inform the person having the scope of the invention, which is defined only by the scope of the claims. Like reference numerals refer to like elements throughout.

The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the invention. In the present specification, the singular form includes plural forms unless otherwise specified in the specification. As used herein, “comprises” and / or “comprising” refers to the presence of one or more other components, steps, actions and / or devices. Or does not exclude additions.

Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings.

1 illustrates a terminal UI authoring apparatus according to an embodiment of the present invention. 2 is a diagram illustrating in more detail a simulator of a terminal UI authoring apparatus according to an embodiment of the present invention.

Referring to FIG. 1, a terminal UI authoring apparatus according to an embodiment of the present invention includes a UI editor 10, a UI simulator 50, and a scenario list area 55.

The UI editor 10 is a tool that can author or edit a UI on a computer. The UI editor 10 may include all menus necessary for authoring and editing the UI. The UI editor 10 may include a work area 110, which is a space for authoring a UI, a page / summary area 120, which is an area in which all pages may be listed, or an outline may be written, a menu area in which titles, work menus, etc. ( 130).

The work area 110 may edit and author the UI. The authoring toolbar 300 may be located in the work area 110. The authoring toolbar 300 includes basic widgets and symbols necessary for authoring the UI in the form of icons, and may author the UI using a plurality of icons included in the authoring toolbar 300. Details of the authoring toolbar 300 will be described later.

The page / outline area 120 includes a page area in which all the pages worked and an outline area in which an outline is described. The page / outline area 120 allows you to work while viewing the entire document.

In the menu area 130, a title 132, a menu bar 134, a tool bar 136, an option bar 138, and the like are formed. As shown in FIG. 1, the title 132 may be formed at the top, and the menu bar 134, the tool bar 136, and the option bar 138 may be sequentially formed, but the positions may be changed by editing. It is self-evident.

In the UI editor 10, the UI of the terminal may be edited or authored. In the work area 110 of FIG. 1, a start screen 410 and an arrival screen 420 are shown, and a connection line 430 connecting the start screen 410 and the arrival screen 420 is illustrated. Such a UI can be formed by the authoring toolbar 300.

The start screen 410 is a screen before operation in the terminal, and the arrival screen 420 is a screen to which the start screen 410 is connected. Pressing the connection key or the connection menu described in the connection line 430 on the start screen 410 is connected to the arrival screen 420.

When authoring the UI, the page 110a is formed in the page / outline region 120. Thus, the page / outline area 120 may outline the invention as a whole.

Meanwhile, when the simulator formed in the UI authoring apparatus is executed, the UI scenario authored in the UI editor 10 is simulated in the simulator 50.

The simulator 50 may have the same shape as the terminal. The simulator 50 includes a screen area 510 in which a UI is displayed, a keypad area 520 in which a plurality of buttons are formed, and a menu area 530 in which a work menu is formed.

The screen area 510 is an area where a simulated UI is displayed, and a scenario of switching from the start screen 410 to the arrival screen 420 may be displayed.

The keypad area 520 is an area corresponding to the keypad of the terminal, and a plurality of buttons may be formed. When simulating the UI scenario in the simulator 50, buttons operable among a plurality of buttons of the keypad area 520 may be activated. The activated button 522, which is part of the plurality of buttons in the keypad area 520, may be selected by a mouse or a keyboard, and the like, from the start screen 410 to the arrival screen 420 by selecting the activated button 522. Can be switched. That is, selecting the activated button 522 designated in the start screen 410 is switched to the arrival screen 420.

Various menus of tasks are formed in the menu area 530. For example, a title portion 532 indicating a name, a menu bar 534 on which job menus are formed, a tool bar 536 on which job icons are formed, and the like, may be formed in the menu area 530. Here, the tool bar 536 may include a recording icon (a), a playback icon (b), a pause icon (c), a stop icon (d), a capture icon (f), and a storage icon (e).

When the recording icon (a) is selected, the UI scenario simulated by the simulator 50 is recorded. The recorded UI scenario may be reproduced by the play icon b, and the reproduced UI scenario may be paused by the pause icon c. In addition, it can be stopped by the stop icon (d). Of course, the recording, playback, pause, and stop of the UI scenario can be executed not only by the menu but also by an icon.

If you select the save icon (e), you can save the simulated UI scenario or the recorded UI scenario as a file. The UI scenario saved as a file by the storage icon (e) can be played again by loading the file on the simulator 50, and can be moved to another program or device. As well as the storage icon (e), it is of course possible to save the file of the UI scenario by the save menu.

If you select the capture icon (f), it is possible to capture the screen of the UI scenario to be simulated or played. In addition, the captured screen can be used for UI authoring in the UI editor 10 and can be saved as a file.

Meanwhile, when the simulator 50 is executed, the scenario list area 55 may be generated. The scenario list area 55 displays a list of simulated UI scenarios or reproduced UI scenarios. The scenario list area 55 may display the page P of the scenario currently being simulated or reproduced.

According to the terminal UI authoring apparatus according to an embodiment of the present invention, the authored UI scenario may be simulated in the simulator 50. In addition, the UI scenario simulated in the simulator 50 can be recorded, played back, and saved in a file. On the other hand, since the list of UI scenarios that are simulated or reproduced in the scenario list area 55 is displayed, a list of scenarios simulated or reproduced by the scenario list area 55 can be outlined at a glance, and the current position is simulated. You can also check the playback. Therefore, the UI of the terminal can be authored and tested more efficiently, and the cost and time required for UI authoring can be greatly saved.

Hereinafter, a method for authoring a terminal UI according to an embodiment of the present invention will be described with reference to FIGS. 1 to 5. 3 is a flowchart illustrating a terminal UI authoring method according to an embodiment of the present invention. 4 and 5 are diagrams for explaining a terminal UI authoring method according to an embodiment of the present invention.

1 to 5, first, the UI scenario implemented in the terminal is authored in the UI editor 10 (S110). 4 shows a part of the UI scenario authored in the UI editor 10. That is, the start screen 410 and the arrival screen 420 are provided, and the start screen 410 and the arrival screen 420 are connected by the connection line 430. A connection key is described on the connection line 430. In FIG. 4, when the SOFT2 is selected, a UI scenario is illustrated in which the start screen 410 is switched to the arrival screen 420.

Subsequently, at least a part of the authored UI scenario is selected (S120). At this time, when executing the simulator without selecting a part of the authored UI scenario, the entire authored UI scenario is simulated. If you select some of the authored UI scenarios, for example some pages or only some screens, only the UI scenarios in the selected area are simulated.

Next, the simulator 50 is executed (S130). When the simulator 50 is executed by selecting the execution icon of the simulator 50 and selecting the execution menu of the simulator 50 from the menu, the simulator 50 is displayed, and the initial start screen 410 of the simulator 50 is displayed. Displayed on the screen area 510. In addition, the scenario list area 55 is displayed. The scenario list area 55 displays a list of selected pages and displays a start page that is the current page.

Subsequently, recording is started (S140). That is, recording is started by selecting a recording icon and selecting a recording from the menu. Then, the simulated UI scenario is recorded.

Subsequently, the UI scenario is simulated in the simulator 50 (S150). That is, the user selects the activated button 522 in the simulator 50 provided with the start screen 410 and executes the UI scenario of changing to the arrival screen 420. Here, the arrival screen 420 may vary depending on which button of the activated buttons 522 is pressed. In other words, when the start screen 410 is provided, selecting the button described in the connection line connecting the start screen 410 and the arrival screen 420 changes the screen to the arrival screen 420 according to the UI scenario. For example, referring to FIG. 4, when SOFT2 is selected while the start screen 410 is displayed on the screen area 510, the screen is changed to the arrival screen 420. That is, the UI scenario created in the UI editor 10 shown in FIG. 4 is simulated in the simulator 50 as shown in FIG. 5. Meanwhile, the simulator 50 may be displayed horizontally or vertically according to the type of the screen to be simulated. For example, when the start screen 410 is a vertical screen and the arrival screen 420 is a horizontal screen, the start screen 410 can be switched from the vertical screen to the horizontal screen while simulating the arrival screen 420. have. In addition, the current simulation position may be displayed in the scenario list area 55 while the simulation is in progress.

On the other hand, when the simulation ends, recording ends (S160). For example, recording can be terminated by selecting a recording icon or selecting a recording end menu from a menu.

Meanwhile, after recording is finished, the recorded UI scenario may be stored as a file. At this time, the stored UI scenario may be brought back to the simulator 50 or moved to another program or device.

In addition, the recorded UI scenario can be played back. In other words, the recorded UI scenario can be replayed by selecting the play icon. During playback of a recorded UI scenario, you can pause or stop it, or capture a screen.

According to the terminal UI authoring method according to an embodiment of the present invention, the UI scenario can be freely simulated in the simulator 50, and the simulated UI scenario can be recorded, reproduced, or stored as a file. That is, the UI can be authored and simulated more efficiently.

Although embodiments of the present invention have been described above with reference to the accompanying drawings, those skilled in the art to which the present invention pertains may implement the present invention in other specific forms without changing the technical spirit or essential features thereof. You will understand that. It is therefore to be understood that the above-described embodiments are illustrative in all aspects and not restrictive.

1 illustrates a terminal UI authoring apparatus according to an embodiment of the present invention.

2 is a diagram illustrating in more detail a simulator of a terminal UI authoring apparatus according to an embodiment of the present invention.

3 is a flowchart illustrating a terminal UI authoring method according to an embodiment of the present invention.

4 and 5 are diagrams for explaining a terminal UI authoring method according to an embodiment of the present invention.

<Explanation of symbols on main parts of the drawings>

10: UI Editor 50: Simulator

55: Scenario List Area 110: Work Area

120: page / outline area 130: menu area

300: Authoring Toolbar 410: Welcome Screen

420: Arrival screen 430: Connection line

510: screen area 520: keypad area

522: activated button 530: menu area

532: Title section 534: Menu bar

536: Toolbar a: Burn icon

b: play icon c: pause icon

d: stop icon e: save icon

f: capture icon

Claims (18)

A UI editor for authoring a scenario of a UI implemented in a terminal; A simulator for simulating a UI scenario created in the UI editor, and simulating only a selected portion of the UI scenario when selecting a part of the UI scenario; And Terminal UI authoring apparatus including a recording unit for recording the UI scenario simulated in the simulator. The method of claim 1, Further comprising a playback unit for playing the recorded UI scenario, Further comprising at least one selected from the group including a pause unit for pausing the playback of the recorded UI scenario, a stop unit for stopping the playback of the recorded UI scenario, and a capture unit for capturing the screen of the UI scenario to be reproduced. Terminal UI authoring device. 3. The method of claim 2, And a scenario list area for displaying the list of the simulated UI scenarios or the reproduced UI scenarios and being generated when the simulator is executed. The method of claim 1, And a file storage unit for storing the recorded UI scenario as a file, wherein the UI scenario stored in the file storage unit can be reproduced in the simulator. The method of claim 1, The simulator is displayed in a terminal shape, UI authoring apparatus including a screen area on which the UI is displayed, a keypad area including a plurality of buttons, and a menu area on which a work menu is formed. The method of claim 5, And the screen area is changed to a vertical screen or a horizontal screen. The method of claim 1, The UI editor forms a start screen of the UI, an arrival screen to which the start screen is connected, and a connection line connecting the start screen to the arrival screen, and the simulator simulates an image of switching from the start screen to the arrival screen. Terminal UI authoring device. Authoring a scenario of a UI implemented in a terminal in a user interface (UI) editor; Selecting at least a portion of the authored UI scenario; And And recording the simulated UI scenario while simulating the selected portion of the authored UI scenario. The method of claim 8, Recording the simulated UI scenario while simulating a selected portion of the authored UI scenario, Running a simulator; Initiating recording; Simulating the UI scenario in the simulator; And Terminal UI authoring method comprising the step of terminating the recording. The method of claim 9, The terminal UI authoring method further comprising the step of displaying a list of the simulated scenario. The method of claim 8, Playing the recorded UI scenario further; Pausing the playback of the recorded UI scenario, stopping the playback of the recorded UI scenario, and capturing a screen of the simulated UI scenario further comprising at least one step selected from the group Terminal UI authoring method. The method of claim 11, And displaying a list of scenarios to be reproduced. The method of claim 8, And storing the recorded UI scenario as a file and playing the stored UI scenario file. The method of claim 8, Authoring a UI implemented in the terminal in the UI editor, Providing a start screen; Providing an arrival screen to which the start screen is connected; And And providing a connection line connecting the start screen and the arrival screen. 15. The method of claim 14, In the recording of the simulated UI scenario while simulating the authored UI scenario, the terminal UI authoring method for simulating the image is switched from the start screen to the arrival screen. The method of claim 9, The simulator is displayed in a terminal shape and includes a keypad area including a plurality of buttons. And recording the simulated UI scenario while simulating the authored UI scenario, wherein a button operable in the keypad area is activated. The method of claim 8, The simulated screen UI authoring method is displayed in a horizontal screen or a vertical screen. In the recording medium recording a program for implementing a UI authoring method in a terminal UI authoring device, Authoring a scenario of a UI implemented in a terminal in a user interface (UI) editor; Selecting at least a portion of the authored UI scenario; And Recording a program for implementing a UI authoring method comprising the step of recording the simulated UI scenario while simulating a selected portion of the authored UI scenario.

Images