JP7647331B2 - Operation screen design method, operation screen design device, and operation screen design program - Google Patents

Description

The present invention relates to an operation screen design method, an operation screen design device, and an operation screen design program.

Patent document 1 describes an operation screen design support device that supports the design of an operation screen for a UI (User Interface). In this operation screen design support device, a UI user creates an operation screen by dragging and dropping parts (objects) set from a parts list onto the screen layout.

JP 2012-83865 A

When placing objects (components) on the operation screen in this way, as the number of objects placed increases, the objects placed on the operation screen tend to interfere with each other. This makes it difficult to place the objects in a way that avoids interference between them. Also, when text is inserted into an object, the margin between the object and the text may be too small or too large depending on the length of the text, making it difficult to adjust these settings.
The present invention has been made in consideration of the above circumstances, and has an object to reduce the labor required when arranging an object into which text is to be inserted on an operation screen in designing an operation screen for a UI.

In one aspect of the present invention, a method for designing an operation screen causes a computer to execute the following processes: accepting an operation to place a first object to be displayed on the operation screen on the operation screen; correcting the placement position of the first object so that the spacing between the first object and a second object placed on the operation screen before the first object, or between an edge of the operation screen and the first object, satisfies a first constraint; accepting input of text to be displayed within the first object; and adjusting the size of the first object in accordance with the text.

The present invention can reduce the amount of work required to place an object into which text is to be inserted on an operation screen when designing a UI operation screen.

1 is a schematic configuration diagram of an example of an operation screen design device according to an embodiment; FIG. 13 is a diagram showing an example of an editing screen for editing the arrangement of objects on the operation screen. 11 is a flowchart of an example of a process performed by a control unit of the operation screen design device. 13 is a flowchart illustrating an example of an object placement process. 13A and 13B are diagrams illustrating an example of adjusting the placement position of an object. FIG. 11 is an explanatory diagram of another example of adjustment of the placement position of an object. 13 is a flowchart illustrating an example of an object size setting process. FIG. 13 is a diagram showing an example of text and an icon inserted into an object. 13A is a table showing an example of link information for associating an object with text or an icon, FIG. 13B is a table showing an example of icon information, and FIG. 13C is a table showing an example of text information. 13A and 13B are diagrams illustrating an example of adjusting the size of an object. 13A to 13C are diagrams illustrating another example of adjusting the size of an object.

Below, an embodiment of the present invention will be described with reference to the drawings. In the description of the drawings, identical or similar parts are given the same or similar reference numerals, and duplicate explanations will be omitted. Each drawing is schematic and may differ from the actual product. The embodiments shown below are examples of devices and methods for embodying the technical idea of the present invention, and the technical idea of the present invention is not limited to the devices and methods exemplified in the following embodiments. The technical idea of the present invention can be modified in various ways within the technical scope described in the claims.

(composition)
FIG. 1 is a schematic diagram of an example of an operation screen design device according to an embodiment. The operation screen design device 1 is a device that supports the design of an operation screen of a GUI (Graphical User Interface) displayed on a display device. For example, the operation screen design device 1 may be a device that supports the design of an operation screen of an in-vehicle device (i.e., an operation screen of an in-vehicle device mounted in a vehicle and operated by an occupant). For example, the operation screen design device 1 may be a computer (e.g., a personal computer) that is not mounted in a vehicle and is placed in an office and used to support the design of the operation screen of the in-vehicle device in the office. In addition, the operation screen design device 1 may be a computer that is connected to an in-vehicle device mounted in a vehicle and used to support the design while checking the GUI on the display of the in-vehicle device.
The operation screen design device 1 may be, for example, a device that supports the design of an operation screen of an IVI (In-Vehicle Infotainment) device.

The operation screen design device 1 is realized by, for example, a computer, and includes an input unit 10 , a display unit 11 , an output unit 12 , a control unit 20 , and a storage unit 30 .
The input unit 10 is a user interface such as a keyboard, a mouse, a touch pad, a touch panel, etc., and is operated by a UI designer to input data, etc. The input unit 10 is connected to the control unit 20, converts the designer's operations into operation signals, and outputs them to the control unit 20.

The display unit 11 is a display device such as a liquid crystal display, an organic EL (Electro Luminescence) display, or a CRT (Cathode Ray Tube) display, is connected to the control unit 20, and is used to display an editing screen for editing the arrangement of objects on the operation screen.
2 is a diagram showing an example of an editing screen for editing the arrangement of objects on an operation screen 40. For example, an editing screen 40 displays a canvas area for displaying the screen layout of an operation screen 41 to be designed, and a palette area 42 for displaying a list of objects 43a, 43b, 43c, 43d, ... which are UI parts that can be arranged on the operation screen.

For example, object 43a is a quadrangle object that is a quadrangle graphic displayed on the operation screen, and object 43b is a circle object that is a circular graphic displayed on the operation screen.
The object 43c is a text object, and the object 43d is a button object that can be operated by a user of the operation screen as a button on the GUI. The button object 43d can be given text to be displayed on the button.

The UI designer selects an object to be placed on the operation screen from among the objects 43a to 43d in the palette area 42. For example, the object is selected by clicking with a mouse, a touch pad, a touch panel, or the like.
The selected object is then placed at a desired position on the operation screen 41, thereby placing the object on the operation screen. For example, the object is placed at the dropped position by dragging it onto the operation screen 41 as indicated by the arrow 44 and dropping it at a desired position on the operation screen 41. Reference numerals 45a and 45b denote a button object and a text object that have already been placed on the operation screen.

Please refer to Fig. 1. The control unit 20 is a control circuit that executes the operation screen design method of the embodiment, and includes a processor such as a CPU (Central Processing Unit) or an MPU (Micro-Processing Unit), and a storage medium such as a semiconductor storage device, a magnetic storage device, or an optical storage device for storing a computer program and required data.
The control unit 20 functions as an operation reception unit 21, an object placement unit 22, an object adjustment unit 23, a text insertion unit 24, a text adjustment unit 25, a display control unit 26 and a notification unit 27 by the processor executing a computer program stored in a storage medium.

When a designer performs an input operation using the input unit 10, the operation acceptance unit 21 accepts the input operation from the input unit 10. For example, the operation acceptance unit 21 accepts an operation to place an object in the palette area 42 on the operation screen 41 as described above.
Also, for example, an operation to change the size (i.e., width and height) of an object arranged on the operation screen 41 may be accepted. In this case, the designer may change the size of the object by, for example, dragging and dropping the frame of the object.

Furthermore, for example, the operation accepting unit 21 may accept an operation of inputting text to be inserted into an object. When inputting text, the designer may input character information contained in the text from, for example, the input unit 10, which is a keyboard, a mouse, a touch pad, or a touch panel.
Furthermore, for example, the operation receiving unit 21 may receive an operation to insert an icon into an object.

When the operation receiving unit 21 receives an operation to place an object on the operation screen 41, the object placing unit 22 performs processing to place the object at the specified placement position. For example, the object placing unit 22 places the object at the position where the object is dropped by a drag-and-drop operation.
Furthermore, when the operation receiving unit 21 receives an operation to change the size of an object, the object placing unit 22 changes the size of the object in accordance with the operation.

The object adjustment unit 23 adjusts the position and size of the object. For example, a grid with a predetermined pixel interval (e.g., 8 pixel interval) may be set on the operation screen 41. When the object placement unit 22 places an object, the object adjustment unit 23 may adjust the position of the object so that the object is placed in accordance with the grid (i.e., so that it is snapped to the grid).

Note that "an object fits into the grid" means, for example, that the positions of the four corners of the object match the grid positions. For example, in the case of a rectangle object 43a or a button object 43d, the positions of the four corners of the rectangle or button may match the grid positions. Also, in the case of a circle object 43b or a text object 43c, the positions of the four corners of the rectangle circumscribing the circle or text may match the grid positions.

Furthermore, the object adjustment unit 23 adjusts the position of the object arranged on the operation screen so that the object satisfies predetermined constraints on the design of the operation screen.
The constraints on the design of the operation screen may be, for example, the following conditions (1) to (6).
(1) The minimum space between the edge of the operation screen and an object. (2) The minimum space between adjacent objects. (3) The minimum size of an object. (4) The minimum font size of text. (5) The minimum character spacing of text. (6) The minimum and maximum space between the boundary of an object (i.e., the edge of the object) and any text or icons inserted within the object. These values may be specified, for example, as the number of pixels, or as the actual display size on the operation screen.

Among these constraints, conditions (4) to (6) are conditions related to text, and the suitable conditions differ depending on the language used in the region (destination) where the operation screen is used. For example, these constraints (4) to (6) may be set based on the following viewpoints depending on the language used.
(A) Whether multiple lines of text should be right-justified or left-justified. (B) Whether there are characters whose vertical centers differ (for example, "g")
(C) Is the character width constant (e.g., does it vary like "I" and "M")?
(D) Multi-line thinking (hyphens, segmentation)
When setting constraint conditions based on these viewpoints, for example, a priority order may be set for destinations, and constraint conditions (4) to (6) may be set based on the above viewpoints (A) to (D) so that the constraint conditions are satisfied in order of priority for destinations.

These constraints are set in advance on the operation screen and stored in the storage unit 30 as setting data 31 .
Furthermore, setting information for the operation screen may be set as the setting data 31. For example, the number of pixels in the width and height directions of the operation screen and the screen density [dpi] may be set as the setting information for the operation screen. Furthermore, the default size of the objects 43a to 43d, the default font size of the text, and the default size of the icons may be set as the setting data 31.

In addition, when the operation screen to be designed is an operation screen for an in-vehicle device, the setting data 31 may specify whether or not the position of an object to be placed on the operation screen needs to be reversed left and right depending on whether the vehicle is a right-hand drive vehicle or a left-hand drive vehicle.
Also, depending on the language of the text, the setting data 31 may be set to indicate whether multiple lines of text are to be displayed right-justified or left-justified.

When the size of an object is changed by the object placement unit 22, the object adjustment unit 23 may adjust the size of the object so that it becomes an integer multiple of a predetermined number of pixels (e.g., 8 pixels), or may adjust the size of the object so as to satisfy the above constraints.
Furthermore, when text is inserted into an object, the size of the object may be adjusted so that the inserted text and the object satisfy the above constraints.
Information on the placement position, size, and display color of an object placed on the operation screen 41 is stored in the storage unit 30 as object data 32 .

When the operation receiving unit 21 receives an operation for inputting text to be inserted into an object, the text inserting unit 24 inserts the text into the object. In the example of Fig. 2, the text is inserted into a button object 45a and a text object 45b arranged on the operation screen.
Furthermore, the text insertion unit 24 inserts an icon into the object when the operation reception unit 21 receives an operation for inputting an icon to be inserted into the object.
Information on the text and icon to be inserted is stored in the storage unit 30 as text icon data 33 .

A plurality of pieces of text may be set as text to be inserted into the same object, and one of these pieces of text may be selected and inserted into the object. For example, synonymous text in different languages may be set depending on the destination of the product that displays the operation screen of the design target. Also, for example, if the text displayed within an object changes depending on the operation state of the object, different text may be set to be displayed depending on the operation state. In the following description, an example of setting synonymous text in different languages depending on the destination will be described.
Furthermore, a plurality of different icons to be inserted into the same object may be set in the text icon data 33. For example, in the case where an icon displayed within an object changes depending on the operation state of the object, different icons to be displayed depending on the operation state may be set.

When text is inserted into an object, the text adjustment unit 25 may adjust the font size of the text so that the inserted text and the object satisfy the above constraints.
The display control unit 26 performs processing for displaying, on the display unit 11, objects arranged on the operation screen 41, text inserted into the objects, and icons.
The processing by the operation reception unit 21, object placement unit 22, object adjustment unit 23, text insertion unit 24, text adjustment unit 25, display control unit 26 and notification unit 27 will be described in further detail below.

The notification unit 27 outputs an alarm or a message to be presented to the designer from the operation screen design device 1. For example, the notification unit 27 may display a visual alarm or a message on the display unit 11, or may output an audible alarm or a message from the output unit 12.
The output unit 12 is an interface device that outputs various information from the control unit 20. The output unit 12 may include, for example, a DVD (Digital Versatile Disc) drive, a USB (Universal Serial Bus) interface, a network interface, etc. The output unit 12 may output the object data 32 and the text icon data 33 stored in the storage unit 30 to the outside as setting data for the operation screen. The output unit 12 may include a speaker or a buzzer for outputting an auditory alarm or message from the control unit 20.

(Processing by Control Unit 20)
Next, the processes performed by the operation reception unit 21, object placement unit 22, object adjustment unit 23, text insertion unit 24, text adjustment unit 25, display control unit 26 and notification unit 27 of the control unit 20 will be described in detail.
FIG. 3 is a flowchart of an example of processing by the control unit 20. As shown in FIG.
In step S1, the operation screen to be designed is initially set. In this initial setting, the setting information of the operation screen, the design constraint conditions, the default size of objects, the default font size of text, and the default size of icons are set and stored in the storage unit 30 as setting data 31. Furthermore, when the operation screen to be designed is an operation screen of an in-vehicle device, it may be set whether or not the object is to have its position reversed left and right depending on whether the vehicle is a right-hand drive vehicle or a left-hand drive vehicle.

In step S2, the object placement unit 22 and the object adjustment unit 23 perform an object placement process. A flowchart of an example of the object placement process is shown in FIG.
In step S10, when the designer selects and drags a desired object from among the objects 43a to 43d in the palette area 42, the object placement unit 22 recommends placement position candidates that are candidates for the placement position of the object.
For example, the object placement unit 22 determines one or more placement position candidates where the selected object satisfies the above constraints (1) and (2) and where the object is placed in accordance with the grid. The size of the object immediately after it is selected from the palette area 42 is set to a preset default value. The display control unit 26 displays the determined placement position candidates on the display unit 11.

In step S11, the object placement unit 22 determines whether or not the position where the designer dropped the object on the operation screen 41 is a placement position candidate. If the dropped position is a placement position candidate (step S11: Y), the process proceeds to step S12. In this case, in step S12, the object is placed at the dropped position on the operation screen 41, and the object placement process ends.
On the other hand, if the dropped position is not one of the arrangement position candidates (step S11: N), the process proceeds to step S13.

In step S13, the object adjustment unit 23 determines whether the dropped object fits the grid. If the object fits the grid (step S13: Y), the process proceeds to step S15. If the object does not fit the grid (step S13: N), the process proceeds to step S14.
In step S14, the object adjustment unit 23 adjusts the arrangement position of the object so that the object is aligned with the nearest grid. Then, the process proceeds to step S15. Note that if no grid is set, steps S13 and S14 may be omitted.

In step S15, the object adjustment unit 23 determines whether the object satisfies the above constraints (1) and (2). If the object satisfies the above constraints (1) and (2) (step S15: Y), the process proceeds to step S12. In this case, the object is placed at the dropped position (if "Y" in step S13). Alternatively, the object is placed at the position adjusted in step S14 (if "N" in step S13). The object placement process then ends.

If the object does not satisfy the constraints (1) and (2) (step S15: N), the process proceeds to step S16. In step S16, the object adjustment unit 23 adjusts the position of the object to the closest position where the object satisfies the constraints (1) and (2) and is aligned with the grid.
Then, the process proceeds to step S12. In step S12, the object is placed at the position adjusted in step S16. Then, the object placement process ends.
When the position of an object is adjusted to satisfy the constraints (1) and (2), the notification unit 27 may output an alarm or a message to prompt the designer to manually readjust the adjusted position of the object, because the automatically adjusted position of an object does not necessarily match the designer's intention.

The process of the object adjustment unit 23 in steps S15 and S16 will be described below with reference to FIGS. 5(a) and 5(b).
5A shows a state in which a button object 45a is dropped on a text object 45b that has already been placed on the operation screen 41. When the button object 45a is dropped, the object adjustment unit 23 determines whether or not a distance Sp1 between the button object 45a and the operation screen 41 is equal to or greater than the minimum value of the constraint (1). Also, the object adjustment unit 23 determines whether or not a distance Sp2 between the button object 45a and the text object 45b is equal to or greater than the minimum value of the constraint (2).

If the intervals Sp1 and Sp2 are equal to or greater than the minimum values of the constraints (1) and (2), it is determined that the object satisfies the constraints (1) and (2). In this case, the object adjustment unit 23 does not adjust the position of the button object 45a.
If the intervals Sp1 and Sp2 are less than the minimum values of the constraints (1) and (2), the object adjustment unit 23 adjusts the positions of the objects as shown in FIG. 5(b).
For example, the object adjustment unit 23 adjusts the position of the button object 45a so that the distance Sp3 between the button object 45a and the operation screen 41 and the distance Sp4 between the button object 45a and the text object 45b are greater than or equal to the minimum values of the constraints (1) and (2) and the object fits into the grid.

Instead of adjusting the position of the object in step S16, the notification unit 27 may output an alarm or a message notifying the designer that the object does not satisfy the constraint conditions (1) and (2). For example, the designer may be prompted to adjust the placement position by highlighting the object that does not satisfy the constraint conditions (1) and (2). For example, the object may be highlighted by changing the display mode of the object, such as the color or line thickness.
Also, for example, the notification unit 27 may output an alarm or message notifying that an object does not satisfy the constraint conditions (1) and (2), and the object adjustment unit 23 may delete the object that does not satisfy the constraint conditions (1) and (2).

Please refer to Fig. 6. When the design object is an operation screen 41 for an in-vehicle device, the position of the object may be reversed depending on whether the vehicle is a right-hand drive vehicle or a left-hand drive vehicle.
For example, in the case of a right-hand drive vehicle, the button object is placed at the position indicated by reference symbol 46b so that the button object can be easily operated on the operation screen 41 located on the left side of the steering wheel, and in the case of a left-hand drive vehicle, the button object is placed at the position indicated by reference symbol 45a so that the button object can be easily operated on the operation screen 41 located on the right side of the steering wheel.

When arranging such an object on the operation screen 41, the position of the object is reversed left and right depending on whether the object is a right-hand drive vehicle or a left-hand drive vehicle, and a symmetrical center point 46a for the left and right reversal is set as the setting data 31. Note that the symmetrical center point 46a does not necessarily have to be located at the center of the operation screen 41 left and right.
If the position of the object is inverted depending on whether it is a right-hand drive vehicle or a left-hand drive vehicle, constraints (1) and (2) may be satisfied if the vehicle is either a right-hand drive vehicle or a left-hand drive vehicle, but not if the vehicle is the other.

6, an object 46c is placed, whose position does not change whether the vehicle is a right-hand drive vehicle or a left-hand drive vehicle. Therefore, when an object is placed at the position indicated by reference symbol 45a, the constraints (1) and (2) are satisfied, but when the object is placed at the position indicated by reference symbol 46b, the distance Sp5 between the object 46c and the object 46c may not satisfy the constraint (2).
For this reason, when arranging an object whose position is reversed left and right depending on whether the vehicle is a right-hand drive vehicle or a left-hand drive vehicle, the object adjustment unit 23 may determine in steps S15 and S16 whether or not the constraint conditions (1) and (2) are satisfied in both positions reversed left and right with respect to the symmetric center point 46a, and adjust the position of the object so that the constraint conditions (1) and (2) are satisfied even after the left and right reversal. Alternatively, the notification unit 27 may output an alarm or a message if the constraint conditions (1) and (2) are not satisfied.

Please refer to Fig. 3. In step S3, the object placement unit 22 and the object adjustment unit 23 perform an object size setting process. A flowchart of an example of the object size setting process is shown in Fig. 7.
As described above, immediately after an object is placed on operation screen 41, the size of the object is set to the default value set in setting data 31. The designer can change the size of the placed object by dragging the frame of the object.

When resizing of the object is started in step S20, the object arrangement unit 22 recommends size candidates that are candidates for the size of the object. For example, the object arrangement unit 22 determines a size candidate such that the object after resizing satisfies the above constraints (1) and (2) and is an integer multiple of a predetermined number of pixels (e.g., 8 pixels). The display control unit 26 displays a frame indicating the determined size candidate on the display unit 11.

In step S21, the object placement unit 22 determines whether the position where the designer dropped the object frame is a recommended position (i.e., whether the size specified by the designer is equal to the size candidate). If the dropped position is a recommended position (step S21: Y), the process proceeds to step S22. In this case, in step S22, the size of the object is set to the size specified by the designer, and the object size setting process ends.
If the dropped position is not the recommended position (step S21: N), the process proceeds to step S23.

In step S23, the object adjustment unit 23 determines whether the size of the specified object is an integer multiple of a predetermined number of pixels (e.g., 8 pixels) (i.e., whether the position of the dropped frame matches the grid). The object adjustment unit 23 also determines whether the size of the specified object is equal to or larger than the minimum value of the above constraint (3).
If the size of the object is an integer multiple of the predetermined number of pixels and is equal to or greater than the minimum value of constraint (3) (step S23: Y), the process proceeds to step S25. If the size of the object is not an integer multiple of the predetermined number of pixels or is less than the minimum value of constraint (3) (step S23: N), the process proceeds to step S24.

In step S24, the object adjustment unit 23 adjusts the size of the object so that it becomes an integer multiple of a predetermined number of pixels and is equal to or greater than the minimum value of the constraint (3).The process then proceeds to step S25.
In step S25, the object adjustment unit 23 judges whether the object satisfies the above constraints (1) and (2). If the object satisfies the above constraints (1) and (2) (step S25: Y), the process proceeds to step S22. In this case, the size of the object is set to the size specified by the designer (if "Y" in step S23). Or, the size is set to the size adjusted in step S24 (if "N" in step S23). Then, the object size setting process ends.

If the object does not satisfy the constraints (1) and (2) (step S25: N), the process proceeds to step S26. In step S26, the object adjustment unit 23 adjusts the size of the object so that the object satisfies the constraints (1) and (2) and is an integer multiple of a predetermined number of pixels.
Then, the process proceeds to step S22. In step S22, the object is adjusted to the size adjusted in step S26. Then, the object size setting process ends.

When the size of an object is adjusted to satisfy the constraints (1) and (2), the notification unit 27 may output an alarm or a message to prompt the designer to manually readjust the adjusted size of the object, because the automatically adjusted size of an object does not necessarily match the designer's intention.
Also, instead of adjusting the size of the object in step S26, the notification unit 27 may output an alarm or a message notifying the designer that the object does not satisfy the constraints (1) and (2). For example, the designer may be prompted to adjust the placement position by highlighting the object that does not satisfy the constraints (1) and (2). For example, the object may be highlighted by changing the display mode of the object, such as the color or line thickness.
Also, for example, the notification unit 27 may output an alarm or message notifying that an object does not satisfy the constraint conditions (1) and (2), and the object adjustment unit 23 may delete the object that does not satisfy the constraint conditions (1) and (2).

See Fig. 3. When the operation reception unit 21 receives an operation to insert text or an icon into an object in step S4, the text insertion unit 24 inserts the text or icon into the object.
Fig. 8 is a diagram showing an example of text and icons inserted into objects on the operation screen 41. In the example of Fig. 8, button objects 45a and 45g, text objects 45b and 45c, and circular objects 45d to 45f are arranged on the operation screen 41.

Then, the texts "Back" and "Play List" are inserted into the button objects 45a and 45g.
Furthermore, "Audio" is input as the text of text object 45b, and the value of the variable (Track Name) is input as the text of text object 45c.
Icons 47d to 47f indicating a fast-rewind operation, a play operation, and a fast-forward operation are arranged on the circular objects 45d to 45f, respectively.

When the operation receiving unit 21 receives an operation to insert text or an icon into an object, the text inserting unit 24 generates text icon data 33 indicating the text or icon inserted into the object and the object into which the text or icon has been inserted.
For example, the text icon data 33 may include link information shown in Fig. 9(a), icon information shown in Fig. 9(b), and text information shown in Fig. 9(c). In addition to the link information, icon information, and text information, the text icon data 33 has information on the position and size of the inserted icon, and the position and font size of the inserted text. Immediately after generating the text icon data 33, the font size of the text and the size of the icon are set to the default values set in the setting data 31.

The link information is information that associates text or an icon inserted into an object with the object that the text or icon is inserted into. For example, the link information may be a table that associates the object ID of an object with the text ID of the text or the icon ID of the icon.
In the example of FIG. 9(a), the object IDs of objects 45a to 45g are "ID_B0001" to "ID_B0007", respectively, the text IDs of the texts "Play List", "Audio", and "Back" are "ID_T0001", "ID_T0029", and "ID_T0034", respectively, and the icon IDs of icons 47d to 47f are "ID_I0026", "ID_I0027", and "ID_I0029", respectively.
"ID_B0001" is associated with "ID_T0034", "ID_B0002" is associated with "ID_T0029", "ID_B0004" is associated with "ID_I0026", "ID_B0005" is associated with "ID_I0027", "ID_B0006" is associated with "ID_I0029", and "ID_B0007" is associated with "ID_T0001".

As described above, a plurality of different pieces of text may be set as text to be inserted into the same object, and therefore the text information may include a plurality of different pieces of text to be inserted into the same object.
In the example of Fig. 9(c), synonymous texts in different languages (e.g., English and Japanese) are set. The Japanese texts "Play List", "Music", and "Back" are synonymous with the English texts "Play List", "Audio", and "Back", and the same ID "ID_T0001" is assigned to "Play List" and "Play List". Similarly, the same ID "ID_T0029" is assigned to "Music" and "Audio", and the same ID "ID_T0034" is assigned to "Back" and "Back".

Multiple different icons may be set as icons to be inserted into the same object. Therefore, the icon information may include multiple different icons to be inserted into the same object. In the example of the icon information in FIG. 9(b), a white icon indicating the default state in which the circular objects 45d to 45f are not being operated, and a black icon indicating when the circular objects are pressed are set.

Please refer to Fig. 3. In step S5, the object adjustment unit 23 adjusts the size of the object into which the text has been inserted, in accordance with the inserted text.
Specifically, the object adjustment unit 23 determines the size of the object so that the object and text satisfy the above constraint (6) and are an integer multiple of a predetermined number of pixels (for example, 8 pixels).
Adjustment of the size of an object according to text will be described with reference to FIGS. 10(a) and 10(b).

For example, the object adjustment unit 23 determines whether the margin Ma1 between the boundary of the button object 45a into which the text "Back" has been inserted and the text "Back" is greater than or equal to the minimum value and less than or equal to the maximum value of the constraint (6). If the margin Ma1 is greater than or equal to the minimum value and less than or equal to the maximum value of the constraint (6), it is determined that the button object 45a and the text "Back" satisfy the constraint (6). In this case, the object adjustment unit 23 does not adjust the size of the object 45a.

On the other hand, if the margin Ma1 is less than the minimum value of constraint (6), then as shown in FIG. 10(b), the margin Ma2 between the boundary of the button object 45a and the text "Back" becomes equal to or greater than the minimum value of constraint (6), and the object is enlarged so that its size becomes an integer multiple of a specified number of pixels (e.g., 8 pixels).
However, if the constraints (1) and (2) are no longer satisfied by enlarging the object, the object adjustment unit 23 corrects the placement position of the object so as to satisfy the constraints (1) and (2). If the placement position of the object cannot be corrected so as to satisfy the constraints (1) and (2), the object adjustment unit 23 does not need to adjust the size of the object.

Similarly, if the margin Ma1 is greater than the maximum value of constraint (6), the margin between the boundary of the button object 45a and the text "Back" is equal to or less than the maximum value of constraint (6), and the object is reduced so that its size is an integer multiple of a specified number of pixels (e.g., 8 pixels).
However, if reducing the size of an object would result in the constraint condition (3) not being satisfied, the size of the object is not adjusted.

When synonymous texts in a plurality of different languages are set as texts to be inserted into the same object and one of these texts is selected according to the destination and inserted into the object, an object adjustment section 23 adjusts the size of the object so that the above-mentioned constraint condition (6) is satisfied regardless of which of these texts is inserted.
That is, when the language of the text to be inserted into the object is changed, the object adjustment unit 23 may adjust the size of the object so that the changed text and object satisfy the above constraint (6).

An example of such an adjustment of the size of an object in response to a change in the language of the text will be described below.
First, the object adjustment unit 23 determines whether or not the margin Ma3 between the boundary of the button object 45g and the English text “Play List” satisfies the constraint condition (6) when the English text “Play List” is inserted as shown in FIG. 11(a).

Similarly, when the text to be inserted into button object 45g is the Japanese text “playlist” as shown in FIG. 11(b), it is determined whether the margin between the boundary of button object 45g and the Japanese text “playlist” satisfies constraint condition (6).
Here, it is assumed that the margin Ma3 in the case of the English text "Play List" satisfies the constraint (6), but the margin in the case of the Japanese text "Play List" does not satisfy the constraint (6).
In this case, the object adjustment unit 23 enlarges the margin Ma4 between the boundary of the button object 45g and the Japanese text “playlist”, as shown in FIG. 11 (c), so that it satisfies constraint condition (6) and the size of the button object 45g becomes an integer multiple of a predetermined number of pixels (e.g., 8 pixels).

When the size of the object is adjusted in step S5, the notification unit 27 may output an alarm or a message to prompt the designer to manually readjust the adjusted size of the object, because the automatically adjusted size of the object does not necessarily match the designer's intention.
Also, instead of adjusting the size of the object in step S5, the notification unit 27 may output an alarm or a message notifying the designer that the object and text do not satisfy the constraint condition (6). For example, the designer may be prompted to adjust the layout position by highlighting the object or text that does not satisfy the constraint condition (6). For example, the highlighting may be performed by changing the display mode of the object or text, such as the color or line thickness.
For example, the notification unit 27 may output an alarm or message notifying that the object and text do not satisfy the constraint condition (6), and the object adjustment unit 23 may delete the object that does not satisfy the constraint condition (6).

See Fig. 3. If the constraint (6) between the object and the text or icon cannot be satisfied by adjusting the size of the object, then in step S6, the text adjuster 25 adjusts the text inserted in the object.
For example, the text adjuster 25 may reduce or increase the font size of the text so as to satisfy the constraints (4) and (6).
Also, for example, the text adjuster 25 may reduce or increase the number of characters of the text so as to satisfy the constraint (6) by changing the text to a synonym.
These adjustments may be prioritized. For example, the text adjuster 25 may first try changing the font size, and change the text to a synonym if changing the font size does not satisfy constraint (6).

When synonymous texts in a plurality of different languages are set as texts to be inserted into the same object, and one of these texts is selected according to the destination and inserted into the object, a text adjustment section 25 adjusts the text so that the above-mentioned constraint condition (6) is satisfied regardless of which of these texts is inserted.
That is, when the language of the text to be inserted into an object is changed, the text adjustment unit 25 may adjust the text so that the changed text and object satisfy the above constraint (6).

When the text is adjusted in step S6, the notification unit 27 may output an alarm or a message to prompt the designer to manually readjust the adjusted text, because the automatically adjusted text does not necessarily conform to the designer's intention.
Also, instead of adjusting the text in step S6, the notification unit 27 may output an alarm or a message notifying the designer that the object and text do not satisfy the constraint condition (6). For example, the designer may be prompted to adjust the layout position by highlighting the object or text that does not satisfy the constraint condition (6). For example, the object or text may be highlighted by changing the display mode such as the color or line thickness of the object or text.

Also, for example, the notification unit 27 may output an alarm or message notifying that the object and text do not satisfy the constraint condition (6), and the text adjustment unit 25 may delete the text that does not satisfy the constraint condition (6).
When the text adjustment by the text adjuster 25 in step S6 is completed, the process then ends.

(Effects of the embodiment)
(1) The computer executes a process of accepting an operation to place a first object to be displayed on the operation screen on the operation screen, a process of correcting the position of the first object so that the distance between the first object and a second object placed on the operation screen before the first object, or between an edge of the operation screen and the first object, satisfies a first constraint condition, a process of accepting input of text to be displayed within the first object, and a process of adjusting the size of the first object in accordance with the text.
This makes it possible to reduce the amount of work required to place an object into which text is to be inserted on the operation screen when designing an operation screen for a UI.

(2) After adjusting the size of the first object, the computer may execute a process of correcting the position of the first object so as to satisfy the first constraint. At this time, the computer may execute a process of correcting the position of the first object only when the first constraint is not satisfied. This can reduce the labor required for correcting objects when inserting text.
(3) The computer may execute a process of highlighting the first object when the first constraint condition is not satisfied, thereby making it easier for the designer to notice the object that does not satisfy the constraint condition.

(4) The computer may adjust the size of the first object so that the font size of the text and the margin between the boundary of the first object and the text satisfy the second constraint, thereby reducing the effort required to modify the object when inserting text.
(5) The computer may execute a process of adjusting the font size of the text so as to satisfy the second constraint. At this time, the computer may adjust the font size of the text only when the second constraint is not satisfied. This can reduce the labor required for correcting the text.

(6) The computer may execute a process of highlighting the text or the first object when the second constraint is not satisfied, thereby making it easier for the designer to notice the text that does not satisfy the constraint.
(7) When the language of the text is changed, the computer may adjust the size of the first object or the font size of the text so that the font size of the changed text and the margin between the boundary of the first object and the changed text satisfy the second constraint. Or, the computer may change the text to a synonym to reduce or increase the number of characters.
This will reduce the effort required to modify the operation screen to make it compatible with multiple languages.

(8) When the size of the first object is adjusted, the computer may execute a process of displaying a notification that prompts the user to manually readjust the size of the first object, which makes it easier for the designer to readjust the size of the first object when the designer is not satisfied with the result of automatic adjustment by the computer.
(9) The computer may execute a process for determining whether the first constraint condition is satisfied when the position of the first object is flipped left and right with respect to a reference point set on the operation screen. This makes it possible to reduce the effort required for correction depending on whether the vehicle is a right-hand drive vehicle or a left-hand drive vehicle when the design target is an operation screen of an in-vehicle device.

1...Operation screen design device, 10...Input unit, 11...Display unit, 12...Output unit, 20...Control unit, 21...Operation reception unit, 22...Object placement unit, 23...Object adjustment unit, 24...Text insertion unit, 25...Text adjustment unit, 26...Display control unit, 27...Notification unit, 30...Storage unit, 31...Setting data, 32...Object data, 33...Text icon data

Claims (13)

A process of accepting an operation of arranging a first object to be displayed on an operation screen on the operation screen;
a process of correcting a placement position of the first object so that a space between the first object and a second object placed on the operation screen before the first object, or between an edge of the operation screen and the first object, satisfies a first constraint condition;
accepting input of text to be displayed within the first object;
adjusting a size of the first object in response to the text;
on the computer ,
An operation screen design method, characterized in that the computer adjusts the size of the first object so that the font size of the text and the margin between the boundary of the first object and the text satisfy a second constraint . The operation screen design method according to claim 1, further comprising the step of causing the computer to execute a process of correcting the position of the first object so as to satisfy the first constraint condition after the process of adjusting the size of the first object. The operation screen design method according to claim 1 or 2, characterized in that the computer is caused to execute a process of correcting the placement position of the first object only when the first constraint condition is not satisfied. The operation screen design method according to any one of claims 1 to 3, characterized in that the computer is caused to execute a process of highlighting the first object if the first constraint condition is not satisfied. 5. The operation screen design method according to claim 1, further comprising the step of: making the computer execute a process of adjusting a font size of the text so as to satisfy the second constraint condition. 6. The operation screen design method according to claim 1 , further comprising the step of: making the computer execute a process of adjusting a font size of the text only when the second constraint is not satisfied. 7. The operation screen design method according to claim 5, further comprising the step of causing the computer to execute a process of highlighting the text or the first object when the second constraint condition is not satisfied. The operation screen design method according to any one of claims 5 to 7, characterized in that, when the language of the text is changed, the size of the first object or the font size of the text is adjusted so that the font size of the changed text and the margin between the boundary of the first object and the changed text satisfy the second constraint condition. The operation screen design method according to any one of claims 5 to 7, characterized in that, when the language of the text is changed, the text is changed to a synonym and the number of characters is reduced or increased so that the font size of the changed text and the margin between the boundary of the first object and the changed text satisfy the second constraint condition. The operation screen design method according to any one of claims 1 to 9, characterized in that, when the size of the first object is adjusted, the computer is caused to execute a process of displaying a notification prompting a user to manually readjust the size of the first object. The operation screen design method according to any one of claims 1 to 10, characterized in that the computer is caused to execute a process of determining whether or not the first constraint condition is satisfied when the position of the first object is flipped left and right with respect to a reference point set on the operation screen. A process of accepting an operation of arranging a first object to be displayed on an operation screen on the operation screen;
a process of correcting a placement position of the first object so that a space between the first object and a second object placed on the operation screen before the first object, or between an edge of the operation screen and the first object, satisfies a first constraint condition;
accepting input of text to be displayed within the first object;
adjusting a size of the first object in response to the text;
a computer that executes
The operation screen design device is characterized in that the computer adjusts the size of the first object so that the font size of the text and the margin between the boundary of the first object and the text satisfy a second constraint . A process of accepting an operation of arranging a first object to be displayed on an operation screen on the operation screen;
a process of correcting a placement position of the first object so that a space between the first object and a second object placed on the operation screen before the first object, or a space between an edge of the operation screen and the first object satisfies a first constraint condition;
accepting input of text to be displayed within the first object;
adjusting a size of the first object in response to the text;
on the computer,
An operation screen design program that causes the computer to adjust the size of the first object so that the font size of the text and the margin between the boundary of the first object and the text satisfy a second constraint .

Images