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

Abstract

Device for authoring a terminal UI according to the present invention, UI for authoring a UI (User Interface) implemented in the terminal includes a tool bar (tool bar) including a plurality of icons representing the basic widget and symbols for authoring the UI Editor; And a simulator for simulating a UI created by the UI editor, wherein the UI editor forms a start screen of the UI, a arrival screen to which the start screen is connected, and a connection line connecting the start screen to the arrival screen. The simulator simulates an image that is switched from the start screen to the arrival screen. A plurality of icons included in the authoring toolbar includes a basic screen icon, a connection line icon, a list menu icon, and an option rollup. roll up icon, pop up box icon, button icon, text box icon, text input box icon, matrix icon, spin box icon, tap icon, drop-down box ( dropdown box icon, check button icon, radio button icon, progress bar / slider bar Including the icon and the line icon, the UI editor authors the UI using a plurality of icons included in the authoring toolbar, wherein the start screen and the arrival screen each use two or more icons including the main screen icon. Is authored.

UI, terminal, widget

Description

Device user authoring method and device user authoring method and 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, 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 includes an authoring tool bar including a basic widget for authoring a UI and a plurality of icons representing symbols; A UI editor for authoring a user interface (UI) implemented in the terminal; And a simulator for simulating a UI created by the UI editor, wherein the UI editor forms a start screen of the UI, a arrival screen to which the start screen is connected, and a connection line connecting the start screen to the arrival screen. The simulator simulates an image that is switched from the start screen to the arrival screen. A plurality of icons included in the authoring toolbar includes a basic screen icon, a connection line icon, a list menu icon, and an option rollup. roll up icon, pop up box icon, button icon, text box icon, text input box icon, matrix icon, spin box icon, tap icon, drop-down box ( dropdown box icon, check button icon, radio button icon, progress bar / slider bar Including the icon and the line icon, the UI editor authors the UI using a plurality of icons included in the authoring toolbar, wherein the start screen and the arrival screen each use two or more icons including the main screen icon. Is authored.
In order to achieve the above object, an aspect of the terminal UI authoring method according to another embodiment of the present invention includes an authoring tool bar including a basic widget for authoring a UI and a plurality of icons representing symbols; A terminal UI authoring method in a terminal UI authoring apparatus comprising a UI editor for authoring a UI implemented in a terminal and a simulator for simulating a UI created in the UI editor. Providing a basic screen widget for a start screen by selecting a basic screen icon among the plurality of icons in an editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide a start screen of the terminal; Providing a basic screen widget for an arrival screen by selecting a basic screen icon among the plurality of icons in the UI editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide an arrival screen of the terminal; Providing a connection widget connecting the start screen and the arrival screen, the connection widget including a connection key and a connection menu; And simulating a UI written in the UI editor in a UI simulator, wherein the UI simulator provides the start screen on a screen of a simulation terminal and presses the connection key or a connection menu of the simulation terminal to the arrival screen. Providing an image to be converted.
In order to achieve the above object, an aspect of a recording medium in which a program for implementing a UI authoring method according to another embodiment of the present invention is recorded includes a plurality of icons representing basic widgets and symbols for authoring a UI. In the terminal UI authoring apparatus including an authoring tool (tool bar), including a UI editor (editor) for authoring a UI (User Interface) implemented in the terminal and a simulator (simulator) for simulating the UI created in the UI editor A recording medium in which a program for implementing a UI authoring method is recorded, the recording medium comprising: providing a basic screen widget for a start screen by selecting a basic screen icon among the plurality of icons in a user interface (UI) editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide a start screen of the terminal; Providing a basic screen widget for an arrival screen by selecting a basic screen icon among the plurality of icons in the UI editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide an arrival screen of the terminal; Providing a connection widget connecting the start screen and the arrival screen, the connection widget including a connection key and a connection menu; And simulating a UI written in the UI editor in a UI simulator, wherein the UI simulator provides the start screen on a screen of a simulation terminal and presses the connection key or a connection menu of the simulation terminal to the arrival screen. Providing an image to be converted.

delete

delete

delete

Specific details of other embodiments are included in the detailed description and 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, not only the UI of the terminal can be authored, but also the simulation of the UI can be performed. That is, since UI authoring and UI simulation are performed in the same device, the UI of the terminal can be authored and tested more efficiently.

In addition, the UI editor of the terminal UI authoring apparatus and the terminal UI authoring method according to an embodiment of the present invention can easily author and edit the UI using an authoring toolbar. Therefore, the cost and time required for UI authoring can be greatly saved. In addition, in the terminal UI authoring apparatus and the terminal UI authoring method according to an embodiment of the present invention, after simulating the UI or applying it to an actual terminal, the UI editor can be easily modified. Therefore, efficiency can be dramatically increased and time can be saved significantly.

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.

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

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 illustrated, 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 icon 150 formed on the UI authoring apparatus is pressed, the scenario authored in the UI editor 10 is simulated in the simulator 50.

The simulator 50 has the same shape as the terminal. The simulator 50 includes a screen area 510 in which a screen of a terminal is displayed, a keypad area 520 in which a keypad of the terminal is formed, and a menu area 130 in which a menu is formed.

When the simulator icon 150 is pressed, the start screen 410 is displayed in the screen area 510 of the simulator 50. At this time, when the connection key or the connection menu described in the connection line 430 is pressed in the keypad area 520, the arrival screen 420 is displayed in the screen area 510.

In the UI authoring apparatus according to an embodiment of the present invention, not only the UI of the terminal can be authored, but also the simulation of the UI can be performed. That is, since UI authoring and UI simulation are performed in the same device, the UI of the terminal can be authored and tested more efficiently.

In addition, the editor of the UI authoring apparatus according to an embodiment of the present invention can easily author and edit the UI using the authoring toolbar 300. Therefore, the cost and time required for UI authoring can be greatly saved. In addition, the UI authoring apparatus according to an embodiment of the present invention can be easily modified in the UI editor after simulating the UI or applying it to an actual terminal. Therefore, efficiency can be greatly increased and time can be saved significantly.

2 is a view showing an authoring toolbar and an icon of a terminal UI authoring apparatus according to an embodiment of the present invention. 3 to 7 illustrate some of the icons of the authoring toolbar.

2 to 7, the authoring toolbar 300 of the terminal UI authoring apparatus according to an embodiment of the present invention includes a plurality of icons representing basic widgets and symbols.

A plurality of basic widget icons of the authoring toolbar 300 are formed, and the plurality of basic widget icons include a basic screen icon (a1), a connection line icon (a2), a list menu icon (a3), and an option rollup. up icon (a4), pop up box icon (a5), button icon (a6), text box icon (a7), text input box icon (a8), matrix icon (a9), spin Spin box icon (a10), tap icon (a11), dropdown box icon (a12), check button icon (a13), radio button icon (a14), pro It may be a combination selected from the group comprising a progress bar / slider bar icon a15 and a line icon a16. In addition, the symbol icon of the authoring toolbar 300 may include a square icon (a17), a circle icon (a18), an icon insert icon (a19), a symbol insert icon (a20), a special shape insert icon (a21), and the like. In addition, the authoring toolbar 300 may include an insert picture icon a22.

Although FIG. 2 illustrates an authoring toolbar 300 that includes all of the icons listed above, it may include only some of them, or may further include icons representing other basic widgets or symbols required for UI authoring. Of course it is.

3 is a diagram illustrating a basic widget formed by the basic screen icon a1 of the authoring toolbar 300. The basic screen a1 is formed on one side of the screen to display an annunciator unit a1_1 indicating the state of the terminal, a title unit a1_2 formed on the other side to display the name, and displays the UI work contents. It may include at least one of a body portion a1_3 and a soft key portion a1_4 formed on one side of the screen to display a UI authoring function. FIG. 3 shows an annunciator portion a1_1 formed at the top, a title portion a1_2 formed under the annunciator portion a1_1, a body portion a1_3 formed under the title portion a1_2, and a body portion ( Although the basic screen a1 formed by arranging soft key units a1_4 formed under the a1_3) is illustrated, the present invention is not limited thereto. That is, the basic screen a1 may include only at least one of the above components, or may further include other components.

That is, when the basic screen icon a1 of the authoring toolbar 300 is clicked, the basic screen a1 illustrated in FIG. 4 is formed in the work area. The worker can author the UI by editing the basic screen a1. The annunciator unit a1_1 indicates the state of the terminal, and the title unit a1_2 describes the name to be displayed on the screen. In addition, a substantial UI is written in the main body a1_3.

In this case, a spin box or a tab may be formed in the title portion a1_2. That is, various basic screens may be provided by applying the spin box icon a10 or the tab icon a11 to the title unit a1_2.

4 illustrates a basic widget represented by a list menu icon a3, an option rollup icon a4, a text box icon a7, a check button icon a13, and a radio button icon a14.

In particular, the basic widget representing the list menu can be deleted / added by one line as the contextual menu (a3 '). Alternatively, typing enter while typing text increases one line, and deleting all text deletes one line.

FIG. 5 is a diagram illustrating a method of editing a basic screen a1 to which the spin box a10 is applied. If the user wants to move from the text 1 to the text 2 by the spin box a10, the text 1 and the text 2 are connected with a connection line, and a connection key, for example, a direction key, is connected to the connection line. Here, pressing the direction key moves from text 1 to text 2. Similarly, if text 3 is connected to text 1 by a connecting line, the direction key can be used to move from text 1 to text 3.

FIG. 6 is a diagram illustrating a method of editing a basic screen a1 to which a tab a11 is applied. If you want to author a move from tab 1 to tab 2, connect tab 1 and tab 2 with a connecting line, and write the connecting key, for example, a direction key, on the connecting line. Then, pressing the direction key moves from tab 1 to tab 2.

FIG. 7 is a diagram illustrating a method of editing a basic screen a1 to which a dropdown a12 is applied. If the text 2 and the text 3 are to be unfolded by clicking the direction key in the text 1, the unexpanded screen and the unfolded screen are connected with a connection line, and the direction key is described. Then, pressing the direction key in text 1 expands text 2 and text 3 downward.

Hereinafter, a method for authoring a terminal UI according to an embodiment of the present invention will be described with reference to FIGS. 1 and 8 to 10. 8 to 10 are diagrams illustrating a terminal UI authoring method according to an embodiment of the present invention.

First, referring to FIG. 8, a start screen 410 of a terminal is provided to the UI editor 10.

Specifically, the main screen icon a1 of the authoring toolbar 300 is clicked to form a main screen widget in the work area 110, and the list menu icon a3 is clicked to read the main screen icon a1. The list widget is formed in the unit a1_3. In addition, the start screen to be formed may be formed using the authoring toolbar 300.

9, the arrival screen 420 of the terminal is provided to the UI editor 10.

Specifically, the basic screen icon a1 of the authoring toolbar 300 is clicked to form a basic screen widget in the work area. The basic screen widget for forming the arrival screen 420 may be formed to be located on the right side of the start screen 410. Subsequently, the pop-up box icon a5 is clicked to form a pop-up widget in the body portion a1_3 of the basic screen icon a1. In addition, the arrival screen 420 to be formed can be variously edited using the authoring toolbar 300.

Next, referring to FIG. 10, a connection line 430 is formed to connect the start screen 410 and the arrival screen 420.

Specifically, a menu that should be pressed when moving among the widgets of the start screen 410 is clicked with a mouse. In this state, the connection line icon a2 is pressed to form a connection widget connecting the start screen 410 and the arrival screen 420.

Then, a connection line 430 connecting the start screen 410 and the arrival screen 420 is formed, and the text formed on the connection line 430 describes a connection menu and a connection key to be pressed when moving.

On the other hand, the connection menu and the connection key described in the text formed on the connection line can be edited. Referring to FIG. 11, when the text 434 formed on the arrow 432 of the connecting line is double-clicked, the content of the text 434 may be edited. That is, the connection menu and the connection key can be changed.

Subsequently, referring back to FIG. 1, the UI authored by the UI editor 10 is simulated by the UI simulator 50 by pressing the simulator icon 150. The UI simulator 50 provides a start screen 410 on the screen of the simulation terminal and when the connection key or the connection menu described in the connection line 430 is pressed in the keypad area 520, the arrival screen 420 is displayed in the screen area 510. Is displayed.

According to the terminal UI authoring method according to an embodiment of the present invention, the UI authoring and UI simulation of the terminal can be continuously performed. You can also try out UI simulations as much as you want while authoring. Therefore, UI authoring can be performed more efficiently.

In addition, according to the terminal UI authoring method according to an embodiment of the present invention, the UI can be easily modified and edited. Therefore, efficiency can be dramatically increased and time can be saved significantly.

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 view showing an authoring toolbar and an icon of a terminal UI authoring apparatus according to an embodiment of the present invention.

3 to 7 illustrate some of the icons of the authoring toolbar.

8 to 11 are diagrams illustrating 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

110: Work Area 120: Page / Overview Area

130: menu area 150: simulator icon

300: Authoring Toolbar 410: Welcome Screen

420: Arrival screen 430: Connection line

510: screen area 520: keypad area

530: menu area

Claims (13)

A UI editor including an authoring tool bar including a basic widget for authoring a UI and a plurality of icons representing symbols and authoring a user interface (UI) implemented in a terminal; And Including a simulator for simulating the UI authored by the UI editor, 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. , The plurality of icons included in the authoring toolbar may include a basic screen icon, a connection line icon, a list menu icon, an option roll up icon, a pop up box icon, a button icon, and a text box icon. , Text input box icon, matrix icon, spin box icon, tap icon, dropdown box icon, check button icon, radio button icon, progress bar including the progress bar / slider bar icon and line icon, In the UI editor, the UI is authored using a plurality of icons included in the authoring toolbar, wherein the start screen and the arrival screen are authored using two or more icons each including the basic screen icon. The method of claim 1, And the UI editor and the simulator are displayed in different windows, and the window displaying the UI editor and the window displaying the simulator can be executed simultaneously. The method of claim 1, The authoring toolbar further comprises a picture insert icon terminal UI authoring apparatus. The method of claim 1, The basic screen icon is formed on one side of the screen to display the state of the terminal (annumciator), the other side of the title (title), the UI portion to display the contents of the work, and the screen on one side And at least one of a group formed in the group including a soft key unit for displaying a UI authoring function. The method of claim 1, The list menu icon is a basic widget representing a list menu, wherein the list menu is extended by one line when an enter is pressed during text input, and one line is deleted when all text contents are deleted. The method of claim 1, The connection line includes a text box describing an operation connection menu name and an operation connection key. Double-clicking the text box, the terminal UI authoring apparatus that can change the connection menu and the connection key described in the text box. The method of claim 1, Each of the start screen and the arrival screen configured by using two or more icons including the basic screen icon includes one or more basic widgets represented by another icon of the plurality of icons within a basic screen widget represented by the basic screen icon. Terminal UI authoring device configured by. Authoring tool bar including a basic widget for authoring a UI and a plurality of icons representing symbols, and an UI editor for authoring a user interface (UI) implemented in a terminal and authoring in the UI editor In a terminal UI authoring method in a terminal UI authoring apparatus including a simulator for simulating a UI, Providing a basic screen widget for a start screen by selecting a basic screen icon among the plurality of icons in a user interface (UI) editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide a start screen of the terminal; Providing a basic screen widget for an arrival screen by selecting a basic screen icon among the plurality of icons in the UI editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide an arrival screen of the terminal; Providing a connection widget connecting the start screen and the arrival screen, the connection widget including a connection key and a connection menu; And In the UI simulator (simulator) to simulate the UI written in the UI editor, the UI simulator provides the start screen on the screen of the simulation terminal, when the connection key or the connection menu of the simulation terminal is switched to the arrival screen Terminal UI authoring method comprising the step of providing a video. The method of claim 8, And the UI editor and the simulator are displayed in different windows, and the window displaying the UI editor and the window displaying the simulator can be executed simultaneously. The method of claim 8, The plurality of icons included in the authoring toolbar may include a basic screen icon, a connection line icon, a list menu icon, an option roll up icon, a pop up box icon, a button icon, and a text box icon. , Text input box icon, matrix icon, spin box icon, tap icon, dropdown box icon, check button icon, radio button icon, progress bar (UI) Method of authoring a terminal including a progress bar / slider bar icon and a line icon. The method of claim 10, The list menu icon is a basic widget representing a list menu, wherein the list menu increases one line when an enter is pressed during text input, and one line is deleted when all text contents are deleted. The method of claim 8, The connection widget comprises a text box with the connection key and a connection menu; Double-clicking the text box, the terminal UI authoring method that can change the connection menu and the connection key described in the text box. Authoring tool bar including a basic widget for authoring a UI and a plurality of icons representing symbols, and an UI editor for authoring a user interface (UI) implemented in a terminal and authoring in the UI editor In the recording medium recording a program for implementing a UI authoring method in a terminal UI authoring apparatus including a simulator for simulating a UI, Providing a basic screen widget for a start screen by selecting a basic screen icon among the plurality of icons in a user interface (UI) editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide a start screen of the terminal; Providing a basic screen widget for an arrival screen by selecting a basic screen icon among the plurality of icons in the UI editor; Providing at least one basic widget and a symbol in the basic screen widget by using the plurality of icons to provide an arrival screen of the terminal; Providing a connection widget connecting the start screen and the arrival screen, the connection widget including a connection key and a connection menu; And In the UI simulator (simulator) to simulate the UI written in the UI editor, the UI simulator provides the start screen on the screen of the simulation terminal, when the connection key or the connection menu of the simulation terminal is switched to the arrival screen A recording medium on which a program for implementing a terminal UI authoring method comprising providing an image is recorded.

Images